@extends('layout.index')

@section('title', 'Add Polygon Classification')
<!-- Dashboard Ecommerce start -->
@section('content')
<script src="/src/js/filters.js"></script>
    <section>

        @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-check-circle" style="font-size:16px;" aria-hidden="true"></i>
                        {{ $message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @endif

        <div class="alert alert-success p-1" id="success-alert" style="display: none;">
            <i class="fa fa-check-circle" style="font-size:16px;" aria-hidden="true"></i>
            <span id="success-message"></span>
        </div>

        <div class="alert alert-danger p-1" id="error-alert" style="display: none;">
            <i class="fa fa-exclamation-triangle" style="font-size:16px;" aria-hidden="true"></i>
            <span id="error-message"></span>
        </div>

        <div class="content-body">
            <section id="multiple-column-form">
                <div class="row justify-content-center">
                    <div class="col-sm-3" style="overflow-y: auto;height: 80vh;">
                        <div class="card">
                            <div class="card-body">

                                <form class="form m-0" action="" method="post">
                                    <input type="hidden" name="form_type" value="add_polygon_classification">
                                    {{ csrf_field() }}
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-sm-6" 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="program_id" name='program' onchange="get_brands_filters();">
                                                                <!-- <option value='0'>All Program</option> -->
                                                                                                                            </select>
                                                            <!-- <h5><small class="text-danger" id="map_program_err"></small></h5> -->
                                                    </div>
                                                </div>

                                                <div class="col-sm-6" style="min-width: 140px;">
                                                    <div class="form-group mb-0">
                                                        <lable class="text-primary"> Brands <span
                                                                style="color:red;">*</span></label>
                                                            <select class="text-primary form-control form-select brand_filter"
                                                                id="brand_id" name='brand' onchange="get_season_filters();">

                                                                                                                            </select>
                                                            <!-- <h5><small class="text-danger" id="map_brand_err"></small></h5> -->
                                                    </div>
                                                </div>

                                                <div class="col-sm-6" 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 season_filter"
                                                                id="season_id" name='season' onchange="get_country_filters()">
                                                                <!-- <option value='0'>All Program</option> -->
                                                                                                                            </select>
                                                            <small class="text-danger" id="map_season_err"></small>
                                                    </div>
                                                </div>

                                                <div class="col-md-6 col-12">
                                                    <div class="form-group">

                                                        <label for="country">Master Country<span style="color:red;">
                                                                *</span></label>


                                                        <select name="country" id="country"
                                                            class="form-control form-select country_filter"
                                                            onchange="get_state_filters();">
                                                            <option value="0">Select Country</option>
                                                            
                                                        </select>
                                                        <h5><small class="text-danger" id="country_err"></small></h5>
                                                        @error('country')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6 col-12">
                                                    <div class="form-group">

                                                        <label for="country">Master State<span style="color:red;">
                                                                *</span></label>

                                                        <select name="state" id="state"
                                                            class="form-control form-select state_filter"
                                                            onchange="get_district_filters();">
                                                            <option value="0">All State</option> 
                                                            
                                                        </select>
                                                        <h5><small class="text-danger" id="state_err"></small></h5>
                                                        @error('state')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6 col-12">
                                                    <div class="form-group">

                                                        <label for="country">Master District<span style="color:red;">
                                                                *</span></label>

                                                        <select name="district" id="district"
                                                            class="form-control form-select district_filter"
                                                            onchange="get_block_filters();">
                                                            <option value="0">All District</option>
                                                            
                                                        </select>
                                                        <h5><small class="text-danger" id="district_err"></small></h5>
                                                        @error('district')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6 col-12">
                                                    <div class="form-group">

                                                        <label for="block">Master Block</label>

                                                        <select name="block" id="block"
                                                            class="form-control form-select block_filter" onchange="get_village_filters(); ">
                                                            <option value="0">All Block</option> 
                                                            
                                                        </select>
                                                        <h5><small class="text-danger" id="block_err"></small></h5>
                                                        @error('block')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6 col-12">
                                                    <div class="form-group">

                                                        <label for="village">Master Village </label>

                                                        <select name="village" id="village"
                                                            class="form-control form-select village_filter" onchange="">
                                                            <option value="0">All Village</option>
                                                            
                                                        </select>
                                                        <h5><small class="text-danger" id="village_err"></small></h5>
                                                        @error('village')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>


                                                <div class="col-md-6 col-12">
                                                    <div class="form-group">
                                                        <label for="question">Question <span
                                                                style="color:red;">*</span></label>
                                                        <select name="question" id="question"
                                                            class="form-control form-select ">
                                                            <option value="0">Select Question</option>
                                                            
                                                        </select>
                                                        <h5><small class="text-danger" id="question_err"></small></h5>
                                                        @error('question')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>


                                                <div class="col-sm-6">
                                                    <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="farmer_type_id" name='farmer_type'
                                                            >
                                                            <!-- <option value='0'>All Program</option> -->
                                                                                                                    </select>
                                                        <small class="text-danger" id="map_farmer_type_err"></small>
                                                    </div>
                                                </div>

                                                <div class="col-sm-6">
                                                    <div class="form-group mb-0">
                                                        <lable class="text-primary"> Color </label>
                                                        <select class="text-primary form-control form-select"
                                                            id="polygonColor" name='polygonColor'>
                                                            <!-- <option value='0'>All Program</option> -->
                                                                                                                    </select>
                                                        <small class="text-danger" id="map_polygon_color_err"></small>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <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>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 mt-1 text-center">
                                            <button type="button" name="button" value="Search" class="btn btn-primary " onclick="get_farmer_location()"><i class="fa fa-search"></i> Search</button>
                                            <button type="button" name="button" value="Search" class="btn btn-danger " onclick="get_farmer_location('','','export')">Export</button>
                                        </div>
                                        
                                    </div>

                                </form>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12 d-flex justify-content-between align-items-center">
                                        <h5 class="text-primary mb-1">Classification Chart</h5>
                                        <div class="dropdown">
                                            <button class="btn dropdown-toggle" type="button"
                                                id="chart_classification_download"
                                                style="background-color: #D15E9C; color: white;" data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-download"></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-right"
                                                aria-labelledby="chart_classification_download">
                                                <a class="dropdown-item" href="#"
                                                    onclick="get_jpeg('polygonClassification', 'Classification Chart')">
                                                    <b>Export JPEG</b>
                                                </a>
                                                <a class="dropdown-item" href="#"
                                                    onclick="get_excel('polygonClassification')">
                                                    <b>Export CSV</b>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="dashboard-card canvas1" id="chart_polygonClassification">
                                    <div id="legend_polygonClassification"></div>

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

                    <div class="col-sm-9">
                        <div class="card w-100">
                            <div class="card-body">
                                <div id="polygonMap" style="height: 80vh;"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>
        </div>
        <input type="hidden" id="pageName" value="polygon_classification">
        <script>
            $(document).ready(function() {
                // Code to be executed after the DOM is fully loaded
                
               // get_state();
                    // get_district();
                    // get_block();
                    // get_village();
                    get_brands_filters()
                    get_Question();
                    initMap(a_farmer, [])
                    get_farmer_location();
                    show_chart([]);
                    // set_brand_program();
            });
        </script>
    </section>

    <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 src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_API_KEY') }}&libraries=drawing"></script>
<script>
    var map;
    var charts = [];
    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 = farmer.color ? farmer.color : '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 country_id = $('#country').val();
                        var farmer_id = farmer.code;
                        var state_id = $('#state').val();
                        var district_id = $('#district').val();
                        var block_id = $('#block').val();
                        var village_id = $('#village').val();
                        var program_id = $('#program_id').val();
                        var brand_id = $('#brand_id').val();
                        var season = $('#season_id').val();
                        var farmer_type = $('#farmer_type_id').val();
                        var question = $('#question').val();
                        var form = $('#form').val();
                        var polygonColor = $('#polygonColor').val();
                        var questionName = $('#question option:selected').text();
                        var formattedName = questionName ? questionName.replace(/\s+/g, '-') : '';
                        $('#loader_outer').show();
                        $.ajax({
                            url: "