@extends('layouts.master')
@push('styles')
    <style>
        .assCatalogue-radio {
            margin: 10px 15px;
            background-color: #f6f6f6;
        }
        .RrulesHeading {
            padding: 0px 20px 10px 20px !important;
            background: transparent !important;
            border-bottom: solid 1px #e5e5e5
        }
        .pt-3 {
            padding-top: 2px !important;
        }
        .se_cus-type .form-control {
            border: 1px solid #eeeeee;
            background-color: #fff;
        }
        .assCatalogue-radio .form-s2 .select2-container .select2-selection--single {
            border: 1px solid #e9e9e9;
            background-color: #fff;
        }
        .assCatalogue-radio .form-control{
            border: 1px solid #e9e9e9;
            background-color: #fff; box-shadow: none; height: 35px !important;
        }
        .pl-50 {
            padding-left: 50px !important;
        }
        .assCatalogue-radio .form-s2 .select2-container .select2-selection--single, .assCatalogue-radio .fs-label-wrap {
              border: 1px solid #E9E9E9;
              background-color: #fff;
          }
        .product-criteria{
            display: none;
        }
    </style>
@endpush
@section('content')
    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Coverage <span>Report</span></h2>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>Report</span></a></li>
                <li><span>List</span></li>
            </ol>
        </div>
    </div>
    <form action="{{ route('coverage-report.excel') }}" id="coverage-report-form" method="GET" target="_blank">
        <div class="row">
            <div class="col-md-12 mb-30">
                <div class="card PB-20">
                    <div id="floating-label">
                        <div class="header">
                            <h2>Date  <span> Filter </span></h2>
                        </div>
                        <div class="assCatalogue-radio PT-10 PB-10">
                            <div class="row m-0">
                                <div class="col-auto  mt-auto mb-auto pr-400">
                                    <div class="custom-control custom-radio">
                                        <input checked class="custom-control-input date-filter" type="radio" name="date_type" id="date_monthly" value='monthly'>
                                        <label class="custom-control-label font13 pt-3" for="date_monthly">Monthly</label>
                                    </div>
                                </div>
                                <div class="col-auto mt-auto mb-auto pr-400">
                                    <div class="custom-control custom-radio">
                                        <input  class="custom-control-input date-filter" type="radio" name="date_type" id="date_daily" value='daily'>
                                        <label class="custom-control-label font13 pt-3" for="date_daily">Daily</label>
                                    </div>
                                </div>
                                <div class="col-auto mt-auto mb-auto pr-400">
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input date-filter" type="radio" name="date_type" id="date_custom" value='custom'>
                                        <label class="custom-control-label font13 pt-3" for="date_custom"> Custom Date</label>
                                    </div>
                                </div>
                                <div class="col-auto font13 mt-auto mb-auto pr-0 pl-50 dateFrom-label">Start Month</div>
                                <div class="col-3">
                                    <input type="text" id="dateFrom" name="dateFrom" class="form-control" autocomplete="off" placeholder="">
                                </div>
                                <div class="col-auto font13 mt-auto mb-auto p-0 dateTo dateTo-label ">End Month</div>
                                <div class="col-3">
                                    <input type="text" id="dateTo" name="dateTo" class="form-control dateTo" autocomplete="off" placeholder="">
                                </div>

                            </div>


                        </div>

                        <div class="row">
                            <div class="col-6">
                                <div class="header RrulesHeading mt-15">
                                    <h2>Sales <span>Criteria</span></h2>
                                </div>

                                <div class=" assCatalogue-radio PT-10 PB-10">
                                    <div class="row m-0">
                                        <div class="col-auto  mt-auto mb-auto pr-400">
                                            <div class="custom-control custom-radio">
                                                <input checked class="custom-control-input sale_criteria" type="radio" name="sale_criteria" id="Booking" value='booking'>
                                                <label class="custom-control-label font13 pt-3" for="Booking">Booking</label>
                                            </div>
                                        </div>

                                        <div class="col-auto mt-auto mb-auto pr-400">
                                            <div class="custom-control custom-radio">
                                                <input class="custom-control-input sale_criteria" type="radio" name="sale_criteria" id="Execution" value='execution' >
                                                <label class="custom-control-label font13 pt-3" for="Execution">Execution</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="header RrulesHeading mt-15">
                                    <h2>Team  <span>Criteria</span></h2>
                                </div>

                                <div class=" assCatalogue-radio PT-10 PB-10">
                                    <div class="row m-0">
                                        <div class="col-auto  mt-auto mb-auto pr-400">
                                            <div class="custom-control custom-radio">
                                                <input checked class="custom-control-input team_criteria" type="radio" name="team_criteria" id="SalesRep" value='EmployeeWise'>
                                                <label class="custom-control-label font13 pt-3" for="SalesRep">By Sales Rep</label>
                                            </div>
                                        </div>

                                        <div class="col-auto mt-auto mb-auto pr-400">
                                            <div class="custom-control custom-radio">
                                                <input class="custom-control-input team_criteria" type="radio" name="team_criteria" id="bydistributor" value='DistributorWise'>
                                                <label class="custom-control-label font13 pt-3" for="bydistributor">By Distributor</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row m-0 PB-15">

                            <div class="col-4 pr-0 regions">
                                <label class="font12 mb-5">Select Regions</label>
                                <!-- <input type="hidden" id="type" name="type" value="monthWise"> -->
                                <div class="form-group" style="height: auto">
                                    <select  class="reports-select" id="regions" name="regions[]" multiple="multiple">

                                    </select>
                                </div>
                            </div>

                            <div class="col-4 pr-0">
                                <label class="font12 mb-5">Select Distributors</label>
                                <div class="form-group" style="height: auto">
                                    <select  class="reports-select" id="distributors" name="distributors[]"  multiple="multiple">

                                    </select>
                                </div>
                            </div>

                            <div class="col-4 bookers">
                                <label class="font12 mb-5">Select Order Bookers</label>
                                <div class="form-group" style="height: auto">
                                    <select class="reports-select" id="bookers" name="bookers[]" multiple="multiple">
                                    </select>
                                </div>
                            </div>

                        </div>


                        <div class="row">
                            <div class="col-6">

                                <div class="header RrulesHeading mt-15">
                                    <h2>Report <span>Coverage Type</span></h2>
                                </div>

                                <div class="assCatalogue-radio PT-10 PB-10">
                                    <div class="row m-0">
                                        <div class="col-auto  mt-auto mb-auto pr-400">
                                            <div class="custom-control custom-radio">
                                                <input  class="custom-control-input" type="radio" name="report_coverage" id="Individual" value='1'>
                                                <label class="custom-control-label font13 pt-3" for="Individual">Individual</label>
                                            </div>
                                        </div>

                                        <div class="col-auto mt-auto mb-auto pr-400">
                                            <div class="custom-control custom-radio">
                                                <input class="custom-control-input" type="radio" name="report_coverage" id="Group" value='2'>
                                                <label class="custom-control-label font13 pt-3" for="Group">Group</label>
                                            </div>
                                        </div>

                                        <div class="col-auto mt-auto mb-auto pr-400">
                                            <div class="custom-control custom-radio">
                                                <input checked class="custom-control-input" type="radio" name="report_coverage" id="MultiProduct" value='3'>
                                                <label class="custom-control-label font13 pt-3" for="MultiProduct">Multi Product</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="header RrulesHeading mt-15">
                                    <h2>Coverage<span> Criteria</span></h2>
                                </div>

                                <div class="assCatalogue-radio PT-10 PB-10">
                                    <div class="row m-0">
                                        <div class="col-auto  mt-auto mb-auto pr-400">
                                            <div class="custom-control custom-radio">
                                                <input checked class="custom-control-input" type="radio" name="coverage_criteria" id="Unique" value='unique'>
                                                <label class="custom-control-label font13 pt-3" for="Unique">Unique</label>
                                            </div>
                                        </div>

                                        <div class="col-auto mt-auto mb-auto pr-400">
                                            <div class="custom-control custom-radio">
                                                <input class="custom-control-input" type="radio" name="coverage_criteria" id="Scheduled" value='scheduled'>
                                                <label class="custom-control-label font13 pt-3" for="Scheduled">Scheduled</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="header RrulesHeading mt-15">
                            <h2>Product  <span>Criteria</span></h2>
                        </div>

                        <div class=" assCatalogue-radio PT-10 PB-10">
                            <div class="row m-0">
                                <div class="col-auto  mt-auto mb-auto pr-0">
                                    <div class="custom-control custom-radio">
                                        <input checked class="custom-control-input product-criteria-radio" type="radio" name="product_criteria" id="product_criteria_cat" value='1'>
                                        <label class="custom-control-label font13 pt-3" for="product_criteria_cat">Main Category</label>
                                    </div>
                                </div>

                                <div class="col-auto mt-auto mb-auto pr-0">
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input product-criteria-radio" type="radio" name="product_criteria" id="product_criteria_sab_cat" value='2'>
                                        <label class="custom-control-label font13 pt-3" for="product_criteria_sab_cat">Sub Category</label>
                                    </div>
                                </div>

                                <div class="col-auto mt-auto mb-auto pr-0">
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input product-criteria-radio" type="radio" name="product_criteria" id="product_criteria_brand" value='3'>
                                        <label class="custom-control-label font13 pt-3" for="product_criteria_brand">Brand</label>
                                    </div>
                                </div>

                                <div class="col-auto mt-auto mb-auto pr-15">
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input product-criteria-radio" type="radio" name="product_criteria" id="product_criteria_product" value='4'>
                                        <label class="custom-control-label font13 pt-3" for="product_criteria_product">Product</label>
                                    </div>
                                </div>

                                {{-- Begin::main category --}}
                                <div class="col-auto font13 mt-auto mb-auto p-0 product-criteria categories"> Main Category</div>
                                <div class="col  product-criteria categories">
                                    <div class="form-s2">
                                        <select class="reports-select" id="categories" name="categories[]" multiple="multiple">
                                        </select>
                                    </div>
                                </div>
                                {{-- End::main category --}}


                                {{-- Begin::sub category --}}
                                <div class="col-auto font13 mt-auto mb-auto p-0 product-criteria subcategories"> Sub Category</div>
                                <div class="col  product-criteria subcategories">
                                    <div class="form-s2">
                                        <select class="reports-select" id="subcategories" name="subcategories[]" multiple="multiple">
                                        </select>
                                    </div>
                                </div>
                                {{-- End::sub category --}}


                                {{-- Begin::Brand --}}
                                <div class="col-auto font13 mt-auto mb-auto p-0 product-criteria brands"> Brands</div>
                                <div class="col  product-criteria brands">
                                    <div class="form-s2">
                                        <select class="reports-select"  id="brands" name="brands[]" multiple="multiple">
                                        </select>
                                    </div>
                                </div>
                                {{-- End::Brand --}}



                                {{-- Begin::Product --}}
                                <div class="col-auto font13 mt-auto mb-auto p-0 product-criteria products"> Products</div>
                                <div class="col  product-criteria products">
                                    <div class="form-s2">
                                        <select class="reports-select" id="products" name="products[]" multiple="multiple">
                                        </select>
                                    </div>
                                </div>
                                {{-- End::Product --}}

                            </div>
                        </div>


                        <div class="col-12 jq_msg">

                        </div>

                        <div class="col-md-12 text-right PT-30">
                            <button type="button" class="btn btn-primary mr-2 submit-btn" >Generate Report</button>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </form>


