@extends('layouts.admin')

@section('title', 'Gestionar Equipos')

@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-users-cog text-primary"></i>
            Equipos del Evento: {{ $evento->nombre }}
            <span class="badge badge-{{ $evento->estado == 'publicado' ? 'success' : ($evento->estado == 'cancelado' ? 'danger' : 'warning') }} ml-2">
                {{ ucfirst($evento->estado) }}
            </span>
        </h1>
        <div class="d-flex gap-2">
            <button class="btn btn-success btn-sm" onclick="exportarParticipantes()">
                <i class="fas fa-download"></i> Exportar
            </button>
            <button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#modalImportarParticipantes">
                <i class="fas fa-upload"></i> Importar
            </button>
            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalAgregarParticipante">
            <i class="fas fa-plus"></i> Agregar Equipo
        </button>
            <a href="{{ route('admin.eventos.show', $evento) }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Volver al Evento
            </a>
        </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-primary 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-primary text-uppercase mb-1">
                                Total Participantes
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $participantes->count() }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users 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">
                                Confirmados
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $participantes->where('pivot.estado', 'confirmada')->count() }}</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-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">
                                Pendientes
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $participantes->where('pivot.estado', 'pendiente')->count() }}</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-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">
                                Ingresos Totales
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ format_currency($ingresos_totales ?? 0, 2) }}</div>
                            @if(isset($comparacion_ingresos))
                                <div class="text-xs {{ ($comparacion_ingresos ?? 0) >= 0 ? 'text-success' : 'text-danger' }}">
                                    <i class="fas fa-arrow-{{ ($comparacion_ingresos ?? 0) >= 0 ? 'up' : 'down' }}"></i>
                                    {{ abs($comparacion_ingresos ?? 0) }}% vs período anterior
                                </div>
                            @endif
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros y Búsqueda -->
    <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-filter"></i> Filtros y Búsqueda
            </h6>
        </div>
        <div class="card-body">
            <form id="filtrosForm" class="row g-3">
                <div class="col-md-3">
                    <label for="buscar" class="form-label">Buscar Participante</label>
                    <input type="text" class="form-control" id="buscar" name="buscar" 
                           placeholder="Nombre, email o teléfono..." value="{{ request('buscar') }}">
                </div>
                <div class="col-md-2">
                    <label for="estado" class="form-label">Estado</label>
                    <select class="form-select" id="estado" name="estado">
                        <option value="">Todos los estados</option>
                        <option value="completado" {{ request('estado_pago') == 'completado' ? 'selected' : '' }}>Completado</option>
                        <option value="pendiente" {{ request('estado_pago') == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                        <option value="reembolsado" {{ request('estado_pago') == 'reembolsado' ? 'selected' : '' }}>Reembolsado</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-3">
                    <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> Buscar
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="limpiarFiltros()">
                            <i class="fas fa-times"></i> Limpiar
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Lista de Participantes -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-list"></i> Lista de Equipos ({{ $participantes->count() }})
            </h6>
            <div class="d-flex gap-2">
                <div class="dropdown">
                    <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" 
                            data-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-cog"></i> Acciones Masivas
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#" onclick="accionMasiva('confirmar')">
                            <i class="fas fa-check text-success"></i> Confirmar Seleccionados
                        </a>
                        <a class="dropdown-item" href="#" onclick="accionMasiva('pendiente')">
                            <i class="fas fa-clock text-warning"></i> Marcar como Pendiente
                        </a>
                        <a class="dropdown-item" href="#" onclick="accionMasiva('cancelar')">
                            <i class="fas fa-times text-danger"></i> Cancelar Seleccionados
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#" onclick="accionMasiva('eliminar')">
                            <i class="fas fa-trash text-danger"></i> Eliminar Seleccionados
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            @if($participantes->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered" id="tablaParticipantes">
                        <thead>
                            <tr>
                                <th width="30">
                                    <input type="checkbox" id="selectAll" class="form-check-input">
                                </th>
                                <th>Equipo</th>
                                <th>Contacto</th>
                                <th>Estado</th>
                                <th>Fecha Inscripción</th>
                                <th>Pago</th>
                                <th>Rol</th>
                                <th width="120">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($participantes as $participante)
                                <tr>
                                    <td>
                                        <input type="checkbox" class="form-check-input participante-checkbox" 
                                               value="{{ $participante->id }}">
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            @if($participante->avatar)
                                                <img src="{{ asset('storage/' . $participante->avatar) }}" 
                                                     class="rounded-circle mr-3" width="40" height="40">
                                            @else
                                                <div class="bg-primary rounded-circle mr-3 d-flex align-items-center justify-content-center" 
                                                     style="width: 40px; height: 40px;">
                                                    <span class="text-white font-weight-bold">
                                                        {{ substr($participante->nombre, 0, 1) }}
                                                    </span>
                                                </div>
                                            @endif
                                            <div>
                                                <div class="font-weight-bold">{{ $participante->nombre }} {{ $participante->apellido }}</div>
                                                <small class="text-muted">ID: {{ $participante->id }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <i class="fas fa-envelope text-muted"></i> {{ $participante->email }}
                                        </div>
                                        @if($participante->telefono)
                                            <div>
                                                <i class="fas fa-phone text-muted"></i> {{ $participante->telefono }}
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        @if($participante->pivot)
                                            <span class="badge badge-{{ $participante->pivot->estado === 'confirmada' ? 'success' : ($participante->pivot->estado === 'pendiente' ? 'warning' : 'danger') }}">
                                                {{ ucfirst($participante->pivot->estado) }}
                                            </span>
                                            @if($participante->pivot->fecha_inscripcion)
                                                <br><small class="text-muted">Inscrito: {{ \Carbon\Carbon::parse($participante->pivot->fecha_inscripcion)->format('d/m/Y') }}</small>
                                            @endif
                                        @else
                                            <span class="badge badge-secondary">Sin datos</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($participante->pivot && $participante->pivot->fecha_inscripcion)
                                            <div>{{ format_datetime_12h($participante->pivot->created_at) }}</div>
                                            <small class="text-muted">{{ \Carbon\Carbon::parse($participante->pivot->fecha_inscripcion)->diffForHumans() }}</small>
                                        @else
                                            <div>Sin fecha</div>
                                        @endif
                                    </td>
                                    <td>
                                        @if($evento->es_gratuito)
                                            <span class="badge badge-success">Gratuito</span>
                                        @elseif($participante->pivot && isset($participante->pivot->tipo_participacion) && $participante->pivot->tipo_participacion === 'equipo')
                                            <span class="badge badge-info">Pago por Equipo</span>
                                            <br><small class="text-muted">Ver detalles del equipo</small>
                                        @else
                                            @if($participante->pivot && $participante->pivot->monto_pagado)
                                                <div class="text-success font-weight-bold">
                                                    {{ format_currency($participante->pivot->monto_pagado, 2) }}
                                                </div>
                                                <small class="text-muted">{{ $participante->pivot->estado_pago }}</small>
                                            @else
                                                <span class="badge badge-warning">Pendiente</span>
                                            @endif
                                        @endif
                                    </td>
                                    <td>
                                        @if($participante->pivot && $participante->pivot->es_organizador)
                                            <span class="badge badge-warning">
                                                <i class="fas fa-crown"></i> Organizador
                                            </span>
                                        @elseif($participante->pivot && isset($participante->pivot->tipo_participacion) && $participante->pivot->tipo_participacion === 'equipo')
                                            <span class="badge badge-info">
                                                <i class="fas fa-users"></i> Jugador de Equipo
                                            </span>
                                            <br>
                                            <small class="text-muted">
                                                <strong>{{ $participante->pivot->equipo_nombre }}</strong>
                                                @if(isset($participante->pivot->posicion))
                                                    <br>{{ $participante->pivot->posicion }}
                                                @endif
                                                @if(isset($participante->pivot->numero_camiseta))
                                                    - #{{ $participante->pivot->numero_camiseta }}
                                                @endif
                                            </small>
                                        @else
                                            <span class="badge badge-secondary">Participante Individual</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-sm btn-outline-info" 
                                                    onclick="verParticipante({{ $participante->id }})" 
                                                    title="Ver detalles">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-warning" 
                                                    onclick="editarParticipante({{ $participante->id }})" 
                                                    title="Editar">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger" 
                                                    onclick="eliminarParticipante({{ $participante->id }})" 
                                                    title="Eliminar">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-users fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No hay participantes inscritos</h5>
                    <p class="text-muted">Comience agregando participantes al evento</p>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAgregarParticipante">
                        <i class="fas fa-plus"></i> Agregar Primer Participante
                    </button>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Modal Agregar Participante -->
<div class="modal fade" id="modalAgregarParticipante" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar Equipo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formAgregarParticipante">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label for="usuario_id" class="form-label">Seleccionar Usuario</label>
                                <select class="form-control" id="usuario_id" name="usuario_id" required>
                                    <option value=""></option>
                                </select>
                                <div class="form-text">Busque por nombre, email o teléfono</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="estado_participante" class="form-label">Estado</label>
                                <select class="form-select" id="estado_participante" name="estado_inscripcion" required>
                                    <option value="pendiente">Pendiente</option>
                                    <option value="confirmada">Confirmado</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="es_organizador" name="es_organizador" value="1">
                                    <label class="form-check-label" for="es_organizador">
                                        Es organizador del evento
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="enviar_notificacion" name="enviar_notificacion" value="1" checked>
                                    <label class="form-check-label" for="enviar_notificacion">
                                        Enviar notificación por email
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Sección de Pagos - Siempre visible -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="monto_pagado" class="form-label">
                                    @if($evento->es_gratuito)
                                        Evento Gratuito
                                    @else
                                        Monto a Pagar
                                    @endif
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">{{ currency_symbol() }}</span>
                                    <input type="number" class="form-control" id="monto_pagado" name="monto_pagado" 
                                           step="0.01" min="0" 
                                           value="{{ $evento->es_gratuito ? 0 : $evento->precio_inscripcion }}" 
                                           readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check mt-4">
                                    <input class="form-check-input" type="checkbox" id="pago_realizado" name="pago_realizado" value="1"
                                           @if($evento->es_gratuito) checked @endif>
                                    <label class="form-check-label" for="pago_realizado">
                                        <strong>
                                            @if($evento->es_gratuito)
                                                Inscripción confirmada
                                            @else
                                                Pago realizado
                                            @endif
                                        </strong>
                                    </label>
                                    <div class="form-text">
                                        @if($evento->es_gratuito)
                                            Evento gratuito - inscripción automática
                                        @else
                                            Marcar si el participante ya realizó el pago
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Campos ocultos -->
                    <input type="hidden" name="metodo_pago" value="efectivo">
                    
                    <div class="mb-3">
                        <label for="notas" class="form-label">Notas (Opcional)</label>
                        <textarea class="form-control" id="notas" name="notas" rows="3" 
                                  placeholder="Notas adicionales sobre el participante..."></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-primary">
                        <i class="fas fa-save"></i> Agregar Equipo
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Editar Participante -->
<div class="modal fade" id="modalEditarParticipante" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar Participante</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="formEditarParticipante">
                <div class="modal-body">
                    <input type="hidden" id="edit_participante_id" name="participante_id">
                    
                    <div class="mb-3">
                        <label for="edit_estado" class="form-label">Estado</label>
                        <select class="form-select" id="edit_estado" name="estado" required>
                            <option value="pendiente">Pendiente</option>
                            <option value="confirmada">Confirmada</option>
                            <option value="cancelada">Cancelada</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="edit_es_organizador" name="es_organizador" value="1">
                            <label class="form-check-label" for="edit_es_organizador">
                                Es organizador del evento
                            </label>
                        </div>
                    </div>
                    
                    @if(!$evento->es_gratuito)
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="edit_monto_pagado" class="form-label">Monto Pagado</label>
                                    <div class="input-group">
                                        <span class="input-group-text">{{ currency_symbol() }}</span>
                                        <input type="number" class="form-control" id="edit_monto_pagado" name="monto_pagado" 
                                               step="0.01" min="0">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="edit_estado_pago" class="form-label">Estado del Pago</label>
                                    <select class="form-select" id="edit_estado_pago" name="estado_pago">
                                        <option value="pendiente">Pendiente</option>
                                        <option value="completado">Completado</option>
                                        <option value="cancelado">Cancelado</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endif
                    
                    <div class="mb-3">
                        <label for="edit_notas" class="form-label">Notas</label>
                        <textarea class="form-control" id="edit_notas" name="notas" rows="3"></textarea>
                    </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> Guardar Cambios
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Importar Participantes -->
<div class="modal fade" id="modalImportarParticipantes" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Importar Participantes</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="formImportarParticipantes" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="archivo_participantes" class="form-label">Archivo CSV/Excel</label>
                        <input type="file" class="form-control" id="archivo_participantes" name="archivo" 
                               accept=".csv,.xlsx,.xls" required>
                        <div class="form-text">
                            Formatos permitidos: CSV, Excel (.xlsx, .xls)
                        </div>
                    </div>
                    
                    <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle"></i> Formato del archivo:</h6>
                        <p class="mb-1">El archivo debe contener las siguientes columnas:</p>
                        <ul class="mb-0">
                            <li><strong>email</strong> (requerido)</li>
                            <li><strong>nombre</strong> (requerido)</li>
                            <li><strong>apellido</strong> (requerido)</li>
                            <li><strong>telefono</strong> (opcional)</li>
                            <li><strong>estado</strong> (opcional: pendiente, confirmado)</li>
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <a href="{{ route('admin.eventos.participantes.template', $evento) }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-download"></i> Descargar Plantilla
                        </a>
                    </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-upload"></i> Importar Participantes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    console.log('Document ready');
    console.log('jQuery version:', $.fn.jquery);
    console.log('Select2 available:', typeof $.fn.select2);
    console.log('Element found:', $('#usuario_id').length);
    
    // Inicializar DataTable
    $('#tablaParticipantes').DataTable({
        order: [[4, 'desc']], // Ordenar por fecha de inscripción
        pageLength: 25,
        columnDefs: [
            { orderable: false, targets: [0, 7] } // Deshabilitar ordenamiento en checkbox y acciones
        ]
    });
    
    // Destruir cualquier instancia previa
    if ($('#usuario_id').hasClass('select2-hidden-accessible')) {
        $('#usuario_id').select2('destroy');
    }
    
    // Configuración básica de Select2
    $('#usuario_id').select2({
        placeholder: 'Buscar usuario...',
        allowClear: true,
        minimumInputLength: 2,
        width: '100%',
        dropdownParent: $('#modalAgregarParticipante'),
        ajax: {
            url: '{{ route("admin.usuarios.search") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                console.log('AJAX data function called with:', params);
                return {
                    q: params.term,
                    page: params.page || 1,
                    _token: $('meta[name="csrf-token"]').attr('content')
                };
            },
            processResults: function (data, params) {
                console.log('AJAX response received:', data);
                
                if (!Array.isArray(data)) {
                    console.error('Expected array but got:', typeof data, data);
                    return { results: [] };
                }
                
                var results = data.map(function(user) {
                    return {
                        id: user.id,
                        text: user.name + ' (' + user.email + ')'
                    };
                });
                
                console.log('Processed results:', results);
                return { results: results };
            },
            cache: false
        }
    });
    
    console.log('Select2 initialized successfully');

    // Manejar selección de todos los checkboxes
    $('#selectAll').on('change', function() {
        $('.participante-checkbox').prop('checked', this.checked);
    });

    // Manejar formulario de agregar participante
    $('#formAgregarParticipante').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        $.ajax({
            url: '{{ route("admin.eventos.participantes.store", $evento) }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                $('#modalAgregarParticipante').modal('hide');
                Swal.fire('Éxito', 'Participante agregado correctamente', 'success')
                    .then(() => location.reload());
            },
            error: function(xhr) {
                const errors = xhr.responseJSON?.errors;
                if (errors) {
                    let errorMsg = 'Errores encontrados:\n';
                    Object.values(errors).forEach(error => {
                        errorMsg += '- ' + error[0] + '\n';
                    });
                    Swal.fire('Error', errorMsg, 'error');
                } else {
                    Swal.fire('Error', 'No se pudo agregar el participante', 'error');
                }
            }
        });
    });

    // Manejar formulario de editar participante
    $('#formEditarParticipante').on('submit', function(e) {
        e.preventDefault();
        
        const participanteId = $('#edit_participante_id').val();
        const formData = new FormData(this);
        formData.append('_method', 'PUT');
        
        $.ajax({
            url: `{{ route('admin.eventos.participantes.update', [$evento, ':participante']) }}`.replace(':participante', participanteId),
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                $('#modalEditarParticipante').modal('hide');
                Swal.fire('Éxito', 'Participante actualizado correctamente', 'success')
                    .then(() => location.reload());
            },
            error: function(xhr) {
                let message = 'No se pudo actualizar el participante';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                    const errors = Object.values(xhr.responseJSON.errors).flat();
                    message = errors.join(', ');
                }
                Swal.fire('Error', message, 'error');
            }
        });
    });

    // Manejar formulario de importar participantes
    $('#formImportarParticipantes').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        $.ajax({
            url: '{{ route("admin.eventos.participantes.import", $evento) }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                $('#modalImportarParticipantes').modal('hide');
                Swal.fire('Éxito', `${response.imported} participantes importados correctamente`, 'success')
                    .then(() => location.reload());
            },
            error: function(xhr) {
                const message = xhr.responseJSON?.message || 'No se pudo importar el archivo';
                Swal.fire('Error', message, 'error');
            }
        });
    });
});

