@extends('layouts.app')

@section('content')
<div class="auth-container" style="max-width: 650px; margin: 2rem auto;">
    <div class="auth-card glass">
        <h2 class="auth-title" style="color: var(--primary-color);">Agendar Nueva Cita</h2>
        <p class="auth-subtitle">Completa el formulario interactivo para agendar tu cita de manera inmediata.</p>

        @if ($errors->any())
            <div class="alert alert-error" style="font-size: 0.85rem; padding: 0.75rem 1rem;">
                <div style="flex: 1;">
                    @foreach ($errors->all() as $error)
                        <span style="display:block;">{{ $error }}</span>
                    @endforeach
                </div>
            </div>
        @endif

        <form id="booking-form" action="{{ route('appointments.store') }}" method="POST">
            @csrf

            <!-- 1. Selección de Servicio -->
            <div class="form-group">
                <label for="service_id" class="form-label">1. Selecciona el Servicio</label>
                <select name="service_id" id="service_id" class="form-control" required>
                    <option value="" disabled {{ is_null($preselectedService) ? 'selected' : '' }}>-- Seleccionar un servicio --</option>
                    @foreach($services as $srv)
                        <option value="{{ $srv->id }}" 
                            data-duration="{{ $srv->duration_minutes }}"
                            {{ $preselectedService && $preselectedService->id == $srv->id ? 'selected' : '' }}>
                            {{ $srv->name }} ({{ $srv->duration_minutes }} min) - ${{ number_format($srv->price, 2) }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- 2. Selección de Empleado (Staff) -->
            <div class="form-group">
                <label for="staff_id" class="form-label">2. Selecciona el Empleado</label>
                <select name="staff_id" id="staff_id" class="form-control" required {{ is_null($preselectedService) ? 'disabled' : '' }}>
                    <option value="" disabled selected>-- Primero selecciona un servicio --</option>
                    @if($preselectedService)
                        @foreach($staffForService as $stf)
                            <option value="{{ $stf->id }}">{{ $stf->name }} ({{ $stf->role ?? 'Estilista' }})</option>
                        @endforeach
                    @endif
                </select>
            </div>

            <!-- 3. Selección de Fecha -->
            <div class="form-group">
                <label for="date" class="form-label">3. Selecciona la Fecha</label>
                <input type="date" id="date" name="date" class="form-control" 
                    min="{{ date('Y-m-d') }}" required disabled>
            </div>

            <!-- 4. Selección de Horario Disponible (Time Slots) -->
            <div class="form-group" id="slots-section" style="display: none; margin-bottom: 2rem;">
                <label class="form-label">4. Selecciona un Horario Disponible</label>
                <input type="hidden" name="time" id="selected_time" required>
                
                <div id="slots-loading" style="display: none; text-align: center; padding: 1rem;">
                    <span style="color: var(--text-secondary); font-size: 0.9rem;">Cargando horarios disponibles...</span>
                </div>
                
                <div id="slots-container" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.5rem;">
                    <!-- Slots will be injected here by Javascript -->
                </div>

                <div id="slots-error" style="display: none; color: var(--color-error); font-size: 0.9rem; padding: 0.5rem; text-align: center; border: 1px dashed var(--color-error); border-radius: var(--radius-sm); background: rgba(239, 68, 68, 0.05);">
                    <!-- Error messages will be injected here -->
                </div>
            </div>

            <!-- 5. Información de Contacto -->
            <div class="glass" style="padding: 1.25rem; border-radius: var(--radius-md); margin-bottom: 2rem; border-color: var(--border-color);">
                <h4 style="font-size: 0.95rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-color);">5. Información de Contacto para la Cita</h4>
                
                <div class="form-group">
                    <label for="name" class="form-label">Nombre del Cliente</label>
                    <input type="text" id="name" name="name" value="{{ old('name', auth()->user()->name) }}" required class="form-control" placeholder="Ej. Juan Pérez">
                </div>

                <div class="form-group" style="margin-bottom: 0;">
                    <label for="phone" class="form-label">Teléfono de Contacto</label>
                    <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" required class="form-control" placeholder="Ej. +54 9 11 1234 5678">
                </div>
            </div>

            <!-- Botón de Confirmación -->
            <button type="submit" id="submit-btn" class="btn btn-primary btn-block" style="width: 100%; font-size: 1.05rem;" disabled>
                Confirmar y Reservar Cita
            </button>
        </form>
    </div>
</div>

<style>
.slot-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.slot-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(236, 72, 153, 0.05);
}

