@extends('layout.index')

@section('title', 'Add Polygon Classification')
<!-- Dashboard Ecommerce start -->
@section('content')
    <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-12">
                        <div class="card">
                            <div class="card-body">
								
                                <form class="form" action="" method="post">
                                    <input type="hidden" name="form_type" value="add_polygon_classification">
                                    {{ csrf_field() }}

                                    <div class="row">
                                        <div class="col-md-2 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"
                                                    onchange="get_state(); get_district();  get_block(); get_village();" >
                                                    <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-2 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"
                                                    onchange="get_district(); get_block(); get_village();">
                                                    <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-2 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" onchange="get_block();  get_village();">
                                                    <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-2 col-12">
                                            <div class="form-group">

                                                <label for="block">Master Block<span style="color:red;">
                                                        *</span></label>

                                                <select name="block" id="block" class="form-control form-select" onchange="get_village()">
                                                    <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-2 col-12">
                                            <div class="form-group">

                                                <label for="village">Master Village<span style="color:red;">
                                                        *</span></label>

                                                <select name="village" id="village" class="form-control form-select">
                                                    <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-2 col-12">
                                            <div class="form-group">
                                                <label for="form">Form <span style="color:red;">*</span></label>
                                                <select name="form" id="form" class="form-control form-select " onchange="get_Question();" >
                                                    <option value="0">Select Form</option> 
                                                </select>
                                                <h5><small class="text-danger" id="form_err"></small></h5>
                                                @error('form')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
									
                                        <div class="col-md-2 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 select2" >
                                                    <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-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="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="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="season_id" name='season' >
                                                        <!-- <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="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-3 mt-2" style="min-width: 140px;">

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

                                        {{-- <div class="col-12 text-center mt-1">

                                              <a href="{{ url('/polygon_classification') }}" type="reset"
                                                class="btn btn-outline-secondary btn-danger">Cancel</a>
                                        </div> --}}
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
					<div id='loader_outer'>
                        <div id='loader' ></div>
                    </div>

                    <div class="col-sm-12">
                        <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() {
    	// Code to be executed after the DOM is fully loaded
		var country_id=$('#country').val();

		if( country_id !=0){
			get_state();
			get_district();
			get_block();
			get_village();
			initMap(a_farmer,[])
			get_farmer_location();
           
		}else{
			$('#country').parent().addClass('has-error');
				$('#country_err').html('Please Select Country.');
				$('#country').focus();
				$('#country').change(function() {
					$('#country').parent().removeClass('has-error');
					$('#country_err').html('');
				});
				return false;
		}
	});
</script>
    </section>

@endsection
<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 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: "