function limpiarFiltros() {
    $('#filtrosForm')[0].reset();
    window.location.href = '{{ route("admin.eventos.participantes", $evento) }}';
}

function verParticipante(participanteId) {
    window.open(`{{ route('admin.usuarios.show', '') }}/${participanteId}`, '_blank');
}

function editarParticipante(participanteId) {
    // Cargar datos del participante
    $.ajax({
        url: `{{ route('admin.eventos.participantes.show', [$evento, ':participante']) }}`.replace(':participante', participanteId),
        method: 'GET',
        success: function(data) {
            $('#edit_participante_id').val(participanteId);
            $('#edit_estado').val(data.estado);
            $('#edit_es_organizador').prop('checked', data.es_organizador);
            $('#edit_monto_pagado').val(data.monto_pagado);
            $('#edit_estado_pago').val(data.estado_pago);
            $('#edit_notas').val(data.notas);
            
            $('#modalEditarParticipante').modal('show');
        },
        error: function() {
            Swal.fire('Error', 'No se pudieron cargar los datos del participante', 'error');
        }
    });
}

function eliminarParticipante(participanteId) {
    Swal.fire({
        title: '¿Eliminar participante?',
        text: 'Esta acción no se puede deshacer',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar',
        confirmButtonColor: '#d33'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `{{ route('admin.eventos.participantes.destroy', [$evento, ':participante']) }}`.replace(':participante', participanteId),
                method: 'DELETE',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    Swal.fire('Eliminado', 'Participante eliminado correctamente', 'success')
                        .then(() => location.reload());
                },
                error: function() {
                    Swal.fire('Error', 'No se pudo eliminar el participante', 'error');
                }
            });
        }
    });
}

