@extends('layouts.app')

@section('title', isset($geofence) ? 'Edit Geofence' : 'Add Geofence')

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white shadow-lg rounded-lg">
            <div class="border-b border-gray-200 px-6 py-4 flex justify-between items-center">
                <h2 class="text-2xl font-bold text-gray-900">
                    @if(isset($geofence))
                        Edit Geofence
                    @else
                        Add Geofence
                    @endif
                </h2>
                <a href="{{ route('geofences.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <i class="fas fa-arrow-left mr-2"></i>Back to List
                </a>
            </div>
            <div class="p-6">
                <form action="{{ isset($geofence) ? route('geofences.update', $geofence->id) : route('geofences.store') }}" method="POST" id="geofenceForm">
                    @csrf
                    @if(isset($geofence))
                        @method('PUT')
                    @endif

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Geofence Name</label>
                            <input type="text" id="name" name="name" 
                                   value="{{ old('name', $geofence->name ?? '') }}" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('name') border-red-500 @enderror">
                            @error('name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="geofence_type" class="block text-sm font-medium text-gray-700 mb-2">Geofence Type</label>
                            <select id="geofence_type" name="geofence_type" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('geofence_type') border-red-500 @enderror">
                                <option value="">Select Type</option>
                                <option value="radius" {{ old('geofence_type', $geofence->geofence_type ?? '') == 'radius' ? 'selected' : '' }}>Circular (Radius)</option>
                                <option value="polygon" {{ old('geofence_type', $geofence->geofence_type ?? '') == 'polygon' ? 'selected' : '' }}>Polygon</option>
                                <option value="rectangle" {{ old('geofence_type', $geofence->geofence_type ?? '') == 'rectangle' ? 'selected' : '' }}>Rectangle</option>
                            </select>
                            @error('geofence_type')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                        <div>
                            <label for="service_id" class="block text-sm font-medium text-gray-700 mb-2">Service</label>
                            <select id="service_id" name="service_id" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('service_id') border-red-500 @enderror">
                                <option value="">Select Site</option>
                                @foreach($services as $service)
                                    <option value="{{ $service->id }}" {{ old('service_id', $geofence->service_id ?? '') == $service->id ? 'selected' : '' }}>
                                        {{ $service->service_name }} - {{ $service->client->client_name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('service_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Radius Geofence Fields -->
                    <div id="radiusFields" class="geofence-type-fields mt-6" style="display: none;">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Radius Geofence Settings</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="radius" class="block text-sm font-medium text-gray-700 mb-2">Radius (meters)</label>
                                <input type="number" id="radius" name="radius" 
                                       value="{{ old('radius', $geofence->radius ?? 100) }}" min="1"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('radius') border-red-500 @enderror">
                                @error('radius')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="latitude" class="block text-sm font-medium text-gray-700 mb-2">Center Latitude</label>
                                <input type="number" step="any" id="latitude" name="latitude" 
                                       value="{{ old('latitude', isset($geofence) && is_array($geofence->coordinates) ? $geofence->coordinates['lat'] : '') }}"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('latitude') border-red-500 @enderror">
                                @error('latitude')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                            <div>
                                <label for="longitude" class="block text-sm font-medium text-gray-700 mb-2">Center Longitude</label>
                                <input type="number" step="any" id="longitude" name="longitude" 
                                       value="{{ old('longitude', isset($geofence) && is_array($geofence->coordinates) ? $geofence->coordinates['lng'] : '') }}"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('longitude') border-red-500 @enderror">
                                @error('longitude')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Polygon Geofence Fields -->
                    <div id="polygonFields" class="geofence-type-fields mt-6" style="display: none;">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Polygon Geofence Settings</h3>
                        <div>
                            <label for="coordinates" class="block text-sm font-medium text-gray-700 mb-2">Coordinates (JSON array of lat/lng pairs)</label>
                            <textarea id="coordinates" name="coordinates" rows="4" 
                                      placeholder='[[lat1, lng1], [lat2, lng2], [lat3, lng3]]'
                                      class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('coordinates') border-red-500 @enderror">{{ old('coordinates', isset($geofence) ? (is_array($geofence->coordinates) ? json_encode($geofence->coordinates) : $geofence->coordinates) : '') }}</textarea>
                            @error('coordinates')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Rectangle Geofence Fields -->
                    <div id="rectangleFields" class="geofence-type-fields mt-6" style="display: none;">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Rectangle Geofence Settings</h3>
                        <div>
                            <label for="bounds" class="block text-sm font-medium text-gray-700 mb-2">Bounds (JSON)</label>
                            <textarea id="bounds" name="bounds" rows="4" 
                                      placeholder='{"north":0,"south":0,"east":0,"west":0}'
                                      class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('bounds') border-red-500 @enderror">{{ old('bounds', isset($geofence) ? (is_array($geofence->bounds) ? json_encode($geofence->bounds) : $geofence->bounds) : '') }}</textarea>
                            @error('bounds')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="mt-6">
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                        <textarea id="description" name="description" rows="3" 
                                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('description') border-red-500 @enderror">{{ old('description', $geofence->description ?? '') }}</textarea>
                        @error('description')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mt-6">
                        <div class="flex items-center">
                            <input type="checkbox" id="is_active" name="is_active" 
                                   {{ old('is_active', $geofence->is_active ?? true) ? 'checked' : '' }}
                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                            <label for="is_active" class="ml-2 block text-sm text-gray-900">
                                Active
                            </label>
                        </div>
                    </div>

                    <div class="mt-8 flex justify-end space-x-3">
                        <a href="{{ route('geofences.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            Cancel
                        </a>
                        <button type="submit" id="submitBtn" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            <i class="fas fa-save mr-2"></i>
                            <span id="submitBtnText">
                                @if(isset($geofence))
                                    Update Geofence
                                @else
                                    Create Geofence
                                @endif
                            </span>
                        </button>
                    </div>
                    
                    <!-- Error/Success Messages -->
                    <div id="formMessages" class="mt-4 hidden">
                        <div id="messageContent" class="p-4 rounded-md"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
// Toggle geofence type fields
document.addEventListener('DOMContentLoaded', function() {
    const geofenceTypeSelect = document.getElementById('geofence_type');
    const radiusFields = document.getElementById('radiusFields');
    const polygonFields = document.getElementById('polygonFields');
    const rectangleFields = document.getElementById('rectangleFields');
    const form = document.getElementById('geofenceForm');
    const submitBtn = document.getElementById('submitBtn');
    const submitBtnText = document.getElementById('submitBtnText');
    const formMessages = document.getElementById('formMessages');
    const messageContent = document.getElementById('messageContent');
    
    function toggleGeofenceFields() {
        const selectedType = geofenceTypeSelect.value;
        
        // Hide all fields first
        radiusFields.style.display = 'none';
        polygonFields.style.display = 'none';
        rectangleFields.style.display = 'none';
        
        // Remove required attributes from all conditional fields
        document.getElementById('radius').removeAttribute('required');
        document.getElementById('latitude').removeAttribute('required');
        document.getElementById('longitude').removeAttribute('required');
        document.getElementById('coordinates').removeAttribute('required');
        document.getElementById('bounds').removeAttribute('required');
        
        if (selectedType === 'radius') {
            radiusFields.style.display = 'block';
            // Make radius fields required
            document.getElementById('radius').setAttribute('required', 'required');
            document.getElementById('latitude').setAttribute('required', 'required');
            document.getElementById('longitude').setAttribute('required', 'required');
        } else if (selectedType === 'polygon') {
            polygonFields.style.display = 'block';
            // Make polygon fields required
            document.getElementById('coordinates').setAttribute('required', 'required');
        } else if (selectedType === 'rectangle') {
            rectangleFields.style.display = 'block';
            // Make rectangle fields required
            document.getElementById('bounds').setAttribute('required', 'required');
        }
    }
    
    function showMessage(message, type = 'error') {
        formMessages.classList.remove('hidden');
        messageContent.classList.remove('bg-red-50', 'text-red-800', 'bg-green-50', 'text-green-800', 'bg-yellow-50', 'text-yellow-800');
        
        if (type === 'error') {
            messageContent.classList.add('bg-red-50', 'text-red-800');
        } else if (type === 'success') {
            messageContent.classList.add('bg-green-50', 'text-green-800');
        } else if (type === 'warning') {
            messageContent.classList.add('bg-yellow-50', 'text-yellow-800');
        }
        
        messageContent.innerHTML = message;
        
        // Auto-hide success messages after 5 seconds
        if (type === 'success') {
            setTimeout(() => {
                formMessages.classList.add('hidden');
            }, 5000);
        }
    }
    
    function setLoading(loading) {
        submitBtn.disabled = loading;
        if (loading) {
            submitBtnText.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Saving...';
            submitBtn.classList.add('opacity-75', 'cursor-not-allowed');
        } else {
            submitBtnText.innerHTML = submitBtnText.getAttribute('data-original-text') || 
                '{{ isset($geofence) ? "Update Geofence" : "Create Geofence" }}';
            submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
        }
    }
    
    function validateForm() {
        const geofenceType = geofenceTypeSelect.value;
        const name = document.getElementById('name').value.trim();
        const serviceId = document.getElementById('service_id').value;
        
        if (!name) {
            showMessage('Geofence name is required.', 'error');
            return false;
        }
        
        if (!geofenceType) {
            showMessage('Please select a geofence type.', 'error');
            return false;
        }
        
        if (!serviceId) {
            showMessage('Please select a service.', 'error');
            return false;
        }
        
        if (geofenceType === 'radius') {
            const radius = document.getElementById('radius').value;
            const latitude = document.getElementById('latitude').value;
            const longitude = document.getElementById('longitude').value;
            
            if (!radius || radius <= 0) {
                showMessage('Radius must be greater than 0.', 'error');
                return false;
            }
            
            if (!latitude || latitude < -90 || latitude > 90) {
                showMessage('Latitude must be between -90 and 90.', 'error');
                return false;
            }
            
            if (!longitude || longitude < -180 || longitude > 180) {
                showMessage('Longitude must be between -180 and 180.', 'error');
                return false;
            }
        }
        
        if (geofenceType === 'polygon') {
            const coordinates = document.getElementById('coordinates').value.trim();
            if (!coordinates) {
                showMessage('Coordinates are required for polygon geofences.', 'error');
                return false;
            }
            
            try {
                const parsed = JSON.parse(coordinates);
                if (!Array.isArray(parsed) || parsed.length < 3) {
                    showMessage('Polygon must have at least 3 coordinate points.', 'error');
                    return false;
                }
            } catch (e) {
                showMessage('Invalid JSON format for coordinates.', 'error');
                return false;
            }
        }
        
        if (geofenceType === 'rectangle') {
            const bounds = document.getElementById('bounds').value.trim();
            if (!bounds) {
                showMessage('Bounds are required for rectangle geofences.', 'error');
                return false;
            }
            
            try {
                const parsed = JSON.parse(bounds);
                if (!parsed.north || !parsed.south || !parsed.east || !parsed.west) {
                    showMessage('Bounds must include north, south, east, and west values.', 'error');
                    return false;
                }
            } catch (e) {
                showMessage('Invalid JSON format for bounds.', 'error');
                return false;
            }
        }
        
        return true;
    }
    
    // Handle form submission
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (!validateForm()) {
            return;
        }
        
        setLoading(true);
        formMessages.classList.add('hidden');
        
        const formData = new FormData(form);
        
        fetch(form.action, {
            method: form.method,
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => {
            if (response.ok) {
                return response.json().then(data => {
                    if (data.success) {
                        showMessage('Geofence saved successfully!', 'success');
                        setTimeout(() => {
                            window.location.href = '{{ route("geofences.index") }}';
                        }, 1500);
                    } else {
                        showMessage(data.message || 'Error saving geofence.', 'error');
                    }
                });
            } else if (response.status === 422) {
                return response.json().then(data => {
                    if (data.errors) {
                        const errorMessages = Object.values(data.errors).flat().join('\n');
                        showMessage(errorMessages, 'error');
                    } else {
                        showMessage('Validation failed. Please check the form.', 'error');
                    }
                });
            } else {
                throw new Error('Network response was not ok');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showMessage('An error occurred while saving. Please try again.', 'error');
        })
        .finally(() => {
            setLoading(false);
        });
    });
    
    geofenceTypeSelect.addEventListener('change', toggleGeofenceFields);
    
    // Initialize on page load
    toggleGeofenceFields();
    
    // Store original button text
    submitBtnText.setAttribute('data-original-text', submitBtnText.textContent.trim());
});
</script>