@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">Segment Channel Sales <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('segment-channel-sales-report.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">
                                    <div class="custom-control custom-radio">
                                        <input  class="custom-control-input date-filter" type="radio" name="date_type" id="date_monthly" value='monthly' checked>
                                        <label class="custom-control-label font13 pt-3" for="date_monthly">Monthly</label>
                                    </div>
                                </div>
                                <div class="col-auto mt-auto mb-auto pr-400">
                                    <div class="custom-control custom-radio">
                                        <input  class="custom-control-input date-filter" type="radio" name="date_type" id="date_daily" value='daily'>
                                        <label class="custom-control-label font13 pt-3" for="date_daily">Daily</label>
                                    </div>
                                </div>
                                <div class="col-auto mt-auto mb-auto pr-400">
                                    <label class="font13 pt-3 dateInput-lable" style="margin:auto!important">Choose Month</label>
                                </div>
                                <div class="col-3">
                                    <input type="text" id="date-picker-month" name="date" class="form-control date" autocomplete="off" placeholder="">
                                    <input type="text" style="display: none" id="date-picker-day" name="" class="form-control date datepicker" autocomplete="off" placeholder="">
                                </div>
                            </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" 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="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() {
        
            $('.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
                let date_type = $("input[name='date_type']:checked").val();
                if(date_type == "monthly"){
                    if(!$('#date-picker-month').val()){
                        isValid = false;
                        jq_msg += "<li>Date field is missing.</li>";
                    }
                }
                if(date_type == "daily"){
                    if(!$('#date-picker-day').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() == ''  && ['EmployeeWise','DistributorWise','SegmentWise'].includes($("input[name='team_criteria']:checked").val()) ){
                    isValid = false;
                    jq_msg += "<li>Distributor field is missing.</li>";
                }
                if($('#segments').val() == ''  && ['SegmentWise'].includes($("input[name='team_criteria']:checked").val()) ){
                    isValid = false;
                    jq_msg += "<li>Segment 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($('#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>";
                }

                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(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)
            });
        });
        var dateInput = $('#date-picker-month');
        dateInput.datepicker({
            format: 'M-yyyy',
            viewMode: "months",
            minViewMode: "months"
        }).on('changeMonth', function(e) {
            $(this).datepicker('hide');
        });
        $(document).on('click','.date-filter',function () {
            dateInput.datepicker('remove');
            $('.date').val("");
            $("#date-picker-day").hide().removeAttr('name');
            if($(this).val() == 'monthly'){
                $("#date-picker-month").show().attr('name','date');
                $('.dateInput-lable').html("Choose Month");
                dateInput.datepicker({
                    format: 'M-yyyy',
                    viewMode: "months",
                    minViewMode: "months"
                }).on('changeMonth', function(e) {
                    $(this).datepicker('hide');
                });
            }
            if($(this).val() == 'daily'){
                $("#date-picker-month").hide().removeAttr('name');
                $("#date-picker-day").show().attr('name','date');
                $('.dateInput-lable').html("Choose Date");
                // dateInput.datepicker({
                //     format: 'd-M-yyyy',
                //     viewMode: "days",
                //     minViewMode: "days"
                // }).on('changeDate', function(e) {
                //     $(this).datepicker('hide');
                // });
            }
        });

        let distributors_list =  [];
        let orderbookers_list =  [];
        let Dataterritories   =  JSON.parse('{!! json_encode(removeApostrophes($territories)) !!}') ;
        let Dataareas         =  JSON.parse('{!! json_encode(removeApostrophes($areas)) !!}') ;
        let channels          =  JSON.parse('{!! json_encode(removeApostrophes($channels)) !!} ');
        let regionsoptions    =  [];
        let distributoroptions=  [];
        let orderbookeroptions=  [];
        function ReportData(){
            this.data = [];
        }
        var reportData = new ReportData();
        $(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>`);
            });
            $('.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 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