function accionMasiva(accion) {
    const seleccionados = $('.participante-checkbox:checked').map(function() {
        return this.value;
    }).get();
    
    if (seleccionados.length === 0) {
        Swal.fire('Advertencia', 'Debe seleccionar al menos un participante', 'warning');
        return;
    }
    
    let titulo, texto, confirmText;
    
    switch(accion) {
        case 'confirmar':
            titulo = '¿Confirmar participantes?';
            texto = `Se confirmarán ${seleccionados.length} participantes`;
            confirmText = 'Sí, confirmar';
            break;
        case 'pendiente':
            titulo = '¿Marcar como pendiente?';
            texto = `Se marcarán ${seleccionados.length} participantes como pendientes`;
            confirmText = 'Sí, marcar';
            break;
        case 'cancelar':
            titulo = '¿Cancelar participantes?';
            texto = `Se cancelarán ${seleccionados.length} participantes`;
            confirmText = 'Sí, cancelar';
            break;
        case 'eliminar':
            titulo = '¿Eliminar participantes?';
            texto = `Se eliminarán ${seleccionados.length} participantes. Esta acción no se puede deshacer.`;
            confirmText = 'Sí, eliminar';
            break;
    }
    
    Swal.fire({
        title: titulo,
        text: texto,
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: confirmText,
        cancelButtonText: 'Cancelar',
        confirmButtonColor: accion === 'eliminar' ? '#d33' : '#3085d6'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `{{ route('admin.eventos.participantes.masiva', $evento) }}`,
                method: 'POST',
                data: {
                    accion: accion,
                    participantes: seleccionados,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    Swal.fire('Éxito', response.message, 'success')
                        .then(() => location.reload());
                },
                error: function() {
                    Swal.fire('Error', 'No se pudo realizar la acción', 'error');
                }
            });
        }
    });
}

function exportarParticipantes() {
    window.open(`{{ route('admin.eventos.participantes.export', $evento) }}`, '_blank');
}
</script>
@endpush