@extends('layout.index')
@section('title', '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;
    }
    </style>
{{-- <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> --}}
    <script src="src/js/filters.js"></script>
    <section>
        {{-- <div class="content-header row"> --}}
         
        <div class="col-md-1"></div>
            <div class="content-body">
                <section id="multiple-column-form">
                    <div class="row justify-content-center">
                        <div class="col-sm-12">
                            <form method="post">
                                @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">
                                            <input type="hidden" name="active_field" value="" id="active_field">
                                            <div class="" style="min-width: 140px;">
                                                <div class="form-group mb-0">
                                                    <lable class="text-primary"> Programmes</label>
                                                    <select class="text-primary form-control form-select program_filter" id="chart_program_id" name='program' onchange="get_brands_filters(); ">
                                                        <!-- <option value='0'>All Program</option> -->
                                                                                                            </select>
                                                    <!-- <h5><small class="text-danger" id="chart_program_err"></small></h5> -->
                                                </div>
                                            </div>
                                            
                                            <div class="" style="min-width: 140px; ">
                                                <div class="form-group mb-0">
                                                    <lable class="text-primary"> Brands</label>
                                                    <select class="text-primary form-control form-select brand_filter" id="chart_brand_id" name='brand' onchange="get_season_filters(); ">
                                                                                                            </select>
                                                    <h5><small class="text-danger" id="chart_brand_err"></small></h5>
                                                </div> 
                                            </div>
                                            
                                            <div class="" style="min-width: 140px;">
                                                <div class="form-group mb-0">
                                                    <lable class="text-primary"> Seasons</label>
                                                    <select class="text-primary form-control form-select season_filter" id="chart_season" name='season' onchange="get_country_filters(); ">
                                                                                                            </select>
                                                </div>
                                            </div>
                                            <div class="" style="min-width: 140px;">
                                                <div class="form-group mb-0">
                                                    <lable class="text-primary"> Countries</label> 
                                                    
                                                    <select class="text-primary form-control form-select country_filter" id="chart_country" name='country' onchange="get_state_filters();change_country_filter(); ">
                                                        <option value='0'>All Country</option>
                                                                                                            </select>
                                                    <small class="text-danger" id="chart_country_err"></small> 
                                                </div>
                                            </div>
                                            <div class="" style="min-width: 140px;">
                                                <div class="form-group mb-0">
                                                    <lable class="text-primary"> States</label>
                                                        
                                                    <select class="text-primary form-control form-select state_filter" id="chart_state" name='state' onchange="get_district_filters(); ">
                                                        <option value='0'>All States</option>
                                                                                                            </select>
                                                </div>
                                            </div>
                                            <div class="" style="min-width: 140px;">
                                                <div class="form-group mb-0">
                                                    <lable class="text-primary"> Districts</label>
                                                    <select class="text-primary form-control form-select district_filter" id="chart_district" name='district' onchange="get_block_filters();">
                                                        <option value='0'>All Districts</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="" style="min-width: 140px;">
                                                <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();">
                                                        <option value='0'>All Blocks</option>
                                                                                                            </select>
                                                </div>
                                            </div>
                                            <div class="" style="min-width: 140px;max-width:140px;">
                                                <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'>All Villages</option>
                                                                                                            </select>
                                                </div>
                                            </div>
                                            <div class="" style="min-width: 140px;max-width:140px;">
                                                <div class="form-group mb-0">
                                                    <label class="float-left" for="pg_dropdown">PG </label>
                                                    <select name="pgCode" id="chart_pg"
                                                        class="form-control form-select pg_filter">
                                                        <option value="0">All PG</option>
                                                    </select>
                                                    @error('pgCode')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                    <small class="text-danger" id="pgCode_ids_err"></small>
                                                    
                                                </div>
                                            </div>
                                            
                                            <div id='loader_outer'>
                                                <div id='loader' ></div>
                                            </div>
                                            <div class="" style="min-width: 140px;">
                                                <div class="form-group mb-0">
                                                    <lable><br></label>
                                                    <button type="button" name="button" value="Search" class="btn btn-primary waves-effect waves-float waves-light w-100" onclick="return fetchdata();" ><i class="fa fa-search"></i> Search</button>
                                                </div>
                                            </div>


                                            {{-- <div class="col-md-1">
                                                10
                                            </div> --}}
                                            
                                            {{-- <div class="col-md-1">
                                                10
                                            </div> --}}
                                        </div>
                                    </div>
                                </div>
                          
                            </form>
                                         
                            <div class="container-fluid p-4">

                                <!-- 1. Summary Cards -->
                                <!-- <div class="row"> 
                                    <div class="col-md-4 mb-3">
                                            <div class="col-md-12 ">
                                                <div class="card shadow-sm">
                                                    <div class="card-body">
                                                        <h6>Total Active Executives</h6>
                                                        <h3>500</h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12 ">
                                                <div class="card shadow-sm">
                                                    <div class="card-body">
                                                        <h6>Anomaly Flagged</h6>
                                                        <h3>18.5%</h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12 ">
                                                <div class="card shadow-sm">
                                                    <div class="card-body">
                                                        <h6>Pattern Flagged</h6>
                                                        <h3>18.5%</h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12 ">
                                                <div class="card shadow-sm">
                                                    <div class="card-body">
                                                        <h6>Duplicate Flagged</h6>
                                                        <h3>18.5%</h3>
                                                    </div>
                                                </div>
                                            </div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <div class="card shadow-sm p-3">
                                            <h6>Avg. Flagged Rate</h6>
                                            <div id="radialChart"></div>
                                            <h4 class="text-center mt-2">20%</h4>
                                        </div>
                                    </div>

                                  
                                    <div class="col-md-4 mb-3">
                                        <div class="card shadow-sm p-3">
                                            <h6>Flagged vs Submissions</h6>
                                            <canvas id="areaChart" height="150"></canvas>
                                        </div>
                                    </div>
                                </div> -->


                             

                                <!-- 3. Top Flagged Field Executives & Table -->
                                <div class="row">
                                 
                                    <!-- Executive Risk Overview Table -->
                                    <div class="col-md-9 mb-3">
                                        <div class="card shadow-sm p-3">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <h6>Executive Risk Overview</h6>
                                                <!-- <button class="btn btn-sm btn-primary">Export File</button> -->
                                            </div>
                                            <div id="risk_overview_table">
                                            
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3 mb-3">
                                        <!-- <div class="card shadow-sm p-3">
                                            <h6>Top Flagged Field Executives</h6>
                                            <canvas id="topFlaggedBarChart" height="250"></canvas>
                                        </div> -->
                                    </div>
                                </div>
                                </div>

                        </div>
                    </div>
                   
                    <input type="hidden" id="pageName" value="anomaly_dashboard">
        </section>
    </section>
{{-- <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
<script src="assets/js/mapclusture.js"></script> --}}
<script src={{ asset('app-assets/js/scripts/charts/highcharts.js') }}></script>
<script src={{ asset('app-assets/js/scripts/charts/sunburst.js') }}></script>
<script src={{ asset('app-assets/js/scripts/charts/exporting.js') }}></script>
<script src={{ asset('app-assets/js/scripts/charts/export-data.js') }}></script>
<script src={{ asset('app-assets/js/scripts/charts/accessibility.js') }}></script>
</script>


<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_API_KEY') }}&libraries=drawing"></script>
{{-- <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "{{ env('GOOGLE_API_KEY') }}", v: "weekly"});</script> --}}
        
<script>
    iconUrl="{{ asset('app-assets/images/logo/location.svg') }}"



//  var tab = 'overview'