@endsection
@section('scripts')
{{--    <script src="/js/fSelect.js"></script>--}}
    <script>
        function jQ_msg(msg){
            $('.jq_msg').html(`<div class="alert alert-warning" style="margin: 0px"><ul class="error-list">${msg}</ul></div>`);
            $('.jq_msg').fadeIn();
            setTimeout(() => {
                $('.jq_msg').fadeOut()
            },5000);
        }
        $(document).ready(function() {
            $('.jq_msg').fadeOut();
            let submit = false;
            $(document).on('click','.submit-btn',function() {

                let jq_msg = '';
                $('.jq_msg').fadeOut('slow');
                let isValid = true;

                //Date Filter
                let date_type = $("input[name='date_type']:checked").val();
                if(date_type  == 'daily'){
                    if(!$('#dateFrom').val()){
                        isValid = false;
                        jq_msg += "<li>Date field is missing.</li>";
                    }
                }else{
                    if(!$('#dateFrom').val() || !$('#dateTo').val() ){
                        isValid = false;
                        jq_msg += "<li>Date field is missing.</li>";
                    }
                }

                //Sales Criteria
                if(!$('.sale_criteria').val()){
                    isValid = false;
                    jq_msg += "<li>Sale Criteria is missing.</li>";
                    

                }

                //Team Criteria
                if(!$('.team_criteria').val()){
                    isValid = false;
                    jq_msg += "<li>Team Criteria is missing.</li>";
                    

                }
                if($('#regions').val() == ''){
                    isValid = false;
                    jq_msg += "<li>Region field is missing.</li>";
                    

                }


                if($('#distributors').val() == ''){
                    isValid = false;
                    jq_msg += "<li>Distributor field is missing.</li>";
                    

                }


                if( $("input[name='team_criteria']:checked").val() == 'EmployeeWise' && $('#bookers').val() == ''){
                    isValid = false;
                    jq_msg += "<li>Order Booker field is missing.</li>";
                    

                }


                let product_criteria = $("input[name='product_criteria']:checked").val();
                if(product_criteria == '1'){
                    if($('#categories').val() == ''){
                        isValid = false;
                        jq_msg += "<li>Category field  is missing.</li>";
                        

                    }
                }
                if(product_criteria == '2'){

                    if($('#categories').val() == ''){
                        isValid = false;
                        jq_msg += "<li>Category field  is missing.</li>";
                        

                    }

                    if($('#subcategories').val() == ''){
                        isValid = false;
                        jq_msg += "<li>Sub Category field  is missing.</li>";
                        

                    }
                }
                if(product_criteria == '3'){
                    if($('#brands').val() == ''){
                        isValid = false;
                        jq_msg += "<li>Brand field  is missing.</li>";
                        

                    }
                }
                if(product_criteria == '4'){
                    if($('#brands').val() == ''){
                        isValid = false;
                        jq_msg += "<li>Brand field  is missing.</li>";
                        

                    }
                    if($('#products').val() == ''){
                        isValid = false;
                        jq_msg += "<li>Product field is missing.</li>";
                        

                    }
                }
                if(isValid){
                    $("#coverage-report-form").submit();
                }else{
                    jQ_msg(jq_msg);
                }
            });



        });



        var dateFrom = $('#dateFrom');
        var dateTo   = $('#dateTo');
        dateFrom.datepicker({
            format: 'M-yyyy',
            viewMode: "months",
            minViewMode: "months"
        }).on('changeDate', function(e) {
            $(this).datepicker('hide');
            onDateChange('dateFrom','dateTo');
        });
        dateTo.datepicker({
            format: 'M-yyyy',
            viewMode: "months",
            minViewMode: "months"
        }).on('changeDate', function(e) {
            $(this).datepicker('hide');
            onDateChange('dateFrom','dateTo');
        });
        let distributors_list =  [];
        let orderbookers_list =  [];
{{--        @dd(addSlashesToArray($brands));--}}
        let inventory         =  JSON.parse('{!! json_encode(removeApostrophes($inventory)) !!}') ;
        let brands            =  JSON.parse('{!! json_encode(removeApostrophes($brands)) !!} ');
        let categories        =  JSON.parse('{!! json_encode(removeApostrophes($categories)) !!}') ;
        let subcategories     =  JSON.parse('{!! json_encode(removeApostrophes($subcategories)) !!} ');
        let regionsoptions    =  [];
        let distributoroptions=  [];
        let orderbookeroptions=  [];
        function ReportData(){
            this.data = [];
        }
        var reportData = new ReportData();
        function loadProductCriteria(product_criteria){
            $('.product-criteria').hide();
            if(product_criteria == 1){
                $('.categories').show();
            }
            else if(product_criteria == 2){
                $('.categories').show();
                $('.subcategories').show();
            }
            else if(product_criteria == 3){
                $('.brands').show();
                
            }
            else if(product_criteria == 4){
                $('.brands').show();
                $('.products').show();
            }

            $('.reports-select').fSelect('reload');
        }
        $('.categories').show();
        $(document).on('click','.date-filter',function () {
            $('.dateTo').show();

            $('#dateFrom').val('');
            $('#dateTo').val('');
            dateFrom.datepicker('remove');
            dateTo.datepicker('remove');
            if($(this).val() == 'monthly'){
                dateFrom.datepicker({
                    format: 'M-yyyy',
                    viewMode: "months",
                    minViewMode: "months"
                }).on('changeDate', function(e) {
                    $(this).datepicker('hide');
                    onDateChange('dateFrom','dateTo');
                });
                dateTo.datepicker({
                    format: 'M-yyyy',
                    viewMode: "months",
                    minViewMode: "months"
                }).on('changeDate', function(e) {
                    $(this).datepicker('hide');
                    onDateChange('dateFrom','dateTo');
                });
                $('.dateFrom-label').text('Start Month');
                $('.dateTo-label').text('End Month');
            }
            if($(this).val() == 'daily'){
                $('.dateTo').hide();
                dateFrom.datepicker({
                    format: 'd-M-yyyy',
                    viewMode: "days",
                    minViewMode: "days"
                }).on('changeDate', function(e) {
                    $(this).datepicker('hide');
                    onDateChange('dateFrom','dateFrom');
                });
                $('.dateFrom-label').text('Date');
            }
            if($(this).val() == 'custom'){
                dateFrom.datepicker({
                    format: 'd-M-yyyy',
                    viewMode: "days",
                    minViewMode: "days"
                }).on('changeDate', function(e) {
                    $(this).datepicker('hide');
                    onDateChange('dateFrom','dateTo');
                });
                dateTo.datepicker({
                    format: 'd-M-yyyy',
                    viewMode: "days",
                    minViewMode: "days"
                }).on('changeDate', function(e) {
                    $(this).datepicker('hide');
                    onDateChange('dateFrom','dateTo');
                });
                $('.dateFrom-label').text('Start Date');
                $('.dateTo-label').text('End Date');
            }
        });
        $(document).on('click','.product-criteria-radio',function () {
            if($(this).is(':checked')){
                loadProductCriteria($(this).val());
            }
        });
        $(document).on('click','.team_criteria',function () {
            $('.bookers').hide();
            if($(this).val() == 'EmployeeWise'){
                $('.bookers').show();
            }
        });
        // function GetEmployeeLinePermissions() {
        //     http('GET', `/GetEmployeeLinePermissions`).then((e) => {
        //         reportData.data = JSON.parse(e);
        //         if(reportData.data){
        //             reportData.data.forEach(region=>{
        //                 region.distributors.forEach(distributor=>{
        //                     distributors_list.push(distributor);
        //                     distributor.order_bookers.forEach(order_booker=>{
        //                         order_booker.distributor_id     =   distributor.id;
        //                         order_booker.region_id          =   distributor.region_id;
        //                         order_booker.area_id            =   distributor.distributor_type_id;
        //                         order_booker.territory_id       =   distributor.territory_id
        //                         orderbookers_list.push(order_booker);
        //                     });
        //                 });
        //             });
        //         }
        //         SetRegionsDropDown();
        //     });
        // }
        // GetEmployeeLinePermissions();
        function SetRegionsDropDown(){
             distributors_list =  [];
             orderbookers_list =  [];
            if(reportData.data){
                reportData.data.forEach(region=>{
                    if(region.distributors){
                        region.distributors.forEach(distributor=>{
                            distributors_list.push(distributor);
                            if(distributor.order_bookers){
                                distributor.order_bookers.forEach(order_booker=>{
                                    order_booker.distributor_id     =   distributor.id;
                                    order_booker.region_id          =   distributor.region_id;
                                    order_booker.area_id            =   distributor.distributor_type_id;
                                    order_booker.territory_id       =   distributor.territory_id
                                    orderbookers_list.push(order_booker);
                                });
                            }
                        });
                    }
                });
            }
            regionsoptions    =  [];
            $(`#regions`).html(`<option class=" regions-list-all" value="0">All Regions</option>`);
            reportData.data.forEach(element => {
                regionsoptions.push(element.id);
                $(`#regions`).append(`<option  class="regions-list" value="${element.id}">${element.region_name}</option>`);
            });

            $(`#categories`).empty();
            if(categories && categories.length){
                $(`#categories`).html(`<option class="" value="0">All Categories</option>`);
                categories.forEach(element => {
                    $(`#categories`).append(`<option class="categories-list" value="${element.main_category_id}">${element.main_category_name}</option>`);
                });
                $('#categories').fSelect('reload');
            }

            $(`#brands`).empty();
            if(brands && brands.length){
                $(`#brands`).html(`<option class="" value="0">All Brands</option>`);
                brands.forEach(element => {
                    $(`#brands`).append(`<option class="brands-list" value="${element.id}">${element.name}</option>`);
                });
                $('#brands').fSelect('reload');
            }
            
            $('.reports-select').fSelect('reload');
            


        }
        function LoadDistributorsByRegion(){
            distributoroptions  =  [];
            var regions         =  $('#regions').val();
            $(`#distributors`).empty();
            if(regions && regions.length){
                $(`#distributors`).html(`<option class=" distributors-list-all" value="0">All Distributors</option>`);
                var distributors    =   distributors_list.filter(x=> ( regions.map(Number).includes(x.region_id) || regions.map(Number).includes(0) ));
                distributors.forEach(element => {
                    distributoroptions.push(element.id);
                    $(`#distributors`).append(`<option class="distributors-list" value="${element.id}">${element.distributor_name}</option>`);
                });
            }
            $('.reports-select').fSelect('reload');
        }
        function LoadOrderBookerByDistrobutor(){
            orderbookeroptions    =  [];
            var distributors  =  $('#distributors').val();
            $(`#bookers`).html(`<option class="booker-list-all"  value="0">All Order Bookers</option>`);
            if(distributors && distributors.length){
                var orderbookers     =   orderbookers_list.filter(x=> ( distributors.map(Number).includes(x.distributor_id) || distributors.map(Number).includes(0) ));
                orderbookers.forEach(element => {
                    orderbookeroptions.push(element.employee_id)
                    $(`#bookers`).append(`<option class="bookers-list" value="${element.employee_id}">${element.employee_first_name+' '+element.employee_last_name}</option>`);
                });
            }
            $('.reports-select').fSelect('reload');
        }
        $(document).on('change','#regions',function () {
            let regions    =  $('#regions').val();
            $(`#distributors`).empty();
            $(`#bookers`).empty();
            if(jQuery.inArray('0',regions) !== -1){
                setTimeout(() => {
                    $('.regions').find('.regions-list').each(function() {
                        if($(this).attr('value') != 0){
                            $(this).removeClass('selected');
                            $(this).attr('selected',false);
                        }
                    });
                    $('.regions .fs-label').text('All Regions');
                    $('#regions').val('0');
                    LoadDistributorsByRegion();
                }, 100);
            }else{
                LoadDistributorsByRegion();
            }
        })
        $(document).on('change','#distributors',function () {
            let distributors    =  $('#distributors').val();
            $(`#bookers`).empty();
            if(jQuery.inArray('0',distributors) !== -1){
                setTimeout(() => {
                    $('.distributors').find('.distributors-list').each(function() {
                        if($(this).attr('value') != 0){
                            $(this).removeClass('selected');
                            $(this).attr('selected',false);
                        }
                    });
                    $('.distributors .fs-label').text('All Distributors');
                    $('#distributors').val('0');
                    LoadOrderBookerByDistrobutor();
                }, 100);
            }else{
                LoadOrderBookerByDistrobutor();
            }
        })
        $(document).on('change','#bookers',function () {
            let bookers    =  $('#bookers').val();
            if(jQuery.inArray('0',bookers) !== -1){
                setTimeout(() => {
                    $('.bookers').find('.bookers-list').each(function() {
                        if($(this).attr('value') != 0){
                            $(this).removeClass('selected');
                            $(this).attr('selected',false);
                        }
                    });
                    $('.bookers .fs-label').text('All Order Bookers');
                    $('#bookers').val('0');
                }, 100);
            }
        })


        function LoadSubCategories(){
            var maincates  =  $('#categories').val();
            $(`#subcategories`).empty();
            if(maincates && maincates.length){
                $(`#subcategories`).html(`<option  value="0">All Sub Categories</option>`);
                var subcats     =   subcategories.filter(x=> ( maincates.map(Number).includes(x.main_category_id) || maincates.map(Number).includes(0) ));

                subcats.forEach(element => {
                    $(`#subcategories`).append(`<option class="subcategories-list" value="${element.sub_category_id}">${element.sub_category_name}</option>`);
                });
            }
            $('#subcategories').fSelect('reload');
        }

        $(document).on('change','#categories',function () {
            let categories    =  $('#categories').val();
            $('#subcategories').empty();
            if(jQuery.inArray('0',categories) !== -1){
                setTimeout(() => {
                    $('.categories').find('.categories-list').each(function() {
                        if($(this).attr('value') != 0){
                            $(this).removeClass('selected');
                            $(this).attr('selected',false);
                        }
                    });
                    $('.categories .fs-label').text('All Categories');
                    $('#categories').val('0');
                }, 100);
                LoadSubCategories()
            }else{
                LoadSubCategories()
            }
        })

        $(document).on('change','#subcategories',function () {
            let subcategories    =  $('#subcategories').val();
            if(jQuery.inArray('0',subcategories) !== -1){
                setTimeout(() => {
                    $('.subcategories').find('.subcategories-list').each(function() {
                        if($(this).attr('value') != 0){
                            $(this).removeClass('selected');
                            $(this).attr('selected',false);
                        }
                    });
                    $('.subcategories .fs-label').text('All Sub Categories');
                    $('#subcategories').val('0');
                }, 100);
            }
        })


        function LoadBrandsProducts(){
            var thisbrands  =  $('#brands').val();
            $(`#products`).empty();
            if(thisbrands && thisbrands.length){
                $(`#products`).html(`<option  value="0">All Products</option>`);
                var products     =   inventory.filter(x=> ( thisbrands.includes(x.item_brand) || thisbrands.map(Number).includes(0) ));

                products.forEach(element => {
                    $(`#products`).append(`<option class="products-list" value="${element.item_id}">${element.item_name}</option>`);
                });
            }
            $('#products').fSelect('reload');
        }

        $(document).on('change','#brands',function () {
            let brands    =  $('#brands').val();
            $('#products').empty();
            if(jQuery.inArray('0',brands) !== -1){
                setTimeout(() => {
                    $('.brands').find('.brands-list').each(function() {
                        if($(this).attr('value') != 0){
                            $(this).removeClass('selected');
                            $(this).attr('selected',false);
                        }
                    });
                    $('.brands .fs-label').text('All Brands');
                    $('#brands').val('0');
                }, 100);
                LoadBrandsProducts()
            }else{
                LoadBrandsProducts()
            }
        })

        $(document).on('change','#products',function () {
            let products    =  $('#products').val();
            if(jQuery.inArray('0',products) !== -1){
                setTimeout(() => {
                    $('.products').find('.products-list').each(function() {
                        if($(this).attr('value') != 0){
                            $(this).removeClass('selected');
                            $(this).attr('selected',false);
                        }
                    });
                    $('.products .fs-label').text('All Sub Categories');
                    $('#products').val('0');
                }, 100);
            }
        })




        function http(type, url, formData) {
            var self = this;
            return new Promise(function(resolve, reject) {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    url: url,
                    type: type,
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(e) {
                        resolve(e);
                    },
                    error: function(err) {
                        console.log(err);
                        if (err.status == 422 || err.status == 500) {
                            self.notification('error', 'Some Error Occured, please try again.');
                        }
                    }
                });
            });
        }
        (function($) {
            $(function() {
                window.fs_test = $('.reports-select').fSelect();
            });
        })(jQuery);

    </script>
@endsection