@extends('layouts.admin')

@section('title', 'Gestión de Reembolsos')

@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-undo text-primary"></i>
            Gestión de Reembolsos
        </h1>
        <div class="d-flex gap-2">
            <button class="btn btn-success btn-sm" onclick="exportarReembolsos()">
                <i class="fas fa-download"></i> Exportar
            </button>
            <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#modalFiltroAvanzado">
                <i class="fas fa-filter"></i> Filtros Avanzados
            </button>
            <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalNuevoReembolso">
                <i class="fas fa-plus"></i> Nuevo Reembolso
            </button>
        </div>
    </div>

    <!-- Métricas de Reembolsos -->
    <div class="row mb-4">
        <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">{{ $metricas['pendientes'] ?? 0 }}</div>
                            <div class="text-xs text-warning">
                                <i class="fas fa-clock"></i> {{ format_currency($metricas['monto_pendiente'] ?? 0, 2) }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock 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">
                                Reembolsos Completados
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $metricas['completados'] ?? 0 }}</div>
                            <div class="text-xs text-success">
                                <i class="fas fa-check"></i> {{ format_currency($metricas['monto_completado'] ?? 0, 2) }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle 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">
                                Tiempo Promedio
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $metricas['tiempo_promedio'] ?? 0 }}</div>
                            <div class="text-xs text-info">
                                <i class="fas fa-calendar"></i> días de procesamiento
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-hourglass-half 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-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">
                                Tasa de Reembolso
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $metricas['tasa_reembolso'] ?? 0 }}%</div>
                            <div class="text-xs text-danger">
                                <i class="fas fa-percentage"></i> del total de transacciones
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-chart-line 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">
                <i class="fas fa-search"></i> Filtros Rápidos
            </h6>
        </div>
        <div class="card-body">
            <form id="filtrosForm" class="row g-3">
                <div class="col-md-2">
                    <label for="estado" class="form-label">Estado</label>
                    <select class="form-select" id="estado" name="estado">
                        <option value="">Todos</option>
                        <option value="pendiente" {{ request('estado') == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                        <option value="en_proceso" {{ request('estado') == 'en_proceso' ? 'selected' : '' }}>En Proceso</option>
                        <option value="completado" {{ request('estado') == 'completado' ? 'selected' : '' }}>Completado</option>
                        <option value="rechazado" {{ request('estado') == 'rechazado' ? 'selected' : '' }}>Rechazado</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="motivo" class="form-label">Motivo</label>
                    <select class="form-select" id="motivo" name="motivo">
                        <option value="">Todos</option>
                        <option value="cancelacion_usuario" {{ request('motivo') == 'cancelacion_usuario' ? 'selected' : '' }}>Cancelación Usuario</option>
                        <option value="error_pago" {{ request('motivo') == 'error_pago' ? 'selected' : '' }}>Error de Pago</option>
                        <option value="evento_cancelado" {{ request('motivo') == 'evento_cancelado' ? 'selected' : '' }}>Evento Cancelado</option>
                        <option value="duplicado" {{ request('motivo') == 'duplicado' ? 'selected' : '' }}>Pago Duplicado</option>
                        <option value="otro" {{ request('motivo') == 'otro' ? 'selected' : '' }}>Otro</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="prioridad" class="form-label">Prioridad</label>
                    <select class="form-select" id="prioridad" name="prioridad">
                        <option value="">Todas</option>
                        <option value="alta" {{ request('prioridad') == 'alta' ? 'selected' : '' }}>Alta</option>
                        <option value="media" {{ request('prioridad') == 'media' ? 'selected' : '' }}>Media</option>
                        <option value="baja" {{ request('prioridad') == 'baja' ? 'selected' : '' }}>Baja</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="fecha_desde" class="form-label">Desde</label>
                    <input type="date" class="form-control" id="fecha_desde" name="fecha_desde" value="{{ request('fecha_desde') }}">
                </div>
                <div class="col-md-2">
                    <label for="fecha_hasta" class="form-label">Hasta</label>
                    <input type="date" class="form-control" id="fecha_hasta" name="fecha_hasta" value="{{ request('fecha_hasta') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="limpiarFiltros()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Acciones en Lote -->
    <div class="card shadow mb-4" id="accionesLote" style="display: none;">
        <div class="card-body py-2">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <span id="contadorSeleccionados">0</span> reembolsos seleccionados
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-success btn-sm" onclick="aprobarSeleccionados()">
                        <i class="fas fa-check"></i> Aprobar
                    </button>
                    <button class="btn btn-warning btn-sm" onclick="procesarSeleccionados()">
                        <i class="fas fa-cog"></i> Procesar
                    </button>
                    <button class="btn btn-danger btn-sm" onclick="rechazarSeleccionados()">
                        <i class="fas fa-times"></i> Rechazar
                    </button>
                    <button class="btn btn-info btn-sm" onclick="exportarSeleccionados()">
                        <i class="fas fa-download"></i> Exportar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de Reembolsos -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-table"></i> Lista de Reembolsos
            </h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="tablaReembolsos">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                            </th>
                            <th>ID</th>
                            <th>Fecha Solicitud</th>
                            <th>Usuario</th>
                            <th>Transacción Original</th>
                            <th>Monto</th>
                            <th>Motivo</th>
                            <th>Estado</th>
                            <th>Prioridad</th>
                            <th>Tiempo Transcurrido</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($reembolsos ?? [] as $reembolso)
                            <tr>
                                <td>
                                    <input type="checkbox" class="reembolso-checkbox" value="{{ $reembolso->id }}" 
                                           onchange="updateSelectionCount()">
                                </td>
                                <td>
                                    <span class="font-weight-bold">#{{ $reembolso->id }}</span>
                                </td>
                                <td>
                                    <div>{{ $reembolso->created_at->format('d/m/Y') }}</div>
                                    <small class="text-muted">{{ $reembolso->created_at->format('H:i') }}</small>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        @if($reembolso->usuario->avatar)
                                            <img src="{{ asset('storage/' . $reembolso->usuario->avatar) }}" 
                                                 class="rounded-circle mr-2" width="30" height="30">
                                        @else
                                            <div class="bg-primary rounded-circle mr-2 d-flex align-items-center justify-content-center" 
                                                 style="width: 30px; height: 30px;">
                                                <span class="text-white font-weight-bold text-sm">
                                                    {{ substr($reembolso->usuario->nombre, 0, 1) }}
                                                </span>
                                            </div>
                                        @endif
                                        <div>
                                            <div class="font-weight-bold">{{ $reembolso->usuario->nombre }}</div>
                                            <small class="text-muted">{{ $reembolso->usuario->email }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <span class="font-weight-bold">#{{ $reembolso->transaccion->id }}</span>
                                        <br><small class="text-muted">{{ $reembolso->transaccion->concepto }}</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="font-weight-bold text-danger">
                                        {{ format_currency($reembolso->monto, 2) }}
                                    </span>
                                    @if($reembolso->comision_retenida > 0)
                                        <br><small class="text-muted">Comisión: {{ format_currency($reembolso->comision_retenida, 2) }}</small>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge badge-{{ $reembolso->motivo === 'cancelacion_usuario' ? 'info' : ($reembolso->motivo === 'error_pago' ? 'warning' : 'secondary') }}">
                                        {{ ucfirst(str_replace('_', ' ', $reembolso->motivo)) }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge badge-{{ $reembolso->estado === 'completado' ? 'success' : ($reembolso->estado === 'pendiente' ? 'warning' : ($reembolso->estado === 'en_proceso' ? 'info' : 'danger')) }}">
                                        {{ ucfirst(str_replace('_', ' ', $reembolso->estado)) }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge badge-{{ $reembolso->prioridad === 'alta' ? 'danger' : ($reembolso->prioridad === 'media' ? 'warning' : 'secondary') }}">
                                        {{ ucfirst($reembolso->prioridad) }}
                                    </span>
                                </td>
                                <td>
                                    @php
                                        $dias = $reembolso->created_at->diffInDays(now());
                                        $colorTiempo = $dias > 7 ? 'danger' : ($dias > 3 ? 'warning' : 'success');
                                    @endphp
                                    <span class="text-{{ $colorTiempo }}">
                                        {{ $dias }} {{ $dias == 1 ? 'día' : 'días' }}
                                    </span>
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button class="btn btn-sm btn-outline-info" 
                                                onclick="verReembolso({{ $reembolso->id }})" 
                                                title="Ver detalles">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        @if($reembolso->estado === 'pendiente')
                                            <button class="btn btn-sm btn-outline-success" 
                                                    onclick="aprobarReembolso({{ $reembolso->id }})" 
                                                    title="Aprobar">
                                                <i class="fas fa-check"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger" 
                                                    onclick="rechazarReembolso({{ $reembolso->id }})" 
                                                    title="Rechazar">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        @elseif($reembolso->estado === 'en_proceso')
                                            <button class="btn btn-sm btn-outline-primary" 
                                                    onclick="completarReembolso({{ $reembolso->id }})" 
                                                    title="Completar">
                                                <i class="fas fa-check-double"></i>
                                            </button>
                                        @endif
                                        <button class="btn btn-sm btn-outline-secondary" 
                                                onclick="editarReembolso({{ $reembolso->id }})" 
                                                title="Editar">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Nuevo Reembolso -->
<div class="modal fade" id="modalNuevoReembolso" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Nuevo Reembolso</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="formNuevoReembolso">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="transaccion_id" class="form-label">Transacción Original *</label>
                                <select class="form-select" id="transaccion_id" name="transaccion_id" required>
                                    <option value="">Buscar transacción...</option>
                                </select>
                                <div class="form-text">Busque por ID de transacción o usuario</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="monto_reembolso" class="form-label">Monto a Reembolsar *</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control" id="monto_reembolso" name="monto" 
                                           step="0.01" min="0" required>
                                </div>
                                <div class="form-text">Monto máximo: <span id="montoMaximo">{{ currency_symbol() }}0.00</span></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="motivo_reembolso" class="form-label">Motivo *</label>
                                <select class="form-select" id="motivo_reembolso" name="motivo" required>
                                    <option value="">Seleccionar motivo...</option>
                                    <option value="cancelacion_usuario">Cancelación por Usuario</option>
                                    <option value="error_pago">Error en el Pago</option>
                                    <option value="evento_cancelado">Evento Cancelado</option>
                                    <option value="duplicado">Pago Duplicado</option>
                                    <option value="otro">Otro</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="prioridad_reembolso" class="form-label">Prioridad</label>
                                <select class="form-select" id="prioridad_reembolso" name="prioridad">
                                    <option value="media">Media</option>
                                    <option value="alta">Alta</option>
                                    <option value="baja">Baja</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="descripcion_reembolso" class="form-label">Descripción</label>
                        <textarea class="form-control" id="descripcion_reembolso" name="descripcion" 
                                  rows="3" placeholder="Descripción detallada del motivo del reembolso..."></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="retener_comision" name="retener_comision" checked>
                                <label class="form-check-label" for="retener_comision">
                                    Retener comisión de plataforma
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="notificar_usuario" name="notificar_usuario" checked>
                                <label class="form-check-label" for="notificar_usuario">
                                    Notificar al usuario por email
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Información de la Transacción -->
                    <div id="infoTransaccion" class="mt-4" style="display: none;">
                        <div class="card bg-light">
                            <div class="card-header">
                                <h6 class="mb-0">Información de la Transacción</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <small class="text-muted">Usuario:</small>
                                        <div id="infoUsuario"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <small class="text-muted">Monto Original:</small>
                                        <div id="infoMonto"></div>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-md-6">
                                        <small class="text-muted">Fecha:</small>
                                        <div id="infoFecha"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <small class="text-muted">Método de Pago:</small>
                                        <div id="infoMetodo"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Crear Reembolso
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Filtro Avanzado -->
<div class="modal fade" id="modalFiltroAvanzado" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Filtros Avanzados</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="formFiltroAvanzado">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="rango_monto_min" class="form-label">Monto Mínimo</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="number" class="form-control" id="rango_monto_min" name="monto_min" 
                                   step="0.01" min="0">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="rango_monto_max" class="form-label">Monto Máximo</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="number" class="form-control" id="rango_monto_max" name="monto_max" 
                                   step="0.01" min="0">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="usuario_filtro" class="form-label">Usuario</label>
                        <select class="form-select" id="usuario_filtro" name="usuario_id">
                            <option value="">Buscar usuario...</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="dias_transcurridos" class="form-label">Días Transcurridos</label>
                        <select class="form-select" id="dias_transcurridos" name="dias_transcurridos">
                            <option value="">Cualquier tiempo</option>
                            <option value="1">Más de 1 día</option>
                            <option value="3">Más de 3 días</option>
                            <option value="7">Más de 1 semana</option>
                            <option value="14">Más de 2 semanas</option>
                            <option value="30">Más de 1 mes</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Opciones adicionales:</label>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="solo_urgentes" name="solo_urgentes">
                            <label class="form-check-label" for="solo_urgentes">
                                Solo reembolsos urgentes (>7 días)
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="con_comision_retenida" name="con_comision_retenida">
                            <label class="form-check-label" for="con_comision_retenida">
                                Con comisión retenida
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-filter"></i> Aplicar Filtros
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Ver Reembolso -->
<div class="modal fade" id="modalVerReembolso" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detalles del Reembolso</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="contenidoReembolso">
                <!-- Contenido cargado dinámicamente -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="imprimirReembolso()">
                    <i class="fas fa-print"></i> Imprimir
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Inicializar DataTable
    $('#tablaReembolsos').DataTable({
        responsive: true,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/Spanish.json'
        },
        order: [[2, 'desc']],
        pageLength: 25,
        columnDefs: [
            { orderable: false, targets: [0, 10] }
        ]
    });
    
    // Inicializar Select2 para búsqueda de transacciones
    $('#transaccion_id').select2({
        placeholder: 'Buscar transacción...',
        ajax: {
            url: '{{ route("admin.pagos.transacciones.search") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return { q: params.term };
            },
            processResults: function (data) {
                return {
                    results: data.map(function(transaccion) {
                        return {
                            id: transaccion.id,
                            text: `#${transaccion.id} - ${transaccion.usuario.nombre} - $${transaccion.monto}`,
                            data: transaccion
                        };
                    })
                };
            }
        }
    });
    
    // Inicializar Select2 para búsqueda de usuarios
    $('#usuario_filtro').select2({
        placeholder: 'Buscar usuario...',
        ajax: {
            url: '{{ route("admin.usuarios.search") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return { q: params.term };
            },
            processResults: function (data) {
                return {
                    results: data.map(function(user) {
                        return {
                            id: user.id,
                            text: user.nombre + ' ' + user.apellido + ' (' + user.email + ')'
                        };
                    })
                };
            }
        }
    });
    
    // Manejar selección de transacción
    $('#transaccion_id').on('select2:select', function (e) {
        const transaccion = e.params.data.data;
        mostrarInfoTransaccion(transaccion);
    });
    
    // Manejar formularios
    $('#filtrosForm').on('submit', function(e) {
        e.preventDefault();
        aplicarFiltros();
    });
    
    $('#formFiltroAvanzado').on('submit', function(e) {
        e.preventDefault();
        aplicarFiltrosAvanzados();
    });
    
    $('#formNuevoReembolso').on('submit', function(e) {
        e.preventDefault();
        crearReembolso();
    });
});

