@extends('layouts.admin')
@section('title', 'Editar Reserva')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <h4>Editar Reserva #{{ $reserva->codigo_reserva }}</h4>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="{{ route('admin.reservas.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Volver
                            </a>
                        </div>
                    </div>

                    @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('admin.reservas.update', $reserva->id) }}" method="POST" enctype="multipart/form-data" id="reservaForm">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="precio_total" id="precio_total" value="{{ old('precio_total', $reserva->precio_total) }}">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="usuario" class="form-label">Usuario *</label>
                                    <input type="text" class="form-control" value="{{ $reserva->usuario->name }} ({{ $reserva->usuario->email }})" readonly>
                                    <input type="hidden" name="usuario_id" value="{{ $reserva->usuario_id }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <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', $reserva->cancha_id) == $cancha->id ? 'selected' : '' }}>
                                                {{ $cancha->nombre }} - S/.{{ number_format($cancha->precio_por_hora, 2) }}/hora
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="fecha" class="form-label">Fecha *</label>
                                    <input type="date" 
                                           name="fecha" 
                                           id="fecha" 
                                           class="form-control" 
                                           value="{{ old('fecha', $reserva->fecha->format('Y-m-d')) }}" 
                                           required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="hora_inicio" class="form-label">Hora Inicio *</label>
                                    <select name="hora_inicio" id="hora_inicio" class="form-control" required>
                                        <option value="">Seleccionar hora...</option>
                                        @for ($hora = 6; $hora <= 23; $hora++)
                                            @php
                                                $hora24 = str_pad($hora, 2, '0', STR_PAD_LEFT) . ':00';
                                                $hora12 = date('h:i A', strtotime($hora24));
                                            @endphp
                                            <option value="{{ $hora24 }}" 
                                                    {{ old('hora_inicio', date('H:i', strtotime($reserva->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 Fin *</label>
                                    <select name="hora_fin" id="hora_fin" class="form-control" required>
                                        <option value="">Seleccionar hora...</option>
                                        @for ($hora = 6; $hora <= 23; $hora++)
                                            @php
                                                $hora24 = str_pad($hora, 2, '0', STR_PAD_LEFT) . ':00';
                                                $hora12 = date('h:i A', strtotime($hora24));
                                            @endphp
                                            <option value="{{ $hora24 }}" 
                                                    {{ old('hora_fin', date('H:i', strtotime($reserva->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', $reserva->metodo_pago) == $metodoPago->tipo_pago ? 'selected' : '' }}>
                                                {{ $metodoPago->nombre }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="estado" class="form-label">Estado *</label>
                                    <select name="estado" id="estado" class="form-control" required>
                                        <option value="pendiente" {{ old('estado', $reserva->estado) == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                                        <option value="confirmada" {{ old('estado', $reserva->estado) == 'confirmada' ? 'selected' : '' }}>Confirmada</option>
                                        <option value="cancelada" {{ old('estado', $reserva->estado) == 'cancelada' ? 'selected' : '' }}>Cancelada</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <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', $reserva->notas) }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row" id="comprobante-container" style="{{ ($reserva->pago && $reserva->pago->comprobante_url) ? '' : 'display: none;' }}">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="comprobante" class="form-label">Comprobante de Pago</label>
                                    @if($reserva->pago && $reserva->pago->comprobante_url)
                                        <div class="mb-2">
                                            <a href="{{ asset('storage/' . $reserva->pago->comprobante_url) }}" target="_blank" class="btn btn-sm btn-info">
                                                <i class="fas fa-eye"></i> Ver comprobante actual
                                            </a>
                                        </div>
                                    @endif
                                    <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">Cargando 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> Guardar Cambios
                                </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) {
            // Obtener el precio directamente del atributo data-precio
            const precio = parseFloat(cancha.dataset.precio);
            
            // Crear objetos Date para comparar las horas
            let inicio = new Date(`2000-01-01T${horaInicio}`);
            let fin = new Date(`2000-01-01T${horaFin}`);
            
            // Si la hora de fin es menor que la hora de inicio, asumimos que es del día siguiente
            if (fin < inicio) {
                fin = new Date(`2000-01-02T${horaFin}`);
            }
            
            const diferencia = fin - inicio;
            const duracionHoras = diferencia / (1000 * 60 * 60);
            
            // Verificar que la duración no exceda las 24 horas
            if (duracionHoras <= 24) {
                const total = Math.round((precio * duracionHoras) * 100) / 100;
                
                
                // 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> S/.${precio.toFixed(2)}<br>
                            <strong class="text-success">Total: S/.${total.toFixed(2)}</strong>
                        </div>
                    </div>
                `;
            } else {
                precioTotalInput.value = '';
                resumenDiv.innerHTML = '<p class="text-danger">La duración de la reserva no puede exceder las 24 horas</p>';
            }
        } else {
            precioTotalInput.value = '';
            resumenDiv.innerHTML = '<p class="text-muted">Selecciona una cancha y horario para ver el resumen</p>';
        }
    }

    // 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;
        }
    });

    // Validar que haya un precio total antes de enviar el formulario
    form.onsubmit = function(e) {
        const precioTotal = precioTotalInput.value;
        
        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;
    };

    // Asegurarse de que los valores iniciales estén seleccionados y actualizar el resumen
    setTimeout(() => {
        if (canchaSelect.value && fechaInput.value && horaInicioSelect.value && horaFinSelect.value) {
            actualizarResumen();
        }
    }, 500);

    // Disparar el evento change en el método de pago para mostrar/ocultar el comprobante
    metodoPagoSelect.dispatchEvent(new Event('change'));
});
</script>
@endpush
@endsection