@extends('layouts.admin')

@section('title', 'Cancelaciones de Reservas')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-ban text-danger"></i>
            Cancelaciones de Reservas
        </h1>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#filtrosModal">
                <i class="fas fa-filter"></i> Filtros Avanzados
            </button>
            <button class="btn btn-success btn-sm" onclick="exportarCancelaciones()">
                <i class="fas fa-download"></i> Exportar
            </button>
        </div>
    </div>

    <!-- Estadísticas Rápidas -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-danger shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                Cancelaciones Hoy
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="cancelacionesHoy">{{ $estadisticas['cancelaciones_hoy'] ?? 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-ban fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Reembolsos Pendientes
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="reembolsosPendientes">{{ $estadisticas['reembolsos_pendientes'] ?? 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-money-bill-wave fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Total Mes
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="cancelacionesMes">{{ $estadisticas['cancelaciones_mes'] ?? 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Monto Reembolsado
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="montoReembolsado">${{ number_format($estadisticas['monto_reembolsado'] ?? 0, 2) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros Rápidos -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Filtros Rápidos</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <label for="filtroFecha" class="form-label">Fecha</label>
                    <select class="form-select" id="filtroFecha" onchange="aplicarFiltros()">
                        <option value="">Todas las fechas</option>
                        <option value="hoy">Hoy</option>
                        <option value="ayer">Ayer</option>
                        <option value="semana">Esta semana</option>
                        <option value="mes">Este mes</option>
                        <option value="personalizado">Personalizado</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="filtroEstado" class="form-label">Estado Reembolso</label>
                    <select class="form-select" id="filtroEstado" onchange="aplicarFiltros()">
                        <option value="">Todos los estados</option>
                        <option value="pendiente">Pendiente</option>
                        <option value="procesando">Procesando</option>
                        <option value="completado">Completado</option>
                        <option value="rechazado">Rechazado</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="filtroCancha" class="form-label">Cancha</label>
                    <select class="form-select" id="filtroCancha" onchange="aplicarFiltros()">
                        <option value="">Todas las canchas</option>
                        @foreach($canchas ?? [] as $cancha)
                            <option value="{{ $cancha->id }}">{{ $cancha->nombre }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="filtroMotivo" class="form-label">Motivo</label>
                    <select class="form-select" id="filtroMotivo" onchange="aplicarFiltros()">
                        <option value="">Todos los motivos</option>
                        <option value="usuario">Cancelado por usuario</option>
                        <option value="admin">Cancelado por admin</option>
                        <option value="sistema">Cancelado por sistema</option>
                        <option value="clima">Condiciones climáticas</option>
                        <option value="mantenimiento">Mantenimiento</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de Cancelaciones -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-bold text-primary">Lista de Cancelaciones</h6>
            <div class="dropdown no-arrow">
                <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown">
                    <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right shadow">
                    <div class="dropdown-header">Acciones:</div>
                    <a class="dropdown-item" href="#" onclick="procesarReembolsosMasivo()">Procesar Reembolsos Masivo</a>
                    <a class="dropdown-item" href="#" onclick="exportarSeleccionados()">Exportar Seleccionados</a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="tablaCancelaciones" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="selectAll"></th>
                            <th>ID</th>
                            <th>Usuario</th>
                            <th>Cancha</th>
                            <th>Fecha Reserva</th>
                            <th>Fecha Cancelación</th>
                            <th>Motivo</th>
                            <th>Monto</th>
                            <th>Estado Reembolso</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($cancelaciones ?? [] as $cancelacion)
                        <tr>
                            <td><input type="checkbox" class="cancelacion-checkbox" value="{{ $cancelacion->id }}"></td>
                            <td>{{ $cancelacion->id }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <img class="rounded-circle me-2" src="{{ $cancelacion->usuario->avatar ?? '/images/default-avatar.png' }}" style="width: 30px; height: 30px;">
                                    <div>
                                        <div class="font-weight-bold">{{ $cancelacion->usuario->nombre }}</div>
                                        <div class="text-muted small">{{ $cancelacion->usuario->email }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>{{ $cancelacion->reserva->cancha->nombre }}</td>
                            <td>{{ $cancelacion->reserva->fecha_hora->format('d/m/Y H:i') }}</td>
                            <td>{{ $cancelacion->created_at->format('d/m/Y H:i') }}</td>
                            <td>
                                <span class="badge badge-{{ $cancelacion->motivo_color }}">{{ $cancelacion->motivo_texto }}</span>
                            </td>
                            <td>${{ number_format($cancelacion->monto_reembolso, 2) }}</td>
                            <td>
                                <span class="badge badge-{{ $cancelacion->estado_reembolso_color }}">
                                    {{ $cancelacion->estado_reembolso_texto }}
                                </span>
                            </td>
                            <td>
                                <div class="btn-group" role="group">
                                    <button class="btn btn-info btn-sm" onclick="verDetalle({{ $cancelacion->id }})" title="Ver Detalle">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    @if($cancelacion->estado_reembolso === 'pendiente')
                                        <button class="btn btn-success btn-sm" onclick="procesarReembolso({{ $cancelacion->id }})" title="Procesar Reembolso">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button class="btn btn-danger btn-sm" onclick="rechazarReembolso({{ $cancelacion->id }})" title="Rechazar Reembolso">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detalle Cancelación -->
<div class="modal fade" id="detalleModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detalle de Cancelación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="detalleContent">
                <!-- Contenido cargado dinámicamente -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="imprimirDetalle()">Imprimir</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Procesar Reembolso -->
<div class="modal fade" id="procesarReembolsoModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Procesar Reembolso</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formProcesarReembolso">
                <div class="modal-body">
                    <input type="hidden" id="cancelacionId" name="cancelacion_id">
                    <div class="mb-3">
                        <label for="metodoReembolso" class="form-label">Método de Reembolso</label>
                        <select class="form-select" id="metodoReembolso" name="metodo_reembolso" required>
                            <option value="">Seleccionar método</option>
                            <option value="tarjeta">Tarjeta de Crédito/Débito</option>
                            <option value="transferencia">Transferencia Bancaria</option>
                            <option value="efectivo">Efectivo</option>
                            <option value="credito">Crédito en Cuenta</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="montoReembolso" class="form-label">Monto a Reembolsar</label>
                        <input type="number" class="form-control" id="montoReembolso" name="monto_reembolso" step="0.01" required>
                    </div>
                    <div class="mb-3">
                        <label for="notasReembolso" class="form-label">Notas Adicionales</label>
                        <textarea class="form-control" id="notasReembolso" name="notas" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success">Procesar Reembolso</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Rechazar Reembolso -->
<div class="modal fade" id="rechazarReembolsoModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Rechazar Reembolso</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formRechazarReembolso">
                <div class="modal-body">
                    <input type="hidden" id="cancelacionIdRechazo" name="cancelacion_id">
                    <div class="mb-3">
                        <label for="motivoRechazo" class="form-label">Motivo del Rechazo</label>
                        <select class="form-select" id="motivoRechazo" name="motivo_rechazo" required>
                            <option value="">Seleccionar motivo</option>
                            <option value="fuera_politica">Fuera de política de cancelación</option>
                            <option value="tiempo_excedido">Tiempo límite excedido</option>
                            <option value="informacion_incorrecta">Información incorrecta</option>
                            <option value="otro">Otro motivo</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="explicacionRechazo" class="form-label">Explicación Detallada</label>
                        <textarea class="form-control" id="explicacionRechazo" name="explicacion" rows="4" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-danger">Rechazar Reembolso</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Filtros Avanzados -->
<div class="modal fade" id="filtrosModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Filtros Avanzados</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="fechaDesde" class="form-label">Fecha Desde</label>
                            <input type="date" class="form-control" id="fechaDesde">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="fechaHasta" class="form-label">Fecha Hasta</label>
                            <input type="date" class="form-control" id="fechaHasta">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="montoMinimo" class="form-label">Monto Mínimo</label>
                            <input type="number" class="form-control" id="montoMinimo" step="0.01">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="montoMaximo" class="form-label">Monto Máximo</label>
                            <input type="number" class="form-control" id="montoMaximo" step="0.01">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-warning" onclick="limpiarFiltros()">Limpiar</button>
                <button type="button" class="btn btn-primary" onclick="aplicarFiltrosAvanzados()">Aplicar Filtros</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Inicializar DataTable
    $('#tablaCancelaciones').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.reservas.cancelaciones.data") }}',
            data: function(d) {
                d.fecha = $('#filtroFecha').val();
                d.estado = $('#filtroEstado').val();
                d.cancha = $('#filtroCancha').val();
                d.motivo = $('#filtroMotivo').val();
                d.fecha_desde = $('#fechaDesde').val();
                d.fecha_hasta = $('#fechaHasta').val();
                d.monto_minimo = $('#montoMinimo').val();
                d.monto_maximo = $('#montoMaximo').val();
            }
        },
        columns: [
            { data: 'checkbox', orderable: false, searchable: false },
            { data: 'id' },
            { data: 'usuario' },
            { data: 'cancha' },
            { data: 'fecha' },
            { data: 'fecha_cancelacion' },
            { data: 'motivo' },
            { data: 'monto' },
            { data: 'estado_reembolso' },
            { data: 'acciones', orderable: false, searchable: false }
        ],
        order: [[5, 'desc']],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json'
        }
    });

    // Select All checkbox
    $('#selectAll').on('change', function() {
        $('.cancelacion-checkbox').prop('checked', this.checked);
    });

    // Form Procesar Reembolso
    $('#formProcesarReembolso').on('submit', function(e) {
        e.preventDefault();
        
        $.ajax({
            url: '{{ route("admin.reservas.cancelaciones.procesar-reembolso") }}',
            method: 'POST',
            data: $(this).serialize(),
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if(response.success) {
                    Swal.fire('Éxito', 'Reembolso procesado correctamente', 'success');
                    $('#procesarReembolsoModal').modal('hide');
                    $('#tablaCancelaciones').DataTable().ajax.reload();
                    actualizarEstadisticas();
                } else {
                    Swal.fire('Error', response.message, 'error');
                }
            },
            error: function() {
                Swal.fire('Error', 'Error al procesar el reembolso', 'error');
            }
        });
    });

    // Form Rechazar Reembolso
    $('#formRechazarReembolso').on('submit', function(e) {
        e.preventDefault();
        
        $.ajax({
            url: '{{ route("admin.reservas.cancelaciones.rechazar-reembolso") }}',
            method: 'POST',
            data: $(this).serialize(),
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if(response.success) {
                    Swal.fire('Éxito', 'Reembolso rechazado correctamente', 'success');
                    $('#rechazarReembolsoModal').modal('hide');
                    $('#tablaCancelaciones').DataTable().ajax.reload();
                    actualizarEstadisticas();
                } else {
                    Swal.fire('Error', response.message, 'error');
                }
            },
            error: function() {
                Swal.fire('Error', 'Error al rechazar el reembolso', 'error');
            }
        });
    });
});

function aplicarFiltros() {
    $('#tablaCancelaciones').DataTable().ajax.reload();
}

function aplicarFiltrosAvanzados() {
    $('#filtrosModal').modal('hide');
    aplicarFiltros();
}

function limpiarFiltros() {
    $('#filtroFecha, #filtroEstado, #filtroCancha, #filtroMotivo').val('');
    $('#fechaDesde, #fechaHasta, #montoMinimo, #montoMaximo').val('');
    aplicarFiltros();
}

function verDetalle(id) {
    $.get(`{{ url('admin/reservas/cancelaciones') }}/${id}`, function(data) {
        $('#detalleContent').html(data);
        $('#detalleModal').modal('show');
    });
}

function procesarReembolso(id) {
    $.get(`{{ url('admin/reservas/cancelaciones') }}/${id}/reembolso-info`, function(data) {
        $('#cancelacionId').val(id);
        $('#montoReembolso').val(data.monto_sugerido);
        $('#procesarReembolsoModal').modal('show');
    });
}

function rechazarReembolso(id) {
    $('#cancelacionIdRechazo').val(id);
    $('#rechazarReembolsoModal').modal('show');
}

function procesarReembolsosMasivo() {
    const seleccionados = $('.cancelacion-checkbox:checked').map(function() {
        return this.value;
    }).get();
    
    if(seleccionados.length === 0) {
        Swal.fire('Advertencia', 'Selecciona al menos una cancelación', 'warning');
        return;
    }
    
    Swal.fire({
        title: '¿Procesar reembolsos masivo?',
        text: `Se procesarán ${seleccionados.length} reembolsos`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, procesar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ route("admin.reservas.cancelaciones.procesar-masivo") }}',
                method: 'POST',
                data: {
                    cancelaciones: seleccionados
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if(response.success) {
                        Swal.fire('Éxito', `${response.procesados} reembolsos procesados correctamente`, 'success');
                        $('#tablaCancelaciones').DataTable().ajax.reload();
                        actualizarEstadisticas();
                    } else {
                        Swal.fire('Error', response.message, 'error');
                    }
                },
                error: function() {
                    Swal.fire('Error', 'Error al procesar los reembolsos', 'error');
                }
            });
        }
    });
}

