@extends("admin.template.layout")
@section('header')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />


@endsection
@section('content')
<form id="RateForm" autocomplete="off" class="needs-validation" novalidate enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="id" value="{{ $id }}">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Coordinates Details</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            
                            <div class="col-xl-6">
                                <div class="mb-3">
                                    <label class="form-label" for="period_name">Title</label>
                                    <input type="text" class="form-control no_special_chars" id="title" value="{{ $title }}" placeholder="Title" name="title" required>
                                </div>

                            </div>
                            
                            <div class="col-xl-6 d-none">
                                <div class="mb-3">
                                    <label class="form-label" for="multiplied_value">Type</label>
                                    <select name="type" class="form-control" required>
                                        <option @if($type=="salik") selected @endif value="salik">Toll</option>
                                        <option @if($type=="city_crossing") selected @endif value="city_crossing">City Crossing</option>
                                    </select>
                                </div>

                            </div>
                        </div>


                        

                        <div class="row">
                            <div class="col-xl-6">
                                <div class="mb-3">
                                    <label for="choices-publish-status-input" class="form-label">Status</label>
                                    <select class="form-select" id="choices-publish-status-input" name="status" data-choices data-choices-search-false>
                                        <option value="" >Choose Status</option>
                                        <option value="1" @if($status ==1) selected @endif>Active</option>
                                        <option value="0" @if($status ==0) selected @endif>Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        


                    </div>
                    <div class="row">
                            <div class="card-body border border-dashed border-end-0 border-start-0">
                                <input id="searchBox" type="text" placeholder="Search location..." 
       style="width: 250px; padding: 8px;top: 10px; left: 50px;">
                                <div id="map_live" style="height: 500px; width: 100%;"></div>
                            </div>
                        </div>
                </div>
                <div class="d-flex justify-content-between mb-3">
                    <button type="button" class="btn btn-dark w-sm" onclick="history.back()">Back</button>
                    <button type="submit" class="btn btn-primary w-sm">Submit</button>
                </div>
            </div>
        </div>
    </form>
    
@stop

@section('script')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('global.google_map_key') }}&libraries=places"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>





<script>
    $('body').off('click','[data-role="rm-btn"]');
    $('body').on('click','[data-role="rm-btn"]',function(e){
        $(this).closest('tr').remove();
    });
   
    let coordinates = '';
    document.addEventListener('DOMContentLoaded', () => {
        const map_live = L.map('map_live').setView([25.2048, 55.2708], 15);
    
        // Add Google Maps tile layer
        L.tileLayer('https://mt1.google.com/vt?lyrs=y&x={x}&y={y}&z={z}&key={{config("global.google_map_key")}}', {
            maxZoom: 20
        }).addTo(map_live);
    
        // Google Places API Search Box
        const searchBox = document.getElementById('searchBox');
        const searchInput = new google.maps.places.Autocomplete(searchBox);
    
        searchInput.addListener('place_changed', function () {
            const place = searchInput.getPlace();
            if (!place.geometry) {
                alert("Location not found!");
                return;
            }
    
            const lat = place.geometry.location.lat();
            const lng = place.geometry.location.lng();
    
            // Move map to searched location
            map_live.setView([lat, lng], 15);
    
            // Add marker at the searched location
            L.marker([lat, lng]).addTo(map_live)
                .bindPopup(`<b>${place.name}</b><br>${place.formatted_address}`)
                .openPopup();
        });
        
        // Add draw control
        const drawnItems = new L.FeatureGroup();
        map_live.addLayer(drawnItems);
    
        @if($polygon_coordinates)
            coordinates = {{$polygon_coordinates}}; // Ensure this is valid JSON
    
            // Add polygon to the feature group
            const existingPolygon = L.polygon(coordinates);
            drawnItems.addLayer(existingPolygon); // Add to drawnItems for edit functionality
        @endif
    
        const drawControl = new L.Control.Draw({
            edit: {
                featureGroup: drawnItems, // Allow editing of existing layers in this group
                remove: true, 
            },
            draw: {
                polygon: true,
                marker: false,
                polyline: false,
                rectangle: false,
                circle: false,
                circlemarker: false,
            },
        });
    
        map_live.addControl(drawControl);
    
        // Handle the "draw:created" event
        map_live.on('draw:created', function (e) {
            const layer = e.layer;
            drawnItems.addLayer(layer); // Add the layer to the feature group
    
            const latlngs = layer.getLatLngs()[0]; // Get polygon coordinates
            coordinates = latlngs.map(latlng => [latlng.lat, latlng.lng]); // Convert to lat,lng array
            console.log('Polygon Coordinates:', coordinates);
        });
    
        // Event: When editing is stopped
        map_live.on('draw:edited', function (e) {
            e.layers.eachLayer(layer => {
                const latlngs = layer.getLatLngs()[0]; // Updated polygon coordinates
                coordinates = latlngs.map(latlng => [latlng.lat, latlng.lng]);
                console.log('Updated Coordinates:', coordinates);
            });
        });
    
        // Event: When a layer is deleted
        map_live.on('draw:deleted', function (e) {
            e.layers.eachLayer(layer => {
                console.log('Deleted Layer:', layer);
            });
        });
    });






