@extends('layout.index')
@section('title', 'FE Offline Report')

<!-- Dashboard Ecommerce start -->
@section('content')
<style>
    .dropdown-menu{
        z-index: 9999;
    }
</style>
<script src="src/js/filters.js"></script>
<section>
    <div class="content-header row">
        <div class="content-header-left col-md-8 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12 d-flex">
                    <h2 class="content-header-title float-start mb-0">FE Offline Report</h2>
                </div>
            </div>
        </div>
    </div>       
  </section>
    <section>
        @if ($message = Session::get('success'))
            <div class="demo-spacing-0 mb-1">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        <i class="fa fa-check-circle" style="font-size:16px;" aria-hidden="true"></i>
                        {{ $message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @elseif ($message = Session::get('error'))
            <div class="demo-spacing-0 mb-1">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                        {{ $message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @endif
     
        <div class="content-body">
            <!-- Bordered table start -->
            <div class="row" id="table-bordered">
                <div class="col-12">
                  
                    <form class="dt_adv_search" action="" method="POST"  enctype="multipart/form-data">
                        <input type="hidden" name="form_type" value="fe_offline_data">
                        @csrf
                        <div class="card mb-1" style="border-radius:15px;">
                            <div class="card-body" style="padding: 0.5rem 0.5rem">
                                
                                <div class="row justify-content-between mx-1">
                                    <div class="col-sm-3 mt-1">   
                                        <div class="form-group">
                                            <label class="form-label text-primary" for="validationTooltip01"> Program Name <span style="color:red;">*</span></label>
                                            <select class="form-control form-select text-primary program_filter" id="program_id"  name='program_name' onchange="get_brands_filters(); get_FE();">
                                                                                            </select>
                                            <small class="text-danger" id="program_id_err"></small> 
                                        </div>
                                    </div>
                                    <div class="col-sm-3 mt-1">   
                                        <div class="form-group">
                                            <label class="form-label text-primary" for="validationTooltip01"> Brand Name <span style="color:red;">*</span></label>
                                            <select class="form-control form-select text-primary brand_filter" id="brand_id"  name='brand_name' onchange="get_season_filters(); get_FE();">
                                                <option value=''> Select Brand </option>
                                                                                            </select>
                                            <small class="text-danger" id="brand_id_err"></small> 
                                        </div>
                                    </div>
                                    <div class="col-sm-2 mt-1" >
                                        <div class="form-group mb-0">
                                            <lable class="text-primary"> Country <span style="color:red;">*</span></label> 
                                            <select class="text-primary form-control form-select country_filter" id="country_id" name='country' onchange="get_state_filters(); get_FE();">
                                                    <option value=''>Select Country</option>
                                                                                            </select>
                                            <small class="text-danger" id="country_id_err"></small> 
                                        </div>
                                    </div>
                                    <div class="col-sm-2 mt-1" >
                                        <div class="form-group mb-0">
                                            <lable class="text-primary"> States <span style="color:red;">*</span> </label>
                                            <select class="text-primary form-control form-select state_filter" id="state_id" name='state' onchange="get_district_filters(); get_FE();">
                                                <option value=''>Select State</option>
                                            </select>
                                            <small class="text-danger" id="state_id_err"></small> 
                                        </div>
                                    </div>
                                    <div class="col-sm-2 mt-1" >
                                        <div class="form-group mb-0">
                                            <lable class="text-primary"> Districts</label>
                                            <select class="text-primary form-control form-select district_filter" id="district_id" name='district' onchange="get_block_filters(); get_FE();">
                                                <option value='0'>Select Districts</option>
                                            </select>
                                            <small class="text-danger" id="district_id_err"></small> 
                                        </div>
                                    </div>
                                    <div class="col-sm-2 mt-1" >
                                        <div class="form-group mb-0">
                                            <lable class="text-primary"> Blocks</label>
                                            <select class="text-primary form-control form-select block_filter" id="chart_block" name='block' onchange="get_village_filters(); get_FE();">
                                                <option value='0'>Select Blocks</option>
                                                
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-2 mt-1" >
                                        <div class="form-group mb-0">
                                            <lable class="text-primary"> Villages</label>
                                            <select class="text-primary form-control form-select village_filter" id="chart_village" name='village'>
                                                <option value='0'>Select Villages</option>
                                                
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-2 col-12" >   
                                            <div class="form-group">
                                                <label class="form-label"> Field Executive </label>
                                                <select class="form-control form-select select2" id="feId" name='feId'>
                                                    <option value='0'>Select Field Executive</option>
                                                                                                    </select>
                                                <h5 class="mt-1"><small class="text-danger" id="feId_err"></small></h5>
                                                @error('feId')
                                                    <span class="error" style="color:red;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                 
                                    <div class="col-sm-2 mt-1 pull-right">
                                        <div class="form-group mb-0">
                                            <label><br></label>
                                            <button type="submit" name="button" value="export_data" class="btn btn-primary waves-effect waves-float waves-light w-100" onclick="return check_value(); ">Export</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- Bordered table end -->
        </div>
        <input type="hidden" id="pageName" value="download_field_executive_report">
    </section>
    <script>
        $(document).ready(function() {
            get_brands_filters();
            get_FE();
            // var country_id = $('#country_id').val();
            // if(country_id != 0)
            // {
            //     get_state();
            //     get_district();
            //     get_block();
            //     get_village();
            // }    
        })
    </script>
@endsection

<script>
    var aUserDetails = [];
    var aPBRMapping = [];
    var a_program=[];
    var a_brand=[];
    var a_season = [];
    var a_country = [];
    var a_states = [];
    var a_districts = [];
    var a_block = [];
    var a_village = [];
    var currentSeason=null;
    var aFE = [];

  
    function get_FE() {

        var countryId  = $('#country_id').val() || 0;
        var stateId    = $('#state_id').val() || 0;
        var districtId = $('#district_id').val() || 0;
        var blockId    = $('#chart_block').val() || 0;
        var villageId  = $('#chart_village').val() || 0;

        var s_fe_options = '<option value="0">Select Field Executive</option>';

        aFE.forEach(function (fe_obj) {

            let showFE = true;

            // apply filter only when any location is selected
            if (countryId != 0 || stateId != 0 || districtId != 0 || blockId != 0 || villageId != 0) {

                showFE =
                    (countryId == 0  || fe_obj.country_id  == countryId) &&
                    (stateId == 0    || fe_obj.state_id    == stateId) &&
                    (districtId == 0 || fe_obj.district_id == districtId) &&
                    (blockId == 0    || fe_obj.block_id    == blockId) &&
                    (villageId == 0  || fe_obj.village_id  == villageId);
            }

            if (showFE) {
                s_fe_options +=
                    '<option value="' + fe_obj.id + '" country_id="' + fe_obj.country_id + '">' +
                    fe_obj.firstname + ' ' + fe_obj.lastname +
                    '</option>';
            }
        });

        $('#feId').html(s_fe_options);
    }


    function check_value() {
        let isValid = true;

        if ($('#country_id').val() == "") {
            $('#country_id').parent().addClass('has-error');
            $('#country_id_err').html('Please Select Country Name.');
            $('#country_id').focus();
            $('#country_id').on('click', function () {
                $('#country_id').parent().removeClass('has-error');
                $('#country_id_err').html('');
            });
            isValid = false;
        }
      
        

        if ($('#brand_id').val() == "") {
            $('#brand_id').parent().addClass('has-error');
            $('#brand_id_err').html('Please Select Brand Name.');
            $('#brand_id').focus();
            $('#brand_id').on('click', function () {
                $('#brand_id').parent().removeClass('has-error');
                $('#brand_id_err').html('');
            });
            isValid = false;
        }

        if ($('#program_id').val() == "") {
            $('#program_id').parent().addClass('has-error');
            $('#program_id_err').html('Please Select Program Name.');
            $('#program_id').focus();
            $('#program_id').on('click', function () {
                $('#program_id').parent().removeClass('has-error');
                $('#program_id_err').html('');
            });
            isValid = false;
        }

        if ($('#state_id').val() == "" || $('#state_id').val() == "0") {
            $('#state_id').parent().addClass('has-error');
            $('#state_id_err').html('Please Select state.');
            $('#state_id').focus();
            $('#state_id').on('click', function () {
                $('#state_id').parent().removeClass('has-error');
                $('#state_id_err').html('');
            });
            isValid = false;
        }
        

        return isValid ;
    } 

    function change_country(){
        var country_id = $('#country_id').val();
        get_state();
        get_district();
        get_block();
        get_village();
    }
  
     
    function get_state() {
      
            // var val='chart_'+j+'_country';
            var country_id = $('#country_id').val();
           
            s_states_options = '<option value="" >Select State</option>'
            $.each(a_states, function(key, state_obj) {
                
                if (country_id != 0 && state_obj.country_id == country_id) {
                    
                    s_states_options += '<option value=' + state_obj.id + ' country_id='+state_obj.country_id+' >' + state_obj.state_name + '</option>'
                }
                // else if (country_id == 0) {
                //     s_states_options += '<option value=' + state_obj.id + ' country_id='+state_obj.country_id+' >' + state_obj.state_name + '</option>'
                // }
            })
            $('#state_id').html(s_states_options);
    }

    function get_district() {
     
        var country_id = parseInt($('#country_id').val());
        var state_id = parseInt($('#state_id').val());
       
        var selectedCountry=country_id;
        
        s_district_options = '<option value="0" >Select District</option>';
       
        $.each(a_districts, function(key, district_obj) {
           

            if(country_id != 0 || state_id != 0 ){
             
                if(state_id != 0){
                    if(district_obj.country_id == selectedCountry && district_obj.state_id == state_id){
                        s_district_options += '<option value=' + district_obj.id + ' country_id='+district_obj.country_id+' >' + district_obj.district_name +
                    '</option>'
                    }
                }else if(country_id != 0 && state_id != 0){
                    if( district_obj.country_id == country_id){
                        s_district_options += '<option value=' + district_obj.id + ' country_id='+district_obj.country_id+' >' + district_obj.district_name +
                    '</option>'
                    }
                }

            }
            // else{
            //     s_district_options += '<option value=' + district_obj.id + '  country_id='+district_obj.country_id+'>' + district_obj.district_name +
            //         '</option>'
            // }
        })
        
        $('#district_id').html(s_district_options);
    }

    function get_block() {
        var country_id = $('#country_id').val();
        var state_id = $('#state_id').val();
        var district_id = $('#district_id').val();

        var selectedCountry = country_id;
        
        s_block_options = '<option value="0" >Select Block</option>'
        $.each(a_block, function(key, block_obj) {

            if(country_id != 0 || state_id != 0 || district_id != 0){
                if(district_id != 0){
                if(block_obj.country_id == selectedCountry && block_obj.district_id == district_id ){
                        s_block_options += '<option value=' + block_obj.id + ' country_id='+block_obj.country_id+' >' + block_obj.block_name +
                    '</option>'
                    }
                }else if(state_id != 0 && district_id != 0){
                
                if(block_obj.country_id == selectedCountry && block_obj.state_id == state_id ){
                        s_block_options += '<option value=' + block_obj.id + ' country_id='+block_obj.country_id+' >' + block_obj.block_name +
                    '</option>'
                    }
                }else if(country_id != 0 && state_id != 0 && district_id != 0){
                    if( block_obj.country_id == country_id){
                    
                        s_block_options += '<option value=' + block_obj.id + ' country_id='+block_obj.country_id+' >' + block_obj.block_name +
                    '</option>'
                    }
                }
            }
            // else{
            //     s_block_options += '<option value=' + block_obj.id + '  country_id='+block_obj.country_id+'>' + block_obj.block_name +
            //         '</option>'
            // }
            
        })
        $('#chart_block').html(s_block_options);

    }

    function get_village() {
        var country_id = $('#country_id').val();
        var state_id = $('#state_id').val();
        var district_id = $('#district_id').val();
        var block_id = $('#chart_block').val();
      
        var selectedCountry = country_id;
      
        if(block_id > 0){
            var country_id = $('#chart_block option:selected').attr('country_id');

            $.each(a_block, function(key, block_obj) {
                if (block_obj.id == block_id && block_obj.country_id == country_id) {
                    selectedCountry = block_obj.country_id;
                    return false; // Exit the loop early since we found the district
                }
            });
        }    
        
        s_village_options = '<option value="0" >Select Villages</option>'
        $.each(a_village, function(key, village_obj) {

            if(country_id != 0 || state_id != 0 || district_id != 0 || block_id !=0){

                if(block_id != 0){
                    if(village_obj.country_id == selectedCountry && village_obj.block_id == block_id ){
                        s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+'>' + village_obj.village_name +
                    '</option>'
                    }
                }else if(district_id != 0 && block_id != 0){
                    if(village_obj.country_id == selectedCountry && village_obj.district_id == district_id ){
                        s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+'>' + village_obj.village_name +
                    '</option>'
                    }
                }else if(state_id != 0 && district_id != 0 && block_id != 0){
                
                    if(village_obj.country_id == selectedCountry && village_obj.state_id == state_id ){
                        s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+'>' + village_obj.village_name +
                    '</option>'
                    }
                }else if(country_id != 0 && state_id != 0 && district_id != 0 && block_id != 0){
                    if( village_obj.country_id == country_id){
                   
                    s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+'>' + village_obj.village_name +
                    '</option>'
                    }
                }
            
            }
            // else{
            //     s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+'>' + village_obj.village_name +
            //         '</option>'
            // }
            
        }) 
        // console.log(s_village_options)
        $('#chart_village').html(s_village_options);

    }
</script>