@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;
        }
        .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">Product Sales By Retails Outlet <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('product-sales-by-retail-outlets.export') }}" 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">
                                    <label class=" font13 pt-3">Start Date</label>
                                </div>
                                <div class="col-3">
                                    <input type="text" id="start_date" name="start_date" class="form-control" autocomplete="off" placeholder="">
                                </div>
                                <div class="col-auto  mt-auto mb-auto pr-400">
                                    <label class=" font13 pt-3">End Date</label>
                                </div>
                                <div class="col-3">
                                    <input type="text" id="end_date" name="end_date" class="form-control" autocomplete="off" placeholder="">
                                </div>
                            </div>
                        </div>


                        <div class="header RrulesHeading mt-15">
                            <h2>Sales    <span>Metric</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_div" value='0'>
                                        <label class="custom-control-label font13 pt-3" for="product_criteria_div">Division</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_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 divisions"> Divisions</div>
                                <div class="col  product-criteria divisions">
                                    <div class="form-s2">
                                        <select class="reports-select" id="divisions" name="divisions[]" multiple="multiple">
                                        </select>
                                    </div>
                                </div>
                                {{-- End::main category --}}



                                {{-- 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="row">
                            <div class="col-12">
                                <div class="header RrulesHeading mt-15">
                                    <h2>Segment  <span>Criteria</span></h2>
                                </div>
                                <div class="row m-0 PB-15">
                                    <div class="col-4 pr-0 segments">
                                        <label class="font12 mb-5">Select Segments</label>
                                        <div class="form-group" style="height: auto">
                                            <select  class="reports-select segmentFilter" id="segments" name="segments[]"  multiple="multiple">
                                                <option class=" segments-list-all" value="0">All Segments</option>
                                                @foreach($segments as $segment)
                                                    <option class="segments-list" value="{{$segment->id}}">{{$segment->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4 channels">
                                        <label class="font12 mb-5">Select Channels</label>
                                        <div class="form-group" style="height: auto">
                                            <select class="reports-select segmentFilter" id="channels" name="channels[]" multiple="multiple">
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </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 data-show=".regions, .distributors, .bookers" 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 data-show=".regions, .distributors" 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 class="col-auto mt-auto mb-auto pr-400">
                                            <div class="custom-control custom-radio">
                                                <input data-show=".regions, .areas, .territories, .distributors" class="custom-control-input team_criteria" type="radio" name="team_criteria" id="byterritory" value='TerritoryWise'>
                                                <label class="custom-control-label font13 pt-3" for="byterritory">By Territory</label>
                                            </div>
                                        </div>
                                        <div class="col-auto mt-auto mb-auto pr-400">
                                            <div class="custom-control custom-radio">
                                                <input data-show=".regions, .areas" class="custom-control-input team_criteria" type="radio" name="team_criteria" id="byarea" value='AreaWise'>
                                                <label class="custom-control-label font13 pt-3" for="byarea">By Area/Zone</label>
                                            </div>
                                        </div>
                                        <div class="col-auto mt-auto mb-auto pr-400">
                                            <div class="custom-control custom-radio">
                                                <input data-show=".regions" class="custom-control-input team_criteria" type="radio" name="team_criteria" id="byregion" value='RegionWise'>
                                                <label class="custom-control-label font13 pt-3" for="byregion">By Region</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>
                                <div class="form-group" style="height: auto">
                                    <select  class="reports-select territoritorialFilter" id="regions" name="regions[]" multiple="multiple">

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


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

                            <div class="col-4 territories">
                                <label class="font12 mb-5">Select Territories</label>
                                <div class="form-group" style="height: auto">
                                    <select class="reports-select territoritorialFilter" id="territories" name="territories[]" multiple="multiple">
                                    </select>
                                </div>
                            </div>
                            <div class="col-4 pr-0 distributors">
                                <label class="font12 mb-5">Select Distributors</label>
                                <div class="form-group" style="height: auto">
                                    <select  class="reports-select territoritorialFilter" 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 territoritorialFilter" id="bookers" name="bookers[]" multiple="multiple">
                                    </select>
                                </div>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="header RrulesHeading mt-15">
                                    <h2>Sales  <span> Metrics</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="sales_metric" id="UnitSale" value='UnitSale'>
                                                <label class="custom-control-label font13 pt-3" for="UnitSale">Unit Sales</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="sales_metric" id="MasterPack" value='MasterPack'>
                                                <label class="custom-control-label font13 pt-3" for="MasterPack">Master Pack</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="sales_metric" id="GrossSaleValue" value='GrossSaleValue'>
                                                <label class="custom-control-label font13 pt-3" for="GrossSaleValue"> Gross Sale Value</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="sales_metric" id="NetRevenue" value='NetRevenue'>
                                                <label class="custom-control-label font13 pt-3" for="NetRevenue"> Net Revenue</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="sales_metric" id="All" value='All'>--}}
{{--                                                <label class="custom-control-label font13 pt-3" for="All"> All </label>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 jq_msg"> <!--- error message here ----> </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() {
            $('.regions,.areas,.territories,.distributors,.bookers').hide();
            $('.team_criteria').attr('checked',false);
            $('#SalesRep').attr('checked',true);
            let shw = $('#SalesRep').attr('data-show');
            $(shw).show();
            $('.jq_msg').fadeOut();
            let submit = false;
            $(document).on('click','.submit-btn',function() {

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

                //Date Filter
                if(!$('#start_date').val()){
                    isValid = false;
                    jq_msg += "<li>Start Month field is missing.</li>";
                }

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


                let product_criteria = $("input[name='product_criteria']:checked").val();
                if(product_criteria == '0'){
                    if($('#divisions').val() == ''){
                        isValid = false;
                        jq_msg += "<li>Divisons field  is missing.</li>";
                    }
                }
                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($('#segments').val() == ''){
                    isValid = false;
                    jq_msg += "<li>Segment field is missing.</li>";
                }
                if($('#channels').val() == ''){
                    isValid = false;
                    jq_msg += "<li>Channel 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($('#areas').val() == ''  && ['TerritoryWise'].includes($("input[name='team_criteria']:checked").val()) ){
                    isValid = false;
                    jq_msg += "<li>Area/Zone field is missing.</li>";
                }


                if($('#territories').val() == ''  && ['AreaWise','TerritoryWise'].includes($("input[name='team_criteria']:checked").val()) ){
                    isValid = false;
                    jq_msg += "<li>Territory field is missing.</li>";
                }

                if($('#distributors').val() == ''  && ['EmployeeWise','DistributorWise','TerritoryWise'].includes($("input[name='team_criteria']:checked").val()) ){
                    isValid = false;
                    jq_msg += "<li>Distributor field is missing.</li>";
                }
                if ($('#bookers').val() == '' && ['EmployeeWise'].includes($("input[name='team_criteria']:checked").val()) ){
                    isValid = false;
                    jq_msg += "<li>Order Booker field is missing.</li>";
                }
                if(isValid){
                    $("#coverage-report-form").submit();
                }else{
                    jQ_msg(jq_msg);
                }
            });

            $('#segments').val('0');
            $.when($('#segments').trigger('change')).then(function () {
                setTimeout(function () {
                    $('#channels').val('0');
                    $('#channels').trigger('change');
                },130)
            });
        });

        $('#start_date').datepicker({
            format: 'd-M-yyyy',
            viewMode: "days",
            minViewMode: "days"
        });


        $('#end_date').datepicker({
            format: 'd-M-yyyy',
            viewMode: "days",
            minViewMode: "days"
        });


        let distributors_list =  [];
        let orderbookers_list =  [];
        let Dataterritories   =  JSON.parse('{!! json_encode(removeApostrophes($territories)) !!}') ;
        let Dataareas         =  JSON.parse('{!! json_encode(removeApostrophes($areas)) !!}') ;
        let divisions         =  JSON.parse('{!! json_encode(removeApostrophes($divisions)) !!}') ;
        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 channels          =  JSON.parse('{!! json_encode(removeApostrophes($channels)) !!} ');
        let regionsoptions    =  [];
        let distributoroptions=  [];
        let orderbookeroptions=  [];
        function ReportData(){
            this.data = [];
        }
        var reportData = new ReportData();
        function loadProductCriteria(product_criteria){
            $('.product-criteria').hide();
            if(product_criteria == 0){
                $('#divisions').val(0);
                $('.divisions').show();
            }
            else if(product_criteria == 1){
                $('#categories').val(0);
                $('.categories').show();
            }
            else if(product_criteria == 2){
                $('#categories').val(0);
                $('#subcategories').val(0);
                $('.categories').show();
                $('.subcategories').show();
                $('#categories').trigger('change');
            }
            else if(product_criteria == 3){
                $('#brands').val(0);
                $('.brands').show();
            }
            else if(product_criteria == 4){
                $('#brands').val(0);
                $('#products').val(0);
                $('.brands').show();
                $('.products').show();
                $('#brands').trigger('change');
            }

            $('.reports-select').fSelect('reload');
        }
        $('.divisions').show();
        $(document).on('click','.product-criteria-radio',function () {
            if($(this).is(':checked')){
                loadProductCriteria($(this).val());
            }
        });
        $(document).on('click','.team_criteria',function () {
            $('.regions,.areas,.territories,.distributors,.bookers').hide();
            let shw = $(this).attr('data-show');
            $(shw).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);
                            });
                        });
                    });
                }
                SetDefaultDropDown();
            });
        }
        GetEmployeeLinePermissions();
        function SetDefaultDropDown(){
            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>`);
            });

            $(`#divisions`).empty();
            if(divisions && divisions.length){
                $(`#divisions`).html(`<option selected="selected" value="0">All Divisions</option>`);
                divisions.forEach(element => {
                    $(`#divisions`).append(`<option class="divisions-list" value="${element.id}">${element.division}</option>`);
                });
                $('#divisions').fSelect('reload');
            }

            $(`#categories`).empty();
            if(categories && categories.length){
                $(`#categories`).html(`<option selected="selected" 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 selected="selected" 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 LoadAreasByRegion(){
            areasoptions  =  [];
            var regions         =  $('#regions').val();
            $(`#territories`).empty();
            if(regions && regions.length){
                $(`#areas`).html(`<option class=" areas-list-all" value="0">All Areas</option>`);
                var areas    =   Dataareas.filter(x=> ( regions.map(Number).includes(x.region_id) || regions.map(Number).includes(0) ));
                areas.forEach(element => {
                    areasoptions.push(element.id);
                    $(`#areas`).append(`<option class="areas-list" value="${element.id}">${element.area_name}</option>`);
                });
            }
            $('.reports-select').fSelect('reload');
        }
        function LoadTerritoriesByArea(){
            territoriesoptions  =  [];
            var regions         =  $('#regions').val();
            var areas           =  $('#areas').val();
            $(`#territories`).empty();
            if(areas && areas.length){
                $(`#territories`).html(`<option class=" territories-list-all" value="0">All territories</option>`);
                var territories    =   Dataterritories.filter(x=> ( (regions.map(Number).includes(x.region_id) || regions.map(Number).includes(0)) && (areas.map(Number).includes(x.area_id) || areas.map(Number).includes(0)) ));
                territories.forEach(element => {
                    territoriesoptions.push(element.id);
                    $(`#territories`).append(`<option class="territories-list" value="${element.id}">${element.territory_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');
        }

        function LoadChannelBySegments(){
            orderbookeroptions      =  [];
            $(`#channels`).empty();
            var segments            =  $('#segments').val();
            if(segments && segments.length){
                $(`#channels`).html(`<option class="channel-list-all"  value="0">All Channels</option>`);
                var selectedChannels     =   channels.filter(x=> ( segments.map(Number).includes(x.segment_id) || segments.map(Number).includes(0) ));
                console.log(selectedChannels);
                debugger
                selectedChannels.forEach(channel => {
                    $(`#channels`).append(`<option class="channels-list" value="${channel.id}">${channel.retailer_type_name}</option>`);
                });
                if(!selectedChannels?.length){
                    $(`#channels`).empty();
                }
            }
            $('.reports-select').fSelect('reload');
        }

        $(document).on('change','#segments',function () {
            let segments    =  $('#segments').val();
            $('.segments-list').attr('disabled',false);
            if(jQuery.inArray('0',segments) !== -1){
                setTimeout(() => {
                    $('.segments').find('.segments-list').each(function() {

                        if($(this).attr('value') != 0){
                            $(this).removeClass('selected');
                            $(this).attr('selected',false);
                            $(this).attr('disabled',true);
                        }
                    });
                    $('.segments .fs-label').text('All Segments');
                    $('#segments').val('0');
                    LoadChannelBySegments();
                }, 100);
            }else{
                LoadChannelBySegments();
            }
        })

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

        $(document).on('change','#regions',function () {
            let regions    =  $('#regions').val();
            $(`#distributors`).empty();
            $(`#bookers`).empty();
            $(`#areas`).empty();
            $(`#territories`).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();
                    LoadAreasByRegion();
                }, 100);
            }else{
                LoadDistributorsByRegion();
                LoadAreasByRegion();
            }
        })
        $(document).on('change','#areas',function () {
            let areas    =  $('#areas').val();
            $(`#terrotories`).empty();
            if(jQuery.inArray('0',areas) !== -1){
                setTimeout(() => {
                    $('.areas').find('.areas-list').each(function() {
                        if($(this).attr('value') != 0){
                            $(this).removeClass('selected');
                            $(this).attr('selected',false);
                        }
                    });
                    $('.areas .fs-label').text('All areas');
                    $('#areas').val('0');
                    LoadTerritoriesByArea();
                }, 100);
            }else{
                LoadTerritoriesByArea();
            }
        })
        $(document).on('change','#terrotories',function () {
            let terrotories    =  $('#terrotories').val();
            if(jQuery.inArray('0',terrotories) !== -1){
                setTimeout(() => {
                    $('.terrotories').find('.terrotories-list').each(function() {
                        if($(this).attr('value') != 0){
                            $(this).removeClass('selected');
                            $(this).attr('selected',false);
                        }
                    });
                    $('.terrotories .fs-label').text('All Terrotories');
                    $('#terrotories').val('0');
                }, 100);
            }
        })
        $(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 selected="selected"  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','#divisions',function () {
            let divisions    =  $('#divisions').val();
            if(jQuery.inArray('0',divisions) !== -1){
                setTimeout(() => {
                    $('.divisions').find('.divisions-list').each(function() {
                        if($(this).attr('value') != 0){
                            $(this).removeClass('selected');
                            $(this).attr('selected',false);
                        }
                    });
                    $('.divisions .fs-label').text('All Divisions');
                    $('#divisions').val('0');
                }, 100);
            }
        })
        $(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 selected="selected" 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 Products');
                    $('#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