@extends('layouts.admin')

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

@section('content')
<div class="content-wrapper">
    <div class="row mb-4">
        <div class="col-12">
            <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('admin.reservas.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Volver al Listado
                        </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <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 id="reservaForm" action="{{ route('admin.reservas.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="precio_total" id="precio_total" value="{{ old('precio_total') }}">
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="usuario_id" class="form-label">Usuario *</label>
                                    <select name="usuario_id" id="usuario_id" class="form-control select2" required>
                                        <option value="">Seleccionar usuario...</option>
                                        @foreach($usuarios as $usuario)
                                            <option value="{{ $usuario->id }}" {{ old('usuario_id') == $usuario->id ? 'selected' : '' }}>
                                                {{ $usuario->name }} ({{ $usuario->email }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="cancha_id" class="form-label">Cancha *</label>
                                    <select name="cancha_id" id="cancha_id" class="form-control select2" required>
                                        <option value="">Seleccionar cancha...</option>
                                        @foreach($canchas as $cancha)
                                            <option value="{{ $cancha->id }}" 
                                                    data-precio="{{ $cancha->precio_por_hora }}"
                                                    {{ old('cancha_id') == $cancha->id ? 'selected' : '' }}>
                                                {{ $cancha->nombre }} - {{ currency_symbol() }}{{ number_format($cancha->precio_por_hora, 0, ',', '.') }}/hora
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="fecha" class="form-label">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 class="col-md-4">
                                <div class="form-group">
                                    <label for="hora_inicio" class="form-label">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 = date('h:i A', strtotime($hora24));
                                            @endphp
                                            <option value="{{ $hora24 }}" 
                                                    {{ old('hora_inicio') == $hora24 ? 'selected' : '' }}>
                                                {{ $hora12 }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="hora_fin" class="form-label">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 = date('h:i A', strtotime($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" class="form-label">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" class="form-label">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" id="comprobante-container" style="display: none;">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="comprobante" class="form-label">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-12">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h5 class="mb-3">Resumen de la Reserva</h5>
                                        <div id="resumen-reserva">
                                            <p class="text-muted mb-0">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('admin.reservas.index') }}" class="btn btn-secondary btn-lg ml-2">
                                    <i class="fas fa-times"></i> Cancelar
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.select2-container--bootstrap-5 {
    width: 100% !important;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar Select2 para los selectores
    $('.select2').select2({
        theme: 'bootstrap-5',
        allowClear: true
    });

    const form = document.getElementById('reservaForm');
    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;
        const precioTotalInput = document.getElementById('precio_total');
        
        if (cancha && 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 duracionHoras = minutos / 60;
            const total = Math.round((precio * duracionHoras) * 100) / 100;
            
            console.log('Debug valores:');
            console.log('Precio por hora:', precio);
            console.log('Duración en horas:', duracionHoras);
            console.log('Total calculado:', total);
            
            if (minutos > 0) {
                // Asegurar que el precio total se guarde con dos decimales
                precioTotalInput.value = total.toFixed(2);
                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> ${duracionHoras.toFixed(2)} hora(s)<br>
                            <strong>Precio por hora:</strong> {{ currency_symbol() }}${precio.toLocaleString('es-ES')}<br>
                            <strong class="text-success">Total: {{ currency_symbol() }}${total.toLocaleString('es-ES', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong>
                        </div>
                    </div>
                `;
            } else {
                precioTotalInput.value = ''; // Limpiar el campo oculto
                resumenDiv.innerHTML = '<p class="text-danger">La hora de fin debe ser posterior a la hora de inicio</p>';
            }
        } else {
            precioTotalInput.value = ''; // Limpiar el campo oculto
            resumenDiv.innerHTML = '<p class="text-muted">Selecciona una cancha y horario para ver el resumen</p>';
        }

        // Validar que haya un precio total antes de enviar el formulario
        form.onsubmit = function(e) {
            const precioTotal = precioTotalInput.value;
            console.log('Valor del precio_total antes del envío:', precioTotal);
            
            const formData = new FormData(this);
            console.log('Todos los datos del formulario:');
            for (let pair of formData.entries()) {
                console.log(pair[0] + ': ' + pair[1]);
            }
            
            if (!precioTotal || parseFloat(precioTotal) <= 0) {
                e.preventDefault();
                alert('Por favor, selecciona una cancha y un horario válido para calcular el precio total.');
                return false;
            }
            return true;
        };
    }
    
        // Actualizar resumen cuando cambien los valores
    [canchaSelect, fechaInput, horaInicioSelect, horaFinSelect].forEach(element => {
        element.addEventListener('change', actualizarResumen);
    });

    // Manejar la visibilidad del campo de comprobante
    metodoPagoSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption) {
            const requiereComprobante = selectedOption.dataset.requiereComprobante === '1';
            comprobanteContainer.style.display = requiereComprobante ? 'block' : 'none';
            comprobanteInput.required = requiereComprobante;
        } else {
            comprobanteContainer.style.display = 'none';
            comprobanteInput.required = false;
        }
    });
});
</script>
@endpush
@endsection