@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;
        }
        .duration-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">Classification 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('classification-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>Duration  <span> Filter </span></h2>
                        </div>
                        <div class="assCatalogue-radio PT-10 PB-10">
                            <div class="row m-0">
                                <div class="col-auto font13 mt-auto mb-auto ml-5"> Select Criteria</div>
                                <div class="col-3 duration-monthly">
                                    <div class="form-s2">
                                        <select class="form-control formselect" placeholder="select" id="criteria_id" name="criteria_id">
                                            <option value=""> Select Criteria </option>
                                            @foreach($classificationCriterias as $criteria)
                                                <option value="{{$criteria->id}}"> {{$criteria->title}} </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>


                            </div>


                        </div>


                        <div class="header RrulesHeading mt-15">
                            <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 duration-filter" type="radio" name="duration_type" id="duration_monthly" value='monthly'>
                                        <label class="custom-control-label font13 pt-3" for="duration_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 duration-filter" type="radio" name="duration_type" id="duration_quarterly" value='quarterly'>
                                        <label class="custom-control-label font13 pt-3" for="duration_quarterly">Quarterly</label>
                                    </div>
                                </div>
                                <div class="col-auto mt-auto mb-auto pr-400">
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input duration-filter" type="radio" name="duration_type" id="duration_half_yearly" value='half_yearly'>
                                        <label class="custom-control-label font13 pt-3" for="duration_half_yearly"> Half Yearly </label>
                                    </div>
                                </div>
                                <div class="col-auto mt-auto mb-auto pr-400">
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input duration-filter" type="radio" name="duration_type" id="duration_yearly" value='yearly'>
                                        <label class="custom-control-label font13 pt-3" for="duration_yearly"> Yearly </label>
                                    </div>
                                </div>

                                <div class="col-auto font13 mt-auto mb-auto ml-5 dateFrom-label">Select Month</div>
                                <div class="col-3">
                                    <input type="text" id="dateFrom" name="dateFrom" class="form-control" autocomplete="off" placeholder="">
                                </div>

                                {{-- Begin::duration-monthly --}}
                                <div class="col-2 duration-criteria duration-monthly">
                                    <div class="form-s2">
                                        <select class="form-control formselect duration-criteria1" placeholder="select" id="duration-monthly" name="duration_monthly">
                                            <option value="classification_slab_current_1_month"> 1 Month </option>
                                            <option value="classification_slab_last_3_months"> 3 Month </option>
                                            <option value="classification_slab_last_6_months"> 6 Month </option>
                                            <option value="classification_slab_last_9_months"> 9 Month </option>
                                            <option value="classification_slab_last_12_months"> 12 Month </option>
                                        </select>
                                    </div>
                                </div>
                                {{-- End::duration-monthly --}}


                                {{-- Begin::duration-quarterly --}}
                                <div class="col-2 duration-criteria duration-quarterly">
                                    <div class="form-s2">
                                        <select class="form-control formselect duration-criteria1" placeholder="select" id="duration-quarterly" name="duration_quarterly">
                                            <option value="classification_slab_q1"> Q1 </option>
                                            <option value="classification_slab_q2"> Q2 </option>
                                            <option value="classification_slab_q3"> Q3 </option>
                                            <option value="classification_slab_q4"> Q4 </option>
                                        </select>
                                    </div>
                                </div>
                                {{-- End::duration-quarterly --}}



                                {{-- Begin::duration-half_yearly --}}
                                <div class="col-2 duration-criteria duration-half_yearly ">
                                    <div class="form-s2">
                                        <select class="form-control formselect duration-criteria1" placeholder="select" id="duration-half_yearly" name="duration_half_yearly">
                                            <option value="classification_slab_h1"> H1 </option>
                                            <option value="classification_slab_h2"> H2 </option>
                                        </select>
                                    </div>
                                </div>
                                {{-- End::duration-half_yearly --}}


                            </div>


                        </div>

                        <div class="row">
                            <div class="col-12">
                                <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;

                if($('#criteria_id').val() == ''){
                    isValid = false;
                    jq_msg += "<li>Please select criteria.</li>";
                }

                let duration_type = $("input[name='duration_type']:checked").val();
                if(duration_type == 'monthly'){
                    if($('#duration-monthly').val() == ''){
                        isValid = false;
                        jq_msg += "<li>Select month.</li>";
                    }
                }
                if(duration_type == 'quarterly'){
                    if($('#duration-quarterly').val() == ''){
                        isValid = false;
                        jq_msg += "<li>Select quarter.</li>";
                    }
                }
                if(duration_type == 'half_yearly'){
                    if($('#duration-half_yearly').val() == ''){
                        isValid = false;
                        jq_msg += "<li>Select half yearly.</li>";
                    }
                }

                //Date Filter
                if(!$('#dateFrom').val()){
                    isValid = false;
                    jq_msg += "<li>Date field 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);
                }
            });



        });


        $('#dateFrom').datepicker({
            format: 'M-yyyy',
            viewMode: "months",
            minViewMode: "months"
        }).on('changeDate', function(e) {
            $(this).datepicker('hide');
        });
        let distributors_list =  [];
        let orderbookers_list =  [];
        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 loadDurationCriteria(duration_criteria){
            $('.duration-criteria').hide();
            $('.duration-criteria1').prop('disabled',true);
            $('#dateFrom').val('');
            $('.dateFrom-label').text('Select Year');
            $('#dateFrom').datepicker('destroy').datepicker({
                format: 'yyyy',
                viewMode: "years",
                minViewMode: "years"
            }).on('changeDate', function(e) {
                $(this).datepicker('hide');
            });
            if(duration_criteria == 'monthly'){
                $('.dateFrom-label').text('Select Month');
                $('.duration-monthly').show();
                $('#duration-monthly').prop('disabled',false);
                $('#dateFrom').datepicker('destroy').datepicker({
                    format: 'M-yyyy',
                    viewMode: "months",
                    minViewMode: "months"
                }).on('changeDate', function(e) {
                    $(this).datepicker('hide');
                });
            }
            else if(duration_criteria == 'quarterly'){
                $('.duration-quarterly').show();
                $('#duration-quarterly').prop('disabled',false);
            }
            else if(duration_criteria == 'half_yearly'){
                $('.duration-half_yearly').show();
                $('#duration-half_yearly').prop('disabled',false);

            }
        }
        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','.duration-filter',function () {
            if($(this).is(':checked')){
                loadDurationCriteria($(this).val());
            }
        });
        $(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(){
            $(`#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();

                $(`.duration-criteria1`).prop('disabled', false);
                $(`.duration-filter`).prop('checked', false);
                $(`#duration_monthly`).prop('checked', true);
                loadDurationCriteria('monthly');
            });
        })(jQuery);

    </script>
@endsection