function mostrarInfoTransaccion(transaccion) {
    $('#infoUsuario').text(transaccion.usuario.nombre + ' ' + transaccion.usuario.apellido);
    $('#infoMonto').text('$' + parseFloat(transaccion.monto).toFixed(2));
    $('#infoFecha').text(new Date(transaccion.created_at).toLocaleDateString());
    $('#infoMetodo').text(transaccion.metodo_pago);
    $('#montoMaximo').text('$' + parseFloat(transaccion.monto).toFixed(2));
    $('#monto_reembolso').attr('max', transaccion.monto);
    $('#infoTransaccion').show();
}

function toggleSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.reembolso-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
    });
    
    updateSelectionCount();
}

function updateSelectionCount() {
    const checkboxes = document.querySelectorAll('.reembolso-checkbox:checked');
    const count = checkboxes.length;
    
    document.getElementById('contadorSeleccionados').textContent = count;
    document.getElementById('accionesLote').style.display = count > 0 ? 'block' : 'none';
}

function limpiarFiltros() {
    $('#filtrosForm')[0].reset();
    window.location.href = '{{ route("admin.pagos.reembolsos") }}';
}

function aplicarFiltros() {
    const formData = new FormData($('#filtrosForm')[0]);
    const params = new URLSearchParams(formData);
    window.location.href = '{{ route("admin.pagos.reembolsos") }}?' + params.toString();
}