//     let coordinates = '';
//     document.addEventListener('DOMContentLoaded', () => {
//     // Initialize map
//     const map_live = L.map('map_live').setView([25.2048, 55.2708], 15);

//     L.tileLayer('https://mt1.google.com/vt?lyrs=y&x={x}&y={y}&z={z}&key={{config('global.google_map_key')}}', {
//         maxZoom: 20
//     }).addTo(map_live);




//     // Add Geocoder Control for location search
//     L.Control.geocoder({
//         defaultMarkGeocode: true, // Adds a marker at the searched location
//         position: 'topright', // Position of the geocoder control
//     }).addTo(map_live);

//     // Add draw control
//     const drawnItems = new L.FeatureGroup();
//     map_live.addLayer(drawnItems);

//     @if($polygon_coordinates)
//         coordinates = {{$polygon_coordinates}}; // Ensure this is valid JSON

//         // Add polygon to the feature group
//         const existingPolygon = L.polygon(coordinates);
//         drawnItems.addLayer(existingPolygon); // Add to drawnItems for edit functionality
//     @endif

//     const drawControl = new L.Control.Draw({
//         edit: {
//             featureGroup: drawnItems, // Allow editing of existing layers in this group
//             remove: true, 
//         },
//         draw: {
//             polygon: true,
//             marker: false,
//             polyline: false,
//             rectangle: false,
//             circle: false,
//             circlemarker: false,
//         },
//     });

//     map_live.addControl(drawControl);

//     // Handle the "draw:created" event
//     map_live.on('draw:created', function (e) {
//         const layer = e.layer;
//         drawnItems.addLayer(layer); // Add the layer to the feature group

//         const latlngs = layer.getLatLngs()[0]; // Get polygon coordinates
//         coordinates = latlngs.map(latlng => [latlng.lat, latlng.lng]); // Convert to lat,lng array
//         console.log('Polygon Coordinates:', coordinates);
//     });

//     // Event: When editing is stopped
//     map_live.on('draw:edited', function (e) {
//         e.layers.eachLayer(layer => {
//             const latlngs = layer.getLatLngs()[0]; // Updated polygon coordinates
//             coordinates = latlngs.map(latlng => [latlng.lat, latlng.lng]);
//             console.log('Updated Coordinates:', coordinates);
//         });
//     });

//     // Event: When a layer is deleted
//     map_live.on('draw:deleted', function (e) {
//         e.layers.eachLayer(layer => {
//             console.log('Deleted Layer:', layer);
//         });
//     });
// });

// document.addEventListener('DOMContentLoaded', () => {
//     // Initialize map
//     const map_live = L.map('map_live').setView([25.2048, 55.2708], 15);

//     // Add OpenStreetMap tiles
//     L.tileLayer('https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key={{config('global.google_map_key')}}', {
//         maxZoom: 30,
//     }).addTo(map_live);

//     // Add draw control
//     const drawnItems = new L.FeatureGroup();
//     map_live.addLayer(drawnItems);

//     @if($polygon_coordinates)
//         coordinates = {{$polygon_coordinates}}; // Ensure this is valid JSON

//         // Add polygon to the feature group
//         const existingPolygon = L.polygon(coordinates);
//         drawnItems.addLayer(existingPolygon); // Add to drawnItems for edit functionality
//     @endif

//     const drawControl = new L.Control.Draw({
//         edit: {
//             featureGroup: drawnItems, // Allow editing of existing layers in this group
//             remove: true, 
//         },
//         draw: {
//             polygon: true,
//             marker: false,
//             polyline: false,
//             rectangle: false,
//             circle: false,
//             circlemarker: false,
//         },
//     });
    
