@include('Admin.layouts.app')
@include('Admin.layouts.sidebar')
@section('title', 'Area')

<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Page Heading -->
    <h1 class="h3 mb-2 text-gray-800">Edit Area</h1>
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <a href="{{route('admin.areas')}}">
                    <i class="fa fa-chevron-left"></i>
                </a>
                Edit Area
            </h6>
        </div>
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <div class="card-body">

            <form method="post" action="{{route('admin.area.update')}}" enctype="multipart/form-data">@csrf
                <input type="hidden" name="id" value="{{$area->id}}">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleFormControlInput1">Name</label>
                            <input type="text" class="form-control" name="name" id="exampleFormControlInput1"
                                   placeholder="Gazna Area" value="{{$area->name}}" required>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleFormControlInput1">Radius</label>
                            <input type="text" class="form-control" name="radius" id="decimalInput" placeholder="0.00" value="{{$area->radius}}" required>
                        </div>
                    </div>

                    <div class="col-12 mb-4">
                        <label>Select Location on Map</label>
                        <input type="hidden" name="latitude" value="{{$area->latitude}}">
                        <input type="hidden" name="longitude" value="{{$area->longitude}}">
                        <div id="map" style="height: 400px; width: 100%; border: 1px solid #ddd;"></div>
                    </div>

                    <div class="col-sm-6 mt-3">
                        <div class="form-group">
                            <label for="exampleFormControlInput1">Area Status</label>
                            <select name="status">
                                <option value="Active" @if($area->status == 'Active') selected @endif>Active
                                </option>
                                <option value="Inactive" @if($area->status == 'Inactive') selected @endif>Inactive
                                </option>
                            </select>
                        </div>

                    </div>
                    <div class="col-lg-12 mt-3">
                        <div class="form-group">
                            <button class="btn-gazna mt-3" style="height:50px;font-size:14px;" type="submit">Update Area</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>
<!-- /.container-fluid -->

@include('Admin.layouts.footer')
@include('Admin.layouts.modal')

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAi_huwUKKdn4NQ9OVEitIinkR2Me8ncbU&callback=initMap" async defer></script>

<script>
    let map;
    let marker;
    let circle;

    function initMap() {
        const latInput = document.querySelector('input[name="latitude"]');
        const lngInput = document.querySelector('input[name="longitude"]');
        const radiusInput = document.querySelector('input[name="radius"]');

        const defaultLat = parseFloat(latInput.value) || 30.0444;
        const defaultLng = parseFloat(lngInput.value) || 31.2357;
        const radius = parseFloat(radiusInput.value) * 1000 || 1000; // default 1000 meters

        const defaultLocation = { lat: defaultLat, lng: defaultLng };

        map = new google.maps.Map(document.getElementById("map"), {
            center: defaultLocation,
            zoom: 13,
        });

        marker = new google.maps.Marker({
            position: defaultLocation,
            map,
            draggable: true
        });

        // Draw circle
        circle = new google.maps.Circle({
            map: map,
            radius: radius,
            fillColor: "#007bff",
            fillOpacity: 0.2,
            strokeColor: "#007bff",
            strokeOpacity: 0.8,
            strokeWeight: 2
        });

        circle.bindTo("center", marker, "position");

        // On marker drag update lat/lng fields and circle position
        marker.addListener("dragend", function () {
            const position = marker.getPosition();
            latInput.value = position.lat();
            lngInput.value = position.lng();
            circle.setCenter(position);
        });

        // On map click, move marker and update everything
        map.addListener("click", function (event) {
            const clickedLatLng = event.latLng;
            marker.setPosition(clickedLatLng);
            circle.setCenter(clickedLatLng);
            latInput.value = clickedLatLng.lat();
            lngInput.value = clickedLatLng.lng();
        });

        // On radius input change, update circle radius
        radiusInput.addEventListener("input", function () {
            const newRadius = parseFloat(radiusInput.value) * 1000; // Convert km to meters
            if (!isNaN(newRadius)) {
                circle.setRadius(newRadius);
            }
        });
    }
</script>