function aplicarFiltrosAvanzados() {
    const formData = new FormData($('#formFiltroAvanzado')[0]);
    const params = new URLSearchParams(formData);
    $('#modalFiltroAvanzado').modal('hide');
    window.location.href = '{{ route("admin.pagos.reembolsos") }}?' + params.toString();
}

function crearReembolso() {
    const formData = new FormData($('#formNuevoReembolso')[0]);
    
    $.ajax({
        url: '{{ route("admin.pagos.reembolsos.store") }}',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            $('#modalNuevoReembolso').modal('hide');
            Swal.fire('Éxito', response.message, 'success')
                .then(() => location.reload());
        },
        error: function(xhr) {
            const message = xhr.responseJSON?.message || 'No se pudo crear el reembolso';
            Swal.fire('Error', message, 'error');
        }
    });
}

function verReembolso(reembolsoId) {
    $.ajax({
        url: `{{ route('admin.pagos.reembolsos.show', '') }}/${reembolsoId}`,
        method: 'GET',
        success: function(response) {
            $('#contenidoReembolso').html(response);
            $('#modalVerReembolso').modal('show');
        },
        error: function() {
            Swal.fire('Error', 'No se pudieron cargar los detalles del reembolso', 'error');
        }
    });
}

function aprobarReembolso(reembolsoId) {
    Swal.fire({
        title: '¿Aprobar reembolso?',
        text: 'Esta acción iniciará el proceso de reembolso',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, aprobar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            procesarAccionReembolso(reembolsoId, 'aprobar');
        }
    });
}

