@extends('layout.index')
@section('title', 'Farmer Verification Dashboard')

<!-- Dashboard Ecommerce start -->
@section('content')
<style>
    .gm-style-cc {
        display: none;
    }
    .legend {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .highcharts-breadcrumbs-group {
        display: none;
    }
    #multiple-column-form .card-body h5 {
    /* min-height: 35px;*/
    }
    h5 {
        font-weight: bold;
    }

    .count-card label {
        min-height: 40px;
    }
</style>
<script src="src/js/filters.js"></script>
<section>
    <div class="content-body">
        <section id="multiple-column-form">
            <div class="row justify-content-center">
                <div class="col-sm-12">
                    <form method="post">
                        @csrf
                        <input type="hidden" name="formType" value="farmer_verification_filters">
                        <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-md-2">
                                        <div class="form-group mb-0">
                                            <label class="text-primary">Program</label>
                                            <select class="text-primary form-control form-select program_filter" id="programId" name='programId' onchange="get_brands_filters()">
                                                <option value='0'>All Program</option>
                                                @foreach($aProgram as $item)
                                                <option value="{{$item->id}}" {{($programId==$item->id) ? 'selected' : ''}}>{{$item->program_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group mb-0">
                                            <label class="text-primary">Brand</label>
                                            <select class="text-primary form-control form-select brand_filter" id="brandId" name='brandId' onchange="get_country_filters()">
                                                <option value='0'>All Brand</option>
                                                @foreach($aBrand as $item)
                                                <option value="{{$item->id}}" {{($brandId==$item->id) ? 'selected' : ''}}>{{$item->brand_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group mb-0">
                                            <label class="text-primary">Country</label>
                                            <select class="text-primary form-control form-select country_filter" id="countryId" name='countryId' onchange="country_change(); get_state_filters();">
                                                @foreach($aCountry as $item)
                                                <option value="{{$item->id}}" {{($countryId==$item->id) ? 'selected' : ''}}>{{$item->country_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group mb-0">
                                            <label class="text-primary">State</label>
                                            <select class="text-primary form-control form-select state_filter" id="stateId" name='stateId' onchange="state_change(); get_district_filters();">
                                                <option value='0'>All State</option>
                                                @foreach($aState as $item)
                                                <option value="{{$item->id}}" {{($stateId==$item->id) ? 'selected' : ''}}>{{$item->state_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group mb-0">
                                            <label class="text-primary">PG Name</label>
                                            <select class="text-primary form-control form-select" id="pgCode" name='pgCode'onchange=" pg_change()">
                                                <option value='0'>All PG's</option>
                                                @foreach($aPg as $item)
                                                <option value="{{$item->pgCode}}" {{($pgCode==$item->pgCode) ? 'selected' : ''}}>{{$item->pgName}} ({{$item->pgCode}})</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group mb-0">
                                            <label class="text-primary">District</label>
                                            <select class="text-primary form-control form-select district_filter" id="districtId" name='districtId' onchange="district_change(); ">
                                                <option value='0'>All District</option>
                                                @foreach($aDistrict as $item)
                                                <option value="{{$item->id}}" {{($districtId==$item->id) ? 'selected' : ''}}>{{$item->district_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2 mt-1">
                                        <div class="form-group mb-0">
                                            <label class="text-primary">Village</label>
                                            <select class="text-primary form-control form-select village_filter" id="villageId" name='villageId'>
                                                <option value='0'>All Villages</option>
                                                @foreach($aVillage as $item)
                                                <option value="{{$item->id}}" {{($villageId==$item->id) ? 'selected' : ''}}>{{$item->village_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2 mt-1">
                                        <div class="form-group mb-0">
                                            <label class="text-primary">From Date</label>
                                            <input class="text-primary form-control" type="date" id="fromDate" name="fromDate" value="{{$fromDate}}">
                                        </div>
                                    </div>
                                    <div class="col-md-2 mt-1">
                                        <div class="form-group mb-0">
                                            <label class="text-primary">To Date</label>
                                            <input class="text-primary form-control" type="date" id="toDate" name="toDate" value="{{$toDate}}">
                                        </div>
                                    </div>
                                    <div class="col-md-2 mt-1">
                                        <div class="form-group mb-0">
                                            <label><br></label>
                                            <button type="button" name="button" value="Search" class="btn btn-primary waves-effect waves-float waves-light w-100" onclick="get_farmer_verification_dashboard()"><i class="fa fa-search"></i> Search</button>
                                        </div>
                                    </div>
                                    <div class="col-md-4"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>

    <div class="content-body">
        <section class="count-card">
            <div class="row justify-content-center">
                <div class="col-sm-2">
                    <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-md-12">
                                    <div class="form-group mb-0">
                                        <label class="text-primary">Total number of farmers</label>
                                        <h1 id="farmerToVerify">{{$aVerificationStatus['farmerToVerify']}}</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <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-md-12">
                                    <div class="form-group mb-0">
                                        <label class="text-primary">Farmers verified (as per the escalation matrix)</label>
                                        <h1 id="verifiedFarmer">{{$aVerificationStatus['verifiedFarmer']}}</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <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-md-12">
                                    <div class="form-group mb-0">
                                        <label class="text-primary">Verification not yet started</label>
                                        <h1 id="pendingVerification">{{$aVerificationStatus['pendingVerification']}}</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <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-md-12">
                                    <div class="form-group mb-0">
                                        <label class="text-primary">Verification in progress</label>
                                        <h1 id="inprogressFarmer">{{$aVerificationStatus['inprogressFarmer']}}</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <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-md-12">
                                    <div class="form-group mb-0">
                                        <label class="text-primary">Farmers/verification rejected - FE</label>
                                        <!-- <h1 id="rejectedFarmer">{{$aVerificationStatus['rejectedFarmer']}}</h1> -->
                                        <h1 id="farmerSaidNo">-</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <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-md-12">
                                    <div class="form-group mb-0">
                                        <label class="text-primary">Verified: Farmers growing cotton</label>
                                        <h1 id="verifiedCottonGrowers">{{$aVerificationStatus['verifiedCottonGrowers']}}</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="content-body">
        <section class="count-card">
            <div class="row justify-content-center">
                <div class="col-sm-12">
                    <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-md-12">
                                    <div class="form-group mb-0">
                                        <div id="container" style="height: 400px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <input type="hidden" id="pageName" value="verification_dashboard">
</section>

<!-- Modal -->
<div class="modal fade" id="userStatusModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userStatusModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">
                        <input id="category" name="category" value="" type="hidden">
                        <button type="button" class="btn btn-primary mb-1 pull-right" onclick="export_show_user_status()">Export</button>
                    </div>
                    <div class="col-12">
                        <div class="table-responsive" id="userStatusModalBody">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id='loader_outer'>
    <div id='loader' ></div>
</div>

<script src="https://code.highcharts.com/highcharts.js"></script>

<script>
    var a_brand=[];
    var a_program=[];
    var a_country = [];
    var a_states = [];
    var a_districts = [];
    var a_village = [];
    
    var aCountry = null;
    var aState = null;
    var aDistrict = null;
    var a_season = [];
    var aVillage = null;
    var aPg = null;
    var aPBRMapping = [];
    var aUserDetails = [];

    var programId = null;
    var brandId = null;
    var countryId = null;
    var stateId = null;
    var pgCode = null;
    var districtId = null;
    var villageId = null;
    
    $( document ).ready(function() {
        get_brands_filters();
        country_change();
        get_farmer_verification_dashboard();
        // setInterval(get_farmer_verification_dashboard, 60000);
    });

    function program_change(){

    }

    function brand_change(){

    }

    function country_change(){
        let countryId = $('#countryId').val();
        let html = '<option value="0">All State</option>'
        for(let i=0; i<aState.length; i++){
            if(aState[i].country_id == countryId){
                html += '<option value="'+aState[i].id+'" '+(stateId==aState[i].id ? 'selected' : '')+'>'+aState[i].state_name+'</option>';
            }
        }
        $('#stateId').html(html);
        state_change()
    }

    function state_change(){
        let countryId = $('#countryId').val();
        let stateId = $('#stateId').val();
        let html = '<option value="0">All District</option>'
        for(let i=0; i<aDistrict.length; i++){
            if(aDistrict[i].country_id==countryId && aDistrict[i].state_id == stateId){
                html += '<option value="'+aDistrict[i].id+'" '+(districtId==aDistrict[i].id ? 'selected' : '')+'>'+aDistrict[i].district_name+'</option>';
            }
        }
        $('#districtId').html(html);
        // pg_change()
         
        let programId = $('#programId').val();
        let brandId = $('#brandId').val();
        
        html = '<option value="0">All PG\'s</option>'
        for(let i=0; i<aPg.length; i++){
            if(aPg[i].countryId==countryId && aPg[i].stateId == stateId && (programId==0 || brandId==0 || aPg[i].pgMapping.hasOwnProperty(programId+'_'+brandId))){
                html += '<option value="'+aPg[i].pgCode+'" '+(pgCode==aPg[i].pgCode ? 'selected' : '')+'>'+aPg[i].pgName+' ('+aPg[i].pgCode+')</option>';
            }
        }
        $('#pgCode').html(html);

        district_change()
    }

    function pg_change(){
        // console.log(aDistrict);
        // console.log(aPg);
        // let countryId = $('#countryId').val();
        // let stateId = $('#stateId').val();
        // let html = '<option value="0">All District</option>'
        // for(let i=0; i<aDistrict.length; i++){
        //     if(aDistrict[i].country_id==countryId && aDistrict[i].state_id == stateId){
        //         html += '<option value="'+aDistrict[i].id+'" '+(districtId==aDistrict[i].id ? 'selected' : '')+'>'+aDistrict[i].district_name+'</option>';
        //     }
        // }
        // $('#districtId').html(html);

        // let countryId = $('#countryId').val();
        // let stateId = $('#stateId').val();
        // let html = '<option value="0">All PG\'s</option>'
        // for(let i=0; i<aPg.length; i++){
        //     if(aPg[i].countryId==countryId && aPg[i].stateId == stateId){
        //         html += '<option value="'+aPg[i].pgCode+'" '+(pgCode==aPg[i].pgCode ? 'selected' : '')+'>'+aPg[i].pgName+' ('+aPg[i].pgCode+')</option>';
        //     }
        // }
        // $('#pgCode').html(html);
    }

    function district_change(){
        let countryId = $('#countryId').val();
        let stateId = $('#stateId').val();
        let districtId = $('#districtId').val();
        let html = '<option value="0">All Villages</option>'
        for(let i=0; i<aVillage.length; i++){
            if(aVillage[i].country_id==countryId && aVillage[i].state_id == stateId && aVillage[i].district_id == districtId){
                html += '<option value="'+aVillage[i].id+'" '+(villageId==aVillage[i].id ? 'selected' : '')+'>'+aVillage[i].village_name+'</option>';
            }
        }
        $('#villageId').html(html);
    }

    function get_farmer_verification_dashboard(){
        let programId = $('#programId').val();
        let brandId = $('#brandId').val();
        let countryId = $('#countryId').val();
        let stateId = $('#stateId').val();
        let pgCode = $('#pgCode').val();
        let districtId = $('#districtId').val();
        let villageId = $('#villageId').val();
        let fromDate = $('#fromDate').val();
        let toDate = $('#toDate').val();

        $('#loader_outer').show();
        $.ajax({
            url: "{{ route('farmer_verification_dashboard/get_farmer_verification_dashboard') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                programId: programId,
                brandId: brandId,
                countryId: countryId,
                stateId: stateId,
                pgCode: pgCode,
                districtId: districtId,
                villageId: villageId,
                fromDate: fromDate,
                toDate: toDate,
                formType: "farmer_verification_filters"
            },
            success: function(response) {
                let aVerificationStatus = response.aVerificationStatus
                $('#farmerToVerify').text(aVerificationStatus['farmerToVerify']);
                $('#verifiedFarmer').text(aVerificationStatus['verifiedFarmer']);
                $('#pendingVerification').text(aVerificationStatus['pendingVerification']);
                $('#inprogressFarmer').text(aVerificationStatus['inprogressFarmer']);
                // $('#rejectedFarmer').text(aVerificationStatus['rejectedFarmer']);
                $('#farmerSaidNo').text(aVerificationStatus['farmerSaidNo']);
                $('#verifiedCottonGrowers').text(aVerificationStatus['verifiedCottonGrowers']);

                draw_status_level_chart(response.aStatusLevel);
                $('#loader_outer').hide();
            }
        });
    }

    function draw_status_level_chart(aStatusLevel){
        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Verification Status by Level'
            },
            xAxis: {
                categories: aStatusLevel.label,
                crosshair: true,
                title: {
                text: 'Verification Level'
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Number of Farmers'
                }
            },
            legend: {
                align: 'right',
                verticalAlign: 'top',
                layout: 'vertical'
            },
            tooltip: {
                shared: true
            },
            plotOptions: {
                series: {
                    minPointLength: 5, // Ensures a minimum height for small bars
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                // alert(
                                // `Clicked on:\nSeries: ${this.series.name}\nCategory: ${this.category}\nValue: ${this.y}`
                                // );
                                show_user_status(this.category);
                            }
                        }
                    }
                },
                column: {
                    grouping: true, // group bars side-by-side
                    borderWidth: 0
                }
            },
            series: [
                {
                    name: 'Accept',
                    data: aStatusLevel.accept,
                    color: '#4682B4'
                },
                {
                    name: 'Pending',
                    data: aStatusLevel.pending,
                    color: '#FFBF00'
                },
                {
                    name: 'Reject',
                    data: aStatusLevel.reject,
                    color: '#FF6347'
                }
            ]
        });
    }

    function show_user_status(category){
        $('#category').val(category);
        
        let programId = $('#programId').val();
        let brandId = $('#brandId').val();
        let countryId = $('#countryId').val();
        let stateId = $('#stateId').val();
        let pgCode = $('#pgCode').val();
        let districtId = $('#districtId').val();
        let villageId = $('#villageId').val();
        let fromDate = $('#fromDate').val();
        let toDate = $('#toDate').val();

        $('#loader_outer').show();
        $.ajax({
            url: "{{ route('farmer_verification_dashboard/get_farmer_verification_user_status') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                programId: programId,
                brandId: brandId,
                countryId: countryId,
                stateId: stateId,
                pgCode: pgCode,
                districtId: districtId,
                villageId: villageId,
                fromDate: fromDate,
                toDate: toDate,
                category: category
            },
            success: function(response) {
                if(response.status){
                    let assignFarmers = 0;
                    let verifyFarmers = 0;
                    let pendingFarmers = 0;

                    let html = '<table class="table table-striped table-bordered">'
                    if(category=='Field Executive'){
                        html += '<tr><th>Sr.No.</th><th>User</th><th>Total Farmers Assigned</th><th>Total Farmers Verified</th><th>Total Farmers Pending</th><th>Producer Groups</th></tr>';
                    }else{
                        html += '<tr><th>Sr.No.</th><th>User</th><th>Total Farmers Assigned</th><th>Total Farmers Verified</th><th>Total Farmers Pending</th></tr>';
                    }
                    
                    for(let i=0; i<response.data.length; i++){
                        assignFarmers += response.data[i].assignFarmers;
                        verifyFarmers += response.data[i].verifyFarmers;
                        pendingFarmers += response.data[i].pendingFarmers;

                        html += '<tr>';
                        html += '<td>' + (i+1) + '</td>';
                        html += '<td>' + response.data[i].firstname + ' ' + response.data[i].lastname + '</td>';
                        html += '<td>' + response.data[i].assignFarmers + '</td>';
                        html += '<td>' + response.data[i].verifyFarmers + '</td>';
                        html += '<td>' + response.data[i].pendingFarmers + '</td>';
                        if(category=='Field Executive'){
                            html += '<td>' + response.data[i].sPGs + '</td>';
                        }
                        html += '</tr>';
                    }
                    html += '</table>';

                    let test = '<p>assignFarmers:'+assignFarmers+' | verifyFarmers:'+verifyFarmers+' | pendingFarmers:'+pendingFarmers+'</p>';
                    $('#userStatusModalLabel').html(category);
                    $('#userStatusModalBody').html(html);
                    $('#userStatusModal').modal('show');
                }
                $('#loader_outer').hide();
            }
        });
    }

    function export_show_user_status(){
        let category = $('#category').val();
        let countryId = $('#countryId').val();
        let stateId = $('#stateId').val();
        let pgCode = $('#pgCode').val();
        let districtId = $('#districtId').val();
        let villageId = $('#villageId').val();
        let fromDate = $('#fromDate').val();
        let toDate = $('#toDate').val();

        $('#loader_outer').show();
        $.ajax({
            url: "{{ route('farmer_verification_dashboard/get_farmer_verification_user_status') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                countryId: countryId,
                stateId: stateId,
                pgCode: pgCode,
                districtId: districtId,
                villageId: villageId,
                fromDate: fromDate,
                toDate: toDate,
                category: category,
                export: 1
            },
            success: function(response) {
                if(response.status){
                    const link = document.createElement('a');
                    link.href = response.downloadUrl;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }
                $('#loader_outer').hide();
            }
        });
    }
    
</script>
@endsection