@extends('layouts.admin')

@section('title')
    Detalles de Reserva
@endsection

@section('css')
    <!-- DataTables -->
    <link href="{{ URL::asset('build/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            <a href="{{ route('admin.reservas.index') }}">Reservas</a>
        @endslot
        @slot('title')
            Reserva #{{ $reserva->codigo_reserva }}
        @endslot
    @endcomponent

    <div class="row">
        <!-- Información Principal -->
        <div class="col-xl-8">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h4 class="card-title mb-0">Detalles de la Reserva</h4>
                        </div>
                        <div class="col-auto">
                            <span class="badge bg-{{ $reserva->estado == 'confirmada' ? 'success' : ($reserva->estado == 'pendiente' ? 'warning' : 'danger') }} fs-6">
                                {{ ucfirst($reserva->estado) }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted">Código de Reserva</label>
                                <p class="fw-semibold">{{ $reserva->codigo_reserva }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Usuario</label>
                                <p class="fw-semibold">
                                    <a href="{{ route('admin.usuarios.show', $reserva->usuario) }}" class="text-decoration-none">
                                        {{ $reserva->usuario->name }}
                                    </a>
                                </p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Cancha</label>
                                <p class="fw-semibold">
                                    <a href="{{ route('admin.canchas.show', $reserva->cancha) }}" class="text-decoration-none">
                                        {{ $reserva->cancha->nombre }}
                                    </a>
                                </p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Fecha</label>
                                <p class="fw-semibold">{{ format_date_es($reserva->fecha) }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted">Hora de Inicio</label>
                                <p class="fw-semibold">{{ format_time_12h($reserva->hora_inicio) }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Hora de Fin</label>
                                <p class="fw-semibold">{{ format_time_12h($reserva->hora_fin) }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Precio Total</label>
                                <p class="fw-semibold text-success">{{ format_currency($reserva->precio_total, 2) }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Método de Pago</label>
                                <p class="fw-semibold">{{ ucfirst($reserva->metodo_pago) }}</p>
                            </div>
                        </div>
                    </div>
                    
                    @if($reserva->notas)
                        <div class="row">
                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label text-muted">Notas</label>
                                    <p class="fw-semibold">{{ $reserva->notas }}</p>
                                </div>
                            </div>
                        </div>
                    @endif
                    
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label text-muted">Fecha de Creación</label>
                                <p class="fw-semibold">{{ format_datetime_12h($reserva->created_at) }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Información de Pago -->
            @if($reserva->pago)
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title mb-0">Información de Pago</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label text-muted">Estado del Pago</label>
                                    <p class="fw-semibold">
                                        <span class="badge bg-{{ $reserva->pago->estado == 'completado' ? 'success' : ($reserva->pago->estado == 'pendiente' ? 'warning' : 'danger') }}">
                                            {{ ucfirst($reserva->pago->estado) }}
                                        </span>
                                    </p>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted">Monto</label>
                                    <p class="fw-semibold">{{ format_currency($reserva->pago->monto, 2) }}</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label text-muted">Referencia de Pago</label>
                                    <p class="fw-semibold">{{ $reserva->pago->referencia_pago ?? 'N/A' }}</p>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted">Fecha de Pago</label>
                                    <p class="fw-semibold">{{ $reserva->pago->fecha_pago ? format_datetime_12h($reserva->pago->fecha_pago) : 'N/A' }}</p>
                                </div>
                            </div>
                        </div>

                        <hr class="my-3">
                        <div class="mb-2 d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">Comprobante de Pago</h6>
                            @if(!empty($reserva->pago->comprobante_url))
                                <a href="{{ asset('storage/' . $reserva->pago->comprobante_url) }}" target="_blank" class="btn btn-sm btn-outline-info">
                                    <i class="fas fa-external-link-alt"></i> Abrir en nueva pestaña
                                </a>
                            @endif
                        </div>
                        @if(!empty($reserva->pago->comprobante_url))
                            @php
                                $comprobantePath = $reserva->pago->comprobante_url;
                                $extension = strtolower(pathinfo($comprobantePath, PATHINFO_EXTENSION));
                            @endphp
                            <div class="border rounded bg-light p-2">
                                @if(in_array($extension, ['jpg','jpeg','png','gif','webp']))
                                    <a href="{{ asset('storage/' . $reserva->pago->comprobante_url) }}" target="_blank">
                                        <img src="{{ asset('storage/' . $reserva->pago->comprobante_url) }}" alt="Comprobante de pago" class="img-fluid" style="max-height:420px">
                                    </a>
                                @elseif($extension === 'pdf')
                                    <object data="{{ asset('storage/' . $reserva->pago->comprobante_url) }}" type="application/pdf" width="100%" height="500">
                                        <p class="mb-0">
                                            No se puede mostrar el PDF.
                                            <a href="{{ asset('storage/' . $reserva->pago->comprobante_url) }}" target="_blank">Descargar/abrir comprobante</a>.
                                        </p>
                                    </object>
                                @else
                                    <p class="mb-1">Archivo adjunto: <a href="{{ asset('storage/' . $reserva->pago->comprobante_url) }}" target="_blank">Ver/Descargar comprobante</a></p>
                                @endif
                            </div>
                        @else
                            <div class="alert alert-secondary py-2 mb-0">
                                No se adjuntó comprobante para este pago.
                            </div>
                        @endif
                    </div>
                </div>
            @endif
        </div>
        
        <!-- Acciones -->
        <div class="col-xl-4">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Acciones</h4>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.reservas.edit', $reserva) }}" class="btn btn-primary">
                            <i class="bx bx-edit me-1"></i> Editar Reserva
                        </a>
                        
                        @if($reserva->estado == 'pendiente')
                            <form action="{{ route('admin.reservas.aprobar', $reserva) }}" method="POST" class="d-inline">
                                @csrf
                                @method('PUT')
                                <button type="submit" class="btn btn-success w-100">
                                    <i class="bx bx-check me-1"></i> Aprobar Reserva
                                </button>
                            </form>
                            
                            <form action="{{ route('admin.reservas.rechazar', $reserva) }}" method="POST" class="d-inline">
                                @csrf
                                @method('PUT')
                                <button type="submit" class="btn btn-danger w-100">
                                    <i class="bx bx-x me-1"></i> Rechazar Reserva
                                </button>
                            </form>
                        @endif
                        
                        @if($reserva->estado == 'confirmada')
                            <form action="{{ route('admin.reservas.cancelar', $reserva) }}" method="POST" class="d-inline">
                                @csrf
                                @method('PUT')
                                <button type="submit" class="btn btn-warning w-100" onclick="return confirm('¿Está seguro de cancelar esta reserva?')">
                                    <i class="bx bx-x-circle me-1"></i> Cancelar Reserva
                                </button>
                            </form>
                        @endif
                        
                        @if(!$reserva->pago || $reserva->pago->estado != 'completado')
                            <form action="{{ route('admin.reservas.marcar-como-pagada', $reserva) }}" method="POST" class="d-inline">
                                @csrf
                                @method('PUT')
                                <button type="submit" class="btn btn-success w-100">
                                    <i class="bx bx-dollar me-1"></i> Marcar como Pagada
                                </button>
                            </form>
                        @endif
                        
                        <a href="{{ route('admin.reservas.index') }}" class="btn btn-secondary">
                            <i class="bx bx-arrow-back me-1"></i> Volver a Lista
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Información del Usuario -->
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Usuario</h4>
                </div>
                <div class="card-body">
                    <div class="text-center mb-3">
                        <img src="{{ $reserva->usuario->avatar ? asset('storage/' . $reserva->usuario->avatar) : asset('images/users/avatar-default.svg') }}" 
                             alt="Avatar" class="rounded-circle" width="80" height="80" 
                             style="object-fit: cover;">
                    </div>
                    <div class="text-center">
                        <h6 class="mb-1">{{ $reserva->usuario->name }}</h6>
                        <p class="text-muted mb-2">{{ $reserva->usuario->email }}</p>
                        @if($reserva->usuario->telefono)
                            <p class="text-muted mb-2">{{ $reserva->usuario->telefono }}</p>
                        @endif
                        <a href="{{ route('admin.usuarios.show', $reserva->usuario) }}" class="btn btn-outline-primary btn-sm">
                            Ver Perfil Completo
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Información de la Cancha -->
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Cancha</h4>
                </div>
                <div class="card-body">
                    <div class="text-center mb-3">
                        @if($reserva->cancha->fotos && count($reserva->cancha->fotos) > 0)
                            <img src="{{ asset('storage/' . $reserva->cancha->fotos[0]) }}" 
                                 alt="Cancha" class="rounded" width="100%" height="120" 
                                 style="object-fit: cover;">
                        @else
                            <div class="bg-light rounded d-flex align-items-center justify-content-center" style="height: 120px;">
                                <i class="bx bx-image text-muted" style="font-size: 2rem;"></i>
                            </div>
                        @endif
                    </div>
                    <div class="text-center">
                        <h6 class="mb-1">{{ $reserva->cancha->nombre }}</h6>
                        <p class="text-muted mb-2">{{ $reserva->cancha->categoria->nombre }}</p>
                        @if($reserva->cancha->direccion)
                            <p class="text-muted mb-2 small">{{ $reserva->cancha->direccion }}</p>
                        @endif
                        <a href="{{ route('admin.canchas.show', $reserva->cancha) }}" class="btn btn-outline-primary btn-sm">
                            Ver Detalles de Cancha
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- DataTables -->
    <script src="{{ URL::asset('build/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    
    <script>
        $(document).ready(function() {
            // Inicializar tooltips
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })
        });

        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: '¡Éxito!',
                text: '{{ session('success') }}',
                timer: 3000,
                showConfirmButton: false
            });
        @endif

        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: '{{ session('error') }}'
            });
        @endif
    </script>
@endsection