@include('admin.layout.header')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/datatables.min.css') }}" />
<link href="https://unpkg.com/multiple-select@1.7.0/dist/multiple-select.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('assets/modules/select2/dist/css/select2.min.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.0.4/venobox.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<div class="main-content">
    <section class="section">
        <div class="section-header pr-0">
            <div class="row w-100 g-2 justify-content-end">
                <div class="col-lg-auto my-auto">
                    <h1> <a href="{{ route('manageBanner') }}"><i class="fa fa-arrow-left"
                                style="font-size: 20px !important;"></i> </a> Compiled View</h1>
                </div>

                <div class="col-lg-2 col-md-6 ml-auto">
                    <div class="form-group mb-0">
                        <select multiple="multiple" class="select_multiple" id="SMFilter" name="SMFilter"
                            placeholder="Select SM">
                            {{-- <optgroup label="SM"> --}}
                            @foreach ($sm_users as $user)
                                <option value="{{ $user->position_code }}">{{ $user->emp_name }}</option>
                            @endforeach
                            {{-- </optgroup> --}}
                        </select>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6">
                    <div class="form-group mb-0">
                        <select multiple="multiple" class="select_multiple" id="RBMFilter" name="RBMFilter"
                            placeholder="Select RBM">
                        </select>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6">
                    <div class="form-group mb-0">
                        <select multiple="multiple" class="select_multiple" id="ABMFilter" name="ABMFilter"
                            placeholder="Select ABM">
                        </select>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6">
                    <div class="form-group mb-0">
                        <select multiple="multiple" class="select_multiple" id="BEFilter" name="BEFilter"
                            placeholder="Select BE">
                        </select>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6">
                    <div class="form-group mb-0">
                        <select multiple="multiple" class="select_multiple" id="HqFilter" name="HqFilter"
                            placeholder="Select HQ Name">
                            @foreach ($UserHqMaster as $user)
                                <option value="{{ $user->user_id }}">{{ $user->position_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-auto col-md-6 my-2 my-lg-0 my-md-0">
                    <div id="reportrange">
                        <i class="fa fa-calendar" style="font-size:18px !important;"></i>&nbsp;
                        <span></span> <i class="fa fa-caret-down" style="font-size:18px !important;"></i>
                        <input type="hidden" name="dtFrom" id="dtFrom">
                        <input type="hidden" name="dtTo" id="dtTo">
                    </div>
                </div>
                <div class="col-lg-auto mt-2">
                    <button id="applyButton" class="btn btn-primary mr-2">Apply</button>
                    <button id="clearButton" class="btn btn-danger mr-2">Clear</button>
                    <button class="btn btn-success" id="exportButton"><i class="fas fa-download mr-2"
                            style="font-size: 14px!important;"></i>Export</button>
                </div>
            </div>
        </div>
        <div class="row mb-5">
            <div class="col-lg-12">
                <div class="card">
                    <!-- <div class="card-header">
                    <h4>Striped</h4>
                  </div> -->
                    <div class="card-body">
                        <div class="">
                            <table id="compiledView"
                                class="w-100 table table-striped table-hover datatable text-center">
                                <thead class="w-100">
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>SM Name</th>
                                        <th>RBM Name</th>
                                        <th>ABM Name</th>
                                        <th>BE Name</th>
                                        <th>BE Emp Code</th>
                                        {{-- <th>HQ Name</th> --}}
                                        <th>Position Code</th>
                                        <th>Position Name</th>
                                        <th>Banner Image</th>
                                        <th>Banner Name</th>
                                        {{-- <th>Slab 1 <br> (10,000)</th>
                                        <th>Slab 2 <br> (20,000)</th>
                                        <th>Slab 3 <br> (30,000)</th>
                                        <th>Slab 4 <br> (40,000)</th>
                                        <th>Slab 5 <br> (50,000)</th> --}}
                                        {{-- @foreach ($slabAmounts as $key => $amount)
                                            <th>Slab {{ $key + 1 }} <br> ({{ number_format($amount) }})</th>
                                        @endforeach --}}
                                        @foreach ($slabAmounts as $key => $amount)
                                            <th>{{ $amount }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@include('admin.layout.footer')

<script src="{{ asset('assets/modules/select2/dist/js/select2.min.js') }}"></script>
<script src="https://unpkg.com/multiple-select@1.7.0/dist/multiple-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.0.4/venobox.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/js/additional-methods.min.js') }}"></script>
<script src="{{ asset('assets/notify.js') }}"></script>

<script>
    // Initialize multiple select
    $('#SMFilter').multipleSelect({
        multiple: true,
        multipleWidth: 60,
        placeholder: "Select SM",
        onClick: function() {
            console.log('SMFilter Selection changed');
            getRBMFilterData();
        },
        onCheckAll: function() {
            console.log('SMFilter Check All');
            getRBMFilterData();
        },
        onUncheckAll: function() {
            console.log('SMFilter Uncheck All');
            getRBMFilterData();
        }
    });

    $('#RBMFilter').multipleSelect({
        multiple: true,
        multipleWidth: 60,
        placeholder: "Select RBM",
        onClick: function() {
            console.log('RBMFilter Selection changed');
            getABMfilterData();
        },
        onCheckAll: function() {
            console.log('RBMFilter Check All');
            getABMfilterData();
        },
        onUncheckAll: function() {
            console.log('RBMFilter Uncheck All');
            getABMfilterData();
        }
    });

    $('#ABMFilter').multipleSelect({
        multiple: true,
        multipleWidth: 60,
        placeholder: "Select ABM",
        onClick: function() {
            console.log('ABMFilter Selection changed');
            getBEfilterData(); // Assuming a function for BE filter
        },
        onCheckAll: function() {
            console.log('ABMFilter Check All');
            getBEfilterData();
        },
        onUncheckAll: function() {
            console.log('ABMFilter Uncheck All');
            getBEfilterData();
        }
    });

    $('#BEFilter').multipleSelect({
        multiple: true,
        multipleWidth: 60,
        placeholder: "Select BE"
        // Add onClick, onCheckAll, onUncheckAll if needed
    });

    $('#HqFilter').multipleSelect({
        multiple: true,
        multipleWidth: 60,
        placeholder: "Select Hq"
    });

    let compiledViewDataTable;

    $('#exportButton').click(function() {
        let dtFrom = $('#dtFrom').val();
        let dtTo = $('#dtTo').val();

        activity_export(dtFrom, dtTo);
    });

    function activity_export(dtFrom, dtTo) {
        $.ajax({
            type: "POST",
            url: '{{ route('compiledViewExport') }}',
            data: {
                view_id: "{{ $view_id }}",
                dtFrom: dtFrom,
                dtTo: dtTo,
                SM: $('#SMFilter').multipleSelect('getSelects').filter(code => code !== '' && code !== null),
                RBM: $('#RBMFilter').multipleSelect('getSelects').filter(code => code !== '' && code !== null),
                ABM: $('#ABMFilter').multipleSelect('getSelects').filter(code => code !== '' && code !== null),
                BE: $('#BEFilter').multipleSelect('getSelects').filter(code => code !== '' && code !== null),
                '_token': "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.status == 1) {
                    $.notify(response.message, "info");
                    // Trigger the file download
                    var downloadUrl = '{{ asset('storage/exports/compiled_view') }}' + '/' + response
                        .filename;
                    window.location.href = downloadUrl;
                } else {
                    $.notify('Something went wrong !', "error");
                }
            }
        });
    }

    function getRBMFilterData() {
        let codes = $('#SMFilter').multipleSelect('getSelects');

        // Reset dependent dropdowns
        $('#RBMFilter').multipleSelect('setSelects', []);
        $('#ABMFilter').multipleSelect('setSelects', []);
        $('#BEFilter').multipleSelect('setSelects', []);
        // $('#RBMFilter').html('<option value="" default selected disabled>Select RBM</option>');
        // $('#ABMFilter').html('<option value="" default selected disabled>Select ABM</option>');
        // $('#BEFilter').html('<option value="" default selected disabled>Select BE</option>');
        $('#RBMFilter').html('');
        $('#ABMFilter').html('');
        $('#BEFilter').html('');
        $('#RBMFilter').multipleSelect('refresh');
        $('#ABMFilter').multipleSelect('refresh');
        $('#BEFilter').multipleSelect('refresh');

        if (codes && codes.length > 0) {
            $.ajax({
                url: "{{ route('getMultipleUsersChildData') }}",
                type: "POST",
                data: {
                    position_codes: codes, // Send as a single array
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    if (result.status === 1) {
                        $.each(result.data, function(key, value) {
                            $("#RBMFilter").append('<option value="' + value.position_code + '">' +
                                value.emp_name + '</option>');
                        });
                        $('#RBMFilter').multipleSelect('refresh');
                    } else {
                        $.notify(result.message || 'No child users found.', "error");
                    }
                },
                error: function(xhr, status, error) {
                    $.notify('Error: ' + (xhr.responseJSON ? xhr.responseJSON.message :
                        'An error occurred while processing the request.'), "error");
                }
            });
        }
    }

    function getABMfilterData() {
        let codes = $('#RBMFilter').multipleSelect('getSelects').filter(code => code !== '' && code !== null);

        // Reset dependent dropdowns
        $('#ABMFilter').multipleSelect('setSelects', []);
        $('#BEFilter').multipleSelect('setSelects', []);
        // $('#ABMFilter').html('<option value="" default selected disabled>Select ABM</option>');
        // $('#BEFilter').html('<option value="" default selected disabled>Select BE</option>');
        $('#ABMFilter').html('');
        $('#BEFilter').html('');
        $('#ABMFilter').multipleSelect('refresh');
        $('#BEFilter').multipleSelect('refresh');

        if (codes.length > 0) {
            $.ajax({
                url: "{{ route('getMultipleUsersChildData') }}",
                type: "POST",
                data: {
                    position_codes: codes,
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    if (result.status === 1) {
                        $.each(result.data, function(key, value) {
                            $("#ABMFilter").append('<option value="' + value.position_code + '">' +
                                value.emp_name + '</option>');
                        });
                        $('#ABMFilter').multipleSelect('refresh');
                    } else {
                        $.notify(result.message || 'No child users found.', "error");
                    }
                },
                error: function(xhr, status, error) {
                    $.notify('Error: ' + (xhr.responseJSON ? xhr.responseJSON.message :
                        'An error occurred while processing the request.'), "error");
                }
            });
        }
    }

    function getBEfilterData() {
        let codes = $('#ABMFilter').multipleSelect('getSelects').filter(code => code !== '' && code !== null);

        // Reset dependent dropdown
        $('#BEFilter').multipleSelect('setSelects', []);
        // $('#BEFilter').html('<option value="" default selected disabled>Select BE</option>');
        $('#BEFilter').html('');
        $('#BEFilter').multipleSelect('refresh');

        if (codes.length > 0) {
            $.ajax({
                url: "{{ route('getMultipleUsersChildData') }}",
                type: "POST",
                data: {
                    position_codes: codes,
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    if (result.status === 1) {
                        $.each(result.data, function(key, value) {
                            $("#BEFilter").append('<option value="' + value.position_code + '">' +
                                value.emp_name + '</option>');
                        });
                        $('#BEFilter').multipleSelect('refresh');
                    } else {
                        $.notify(result.message || 'No child users found.', "error");
                    }
                },
                error: function(xhr, status, error) {
                    $.notify('Error: ' + (xhr.responseJSON ? xhr.responseJSON.message :
                        'An error occurred while processing the request.'), "error");
                }
            });
        }
    }

    $(document).ready(function() {
        let start = moment().subtract(29, 'days');
        let end = moment();

        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            $("#dtFrom").val(start.format('YYYY-MM-D'));
            $("#dtTo").val(end.format('YYYY-MM-D'));
        }

        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                    'month').endOf('month')]
            }
        }, cb);

        cb(start, end);

        // if default not show date filtor
        // $('#reportrange span').html('');
        // $("#dtFrom").val('');
        // $("#dtTo").val('');


        $('.select2').select2({
            width: '100%',
        });

        $('#applyButton').click(function() {
            compiledViewDataTable.draw();
        });

        $('#clearButton').click(function() {
            // if set to null
            // $('#reportrange span').html('');
            // $("#dtFrom").val('');
            // $("#dtTo").val('');

            let start = moment().subtract(29, 'days');
            let end = moment();

            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            $("#dtFrom").val(start.format('YYYY-MM-D'));
            $("#dtTo").val(end.format('YYYY-MM-D'));

            // $("#SMFilter").val('').change();
            // $('#RBMFilter').html('<option value="" default selected disabled>Select RBM</option>');
            // $('#ABMFilter').html('<option value="" default selected disabled>Select ABM</option>');
            // $('#BEFilter').html('<option value="" default selected disabled>Select BE</option>');

            $('#SMFilter').multipleSelect('setSelects', []);
            $('#RBMFilter').multipleSelect('setSelects', []);
            $('#ABMFilter').multipleSelect('setSelects', []);
            $('#BEFilter').multipleSelect('setSelects', []);
            $('#HqFilter').multipleSelect('setSelects', []);

            compiledViewDataTable.draw();
        });

        // let slabAmounts = @json($slabAmounts);

        let columns = [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                searchable: false,
                orderable: false
            },
            {
                data: 'sm_name',
                name: 'sm_name',
                searchable: true,
                orderable: false
            },
            {
                data: 'rbm_name',
                name: 'rbm_name',
                searchable: true,
                orderable: false
            },
            {
                data: 'abm_name',
                name: 'abm_name',
                searchable: true,
                orderable: false
            },
            {
                data: 'be_name',
                name: 'be_name',
                searchable: true,
                orderable: false
            },
            // {
            //     data: 'be_hq_name',
            //     name: 'be_hq_name',
            //     searchable: true,
            //     orderable: false
            // },
            {
                data: 'be_emp_code',
                name: 'be_emp_code',
                searchable: true,
                orderable: false
            },
            {
                data: 'be_position_code',
                name: 'be_position_code',
                searchable: true,
                orderable: false
            },
            {
                data: 'be_position_name',
                name: 'be_position_name',
                searchable: true,
                orderable: false
            },
            {
                data: 'banner_image',
                name: 'banner_image',
                searchable: false,
                orderable: false,
            },
            {
                data: 'brand_name',
                name: 'brand_name',
                searchable: false,
                orderable: false
            },
            {
                data: 'slab_1_count',
                name: 'slab_1_count',
                searchable: false,
                orderable: false
            },
            {
                data: 'slab_2_count',
                name: 'slab_2_count',
                searchable: false,
                orderable: false
            },
            {
                data: 'slab_3_count',
                name: 'slab_3_count',
                searchable: false,
                orderable: false
            },
            {
                data: 'slab_4_count',
                name: 'slab_4_count',
                searchable: false,
                orderable: false
            }
        ];

        // Need To run loop for slabs
        // Add slab columns dynamically
        // slabAmounts.forEach((amount, index) => {
        //     columns.push({
        //         data: `slab_${index + 1}`,
        //         name: `slab_${index + 1}`,
        //         searchable: false,
        //         orderable: false
        //     });
        // });

        let columnDefs = [];

        getDataTable("{{ route('compiledViewPaginate') }}", columns, columnDefs);

        function getDataTable(url, columns, columnDefs) {
            if ($.fn.DataTable.isDataTable('#compiledView')) {
                $('#compiledView').DataTable().destroy();
            }
            compiledViewDataTable = $('#compiledView').DataTable({
                processing: true,
                serverSide: true,
                "bDestroy": true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                        d.view_id = "{{ $view_id }}";
                        d.dtFrom = $("#dtFrom").val();
                        d.dtTo = $("#dtTo").val();
                        d.SM = $('#SMFilter').multipleSelect('getSelects').filter(code => code !==
                            '' && code !== null);
                        d.RBM = $('#RBMFilter').multipleSelect('getSelects').filter(code => code !==
                            '' && code !== null);
                        d.ABM = $('#ABMFilter').multipleSelect('getSelects').filter(code => code !==
                            '' && code !== null);
                        d.BE = $('#BEFilter').multipleSelect('getSelects').filter(code => code !==
                            '' && code !== null);
                        d.Hq = $('#HqFilter').multipleSelect('getSelects').filter(code => code !==
                            '' && code !== null);
                    }
                },
                drawCallback: function(settings) {
                    // Reinitialize Venobox
                    new VenoBox({
                        selector: '.banner_image',
                        numeration: true,
                        infinigall: true,
                        share: true,
                        spinner: 'rotating-plane'
                    });
                }
            });
        }
    });
</script>