@extends('layouts/contentLayoutMaster')

@section('title', 'Test Supplier Incentives List')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/buttons.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/custom.css') }}">

@endsection


@section('content')
    <style>
        #supplier_incentives_filter {
            display: none;
        }

        .ui-state-hover,
        .ui-widget-content .ui-state-hover,
        .ui-widget-header .ui-state-hover,
        .ui-state-focus,
        .ui-widget-content .ui-state-focus,
        .ui-widget-header .ui-state-focus,
        .ui-button:hover,
        .ui-button:focus {
            max-height: 26px !important;
        }

        .ui-state-default:hover {
            max-height: 26px !important;
        }

        .ui-state-default {
            max-height: 26px !important;
        }

        .ui-slider-range {
            max-height: 18px !important;
        }

        #slider-range {
            max-height: 18px !important;
        }
    </style>
    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom">
                        <h4 class="card-title">Test Base Supplier Incentives</h4>
                        @can('Create Test Based Supplier Incentives')
                            <a class="add-new-btn btn btn-primary mt-2 mr_30px" href="#" data-bs-toggle="modal"
                                data-bs-target="#addModal">Add</a>
                        @endcan
                    </div>
                    @if ($message = Session::get('success'))
                        <div class="demo-spacing-0 m-2">
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <div class="alert-body">{{ $message }}</div>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                    @endif
                    <div class="row mt-2">
                        <div class="col-3">
                            <label class="form-label">Region</label>
                            <div style="position: relative">
                                <select name="region" id="search_by_region" class="form-control select2">
                                    <option value="" selected disabled>Region</option>
                                    @foreach ($combined_results as $data)
                                        <option {{ old('region_id') == $data['id'] ? 'selected' : '' }}
                                            value="{{ $data['id'] }}">
                                            {{ ucfirst($data['name']) }}
                                        </option>
                                    @endforeach
                                </select>
                                <i data-feather="x-circle" class="cursor-pointer dropown-reset-icon d-none"
                                    onclick="reset_dropdown('search_by_region')"></i>
                            </div>
                        </div>
                        <div class="col-3">
                            <label class="form-label">Source</label>
                            <div style="position: relative">
                                <select name="source_id" id="search_by_source_id" class="form-control select2">
                                    <option value="" selected disabled>Source</option>
                                    @foreach ($sources as $data)
                                        <option value="{{ $data->id }}">{{ ucfirst($data->name) }}</option>
                                    @endforeach
                                </select>
                                <i data-feather="x-circle" class="cursor-pointer dropown-reset-icon d-none"
                                    onclick="reset_dropdown('search_by_source_id')"></i>
                            </div>
                        </div>
                        <div class="col-3">
                            <label class="form-label">Supplier</label>
                            <div style="position: relative">
                                <select name="supplier" id="search_by_supplier" class="form-control select2">
                                    <option value="" selected disabled>Supplier</option>
                                    @foreach ($suppliers as $data)
                                        <option value="{{ $data->id }}">{{ ucfirst($data->name) }}</option>
                                    @endforeach
                                </select>
                                <i data-feather="x-circle" class="cursor-pointer dropown-reset-icon d-none"
                                    onclick="reset_dropdown('search_by_supplier')"></i>
                            </div>
                        </div>
                        <div class="col-3">
                            <label class="form-label">Incentive Type</label>
                            <div style="position: relative">
                                <select name="incentive_type" class="incentive_type form-control select2"
                                    id="search_by_inc">
                                    <option value="" selected disabled>Incentive Type</option>
                                    @foreach ($incentiveTypes as $incentiveType)
                                        <option value="{{ $incentiveType->id }}">{{ $incentiveType->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <i data-feather="x-circle" class="cursor-pointer dropown-reset-icon d-none"
                                    onclick="reset_dropdown('search_by_inc')"></i>

                            </div>
                        </div>
                        <div class="card-datatable table-responsive">
                            <table class="table" id="supplier_incentives">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Region</th>
                                        <th>Source</th>
                                        <th>Incentive Type</th>
                                        <th>Supplier</th>
                                        <th>Collection Point</th>
                                        <th>Result</th>
                                        <th>From</th>
                                        <th>To</th>
                                        <th>Is Valid</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
    </section>
    <div class="modal fade" id="addModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-sm-5 pb-5">
                    <div class="text-center mb-2">
                        <h1 class="mb-1"><span class="form_title">Add</span> Test Based Incentive</h1>
                    </div>
                    <form method="POST" class="row" id="form">
                        <input type="hidden" name="test_id" id="test_id">
                        @csrf
                        <div class="col-12">
                            <label class="form-label" for="supplier">Region</label>
                            <select name="region_id" id="region_id" class="select2 form-select" required>
                                <option value="" selected disabled>Select Region</option>
                                @foreach ($combined_results as $data)
                                    <option {{ old('region_id') == $data['id'] ? 'selected' : '' }}
                                        value="{{ $data['id'] }}">
                                        {{ ucfirst($data['name']) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="source">Source</label>
                            <select name="source_id" id="source_id" class="select2 form-select" required>
                                <option value="" selected disabled>Select Source</option>
                                @foreach ($sources as $source)
                                    <option {{ old('source_id') == $source['id'] ? 'selected' : '' }}
                                        value="{{ $source['id'] }}">
                                        {{ ucfirst($source['name']) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="incentive_type">Incentive Type</label>
                            <select name="incentive_type" id="incentive_type" class="select2 form-select" required>
                                <option value="" selected disabled>Select Incentive Type</option>
                                @foreach ($incentiveTypes as $incentiveType)
                                    <option {{ old('incentive_type') == $incentiveType->id ? 'selected' : '' }}
                                        value="{{ $incentiveType->id }}">{{ ucfirst($incentiveType->name) }}</option>
                                @endforeach
                            </select>
                            <span class="text-danger"></span>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="supplier">Supplier</label>
                            <select name="supplier" id="supplier" class="form-select select2" required>
                                <option value="" selected disabled>Select Supplier</option>
                            </select>
                        </div>

                        <div class="col-12">
                            <label class="form-label" for="value">Result <small
                                    class="rang text-danger"></small></label>
                            <input required type="text" id="result" value="{{ old('result') }}"
                                class="form-control" name="result" placeholder="Result">
                            <span class="text-danger"></span>
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="modalPermissionName">From</label>
                            <input id="from" type="date" value="" class="form-control" name="from"
                                placeholder="From" required>
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="To">To</label>
                            <input id="to" type="date" value="" class="form-control" name="to"
                                placeholder="To" required>
                        </div>
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary mt-2 me-1">Save</button>
                            <button type="reset" class="btn btn-outline-secondary mt-2" data-bs-dismiss="modal"
                                aria-label="Close">
                                Close
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-sm-5 pb-5">
                    <div class="text-center mb-2">
                        <h1 class="mb-1">Update Test Based Incentive</h1>
                    </div>
                    <form method="POST" class="row" id="updateForm">
                        <input type="hidden" name="id" id="id">
                        @csrf
                        <div class="col-12">
                            <label class="form-label" for="supplier">Region</label>
                            <select name="region_id" id="region_ids" class="select2 form-select" required>
                                <option value="" selected disabled>Select Region</option>
                                @foreach ($combined_results as $data)
                                    <option {{ old('region_id') == $data['id'] ? 'selected' : '' }}
                                        value="{{ $data['id'] }}">
                                        {{ ucfirst($data['name']) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="source">Source</label>
                            <select name="source_id" id="source_ids" class="select2 form-select" required>
                                <option value="" selected disabled>Select Source</option>
                                @foreach ($sources as $source)
                                    <option {{ old('source_id') == $source['id'] ? 'selected' : '' }}
                                        value="{{ $source['id'] }}">
                                        {{ ucfirst($source['name']) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="incentive_type">Incentive Type</label>
                            <select name="incentive_type" id="incentive_types" class="select2 form-select" required>
                                <option value="" selected disabled>Select Incentive Type</option>
                                @foreach ($incentiveTypes as $incentiveType)
                                    <option {{ old('incentive_type') == $incentiveType->id ? 'selected' : '' }}
                                        value="{{ $incentiveType->id }}">{{ ucfirst($incentiveType->name) }}</option>
                                @endforeach
                            </select>
                            <span class="text-danger"></span>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="supplier">Suppliers</label>
                            <select name="supplier" id="supplierr" onchange="getincentiveTypee()"
                                class="select2 form-select" required>
                                <option value="" selected disabled>Select Supplier</option>
                                @foreach ($suppliers as $data)
                                    <option value="{{ $data->id }}">
                                        {{ ucfirst($data->name) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="valuee">Result <small
                                    class="rangg text-danger"></small></label>
                            <input required type="text" id="results" class="form-control" name="result"
                                placeholder="Result">
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="modalPermissionName">From</label>
                            <input id="fromm" type="date" value="" class="form-control" name="from"
                                placeholder="From" required>
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="too">To</label>
                            <input id="too" type="date" value="" class="form-control" name="to"
                                placeholder="To" required>
                        </div>
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary mt-2 me-1">Save</button>
                            <button type="reset" class="btn btn-outline-secondary mt-2" data-bs-dismiss="modal"
                                aria-label="Close">
                                Close
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('vendor-script')
    {{-- vendor files table data --}}
    <script src="{{ asset('vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

@endsection

@section('page-script')
    <script src="{{ asset('/js/custom.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2();
            $("#supplier").select2({
                dropdownParent: $('#addModal .modal-content')
            });
        });


        editData = "@php echo Auth::user()->can('Edit Test Based Supplier Incentives') @endphp";

        if (editData == '') {
            showActioncolumn = false;
        } else {
            showActioncolumn = true;
        }

        var table = $('#supplier_incentives').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            paging: true,

            {{-- ajax: "{{ route('incentives.index') }}", --}}
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    className: 'text-center'
                },
                {
                    data: 'region',
                    name: 'region',
                    className: 'text-left'
                },
                {
                    data: 'source',
                    name: 'source',
                    className: 'text-left'
                },
                {
                    data: 'type',
                    name: 'type',
                    className: 'text-left'
                },
                {
                    data: 'supplier',
                    name: 'supplier',
                    className: 'text-left'
                },
                {
                    data: 'collection_point',
                    name: 'collection_point',
                    className: 'text-left'
                },
                {
                    data: 'result',
                    name: 'result'
                },
                {
                    data: 'from',
                    name: 'from'
                },
                {
                    data: 'to',
                    name: 'to'
                },
                {
                    data: 'is_valid',
                    name: 'is_valid'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'action',
                    name: 'action'
                },
            ],
            columnDefs: [{
                // Actions
                targets: 10,
                orderable: false,
                sortable: false,
            }, {
                // Actions
                targets: 4,
                orderable: false,
                sortable: false,
            }, {
                // Actions
                targets: 10,
                title: 'Action',
                orderable: false,
                sortable: false,
                visible: showActioncolumn
            }],

            ajax: {
                url: "{{ route('incentives.test.based') }}",
                data: function(d) {
                    d.page = (d.start / d.length) + 1; // DataTables calculates the page number based on start
                    d.length = d.length; // Page length (number of rows per page)
                    d.incentive_type = $('.incentive_type').val();
                    d.supplier = $('#search_by_supplier').val();
                    d.region = $('#search_by_region').val();
                    d.source_id = $('#search_by_source_id').val();
                }
            },
            // order: [[1, 'asc']],
            // dom: '<"d-flex justify-content-between align-items-center header-actions text-nowrap mx-1 row mt-75"' +
            //     '<"col-sm-12 col-lg-4 d-flex justify-content-center justify-content-lg-start" >' +
            //     '<"col-sm-12 col-lg-8"<"dt-action-buttons d-flex align-items-center justify-content-lg-end justify-content-center flex-md-nowrap flex-wrap"<"me-1"f>>>' +
            //     '><"text-nowrap" t>' +
            //     '<"d-flex justify-content-between mx-2 row mb-1"' +
            //     '<"col-sm-12 col-md-6"i>' +
            //     '<"col-sm-12 col-md-6"p>' +
            //     '>',
            dom: '<"top"lf>rt<"bottom"ip><"clear">',
            dom: '<"d-flex justify-content-between align-items-center header-actions text-nowrap mx-1 row mt-75"' +
                    '<"col-sm-12 col-lg-4 d-flex justify-content-center justify-content-lg-start" l>' +
                    '<"col-sm-12 col-lg-8 dt-action-buttons d-flex flex-column align-items-end justify-content-end"' +
                        '<" me-1"B>' + // Buttons on top
                        '<"me-1"f>' + // Search bar below
                    '>' +
                '>' +
                '<"text-nowrap" t>' +
                '<"d-flex justify-content-between mx-2 row mb-1"' +
                    '<"col-sm-12 col-md-6"i>' +
                    '<"col-sm-12 col-md-6"p>' +
                '>',
            buttons: [
                {
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel excel-file"></i> Excel Export',
                    className: 'custom-excel-btn',
                    exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // use index 5 = status_text (not status)
                    // modifier: {
                    //   page: 'current' // only export current page
                    // }
                    }
                }
            ],
            language: {
                paginate: {
                    // remove previous & next text from pagination
                    previous: '&nbsp;',
                    next: '&nbsp;'
                }
            }
        });

        $("#search_by_supplier").change(function() {
            $(this).next('.dropown-reset-icon').removeClass('d-none');
            table.draw();
        });
        $("#search_by_region").change(function() {
            $(this).next('.dropown-reset-icon').removeClass('d-none');
            table.draw();
        });
        $("#search_by_source_id").change(function() {
            $(this).next('.dropown-reset-icon').removeClass('d-none');
            table.draw();
        });
        $(".incentive_type").change(function() {
            $(this).next('.dropown-reset-icon').removeClass('d-none');
            table.draw();
        });

        $(document).on('submit', '#form', function(e) {
            e.preventDefault();
            let data = $(this).serialize();
            $.ajax({
                url: "{{ route('incentives.save.test.base.supplier.incentive') }}",
                method: 'POST',
                data: data,
                success: function(response) {
                    if (response.success) {
                        // $('#form')[0].reset();
                        $('#supplier_incentives').DataTable().ajax.reload();
                        // $('#addModal').modal('toggle');
                        toastr.success(response.message);
                    } else {
                        // $('#addModal').modal('toggle');
                        toastr.error(response.message);
                        // Swal.fire(
                        //     'Oops!',
                        //     response.message,
                        //     'error'
                        // )
                    }
                }
            });
        })
        $(document).on('submit', '#updateForm', function(e) {
            e.preventDefault();
            let data = $(this).serialize();
            $.ajax({
                url: "{{ route('incentives.update.test.base.supplier.incentive') }}",
                method: 'POST',
                data: data,
                success: function(response) {
                    if (response.success) {
                        $('#updateForm')[0].reset();
                        $('#supplier_incentives').DataTable().ajax.reload();
                        $('#editModal').modal('toggle');
                        Swal.fire(
                            'Done!',
                            response.message,
                            'success'
                        )
                    } else {
                        Swal.fire(
                            'Oops!',
                            response.message,
                            'error'
                        )
                    }
                }
            });
        })

        function editForm(id, supplier_id, incentive_type, from, to, source_type, region_id, result) {
            $('#supplierr').val(supplier_id).trigger('change');
            $('#region_ids').val(region_id).trigger('change');
            $('#source_ids').val(source_type).trigger('change');
            $('#incentive_types').val(incentive_type).trigger('change');
            $('#id').val(id);
            $('#fromm').val(from);
            $('#too').val(to);
            $('#results').val(result);
            $('#editModal').modal('show');
            getincentiveTypee(incentive_type);
        }

        // function getincentiveType() {
        //     let source_type = $("#supplier option:selected").attr('data-type');
        //     $.ajax({
        //         type: "get",
        //         data: {
        //             source_type: source_type
        //         },
        //         url: '{{ route('incentives.get.types') }}',
        //         success: function(data) {
        //             if (data.success == true) {
        //                 $('#incentive_type').html(data.data);
        //             }
        //         },
        //         error: function(jqXhr, textStatus, errorMessage) {
        //             alert('Error Occurred')
        //         }

        //     });
        // }

        $("#source_id, #region_id").change(function() {
            let source_id = $("#source_id option:selected").attr('value');
            let region_id = $("#region_id option:selected").attr('value');
            $.ajax({
                type: "get",
                data: {
                    source_id: source_id,
                    region_id: region_id
                },
                url: '{{ route('get.suppliers') }}',
                success: function(data) {
                    if (data.success == true) {
                        $('#supplier').html(data.data);
                    }
                },
                error: function(jqXhr, textStatus, errorMessage) {
                    alert('Error Occurred')
                }

            });
        });

        function getincentiveTypee(type = null) {
            let source_type = $("#supplierr option:selected").attr('data-type');
            $.ajax({
                type: "get",
                data: {
                    source_type: source_type
                },
                url: '{{ route('incentives.get.types') }}',
                success: function(data) {
                    if (data.success == true) {
                        $('#incentive_typee').html(data.data);
                        if (type) {
                            $('#incentive_typee').val(type)
                        } else {
                            $('#incentive_typee').val('')
                        }
                    }
                },
                error: function(jqXhr, textStatus, errorMessage) {
                    alert('Error Occurred')
                }
            });
        }


        function setPassingValue() {
            $('#value').attr('min', $("#incentive_type option:selected").attr('min-range'));
            $('#value').attr('max', $("#incentive_type option:selected").attr('max-range'));
            $('.rang').text('(' + $("#incentive_type option:selected").attr('range') + ')');
            $('#test_id').val($("#incentive_type option:selected").attr('test-id'));
        }

        function setPassingValuee() {
            $('#valuee').attr('min', $("#incentive_typee option:selected").attr('min-range'));
            $('#valuee').attr('max', $("#incentive_typee option:selected").attr('max-range'));
            $('.rangg').text('(' + $("#incentive_typee option:selected").attr('range') + ')');
            $('#test_idd').val($("#incentive_typee option:selected").attr('test-id'));
        }

        function statusUpdate(element, id) {
            if ($(element).prop('checked') == true) {
                var status = 1;
            } else {
                var status = 0;
            }
            var fd = new FormData();
            fd.append('status', status);
            fd.append('id', id);
            $.ajax({
                type: "POST",
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: fd,
                url: '{{ route('incentives.test.base.supplier.status.update') }}',
                success: function(response) {
                    if (response.success) {
                        Swal.fire(
                            'Done!',
                            response.message,
                            'success'
                        )
                    } else {
                        Swal.fire(
                            'Oops!',
                            response.message,
                            'error'
                        )
                    }
                }
            });
        }

        function reset_dropdown(id) {
            $('#' + id).val('')
            $('#' + id).next('.dropown-reset-icon').addClass('d-none');
            table.draw();
        }
    </script>
@endsection