@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">Add 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>
                Add Area
            </h6>
        </div>

        <div class="card-body">
            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            @if(Session::has('error'))
                <div class="alert alert-danger">
                    Category image is required!
                </div>
            @endif
            <form method="post" action="{{route('admin.area.add')}}" enctype="multipart/form-data">@csrf
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleFormControlInput1">Name</label>
                            <input type="text" class="form-control" value="{{ old('name') }}" name="name" id="exampleFormControlInput1" placeholder="Gazna Area" 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" value="{{ old('radius') }}" id="decimalInput" placeholder="0.00" required>
                        </div>
                    </div>

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

                    <div class="col-lg-12">
                        <div class="form-group">
                            <button class="btn-gazna" style="height:50px;font-size:14px;" type="submit">Save 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 defaultLocation = { lat: 30.0444, lng: 31.2357 }; // Default: Cairo

        // Parse values from form
        const latField = document.querySelector("input[name='latitude']");
        const lngField = document.querySelector("input[name='longitude']");
        const radiusField = document.querySelector("input[name='radius']");

        const oldLat = parseFloat(latField.value) || defaultLocation.lat;
        const oldLng = parseFloat(lngField.value) || defaultLocation.lng;
        const oldRadius = parseFloat(radiusField.value) * 1000 || 1000; // Default radius in meters

        const oldLocation = { lat: oldLat, lng: oldLng };

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

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

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

        // Bind circle to marker
        circle.bindTo('center', marker, 'position');

        // Update form on marker drag
        marker.addListener("dragend", function () {
            const position = marker.getPosition();
            latField.value = position.lat();
            lngField.value = position.lng();
            circle.setCenter(position);
        });

        // Move marker and circle on map click
        map.addListener("click", function (event) {
            marker.setPosition(event.latLng);
            circle.setCenter(event.latLng);
            latField.value = event.latLng.lat();
            lngField.value = event.latLng.lng();
        });

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