//     map_live.addControl(drawControl);

//     // Handle the "draw:created" event
//     map_live.on('draw:created', function (e) {
//         const layer = e.layer;
//         drawnItems.addLayer(layer); // Add the layer to the feature group

//         const latlngs = layer.getLatLngs()[0]; // Get polygon coordinates
//         coordinates = latlngs.map(latlng => [latlng.lat, latlng.lng]); // Convert to lat,lng array
//         console.log('Polygon Coordinates:', coordinates);
//     });

//     // Event: When editing is stopped
//     map_live.on('draw:edited', function (e) {
//         e.layers.eachLayer(layer => {
//             const latlngs = layer.getLatLngs()[0]; // Updated polygon coordinates
//             coordinates = latlngs.map(latlng => [latlng.lat, latlng.lng]);
//             console.log('Updated Coordinates:', coordinates);
//         });
//     });

//     // Event: When a layer is deleted
//     map_live.on('draw:deleted', function (e) {
//         e.layers.eachLayer(layer => {
//             console.log('Deleted Layer:', layer);
//         });
//     });
// });

</script>

    <script type="text/javascript">
        jQuery(document).ready(function(){

            


            $("#RateForm").validate({
                rules: {
                    title: {
                        required: true,
                    },
                    multiplied_value: {
                        required: true,
                        doublePrecision: true
                    },
                    status:{
                        required:true
                    }

                },
                messages: {
                    title:{
                        required: "Title is required.",
                    },
                    multiplied_value: {
                        required: "Fare is required.",
                        doublePrecision: "Please enter a valid number with double precision."
                    },
                    status:{
                        required: "Status is required."
                    }

                },
                errorPlacement: function (error, element) {
                    error.appendTo(element.parent());
                },
                submitHandler: function (form) {

                    // Use FormData to handle file uploads
                    let formData = new FormData(form);
                    if(coordinates ==''){
                        Swal.fire({
                                    text: "Please draw cordintates on map",
                                    iconHtml: '',
                                });
                        return false;
                    }
                    formData.append('polygon_coordinates', JSON.stringify(coordinates));
                    $.ajax({
                        url: "{{ route('admin.borders.store') }}", // Change to your route
                        type: "POST",
                        data: formData,
                        processData: false, // Required for file upload
                        contentType: false,
                        beforeSend: function (xhr) {
                            // Set the CSRF token in the AJAX request header
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
                        },
                        success: function (response) {
                            if(response.status == "success") {
                                Swal.fire({
                                    text: response.message,
                                    iconHtml: '',
                                    confirmButtonText: "OK", // Optional: Change the text of the button
                                    customClass: {
                                        confirmButton: 'custom-ok-button-class w-sm' // Add your custom class here
                                    }
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        // Redirect to the next page
                                        window.location.href = "{{ route('admin.borders') }}";
                                    }
                                });
                            } else {
                                Swal.fire({
                                    text: response.message,
                                    iconHtml: '',
                                });
                            }

                        },
                        error: function (xhr) {
                            if (xhr.status === 422) {
                                let errors = xhr.responseJSON.errors;
                                $.each(errors, function (key, errorMessages) {
                                    $("input[name=" + key + "], select[name=" + key + "]").after('<label class="error">' + errorMessages[0] + '</label>');
                                });
                            } else if(xhr.status == 500){
                                Swal.fire({
                                    text:  xhr.responseJSON.message,
                                    iconHtml: '',

                                });
                            } else {
                                Swal.fire({
                                    text: "Something went wrong. Please try later",
                                    iconHtml: '',
                                });
                            }
                        }
                    });
                    return false; // Prevent the default form submission
                }
            });

            $.validator.addMethod("timeFormat", function(value, element) {
                // Regex for HH:mm (24-hour format)
                return this.optional(element) || /^([01][0-9]|2[0-3]):([0-5][0-9])$/.test(value);
            }, "Invalid time format. Please use HH:mm.");

            // Custom double precision validation rule
            $.validator.addMethod("doublePrecision", function(value, element) {
                // Regex for a number with optional decimal places (double precision)
                return this.optional(element) || /^-?\d+(\.\d+)?$/.test(value);
            }, "Invalid number. Please use a valid double precision number.");
        });
    </script>
@stop