@extends('layouts.admin')

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

@section('css')
<style>
    .form-group {
        margin-bottom: 1.5rem;
    }
    .card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        border: 1px solid rgba(0, 0, 0, 0.125);
    }
    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
    }
    .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
    }
    .alert {
        border-radius: 0.375rem;
    }
    #resumen-reserva {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.375rem;
        margin-bottom: 1rem;
    }
    #resumen-reserva h5 {
        margin-bottom: 1rem;
        color: #495057;
    }
    #resumen-reserva p {
        margin-bottom: 0.5rem;
        color: #6c757d;
    }
    #resumen-reserva strong {
        color: #212529;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.reservas.index') }}">Reservas</a></li>
            <li class="breadcrumb-item active" aria-current="page">Editar Reserva</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Editar Reserva #{{ $reserva->codigo_reserva }}</h4>
                </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('admin.reservas.update', $reserva->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <!-- Usuario -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="usuario_id" class="form-label">Usuario <span class="text-danger">*</span></label>
                                    <select class="form-control" id="usuario_id" name="usuario_id" required>
                                        <option value="">Seleccionar usuario</option>
                                        @foreach($usuarios as $user)
                                            <option value="{{ $user->id }}" {{ $reserva->usuario_id == $user->id ? 'selected' : '' }}>
                                                {{ $user->name }} ({{ $user->email }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Cancha -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="cancha_id" class="form-label">Cancha <span class="text-danger">*</span></label>
                                    <select class="form-control" id="cancha_id" name="cancha_id" required>
                                        <option value="">Seleccionar cancha</option>
                                        @foreach($canchas as $cancha)
                                            <option value="{{ $cancha->id }}" {{ $reserva->cancha_id == $cancha->id ? 'selected' : '' }}>
                                                {{ $cancha->nombre }} - {{ format_currency($cancha->precio_por_hora, 2) }}/hora
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Fecha -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="fecha" class="form-label">Fecha <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="fecha" name="fecha" 
                                           value="{{ $reserva->fecha->format('Y-m-d') }}" required>
                                </div>
                            </div>

                            <!-- Hora Inicio -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="hora_inicio" class="form-label">Hora Inicio <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control" id="hora_inicio" name="hora_inicio" 
                                           value="{{ \Carbon\Carbon::parse($reserva->hora_inicio)->format('H:i') }}" required>
                                </div>
                            </div>

                            <!-- Hora Fin -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="hora_fin" class="form-label">Hora Fin <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control" id="hora_fin" name="hora_fin" 
                                           value="{{ \Carbon\Carbon::parse($reserva->hora_fin)->format('H:i') }}" required>
                                </div>
                            </div>
                        </div>

                        <!-- Resumen de la Reserva -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div id="resumen-reserva">
                                    <h5 class="mb-3">Resumen de la Reserva</h5>
                                    <p>Duración: <strong id="duracion-text">0.00 horas</strong></p>
                                    <p>Precio por hora: <strong id="precio-hora-text">S/. 0.00</strong></p>
                                    <p>Total a pagar: <strong id="total-text">S/. 0.00</strong></p>
                                </div>
                            </div>
                        </div>

                        <input type="hidden" id="precio_total" name="precio_total" value="{{ old('precio_total', $reserva->precio_total) }}">

                        <div class="row">
                            <!-- Método de Pago -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="metodo_pago" class="form-label">Método de Pago <span class="text-danger">*</span></label>
                                    <select class="form-control" id="metodo_pago" name="metodo_pago" required>
                                        <option value="">Seleccionar método...</option>
                                        @foreach($metodosPago as $metodoPago)
                                            <option value="{{ $metodoPago->tipo_pago }}" 
                                                    {{ $reserva->metodo_pago == $metodoPago->tipo_pago ? 'selected' : '' }}>
                                                {{ $metodoPago->nombre }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Estado -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="estado" class="form-label">Estado <span class="text-danger">*</span></label>
                                    <select class="form-control" id="estado" name="estado" required>
                                        <option value="pendiente" {{ $reserva->estado == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                                        <option value="confirmada" {{ $reserva->estado == 'confirmada' ? 'selected' : '' }}>Confirmada</option>
                                        <option value="cancelada" {{ $reserva->estado == 'cancelada' ? 'selected' : '' }}>Cancelada</option>
                                        <option value="completada" {{ $reserva->estado == 'completada' ? 'selected' : '' }}>Completada</option>
                                        <option value="no_show" {{ $reserva->estado == 'no_show' ? 'selected' : '' }}>No Show</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Notas -->
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="notas" class="form-label">Notas</label>
                                    <textarea class="form-control" id="notas" name="notas" rows="3" 
                                              placeholder="Notas adicionales sobre la reserva">{{ $reserva->notas }}</textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Información adicional -->
                        <div class="row">
                            <div class="col-12">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title">Información de la Reserva</h6>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <strong>Código:</strong><br>
                                                {{ $reserva->codigo_reserva }}
                                            </div>
                                            <div class="col-md-3">
                                                <strong>Creada:</strong><br>
                                                {{ $reserva->created_at->format('d/m/Y H:i') }}
                                            </div>
                                            <div class="col-md-3">
                                                <strong>Última actualización:</strong><br>
                                                {{ $reserva->updated_at->format('d/m/Y H:i') }}
                                            </div>
                                            <div class="col-md-3">
                                                <strong>Duración:</strong><br>
                                                {{ $reserva->calcularDuracionHoras() }} hora(s)
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Botones -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('admin.reservas.index') }}" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left"></i> Volver
                                    </a>
                                    <div>
                                        <a href="{{ route('admin.reservas.show', $reserva->id) }}" class="btn btn-info me-2">
                                            <i class="fas fa-eye"></i> Ver Detalles
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save"></i> Guardar Cambios
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
$(document).ready(function() {
    const precioTotalInput = document.getElementById('precio_total');
    const duracionText = document.getElementById('duracion-text');
    const precioHoraText = document.getElementById('precio-hora-text');
    const totalText = document.getElementById('total-text');

    // Actualizar resumen cuando cambian los campos
    $('#cancha_id, #hora_inicio, #hora_fin').on('change', function() {
        actualizarResumen();
    });

    function actualizarResumen() {
        const canchaSelect = document.getElementById('cancha_id');
        const horaInicio = document.getElementById('hora_inicio').value;
        const horaFin = document.getElementById('hora_fin').value;

        // Si no hay cancha seleccionada pero hay valores iniciales, usar esos valores
        if (!canchaSelect.value) {
            duracionText.textContent = '0.00 horas';
            precioHoraText.textContent = 'S/. 0.00';
            totalText.textContent = 'S/. 0.00';
            precioTotalInput.value = '';
            return;
        }

        // Obtener el precio de la cancha seleccionada
        const precioMatch = canchaSelect.options[canchaSelect.selectedIndex].text.match(/S\/\.([\d,]+\.?\d*)/);
        if (!precioMatch) {
            console.error('No se pudo extraer el precio de la cancha');
            return;
        }
        const precio = parseFloat(precioMatch[1].replace(',', ''));

        // Actualizar el precio por hora en el resumen
        precioHoraText.textContent = 'S/. ' + precio.toLocaleString('es-ES', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });

        if (!horaInicio || !horaFin) {
            duracionText.textContent = '0.00 horas';
            totalText.textContent = 'S/. 0.00';
            precioTotalInput.value = '';
            return;
        }

        // Calcular la duración
        let inicio = new Date('2000-01-01 ' + horaInicio);
        let fin = new Date('2000-01-01 ' + horaFin);
        
        // Si la hora de fin es menor que la de inicio, asumimos que es del día siguiente
        if (fin < inicio) {
            fin = new Date('2000-01-02 ' + horaFin);
        }

        const duracionHoras = (fin - inicio) / (1000 * 60 * 60);
        const total = Math.round((precio * duracionHoras) * 100) / 100;

        duracionText.textContent = duracionHoras.toFixed(2) + ' horas';
        totalText.textContent = 'S/. ' + total.toLocaleString('es-ES', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
        precioTotalInput.value = total.toFixed(2);

        console.log('Precio por hora:', precio);
        console.log('Duración en horas:', duracionHoras);
        console.log('Total calculado:', total);
        console.log('Valor asignado a precio_total:', precioTotalInput.value);
    }

    // Validar formulario antes de enviar
    $('form').on('submit', function(e) {
        const precioTotal = parseFloat(precioTotalInput.value);
        console.log('Valor del precio_total al enviar:', precioTotal);
        
        if (!precioTotal || precioTotal <= 0) {
            e.preventDefault();
            alert('El precio total debe ser mayor a 0. Por favor, seleccione una cancha y un horario válido.');
            return false;
        }

        // Validar que la hora de fin sea mayor que la hora de inicio
        const horaInicio = $('#hora_inicio').val();
        const horaFin = $('#hora_fin').val();
        const inicio = new Date('2000-01-01 ' + horaInicio);
        const fin = new Date('2000-01-01 ' + horaFin);
        
        if (fin < inicio) {
            // Si la hora de fin es menor, asumimos que es del día siguiente
            // No mostramos error, pero validamos que la duración total no exceda 24 horas
            const finSiguienteDia = new Date('2000-01-02 ' + horaFin);
            const duracionHoras = (finSiguienteDia - inicio) / (1000 * 60 * 60);
            if (duracionHoras > 24) {
                e.preventDefault();
                alert('La duración de la reserva no puede exceder 24 horas');
                return false;
            }
        }

        // Validar que la fecha no sea en el pasado
        const fechaSeleccionada = new Date($('#fecha').val());
        const hoy = new Date();
        hoy.setHours(0, 0, 0, 0);

        if (fechaSeleccionada < hoy) {
            if (!confirm('Has seleccionado una fecha en el pasado. ¿Estás seguro de continuar?')) {
                e.preventDefault();
                return false;
            }
        }

        return true;
    });

    // Inicializar el resumen con los valores actuales
    actualizarResumen();
});
</script>
@endsection