@extends('layouts.app')

@section('title', isset($service) ? 'Edit Service' : 'Create Service')

@section('content')
<div class="min-h-screen bg-gray-50 p-4 lg:p-6">
    <div class="max-w-4xl mx-auto">
        @if(session('success'))
            <div class="mb-6 bg-green-50 border border-green-200 rounded-md p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-check-circle text-green-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-green-800">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 bg-red-50 border border-red-200 rounded-md p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-circle text-red-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-red-800">{{ session('error') }}</p>
                    </div>
                </div>
            </div>
        @endif

        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h5 class="text-lg font-semibold text-gray-900 m-0">
                    <i class="fas fa-shield-alt mr-2"></i>
                    @if(isset($service))
                        Edit Service
                    @else
                        Create Service
                    @endif
                </h5>
                <a href="{{ route('patrols.services') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Services
                </a>
            </div>
            <div class="p-6">
                <form action="{{ isset($service) ? route('patrols.services.update', $service->id) : route('patrols.services.store') }}" method="POST">
                    @csrf
                    @if(isset($service))
                        @method('PUT')
                    @endif

                    <!-- Basic Information -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-info-circle mr-2"></i>
                                Basic Information
                            </h6>
                            <p class="text-gray-500 text-sm">Basic details about the service.</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="service_name" class="block text-sm font-medium text-gray-700 mb-2">Service Name</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('service_name') border-red-500 @enderror" id="service_name" name="service_name" 
                                       value="{{ old('service_name', $service->service_name ?? '') }}" required
                                       placeholder="e.g. Night Patrol Service">
                                @error('service_name')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="client_id" class="block text-sm font-medium text-gray-700 mb-2">Client</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('client_id') border-red-500 @enderror" id="client_id" name="client_id" required>
                                    <option value="">Select Client</option>
                                    @foreach($clients as $clientId => $clientName)
                                        <option value="{{ $clientId }}" {{ old('client_id', $service->client_id ?? '') == $clientId ? 'selected' : '' }}>
                                            {{ $clientName }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('client_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Service Details -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-cog mr-2"></i>
                                Service Details
                            </h6>
                            <p class="text-gray-500 text-sm">Service type and location information.</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="service_type" class="block text-sm font-medium text-gray-700 mb-2">Service Type</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('service_type') border-red-500 @enderror" id="service_type" name="service_type" required>
                                    <option value="">Select Type</option>
                                    <option value="patrolling" {{ old('service_type', $service->service_type ?? '') == 'patrolling' ? 'selected' : '' }}>Patrolling</option>
                                    <option value="security" {{ old('service_type', $service->service_type ?? '') == 'security' ? 'selected' : '' }}>Security</option>
                                    <option value="monitoring" {{ old('service_type', $service->service_type ?? '') == 'monitoring' ? 'selected' : '' }}>Monitoring</option>
                                </select>
                                @error('service_type')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="location_id" class="block text-sm font-medium text-gray-700 mb-2">Location</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('location_id') border-red-500 @enderror" id="location_id" name="location_id" required data-selected-id="{{ old('location_id', $service->location_id ?? '') }}">
                                    <option value="">Select Location</option>
                                    @if(isset($service) && $service->location_id)
                                        <option value="{{ $service->location_id }}" selected>{{ $service->location->name ?? 'Unknown Location' }}</option>
                                    @endif
                                </select>
                                @error('location_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="zone_area" class="block text-sm font-medium text-gray-700 mb-2">Zone Area</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('zone_area') border-red-500 @enderror" id="zone_area" name="zone_area" 
                                       value="{{ old('zone_area', $service->zone_area ?? '') }}"
                                       placeholder="e.g. North Zone (Optional)">
                                @error('zone_area')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="is_active" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('is_active') border-red-500 @enderror" id="is_active" name="is_active" required>
                                    <option value="1" {{ old('is_active', $service->is_active ?? 1) == 1 ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ old('is_active', $service->is_active ?? 1) == 0 ? 'selected' : '' }}>Inactive</option>
                                </select>
                                @error('is_active')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-file-alt mr-2"></i>
                                Description
                            </h6>
                            <p class="text-gray-500 text-sm">Additional details about the service.</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                                <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('description') border-red-500 @enderror" id="description" name="description" rows="3" 
                                          placeholder="Provide additional details about the service...">{{ old('description', $service->description ?? '') }}</textarea>
                                @error('description')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end gap-3">
                        <a href="{{ route('patrols.services') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors">
                            <i class="fas fa-times mr-2"></i>Cancel
                        </a>
                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                            <i class="fas fa-save mr-2"></i>
                            @if(isset($service))
                                Update Service
                            @else
                                Create Service
                            @endif
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const clientIdSelect = document.getElementById('client_id');
    const locationIdSelect = document.getElementById('location_id');
    const selectedLocationId = locationIdSelect.dataset.selectedId || null;

    function loadLocations(clientId) {
        if (!clientId) {
            locationIdSelect.innerHTML = '<option value="">Select Location</option>';
            locationIdSelect.disabled = false;
            return;
        }

        // Show loading state
        locationIdSelect.innerHTML = '<option value="">Loading locations...</option>';
        locationIdSelect.disabled = true;

        // Fetch locations for the selected client
        fetch(`/patrols/api/client/${clientId}/locations`)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('Locations API Response:', data);
                
                if (data.success) {
                    if (data.locations && Object.keys(data.locations).length > 0) {
                        let html = '<option value="">Select Location</option>';
                        Object.entries(data.locations).forEach(([id, name]) => {
                            const isSelected = selectedLocationId && (selectedLocationId == id || selectedLocationId === String(id));
                            html += `<option value="${id}"${isSelected ? ' selected' : ''}>${name}</option>`;
                        });
                        locationIdSelect.innerHTML = html;
                        console.log('✓ Locations loaded. Count:', Object.keys(data.locations).length);
                    } else {
                        locationIdSelect.innerHTML = '<option value="">No locations available for this client</option>';
                        console.log('⚠ No locations found for client:', clientId);
                    }
                } else {
                    locationIdSelect.innerHTML = '<option value="">Error loading locations</option>';
                    console.error('✗ API error:', data.message);
                }
                locationIdSelect.disabled = false;
            })
            .catch(error => {
                console.error('Error fetching locations:', error);
                locationIdSelect.innerHTML = '<option value="">Error loading locations</option>';
                locationIdSelect.disabled = false;
            });
    }

    // Load locations when client is selected
    clientIdSelect.addEventListener('change', function() {
        console.log('📤 Client changed:', this.value);
        loadLocations(this.value);
    });

    // Load locations on page load if client is already selected (edit mode)
    console.log('📄 Page loaded. Client value:', clientIdSelect.value);
    if (clientIdSelect.value) {
        console.log('📥 Auto-loading locations for client:', clientIdSelect.value);
        loadLocations(clientIdSelect.value);
    }
});
</script>
@endsection