function exportarCancelaciones() {
    const filtros = {
        fecha: $('#filtroFecha').val(),
        estado: $('#filtroEstado').val(),
        cancha: $('#filtroCancha').val(),
        motivo: $('#filtroMotivo').val(),
        fecha_desde: $('#fechaDesde').val(),
        fecha_hasta: $('#fechaHasta').val(),
        monto_minimo: $('#montoMinimo').val(),
        monto_maximo: $('#montoMaximo').val()
    };
    
    const params = new URLSearchParams(filtros).toString();
    window.open(`{{ route('admin.reservas.cancelaciones.exportar') }}?${params}`, '_blank');
}

function exportarSeleccionados() {
    const seleccionados = $('.cancelacion-checkbox:checked').map(function() {
        return this.value;
    }).get();
    
    if(seleccionados.length === 0) {
        Swal.fire('Advertencia', 'Selecciona al menos una cancelación', 'warning');
        return;
    }
    
    const params = new URLSearchParams({ids: seleccionados.join(',')}).toString();
    window.open(`{{ route('admin.reservas.cancelaciones.exportar') }}?${params}`, '_blank');
}

function actualizarEstadisticas() {
    $.get('{{ route("admin.reservas.cancelaciones.estadisticas") }}', function(data) {
        $('#cancelacionesHoy').text(data.cancelaciones_hoy);
        $('#reembolsosPendientes').text(data.reembolsos_pendientes);
        $('#cancelacionesMes').text(data.cancelaciones_mes);
        $('#montoReembolsado').text('$' + parseFloat(data.monto_reembolsado).toLocaleString('es-ES', {minimumFractionDigits: 2}));
    });
}

function imprimirDetalle() {
    window.print();
}
</script>
@endpush