@extends('layout.index')

@section('title', 'Map')

<!-- Dashboard Ecommerce start -->
<style>
    * {
        font-size: 15px;
    }

    .custom-width {
        width: 200px !important;
    }

    #polygonMap {
        height: 500px;
        /* Ensure the map has a height */
        width: 100%;
        /* Ensure the map takes full width */
    }
</style>

@section('content')
    <section>
        {{-- <div class="content-body">
            <div class="content-header row">
                <div class="content-header-left col-md-6 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12 d-flex">
                            <h2 class="content-header-title float-start mb-0">
                                {{ 'Farmer Polygon' }}
                            </h2>
                        </div>
                    </div>
                </div>

                <div class="col-md-1"></div>
            </div>
        </div> --}}
        @if ($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
        @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-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">
            <section id="multiple-column-form">
                <div class="row justify-content-center">
                    <div class="col-sm-12">
                        <form method="post">
                            @csrf
                            <input type="hidden" name="form_type" value="get_map_data">
                            <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-2" style="min-width: 140px;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Countries <span
                                                        style="color:red;">*</span></label>

                                                    <select class="text-primary form-control form-select" id="map_country"
                                                        name='country'
                                                        onchange="get_state(); get_district();  get_block(); get_village(); get_farmer();">
                                                        
                                                                                                            </select>
                                                    <small class="text-danger" id="map_country_err"></small>
                                            </div>
                                        </div>
                                        <div class="col-sm-2" style="min-width: 140px;">
                                            <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 " id="map_state"
                                                        name='state'
                                                        onchange="get_district();  get_block(); get_village(); get_farmer();">
                                                        {{-- <option value='0'>All States </option> --}}
                                                                                                            </select>
                                                    <small class="text-danger" id="map_state_err"></small>
                                            </div>
                                        </div>
                                        <div class="col-sm-2" style="min-width: 140px;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Districts <span
                                                    style="color:red;">*</span></label>
                                                    <select class="text-primary form-control form-select select2" id="map_district"
                                                        name='district[]'
                                                        onchange="get_block(); get_village(); get_farmer();"multiple >
                                                        {{-- <option value='0'>All Districts</option> --}}
                                                                                                            </select>
                                                    <small class="text-danger" id="map_district_err"></small>
                                            </div>
                                        </div>
                                        <div class="col-sm-2" style="min-width: 140px; ">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Blocks </label>
                                                    <select class="text-primary form-control form-select select2" id="map_block"
                                                        name='block[]' onchange="get_village(); get_farmer();" multiple>
                                                        <option value='0'>All Blocks</option>
                                                                                                            </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-2" style="min-width: 140px;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Villages</label>
                                                    <select class="text-primary form-control form-select select2" id="map_village"
                                                        name='village[]' onchange="get_farmer();" multiple>
                                                        <option value='0'>All Villages</option>
                                                                                                            </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-2" style="min-width: 140px;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Brands </label>
                                                    <select class="text-primary form-control form-select"
                                                        id="map_brand_id" name='brand' onchange="get_farmer();">
                                                        <option value='0'>All Brands</option>
                                                                                                            </select>
                                                    <!-- <h5><small class="text-danger" id="map_brand_err"></small></h5> -->
                                            </div>
                                        </div>
                                        <div class="col-sm-2" style="min-width: 140px; ">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Programmes </label>
                                                    <select class="text-primary form-control form-select"
                                                        id="map_program_id" name='program' onchange="get_farmer();">
                                                        <!-- <option value='0'>All Program</option> -->
                                                                                                            </select>
                                                    <!-- <h5><small class="text-danger" id="map_program_err"></small></h5> -->
                                            </div>
                                        </div>

                                        <div class="col-sm-2" style="min-width: 140px; ">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Season <span
                                                        style="color:red;">*</span></label>
                                                    <select class="text-primary form-control form-select"
                                                        id="map_season_id" name='season' onchange="get_farmer();">
                                                        <!-- <option value='0'>All Program</option> -->
                                                                                                            </select>
                                                    <small class="text-danger" id="map_season_err"></small>
                                            </div>
                                        </div>

                                        <div class="col-sm-2" style="min-width: 140px; ">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Farmer Type <span
                                                        style="color:red;">*</span></label>
                                                    <select class="text-primary form-control form-select"
                                                        id="map_farmer_type_id" name='farmer_type'
                                                        onchange="get_farmer();">
                                                        <!-- <option value='0'>All Program</option> -->
                                                                                                            </select>
                                                    <small class="text-danger" id="map_farmer_type_err"></small>
                                            </div>
                                        </div>

                                        <div class="col-sm-2" style="min-width: 140px;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary">Farmer Code</label>
                                                    <input type="text" id="farmers" name="farmers" class="form-control">
                                                                                                        <h5><small class="text-danger" id="farmers_err"></small></h5>
                                                    <span id="farmer_loading" style="display:none;">Loading...</span>
                                            </div>
                                        </div>

                                        <div class="col-sm-4 mt-2" style="min-width: 140px;">

                                            <button type="button" name="button" value="Search"
                                                class="btn btn-primary " onclick="return get_farmer_location()"><i
                                                    class="fa fa-search"></i>
                                                Search</button>

                                            {{-- @if ($aPost['country_id'] != 0 || $aPost['state_id'] != 0 || $aPost['district_id'] != 0 || $aPost['block_id'] != 0 || $aPost['village_id'] != 0 || $aPost['brand_id'] != 0 || $aPost['farmer_id'] != 0)
                                                <a title="Clear" href="{{ url('map/clear_search') }}"
                                                    type="button" class="btn btn-outline-primary">
                                                    <i data-feather="rotate-ccw" class="me-25"></i> Clear Search
                                                </a>
                                            @endif  --}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    
                    <div class="col-sm-4">
                        <div class="col-sm-12">
                            <div class="row">
                                <div class="col-sm-12 d-flex">
                                    <div class="card w-100">
                                        <div class="card-body m-0">
                                            <div class="row">
                                                <div class="col-sm-12 mb-1">
                                                    <strong class="text-primary">Farmers Counts</strong>
                                                </div>
                                                
                                                <div class="col-sm-4 d-flex flex-column justify-content-center">
                                                    <p class="mb-1">Total Farmers</p>
                                                    <h3 id="total_farmer">{{ $total_farmer }}</h3>
                                                </div>
                                                <div class="col-sm-4 d-flex flex-column justify-content-center">
                                                    <p class="mb-1">Geo-tagged farmers</p>
                                                    <h3 id="geotagged_count">{{ $geotagged_count }}</h3>
                                                </div>
                                                <div class="col-sm-4 d-flex flex-column justify-content-center">
                                                    <p class="mb-1">Non Geo-tagged farmers</p>
                                                    <h3 id="non_geotagged_count">{{ $not_geotagged_farmer_count }}</h3>
                                                </div>
                                                <div class="col-sm-4 d-flex flex-column justify-content-center">
                                                    <p class="mb-1">Complete Verified Geo-tagged </p>
                                                    <h3 id="verified_count">{{ $verified_count }}</h3>
                                                </div>
                                                <div class="col-sm-4 d-flex flex-column justify-content-center">
                                                    <p class="mb-1">Pending Verified Geo-tagged</p>
                                                    <h3 id="non_verified_count">{{ $non_verified_count }}</h3>
                                                </div>
                                                <div class="col-sm-4 d-flex flex-column justify-content-center">
                                                    <p class="mb-1">Partially Verified Geo-tagged</p>
                                                    <h3 id="partialVerifiedCount">{{ $partialVerifiedCount }}</h3>
                                                </div>
                                            </div>
                                            {{-- <div class="custom-icon icon-bg-1">
                                                <svg xmlns="http://www.w3.org/2000/svg" height="24px"
                                                    viewBox="0 -960 960 960" width="24px" fill="#0F265C">
                                                    <path
                                                        d="M480-301q99-80 149.5-154T680-594q0-90-56-148t-144-58q-88 0-144 58t-56 148q0 65 50.5 139T480-301Zm0 101Q339-304 269.5-402T200-594q0-125 78-205.5T480-880q124 0 202 80.5T760-594q0 94-69.5 192T480-200Zm0-320q33 0 56.5-23.5T560-600q0-33-23.5-56.5T480-680q-33 0-56.5 23.5T400-600q0 33 23.5 56.5T480-520ZM200-80v-80h560v80H200Zm280-520Z" />
                                                </svg>
                                            </div> --}}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-12 d-flex">
                                    <div class="card w-100">
                                        <div class="card-body m-0">
                                            <div class="row">
                                                <div class="col-sm-12 mb-1">
                                                    <strong class="text-primary">Farm Land Area</strong>
                                                </div>
                                                <div class="col-sm-4 d-flex flex-column justify-content-center">
                                                    <p class="m-0 mb-1">Total Agriculture Area </p>
                                                    <h3 id="total_agriculture_area">{{ $total_agriculture_area }}</h3>
                                                </div>
                                                <div class="col-sm-4 d-flex flex-column justify-content-center">
                                                    <p class="m-0 mb-1">Total Cotton Area</p>
                                                    <h3 id="total_cotton_area">{{ $total_cotton_area }}</h3>
                                                </div>
                                                <div class="col-sm-4 d-flex flex-column justify-content-center">
                                                    <p class="m-0 mb-1">Total Geofenced Farm Parcels</p>
                                                    <h3 id="geotagged_area">{{ $geotagged_area }}</h3>
                                                </div>
                                                <div class="col-sm-4 d-flex flex-column justify-content-center">
                                                    <p class="m-0 mb-1">Verified Area</p>
                                                    <h3 id="verified_area">{{ $verified_area }}</h3>
                                                </div>
                                                <div class="col-sm-4 d-flex flex-column justify-content-center">
                                                    <p class="m-0 mb-1">Non Verified Area</p>
                                                    <h3 id="non_verified_area">{{ $non_verified_area }}</h3>
                                                </div>
                                            </div>
                                            {{-- <div class="custom-icon icon-bg-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" height="24px"
                                                    viewBox="0 -960 960 960" width="24px" fill="#0F265C">
                                                    <path
                                                        d="m600-120-240-84-186 72q-20 8-37-4.5T120-170v-560q0-13 7.5-23t20.5-15l212-72 240 84 186-72q20-8 37 4.5t17 33.5v560q0 13-7.5 23T812-192l-212 72Zm-40-98v-468l-160-56v468l160 56Zm80 0 120-40v-474l-120 46v468Zm-440-10 120-46v-468l-120 40v474Zm440-458v468-468Zm-320-56v468-468Z" />
                                                </svg>
                                            </div> --}}
                                        </div>
                                    </div>
                                </div>

                                {{-- <div class="col-sm-12 d-flex">
                                    <div class="card w-100">
                                        <div class="card-body m-0">
                                            <div class="row">
                                                <div class="col-sm-12 mb-1">
                                                    <strong class="text-primary">Farmer</strong>
                                                </div>
                                                <div class="col-sm-6 d-flex flex-column justify-content-center">
                                                    <p class="m-0 mb-1">Total</p>
                                                    <h3 id="total_farmer">{{ $total_farmer }}</h3>
                                                </div>
                                                <div class="col-sm-6 d-flex flex-column justify-content-center">
                                                    <p class="m-0 mb-1">Not Geotagged</p>
                                                    <h3 id="not_geotagged_farmer">{{ $not_geotagged_farmer_count }}</h3>
                                                </div>
                                            </div>
                                            <div class="custom-icon icon-bg-3">
                                                <svg xmlns="http://www.w3.org/2000/svg" height="24px"
                                                    viewBox="0 -960 960 960" width="24px" fill="#0F265C">
                                                    <path
                                                        d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z" />
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                </div> --}}

                            </div>
                        </div>
                    </div>
                    <div id='loader_outer'>
                        <div id='loader' ></div>
                    </div>

                    <div class="col-sm-8">
                        <div class="card w-100">
                            <div class="card-body">
                                <div id="polygonMap" style="height: 460px;"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>
        </div>

     <script>
          $(document).ready(function() {
            // get_farmers_data()
            get_state();
            get_district();
            get_block();
            get_village();
             get_farmer();
               get_farmer_location();
            initMap(a_farmer,[])

        });
     </script>
    </section>

    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_API_KEY') }}&libraries=drawing"></script>
    <script>
        var map;
        let infoWindow;
        var a_farmer = [];
    
        var defaultFarmerImage = "{{ asset('app-assets/images/farmer.jpeg') }}";

        var currentInfoWindow = null;

        function initMap(a_farmer,districtData) {
            // Default location (India)
            var defaultCenter = {
                lat: 21.7679,
                lng: 78.8718
            };
            var defaultZoom = 5;

            map = new google.maps.Map(document.getElementById('polygonMap'), {
                center: defaultCenter,
                zoom: defaultZoom
            });

            // Create a LatLngBounds object to calculate the bounds of all polygons
            var bounds = new google.maps.LatLngBounds();
            var hasValidCoords = false;

            a_farmer.forEach(function(farmer) {
                if (farmer.polygon && farmer.polygon.length > 0) {
                    farmer.polygon.forEach(function(polygonData, polygon_key) {
                        var polygonCoords = polygonData.polygon.map(function(coord) {
                            return {
                                lat: parseFloat(coord.lat),
                                lng: parseFloat(coord.lng)
                            };
                        });

                        // Check if there are valid coordinates
                        if (polygonCoords.some(coord => !isNaN(coord.lat) && !isNaN(coord.lng))) {
                            hasValidCoords = true;
                        }

                        var polygonColor = polygonData.verified ? 'green' : 'red';

                        var polygon = new google.maps.Polygon({
                            paths: polygonCoords,
                            strokeColor: polygonColor,
                            strokeOpacity: 0.8,
                            strokeWeight: 2,
                            fillColor: polygonColor,
                            fillOpacity: 0.35,
                            map: map
                        });

                        // Extend the bounds to include the current polygon's coordinates
                        polygonCoords.forEach(function(coord) {
                            bounds.extend(new google.maps.LatLng(coord.lat, coord.lng));
                        });

                        const centroid = calculateCentroid(polygonCoords);
                        // console.log('Centroid:', centroid);

                        polygon.addListener('click', function(event) {
                            if (currentInfoWindow) {
                                currentInfoWindow.close();
                            }

                            // var tooltipContent = '<div>' +
                            //     '<div class="row" style="width: 510px;">' +
                            //     '<div class="col-sm-6 px-4">' +
                                
                            //         '<div class="d-flex my-1">' +
                            //         '<a href="' + (farmer.image ? farmer.image : defaultFarmerImage) + '" target="_blank">' +
                            //             '<img src="' + (farmer.image ? farmer.image : defaultFarmerImage) + '" alt="Farmer Image" class="img-fluid ml-1" style="width:80px; height:80px;">' +
                            //         '</a>' +
                            //         '<a href="' + (farmer.id_card ? farmer.id_card : defaultFarmerImage) + '" target="_blank">' +
                            //             '<img src="' + (farmer.id_card ? farmer.id_card : defaultFarmerImage) + '" alt="ID Card Image" class="img-fluid ml-1" style="width:80px; height:80px;">' +
                            //         '</a>' +
                            //     '</div>' +
                                
                            //     '<p> <strong>Farmer Name: </strong><br>' + farmer.name + '</p>' +

                            //     '<p> <strong>National Id: </strong><br>' + (farmer.id_number ? farmer
                            //         .id_number : '-') + '</p>' +
                            //     '<p> <strong>Gender: </strong><br>' + (farmer.gender ? farmer.gender : '-') +
                            //     '</p>' +
                            //     '<p> <strong>Mobile No: </strong><br>' + (farmer.contact_number ? farmer
                            //         .contact_number : '-') + '</p>' +
                            //     '<p> <strong>Civil Status: </strong><br>' + (farmer.marital_status ? farmer
                            //         .marital_status : '-') + '</p>' +

                                
                            //     '</div>' +
                            //     '<div class="col-sm-6">' +
                                
                            //         '<p><strong>Farmer code: </strong><br>' + farmer.code + '</p>' +

                            //     '<p><strong>Total Agricultural Area: </strong><br>' + (farmer.cotton_irrigated + farmer
                            //         .cotton_rainfed) + ' acres</p>' +
                            //     '<p><strong>Total Geofenced Farm Parcels: </strong><br>' + polygonData.area + ' acres</p>' +
                            //     '<strong >Irrigation Type: </strong><br>' + (farmer.method_of_irrigation ?
                            //         farmer.method_of_irrigation : '-') + '</p>' +
                            //     '<p><strong>Irrigation Source: </strong><br>' + (farmer.source_of_irrigation ?
                            //         farmer.source_of_irrigation : '-') + '</p>' +
                            //     '<p><strong> Soil Type: </strong><br>' + (farmer.type_of_soil ? farmer
                            //         .type_of_soil : '-') + '</p>' +
                            //     (polygonData.verified ? '' : '<button onclick="handleButtonClick(\'' +
                            //         farmer.code + '\',' + farmer.country_id + ',' + polygon_key +
                            //         ')" class="btn btn-primary">Verify</button>') +
                            //     '</div>' +
                            
                            //     '</div>' +
                            //     '</div>';

                            var country_id = $('#map_country').val();
                            var farmer_id = farmer.code;
                            var state_id = $('#map_state').val();
                            var district_id = $('#map_district').val();
                            var block_id = $('#map_block').val()||[];
                            var village_id = $('#map_village').val();
                            var program_id = $('#map_program_id').val();
                            var brand_id = $('#map_brand_id').val();
                            var season = $('#map_season_id').val();
                            var farmer_type = $('#map_farmer_type_id').val();
                            
                            $('#loader_outer').show();
                            $.ajax({
                                url: "