@extends('admin.layouts.master')

@section('title', 'Crear Cita - Lash Vanshy')

@section('page-title', 'Nueva Cita')

@section('content')
<nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ route('admin.citas.index') }}">Citas</a></li>
        <li class="breadcrumb-item active" aria-current="page">Nueva Cita</li>
    </ol>
</nav>

<div class="row">
    <div class="col-lg-8">
        <div class="card-admin">
            <div class="card-header">
                <i class="fas fa-calendar-plus me-2"></i>Agendar Nueva Cita
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.citas.store') }}" id="citaForm">
                    @csrf
                    
                    @if(isset($mensaje) && $mensaje)
                    <input type="hidden" name="mensaje_id" value="{{ $mensaje->id }}">
                    <div class="alert alert-info mb-4">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Nota:</strong> Esta cita se creara a partir del mensaje de 
                        <strong>{{ $mensaje->nombre }}</strong>
                        <a href="{{ route('admin.mensajes.show', $mensaje) }}" class="text-decoration-underline ms-1">
                            (Ver mensaje)
                        </a>
                    </div>
                    @endif
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="nombre_cliente" class="form-label">Nombre del Cliente <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('nombre_cliente') is-invalid @enderror" id="nombre_cliente" name="nombre_cliente" value="{{ isset($mensaje) && $mensaje ? $mensaje->nombre : old('nombre_cliente') }}" required>
                            @error('nombre_cliente')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="email_cliente" class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('email_cliente') is-invalid @enderror" id="email_cliente" name="email_cliente" value="{{ isset($mensaje) && $mensaje ? $mensaje->email : old('email_cliente') }}" required>
                            @error('email_cliente')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="telefono_cliente" class="form-label">Telefono</label>
                            <input type="tel" class="form-control @error('telefono_cliente') is-invalid @enderror" id="telefono_cliente" name="telefono_cliente" value="{{ isset($mensaje) && $mensaje ? $mensaje->telefono : old('telefono_cliente') }}">
                            @error('telefono_cliente')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="servicio" class="form-label">Servicio <span class="text-danger">*</span></label>
                            <select class="form-select @error('servicio') is-invalid @enderror" id="servicio" name="servicio" required>
                                <option value="">Seleccione servicio</option>
                                <option value="Lash Extensions">Lash Extensions</option>
                                <option value="Lash Lift">Lash Lift</option>
                                <option value="Lash Removal">Lash Removal</option>
                                <option value="Relleno">Relleno</option>
                                <option value="Otro">Otro</option>
                            </select>
                            @error('servicio')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    
                    <hr class="my-4">
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="fecha" class="form-label">Fecha <span class="text-danger">*</span></label>
                            <input type="date" class="form-control @error('fecha') is-invalid @enderror" id="fecha" name="fecha" value="{{ old('fecha') }}" min="{{ date('Y-m-d') }}" required>
                            @error('fecha')<div class="invalid-feedback">{{ $message }}</div>@else<small class="text-muted">Horario: 9:00 AM - 7:00 PM (Lun-Sab)</small>@enderror
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="hora_inicio" class="form-label">Hora <span class="text-danger">*</span></label>
                            <select class="form-select @error('hora_inicio') is-invalid @enderror" id="hora_inicio" name="hora_inicio" required>
                                <option value="">Seleccione fecha primero</option>
                            </select>
                            @error('hora_inicio')<div class="invalid-feedback">{{ $message }}</div>@else<small class="text-muted">Duracion: 60 minutos</small>@enderror
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="duracion" class="form-label">Duracion (minutos) <span class="text-danger">*</span></label>
                            <select class="form-select" id="duracion" name="duracion" required>
                                <option value="60" selected>60 minutos</option>
                                <option value="45">45 minutos</option>
                                <option value="30">30 minutos</option>
                                <option value="90">90 minutos</option>
                                <option value="120">120 minutos</option>
                            </select>
                            @error('duracion')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="estado" class="form-label">Estado</label>
                            <select class="form-select" id="estado" name="estado">
                                <option value="pendiente" selected>Pendiente</option>
                                <option value="confirmada">Confirmada</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="notas" class="form-label">Notas</label>
                        <textarea class="form-control" id="notas" name="notas" rows="3" placeholder="Notas adicionales sobre la cita...">{{ old('notas') }}</textarea>
                    </div>
                    
                    <div class="d-flex justify-content-between mt-4">
                        <a href="{{ route('admin.citas.index') }}" class="btn btn-secondary-admin">
                            <i class="fas fa-arrow-left me-2"></i>Volver
                        </a>
                        <button type="submit" class="btn btn-primary-admin">
                            <i class="fas fa-calendar-check me-2"></i>Agendar Cita
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card-admin mb-3">
            <div class="card-header">
                <i class="fas fa-info-circle me-2"></i>Informacion
            </div>
            <div class="card-body">
                <ul class="text-muted">
                    <li class="mb-2">Duracion de cada cita: <strong>60 minutos</strong></li>
                    <li class="mb-2">Horario de atencion: <strong>9:00 AM - 7:00 PM</strong></li>
                    <li class="mb-2">Dias laborables: <strong>Lunes a Sabado</strong></li>
                    <li class="mb-2">Ultimo turno: <strong>6:00 PM</strong></li>
                </ul>
            </div>
        </div>
        
        <div class="card-admin">
            <div class="card-header">
                <i class="fas fa-calendar-alt me-2"></i>Calendario
            </div>
            <div class="card-body">
                <a href="{{ route('admin.citas.calendario') }}" class="btn btn-secondary-admin w-100 mb-2">
                    <i class="fas fa-calendar-alt me-2"></i>Ver Calendario
                </a>
                <a href="{{ route('admin.horarios.index') }}" class="btn btn-secondary-admin w-100">
                    <i class="fas fa-clock me-2"></i>Horarios Bloqueados
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fechaInput = document.getElementById('fecha');
    const horaSelect = document.getElementById('hora_inicio');
    const duracionSelect = document.getElementById('duracion');
    const hoy = new Date().toISOString().split('T')[0];
    fechaInput.setAttribute('min', hoy);
    
    fechaInput.addEventListener('change', function() {
        const fecha = new Date(this.value + 'T00:00:00');
        const diaSemana = fecha.getDay();
        
        if (diaSemana === 0) {
            alert('Los domingos no hay atencion.');
            this.value = '';
            horaSelect.innerHTML = '<option value="">Seleccione fecha primero</option>';
            horaSelect.disabled = true;
            return;
        }
        
        cargarHorariosDisponibles(this.value);
    });
    
    duracionSelect.addEventListener('change', function() {
        if (fechaInput.value) {
            cargarHorariosDisponibles(fechaInput.value);
        }
    });
    
    function cargarHorariosDisponibles(fecha) {
        if (!fecha) return;
        
        horaSelect.disabled = true;
        horaSelect.innerHTML = '<option value="">Cargando...</option>';
        
        const duracion = duracionSelect.value;
        
        fetch(`/admin/citas/disponibles?fecha=${fecha}&duracion=${duracion}`)
            .then(response => response.json())
            .then(data => {
                horaSelect.innerHTML = '<option value="">Seleccione un horario</option>';
                
                if (data.error) {
                    horaSelect.innerHTML = '<option value="">' + data.error + '</option>';
                } else if (data.horarios && data.horarios.length === 0) {
                    horaSelect.innerHTML = '<option value="">No hay horarios disponibles</option>';
                } else if (data.horarios) {
                    data.horarios.forEach(hora => {
                        const option = document.createElement('option');
                        option.value = hora.hora;
                        option.textContent = hora.hora + ' - ' + hora.hora_fin;
                        horaSelect.appendChild(option);
                    });
                }
                
                horaSelect.disabled = false;
            })
            .catch(error => {
                console.error('Error:', error);
                horaSelect.innerHTML = '<option value="">Error al cargar horarios</option>';
                horaSelect.disabled = false;
            });
    }
});
</script>
@endpush