@extends('layouts.app')

@section('title', 'Crear Reserva')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">
                            <i class="fas fa-calendar-plus"></i> Crear Nueva Reserva
                        </h3>
                        <a href="{{ route('usuario.dashboard') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Volver al Dashboard
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('usuario.reservas.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="cancha_id">Cancha *</label>
                                    <select name="cancha_id" id="cancha_id" class="form-control" required>
                                        <option value="">Seleccionar cancha...</option>
                                        @foreach($canchas as $cancha)
                                            <option value="{{ $cancha->id }}" 
                                                    data-precio="{{ $cancha->precio_por_hora }}"
                                                    {{ request('cancha_id') == $cancha->id ? 'selected' : '' }}>
                                                {{ $cancha->nombre }} - ${{ number_format($cancha->precio_por_hora, 0, ',', '.') }}/hora
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="fecha">Fecha de Reserva *</label>
                                    <input type="date" 
                                           name="fecha" 
                                           id="fecha" 
                                           class="form-control" 
                                           min="{{ date('Y-m-d') }}"
                                           value="{{ old('fecha') }}" 
                                           required>
                                </div>
                            </div>
                        </div>

                        <div class="row" id="comprobante-container" style="display: none;">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="comprobante">Comprobante de Pago *</label>
                    <input type="file" 
                           name="comprobante" 
                           id="comprobante" 
                           class="form-control" 
                           accept="image/*,.pdf">
                    <small class="form-text text-muted">
                        Formatos aceptados: Imágenes y PDF. Tamaño máximo: 2MB
                    </small>
                </div>
            </div>
        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="hora_inicio">Hora de Inicio *</label>
                                    <select name="hora_inicio" id="hora_inicio" class="form-control" required>
                                        <option value="">Seleccionar hora...</option>
                                        @for($i = 6; $i <= 22; $i++)
                                            @php
                                                $hora24 = sprintf('%02d:00', $i);
                                                $hora12 = format_time_12h($hora24);
                                            @endphp
                                            <option value="{{ $hora24 }}" 
                                                    {{ old('hora_inicio') == $hora24 ? 'selected' : '' }}>
                                                {{ $hora12 }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="hora_fin">Hora de Fin *</label>
                                    <select name="hora_fin" id="hora_fin" class="form-control" required>
                                        <option value="">Seleccionar hora...</option>
                                        @for($i = 7; $i <= 23; $i++)
                                            @php
                                                $hora24 = sprintf('%02d:00', $i);
                                                $hora12 = format_time_12h($hora24);
                                            @endphp
                                            <option value="{{ $hora24 }}" 
                                                    {{ old('hora_fin') == $hora24 ? 'selected' : '' }}>
                                                {{ $hora12 }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="metodo_pago">Método de Pago *</label>
                                    <select name="metodo_pago" id="metodo_pago" class="form-control" required>
                                        <option value="">Seleccionar método de pago...</option>
                                        @foreach($metodosPago as $metodoPago)
                                            <option value="{{ $metodoPago->tipo_pago }}" 
                                                    data-requiere-comprobante="{{ $metodoPago->requiere_comprobante ? '1' : '0' }}"
                                                    {{ old('metodo_pago') == $metodoPago->tipo_pago ? 'selected' : '' }}>
                                                {{ $metodoPago->nombre }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="observaciones">Observaciones</label>
                                    <textarea name="observaciones" 
                                              id="observaciones" 
                                              class="form-control" 
                                              rows="3" 
                                              placeholder="Observaciones adicionales (opcional)">{{ old('observaciones') }}</textarea>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h5>Resumen de la Reserva</h5>
                                        <div id="resumen-reserva">
                                            <p class="text-muted">Selecciona una cancha y horario para ver el resumen</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-save"></i> Crear Reserva
                                </button>
                                <a href="{{ route('usuario.dashboard') }}" class="btn btn-secondary btn-lg ml-2">
                                    <i class="fas fa-times"></i> Cancelar
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const canchaSelect = document.getElementById('cancha_id');
    const fechaInput = document.getElementById('fecha');
    const horaInicioSelect = document.getElementById('hora_inicio');
    const horaFinSelect = document.getElementById('hora_fin');
    const resumenDiv = document.getElementById('resumen-reserva');
    const metodoPagoSelect = document.getElementById('metodo_pago');
    const comprobanteContainer = document.getElementById('comprobante-container');
    const comprobanteInput = document.getElementById('comprobante');
    
    function actualizarResumen() {
        const cancha = canchaSelect.options[canchaSelect.selectedIndex];
        const fecha = fechaInput.value;
        const horaInicio = horaInicioSelect.value;
        const horaFin = horaFinSelect.value;
        
        if (cancha.value && fecha && horaInicio && horaFin) {
            const precio = parseFloat(cancha.dataset.precio);
            const inicio = new Date(`2000-01-01T${horaInicio}`);
            const fin = new Date(`2000-01-01T${horaFin}`);
            const minutos = (fin - inicio) / (1000 * 60);
            const horas = minutos / 60;
            const total = Math.round((precio * minutos / 60) * 100) / 100;
            
            if (minutos > 0) {
                resumenDiv.innerHTML = `
                    <div class="row">
                        <div class="col-md-6">
                            <strong>Cancha:</strong> ${cancha.text.split(' - ')[0]}<br>
                            <strong>Fecha:</strong> ${new Date(fecha).toLocaleDateString('es-ES')}<br>
                            <strong>Horario:</strong> ${horaInicio} - ${horaFin}
                        </div>
                        <div class="col-md-6">
                            <strong>Duración:</strong> ${horas} hora(s)<br>
                            <strong>Precio por hora:</strong> $${precio.toLocaleString('es-ES')}<br>
                            <strong class="text-success">Total: $${total.toLocaleString('es-ES')}</strong>
                        </div>
                    </div>
                `;
            } else {
                resumenDiv.innerHTML = '<p class="text-danger">La hora de fin debe ser posterior a la hora de inicio</p>';
            }
        } else {
            resumenDiv.innerHTML = '<p class="text-muted">Selecciona una cancha y horario para ver el resumen</p>';
        }
    }
    
    function actualizarComprobanteVisibilidad() {
        const metodoPagoOption = metodoPagoSelect.options[metodoPagoSelect.selectedIndex];
        if (metodoPagoOption && metodoPagoOption.value) {
            const requiereComprobante = metodoPagoOption.dataset.requiereComprobante === '1';
            comprobanteContainer.style.display = requiereComprobante ? 'block' : 'none';
            comprobanteInput.required = requiereComprobante;
        } else {
            comprobanteContainer.style.display = 'none';
            comprobanteInput.required = false;
        }
    }
    
    canchaSelect.addEventListener('change', actualizarResumen);
    fechaInput.addEventListener('change', actualizarResumen);
    horaInicioSelect.addEventListener('change', actualizarResumen);
    horaFinSelect.addEventListener('change', actualizarResumen);
    metodoPagoSelect.addEventListener('change', actualizarComprobanteVisibilidad);
    
    // Actualizar al cargar si hay valores preseleccionados
    actualizarResumen();
    actualizarComprobanteVisibilidad();
});
</script>
@endsection