function rechazarReembolso(reembolsoId) {
    Swal.fire({
        title: '¿Rechazar reembolso?',
        input: 'textarea',
        inputLabel: 'Motivo del rechazo',
        inputPlaceholder: 'Explique el motivo del rechazo...',
        inputValidator: (value) => {
            if (!value) {
                return 'Debe proporcionar un motivo para el rechazo';
            }
        },
        showCancelButton: true,
        confirmButtonText: 'Rechazar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            procesarAccionReembolso(reembolsoId, 'rechazar', result.value);
        }
    });
}

function completarReembolso(reembolsoId) {
    Swal.fire({
        title: '¿Completar reembolso?',
        text: 'Marcar este reembolso como completado',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, completar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            procesarAccionReembolso(reembolsoId, 'completar');
        }
    });
}

function procesarAccionReembolso(reembolsoId, accion, motivo = null) {
    const data = {
        accion: accion,
        motivo: motivo
    };
    
    $.ajax({
        url: `{{ route('admin.pagos.reembolsos.accion', '') }}/${reembolsoId}`,
        method: 'POST',
        data: data,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            Swal.fire('Éxito', response.message, 'success')
                .then(() => location.reload());
        },
        error: function(xhr) {
            const message = xhr.responseJSON?.message || 'No se pudo procesar la acción';
            Swal.fire('Error', message, 'error');
        }
    });
}