.slot-btn.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.05);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const serviceSelect = document.getElementById('service_id');
    const staffSelect = document.getElementById('staff_id');
    const dateInput = document.getElementById('date');
    const slotsSection = document.getElementById('slots-section');
    const slotsLoading = document.getElementById('slots-loading');
    const slotsContainer = document.getElementById('slots-container');
    const slotsError = document.getElementById('slots-error');
    const selectedTimeInput = document.getElementById('selected_time');
    const submitBtn = document.getElementById('submit-btn');

    // Enable date picker if staff is selected
    function checkFormState() {
        if (serviceSelect.value && staffSelect.value) {
            dateInput.removeAttribute('disabled');
        } else {
            dateInput.setAttribute('disabled', 'true');
            dateInput.value = '';
            hideSlots();
        }
        validateSubmit();
    }

    function hideSlots() {
        slotsSection.style.display = 'none';
        selectedTimeInput.value = '';
        slotsContainer.innerHTML = '';
        slotsError.style.display = 'none';
    }

    function validateSubmit() {
        if (serviceSelect.value && staffSelect.value && dateInput.value && selectedTimeInput.value && document.getElementById('name').value && document.getElementById('phone').value) {
            submitBtn.removeAttribute('disabled');
        } else {
            submitBtn.setAttribute('disabled', 'true');
        }
    }

    // Monitor input changes to validate form submission
    document.getElementById('name').addEventListener('input', validateSubmit);
    document.getElementById('phone').addEventListener('input', validateSubmit);

    // 1. When service is changed, load staff
    serviceSelect.addEventListener('change', function() {
        const serviceId = this.value;
        if (!serviceId) return;

        staffSelect.innerHTML = '<option value="" disabled selected>Cargando empleados...</option>';
        staffSelect.removeAttribute('disabled');
        hideSlots();

        fetch(`/book/staff/${serviceId}`)
            .then(res => res.json())
            .then(data => {
                staffSelect.innerHTML = '<option value="" disabled selected>-- Seleccionar un empleado --</option>';
                if (data.length === 0) {
                    staffSelect.innerHTML = '<option value="" disabled selected>No hay empleados para este servicio</option>';
                } else {
                    data.forEach(stf => {
                        const opt = document.createElement('option');
                        opt.value = stf.id;
                        opt.textContent = `${stf.name} (${stf.role || 'Estilista'})`;
                        staffSelect.appendChild(opt);
                    });
                }
                checkFormState();
            })
            .catch(err => {
                console.error(err);
                staffSelect.innerHTML = '<option value="" disabled selected>Error al cargar empleados</option>';
            });
    });

    // 2. When staff is changed, verify form state
    staffSelect.addEventListener('change', checkFormState);

    // 3. When date is changed, fetch time slots
    dateInput.addEventListener('change', function() {
        const serviceId = serviceSelect.value;
        const staffId = staffSelect.value;
        const date = this.value;

        if (!serviceId || !staffId || !date) {
            hideSlots();
            return;
        }

        // Show loading state
        slotsSection.style.display = 'block';
        slotsLoading.style.display = 'block';
        slotsContainer.style.display = 'none';
        slotsError.style.display = 'none';
        selectedTimeInput.value = '';
        validateSubmit();

        fetch(`/book/time-slots?service_id=${serviceId}&staff_id=${staffId}&date=${date}`)
            .then(res => res.json())
            .then(data => {
                slotsLoading.style.display = 'none';
                slotsContainer.innerHTML = '';
                
                if (data.slots && data.slots.length > 0) {
                    slotsContainer.style.display = 'grid';
                    data.slots.forEach(slot => {
                        const btn = document.createElement('button');
                        btn.type = 'button';
                        btn.className = 'slot-btn';
                        btn.textContent = slot;
                        
                        btn.addEventListener('click', function() {
                            // Clear previous selected
                            document.querySelectorAll('.slot-btn').forEach(b => b.classList.remove('selected'));
                            // Select this one
                            btn.classList.add('selected');
                            selectedTimeInput.value = slot;
                            validateSubmit();
                        });

                        slotsContainer.appendChild(btn);
                    });
                } else {
                    slotsContainer.style.display = 'none';
                    slotsError.textContent = data.message || 'No hay horarios disponibles para el día seleccionado.';
                    slotsError.style.display = 'block';
                }
            })
            .catch(err => {
                console.error(err);
                slotsLoading.style.display = 'none';
                slotsContainer.style.display = 'none';
                slotsError.textContent = 'Ocurrió un error al cargar los horarios disponibles.';
                slotsError.style.display = 'block';
            });
    });

    // If preselected, trigger change programmatically
    if (serviceSelect.value) {
        // If a service is pre-selected, staff selector is already active. Let's register monitor
        checkFormState();
    }
});
</script>
@endsection