@extends('layouts.app')

@section('title', 'New Assignment Transit')

@section('content')
<div class="min-h-screen bg-gray-50 p-4 lg:p-6">
    <div class="max-w-4xl mx-auto">
        <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-route mr-2"></i>
                    New Assignment Transit
                </h5>
                <a href="{{ route('transit.index') }}" 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
                </a>
            </div>

            <div class="p-6">
                <form action="{{ route('employee-assignment-transits.store') }}" method="POST" class="space-y-6" id="transitForm">
                    @csrf

                    <div class="mb-2">
                        <h6 class="text-blue-600 font-semibold text-sm mb-1">
                            <i class="fas fa-info-circle mr-2"></i>
                            Transit Details
                        </h6>
                        <p class="text-gray-500 text-sm">Select the employee, current assignment, and destination Site.</p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="employee_id" class="block text-sm font-medium text-gray-700 mb-2">Employee</label>
                            <select id="employee_id" name="employee_id" 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('employee_id') border-red-500 @enderror" required>
                                <option value="">Select Employee</option>
                                @foreach($employees ?? [] as $emp)
                                    <option value="{{ $emp->id }}" {{ (string)old('employee_id', $employee?->id) === (string)$emp->id ? 'selected' : '' }}>
                                        {{ $emp->full_name ?? $emp->fullName ?? ($emp->first_name . ' ' . $emp->last_name) }}
                                    </option>
                                @endforeach
                            </select>
                            @error('employee_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="from_assignment_id" class="block text-sm font-medium text-gray-700 mb-2">From Assignment</label>
                            <select id="from_assignment_id" name="from_assignment_id" 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('from_assignment_id') border-red-500 @enderror" required>
                                <option value="">Select Assignment</option>
                                @foreach($currentAssignments ?? [] as $assignment)
                                    <option value="{{ $assignment->id }}" data-employee-id="{{ $assignment->employee_id }}" {{ (string)old('from_assignment_id', $fromAssignment?->id) === (string)$assignment->id ? 'selected' : '' }}>
                                        {{ $assignment->employee?->full_name ?? $assignment->employee?->fullName ?? '' }} - {{ $assignment->service?->service_name ?? '' }} ({{ $assignment->service?->client?->name ?? '' }})
                                    </option>
                                @endforeach
                            </select>
                            @error('from_assignment_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="to_service_id" class="block text-sm font-medium text-gray-700 mb-2">To Site</label>
                            <select id="to_service_id" name="to_service_id" 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('to_service_id') border-red-500 @enderror" required>
                                <option value="">{{ count($availableServices ?? []) > 0 ? 'Select Site' : 'Please select an assignment first' }}</option>
                                @foreach($availableServices ?? [] as $service)
                                    <option value="{{ $service->id }}" {{ (string)old('to_service_id') === (string)$service->id ? 'selected' : '' }}>
                                        {{ $service->service_name ?? '' }} ({{ $service->client?->name ?? '' }})
                                    </option>
                                @endforeach
                            </select>
                            @if(count($availableServices ?? []) == 0)
                                <p class="mt-1 text-sm text-gray-500">Please select an assignment first to see available site</p>
                            @endif
                            @error('to_service_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="transit_date" class="block text-sm font-medium text-gray-700 mb-2">Transit Date</label>
                            <input type="date" id="transit_date" name="transit_date" value="{{ old('transit_date', now()->format('Y-m-d')) }}" required 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('transit_date') border-red-500 @enderror">
                            @error('transit_date')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="start_time" class="block text-sm font-medium text-gray-700 mb-2">Start Time (Optional)</label>
                            <input type="time" id="start_time" name="start_time" value="{{ old('start_time') }}" 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('start_time') border-red-500 @enderror">
                            @error('start_time')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="end_time" class="block text-sm font-medium text-gray-700 mb-2">End Time (Optional)</label>
                            <input type="time" id="end_time" name="end_time" value="{{ old('end_time') }}" 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('end_time') border-red-500 @enderror">
                            @error('end_time')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label for="reason" class="block text-sm font-medium text-gray-700 mb-2">Reason (Optional)</label>
                        <textarea id="reason" name="reason" rows="3" 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('reason') border-red-500 @enderror" placeholder="Reason for transit...">{{ old('reason') }}</textarea>
                        @error('reason')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex justify-end gap-3">
                        <a href="{{ route('transit.index') }}" 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>Create Transit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const employeeSelect = document.getElementById('employee_id');
    const assignmentSelect = document.getElementById('from_assignment_id');
    const serviceSelect = document.getElementById('to_service_id');

    async function loadEmployeeAssignments(employeeId) {
        if (!employeeId) {
            assignmentSelect.innerHTML = '<option value="">Select Employee first</option>';
            serviceSelect.innerHTML = '<option value="">Please select an assignment first</option>';
            return;
        }

        // Show loading state
        assignmentSelect.innerHTML = '<option value="">Loading assignments...</option>';
        assignmentSelect.disabled = true;
        serviceSelect.innerHTML = '<option value="">Please select an assignment first</option>';

        try {
            const url = `/employee-assignment-transits/get-employee-assignments/${employeeId}`;
            const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
            
            if (!res.ok) {
                throw new Error('Failed to load assignments');
            }

            const assignments = await res.json();
            const currentValue = assignmentSelect.value;

            assignmentSelect.innerHTML = '<option value="">Select Assignment</option>';
            
            if (assignments.length === 0) {
                assignmentSelect.innerHTML += '<option value="" disabled>No active assignments found</option>';
            } else {
                assignments.forEach((a) => {
                    const opt = document.createElement('option');
                    opt.value = a.id;
                    opt.setAttribute('data-employee-id', a.employee_id);
                    const siteName = a.service?.site_name ?? '';
                    const clientName = a.service?.client?.name ?? '';
                    opt.textContent = `${siteName}${clientName ? ' (' + clientName + ')' : ''}`;
                    assignmentSelect.appendChild(opt);
                });
            }

            if (currentValue) {
                assignmentSelect.value = currentValue;
                // Auto-load sites if an assignment is selected
                if (currentValue) {
                    await loadAvailableServices(currentValue);
                }
            }
        } catch (error) {
            console.error('Error loading assignments:', error);
            assignmentSelect.innerHTML = '<option value="">Error loading assignments</option>';
        } finally {
            assignmentSelect.disabled = false;
        }
    }

    async function loadAvailableServices(fromAssignmentId) {
        if (!fromAssignmentId) {
            serviceSelect.innerHTML = '<option value="">Please select an assignment first</option>';
            return;
        }

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

        try {
            const url = `/employee-assignment-transits/get-available-services/${fromAssignmentId}`;
            const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
            
            if (!res.ok) {
                throw new Error('Failed to load sites');
            }

            const services = await res.json();
            const currentValue = serviceSelect.value;

            serviceSelect.innerHTML = '<option value="">Select Site</option>';
            
            if (services.length === 0) {
                serviceSelect.innerHTML += '<option value="" disabled>No available sites found</option>';
            } else {
                services.forEach((s) => {
                    const opt = document.createElement('option');
                    opt.value = s.id;
                    const siteName = s.site_name ?? '';
                    const clientName = s.client?.name ?? '';
                    opt.textContent = `${siteName}${clientName ? ' (' + clientName + ')' : ''}`;
                    serviceSelect.appendChild(opt);
                });
            }

            if (currentValue) {
                serviceSelect.value = currentValue;
            }
        } catch (error) {
            console.error('Error loading sites:', error);
            serviceSelect.innerHTML = '<option value="">Error loading sites</option>';
        } finally {
            serviceSelect.disabled = false;
        }
    }

    employeeSelect?.addEventListener('change', async function () {
        await loadEmployeeAssignments(this.value);
    });

    assignmentSelect?.addEventListener('change', async function () {
        const selected = this.options[this.selectedIndex];
        const employeeId = selected?.getAttribute('data-employee-id');
        if (employeeId && employeeSelect.value !== employeeId) {
            employeeSelect.value = employeeId;
        }
        await loadAvailableServices(this.value);
    });

    // Initialize the form when page loads
    async function initializeForm() {
        // If there's a pre-selected employee, load their assignments
        if (employeeSelect.value) {
            await loadEmployeeAssignments(employeeSelect.value);
        }
        
        // If there's a pre-selected assignment, load its sites
        if (assignmentSelect.value) {
            await loadAvailableServices(assignmentSelect.value);
        }
    }

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', initializeForm);
})();
</script>
@endpush