function aprobarSeleccionados() {
    const seleccionados = Array.from(document.querySelectorAll('.reembolso-checkbox:checked'))
        .map(cb => cb.value);
    
    if (seleccionados.length === 0) return;
    
    Swal.fire({
        title: `¿Aprobar ${seleccionados.length} reembolsos?`,
        text: 'Esta acción iniciará el proceso de reembolso para todos los seleccionados',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, aprobar todos',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            procesarAccionLote(seleccionados, 'aprobar');
        }
    });
}

function procesarSeleccionados() {
    const seleccionados = Array.from(document.querySelectorAll('.reembolso-checkbox:checked'))
        .map(cb => cb.value);
    
    if (seleccionados.length === 0) return;
    
    procesarAccionLote(seleccionados, 'procesar');
}

function rechazarSeleccionados() {
    const seleccionados = Array.from(document.querySelectorAll('.reembolso-checkbox:checked'))
        .map(cb => cb.value);
    
    if (seleccionados.length === 0) return;
    
    Swal.fire({
        title: `¿Rechazar ${seleccionados.length} reembolsos?`,
        input: 'textarea',
        inputLabel: 'Motivo del rechazo',
        inputPlaceholder: 'Explique el motivo del rechazo...',
        inputValidator: (value) => {
            if (!value) {
                return 'Debe proporcionar un motivo para el rechazo';
            }
        },
        showCancelButton: true,
        confirmButtonText: 'Rechazar todos',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            procesarAccionLote(seleccionados, 'rechazar', result.value);
        }
    });
}

function procesarAccionLote(ids, accion, motivo = null) {
    const data = {
        ids: ids,
        accion: accion,
        motivo: motivo
    };
    
    $.ajax({
        url: '{{ route("admin.pagos.reembolsos.lote") }}',
        method: 'POST',
        data: data,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            Swal.fire('Éxito', response.message, 'success')
                .then(() => location.reload());
        },
        error: function(xhr) {
            const message = xhr.responseJSON?.message || 'No se pudo procesar la acción';
            Swal.fire('Error', message, 'error');
        }
    });
}

function exportarReembolsos() {
    const params = new URLSearchParams(window.location.search);
    window.open(`{{ route('admin.pagos.reembolsos.export') }}?${params.toString()}`, '_blank');
}

function exportarSeleccionados() {
    const seleccionados = Array.from(document.querySelectorAll('.reembolso-checkbox:checked'))
        .map(cb => cb.value);
    
    if (seleccionados.length === 0) return;
    
    const params = new URLSearchParams();
    params.set('ids', seleccionados.join(','));
    window.open(`{{ route('admin.pagos.reembolsos.export') }}?${params.toString()}`, '_blank');
}

function editarReembolso(reembolsoId) {
    window.location.href = `{{ route('admin.pagos.reembolsos.edit', '') }}/${reembolsoId}`;
}

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