@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();show_sync_btn(this.value);">
                                                                                                    </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'>
                                                    <option value='0'>All Districts</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="" style="min-width: 140px; display:none;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Blocks</label>
                                                <select class="text-primary form-control form-select" id="chart_block" name='block' onchange="get_village()">
                                                    <option value='0'>All Blocks</option>
                                                                                                    </select>
                                            </div>
                                        </div>
                                        <div class="" style="min-width: 140px;max-width:140px;  display:none;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Villages</label>
                                                <select class="text-primary form-control form-select" id="chart_village" name='village'>
                                                    <option value='0'>All Villages</option>
                                                                                                    </select>
                                            </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  id="loadtab">
                                {{-- @include('dashboard.tabs') --}}

                            </div>               
                           <div class="tab-content">
                           
                           </div>
                        </div>
                    </div>
                    <div class="modal fade" id="show_fe_list_modal" tabindex="-1" role="dialog" aria-labelledby="show_fe_list_modal" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                          <div class="modal-content">
                            <div class="col-xl-12">
                              <div class="social-profile mb-0">
                           
                                <div class="card-body" >
                                    <form class="form" id="model" action="" method="post">
                                        @csrf
                                        <div id="show_fe_list_modal_body">
                                            
                                        </div>
                                    </form>
                                </div>         
                                <br>
                              </div>
                            </div>  
                          </div>
                        </div>
                    </div>
                    <div class="modal fade" id="village_modal" tabindex="-1" role="dialog" aria-labelledby="village_modal" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                          <div class="modal-content">
                            <div class="col-xl-12">
                              <div class="social-profile mb-0">
                           
                                <div class="card-body" >
                                    <form class="form" id="model" action="" method="post">
                                        @csrf
                                        <div id="village_modal_body">
                                            
                                        </div>
                                    </form>
                                </div>         
                                <br>
                              </div>
                            </div>  
                          </div>
                        </div>
                    </div>
                    <input type="hidden" id="pageName" value="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') }}"
async function initMap(locations,count) {
   
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: locations[0] || { lat: 21.7679, lng:78.8718},
    mapId: "DEMO_MAP_ID",
  });

  
//   const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
//    const labels = count.map((position, i) => {
//        return position.value;
//    })
    const labels = Array.isArray(count) ? count.map((position, i) => position.value) : [];
    
  // Add some markers to the map.
 
  const markers = locations.map((position, i) => {
        
        const label = labels[i % labels.length];
      
        // const iconUrl = pinIcons;
        var imageSize = label.length > 3 ? 50 + (label.length *10) : 40 + (label.length *10);
    
        const marker = new google.maps.Marker({
        position,
        map: map,
        label: {
            text: label,
            color: "white",
            fontSize: "12px",
            fontWeight: "bold",
        },
        icon: {
            url: iconUrl,
            scaledSize: new google.maps.Size(imageSize, imageSize), // Adjust icon size
        },
        });
    

        return marker;
    });

  
  // Add a marker clusterer to manage the markers.
//   const markerCluster = new markerClusterer.MarkerClusterer({ markers, map });

}


//  var tab = 'overview'