@php
    $title = 'Create Client';
@endphp
@extends('layouts/layoutMaster')

@section('title', __($title))

    @section('content')
    <div class="row mb-3">
        <div class="col">
            <div class="float-start">
                <h4 class="mt-2">{{ $title }}</h4>
            </div>
        </div>
    </div>
    <div class = "card mb-3">
        <div class = "card-body">
            <div class="row">
                <div class="col-6">
                    <form id="clientCreateForm" action="{{ route('client.store') }}" method="post">
                        <input id="latitude" name="latitude" type="hidden" />
                        <input id="longitude" name="longitude" type="hidden" />
                        @csrf
                        <div class="">
                            <div class="">
                                <div class="mt-2">
                                    <h5> Basic Details</h5>
                                    <div class="">
                                        <div class="form-group row">
                                            <div class="form-group col-md-12 mb-3">
                                                <label for="name" class="control-label">Name</label>
                                                <input id="name" name="name" class="form-control"
                                                    value="{{ old('name') }}" />
                                                <span class="text-danger">{{ $errors->first('name', ':message') }}</span>
                                            </div>
                                            <div class="form-group col-md-12 mb-3">
                                                <label for="address" class="control-label">Address</label>
                                                <input id="address" name="address" class="form-control"
                                                    value="{{ old('address') }}" />
                                                <span class="text-danger">{{ $errors->first('address', ':message') }}</span>
                                            </div>
                                        </div>
                                        <div class="row mt-4">
                                            <div class="form-group col-md-6">
                                                <label for="city" class="control-label">City/Municipality</label>
                                                <input id="city" name="city" class="form-control"
                                                    value="{{ old('city') }}" />
                                                <span class="text-danger">{{ $errors->first('city', ':message') }}</span>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="state" class="control-label">Province</label>
                                                <input id="state" name="state" class="form-control"
                                                    value="{{ old('state') }}" />
                                                <span class="text-danger">{{ $errors->first('state', ':message') }}</span>
                                            </div>
                                        </div>
                                        <div class="row mt-4">
                                            <div class="form-group col-md-6">
                                                <label for="radius" class="control-label">Radius</label>
                                                <input id="radius" name="radius" class="form-control" type="number"
                                                    value="{{ old('radius') }}" />
                                                <span class="text-danger">{{ $errors->first('Radius', ':message') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
    <hr>
                                <div class="mt-2">
                                    <h5> Personal Details</h5>
                                    <div class="">
                                        <div class="form-group row">
                                            <div class="form-group col-md-12 mb-3">
                                                <label for="phone" class="control-label">Phone Number</label>
                                                <input id="phone" name="phone" type="number" class="form-control"
                                                    value="{{ old('phone') }}" />
                                                <span class="text-danger">{{ $errors->first('phone', ':message') }}</span>
                                            </div>
                                            <div class="form-group col-md-12 mb-3">
                                                <label for="email" class="control-label">Email</label>
                                                <input id="email" name="email" type="email" class="form-control"
                                                    value="{{ old('email') }}" />
                                                <span class="text-danger">{{ $errors->first('email', ':message') }}</span>
                                            </div>
                                            <div class="form-group col-md-12 mb-3">
                                                <label for="contactPersonName" class="control-label">Contact Person
                                                    Name</label>
                                                <input id="contactPersonName" name="contactPersonName" class="form-control"
                                                    value="{{ old('contactPersonName') }}" />
                                                <span
                                                    class="text-danger">{{ $errors->first('contactPersonName', ':message') }}</span>
                                            </div>
                                        </div>
                                        <div class="row mt-4">
                                            <div class="form-group col-md-12">
                                                <label for="remarks" class="control-label">Remarks</label>
                                                <textarea id="remarks" rows="5" name="remarks" class="form-control">{{ old('remarks') }}</textarea>
                                                <span
                                                    class="text-danger">{{ $errors->first('remarks', ':message') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class=" mt-3">
                                <div class="form-group d-flex gap-2">
                                    <a href="{{ route('client.index') }}" class="btn btn-secondary cancel-btn">Cancel</a>
                                    <button type="submit" class="btn btn-primary">Create</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-6">
                    <div class="form-group row mb-3">
                        <div class="form-group col-md-12">
                            <label for="locationSearch" class="control-label">Location Search</label>
                            <input id="locationSearch" name="locationSearch" class="form-control"
                                placeholder="Search for a location" />
                        </div>
                    </div>
                    <div id="map" style="height: 400px; width: 100%;"></div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('page-script')
    @include('_partials._modals.core.unsaved_changes')
    @vite(['resources/assets/js/app/unsaved-changes-handler.js'])
    <script>
        let map;
        let marker;
        let circle;
        let autocomplete;
        
        // Initialize unsaved changes handler
        let unsavedChangesHandler;
        document.addEventListener('DOMContentLoaded', function() {
            unsavedChangesHandler = new UnsavedChangesHandler('clientCreateForm', {
                cancelUrl: '{{ route('client.index') }}',
                excludeFields: ['_token', 'latitude', 'longitude'] // Exclude CSRF token and hidden map fields from dirty tracking
            });
            unsavedChangesHandler.init();
            
            // Mark form as clean after successful submission
            document.querySelector('form').addEventListener('submit', function() {
                unsavedChangesHandler.markAsClean();
            });
        });

        // Initialize Map - must be in global scope for Google Maps callback
        window.initMap = function initMap() {
            const latitude = '{{ $settings->center_latitude }}';
            const longitude = '{{ $settings->center_longitude }}';
            const zoomLevel = '{{ $settings->map_zoom_level }}';

            const defaultLocation = {
                lat: parseFloat(latitude),
                lng: parseFloat(longitude)
            };

            // Initialize the map
            map = new google.maps.Map(document.getElementById("map"), {
                center: defaultLocation,
                zoom: parseInt(zoomLevel),
            });

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

            // Initialize circle with a default radius of 100 meters
            circle = new google.maps.Circle({
                map: map,
                radius: 100,
                fillColor: '#AA0000',
                strokeColor: '#AA0000'
            });
            circle.bindTo('center', marker, 'position');

            // Add event listener for marker drag
            marker.addListener("dragend", () => {
                updateLatLng(marker.getPosition());
            });

            // Update marker position and fields on map click
            map.addListener("click", (event) => {
                marker.setPosition(event.latLng);
                updateLatLng(event.latLng);
            });

            // Initialize autocomplete for search box with establishment type only
            autocomplete = new google.maps.places.Autocomplete(
                document.getElementById("locationSearch"), {
                    types: ["establishment"],
                    componentRestrictions: { country: "ph" },
                    fields: ["place_id", "geometry", "name", "formatted_address", "address_components", "types"]
                }
            );

            // Add listener for place selection with auto-population
            autocomplete.addListener("place_changed", () => {
                const place = autocomplete.getPlace();

                if (place.geometry) {
                    map.panTo(place.geometry.location);
                    marker.setPosition(place.geometry.location);
                    updateLatLng(place.geometry.location);
                    map.setZoom(15);
                    
                    // Auto-populate form fields
                    autoPopulateFields(place);
                } else {
                    alert("No details available for the selected location!");
                }
            });

            // Set default radius to 100 meters
            document.getElementById("radius").value = 100;

            // Update the circle radius based on input change
            document.getElementById("radius").addEventListener("input", function() {
                const radius = parseFloat(this.value);
                circle.setRadius(radius);
            });
        };
    </script>

    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places&callback=initMap"
        defer></script>

    <script>
        // Update Latitude and Longitude input fields
        function updateLatLng(location) {
            document.getElementById("latitude").value = location.lat();
            document.getElementById("longitude").value = location.lng();
            
            // Reverse geocode to get address information
            reverseGeocode(location);
        }

        // Auto-populate form fields from place data
        function autoPopulateFields(place) {
            // Populate address field
            if (place.formatted_address) {
                document.getElementById("address").value = place.formatted_address;
            }
            
            // Extract city and province from address components
            if (place.address_components) {
                const city = extractCity(place.address_components);
                const province = extractProvince(place.address_components);
                
                if (city) {
                    document.getElementById("city").value = city;
                }
                if (province) {
                    document.getElementById("state").value = province;
                }
            }
            
            // If it's an establishment, populate the name field
            if (place.name && place.types && place.types.includes('establishment')) {
                document.getElementById("name").value = place.name;
            }
        }

        // Extract city from address components (Philippine address structure)
        function extractCity(components) {
            // Based on the address structure: [street_number, route, sublocality, locality, administrative_area_level_1, administrative_area_level_1, country, postal_code]
            // City/Municipality is typically at index 3 (locality)
            
            // Look for locality type first (index 3 in your example)
            for (let component of components) {
                if (component.types.includes('locality')) {
                    return component.long_name; // "Iloilo City"
                }
            }
            
            // Fallback to administrative_area_level_2
            for (let component of components) {
                if (component.types.includes('administrative_area_level_2')) {
                    return component.long_name;
                }
            }
            
            // Last fallback to sublocality
            for (let component of components) {
                if (component.types.includes('sublocality')) {
                    return component.long_name;
                }
            }
            
            return '';
        }

        // Extract province from address components (Philippine address structure)
        function extractProvince(components) {
            // Get administrative_area_level_2 component (province)
            for (let component of components) {
                if (component.types.includes('administrative_area_level_2')) {
                    return component.long_name;
                }
            }
            
            return '';
        }

        // Reverse geocode coordinates to get address
        function reverseGeocode(latLng) {
            const geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 
                location: latLng,
                componentRestrictions: { country: "ph" }
            }, (results, status) => {
                if (status === 'OK' && results[0]) {
                    autoPopulateFields(results[0]);
                }
            });
        }
    </script>
@endsection