@extends('layouts.admin')

@section('title', 'Detalles del Evento')

@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-calendar-alt text-primary"></i>
            {{ $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">
            <a href="{{ route('admin.eventos.edit', $evento) }}" class="btn btn-warning btn-sm">
                <i class="fas fa-edit"></i> Editar
            </a>
            <a href="{{ route('admin.eventos.participantes', $evento) }}" class="btn btn-info btn-sm">
                <i class="fas fa-users"></i> Participantes
            </a>
            <a href="{{ route('admin.eventos.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Volver
            </a>
        </div>
    </div>

    <!-- Alertas de Estado -->
    @if($evento->estado === 'cancelado')
        <div class="alert alert-danger" role="alert">
            <i class="fas fa-exclamation-triangle"></i>
            <strong>Evento Cancelado:</strong> Este evento ha sido cancelado.
            @if($evento->motivo_cancelacion)
                <br><strong>Motivo:</strong> {{ $evento->motivo_cancelacion }}
            @endif
        </div>
    @endif

    @if($evento->fecha_inicio < now() && $evento->fecha_fin > now())
        <div class="alert alert-info" role="alert">
            <i class="fas fa-play-circle"></i>
            <strong>Evento en Curso:</strong> Este evento está actualmente en desarrollo.
        </div>
    @endif

    @if($evento->fecha_limite_inscripcion && $evento->fecha_limite_inscripcion < now() && $evento->estado === 'publicado')
        <div class="alert alert-warning" role="alert">
            <i class="fas fa-clock"></i>
            <strong>Inscripciones Cerradas:</strong> La fecha límite de inscripción ha pasado.
        </div>
    @endif

    <!-- Mensajes de éxito y error -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle"></i>
            <strong>Error:</strong>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row">
        <!-- Información Principal -->
        <div class="col-lg-8">
            <!-- Detalles del Evento -->
            <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-info-circle"></i> Información del Evento
                    </h6>
                </div>
                <div class="card-body">
                    @if($evento->hasImage())
                        <div class="row mb-4">
                            <div class="col-12 text-center">
                                <img src="{{ $evento->getImageUrl() }}" alt="{{ $evento->nombre }}" 
                                     class="img-fluid rounded shadow" style="max-height: 300px;">
                                <div class="form-text mt-2">
                                    {{ $evento->getFormattedImageSize() }}
                                    @if($evento->getImageDimensions())
                                        - {{ $evento->getImageDimensions()['width'] }}x{{ $evento->getImageDimensions()['height'] }}px
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="font-weight-bold">Tipo:</td>
                                    <td>
                                        <span class="badge badge-primary">{{ ucfirst($evento->tipo_evento) }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="font-weight-bold">Categoría:</td>
                                    <td>{{ $evento->categoria ? ucfirst($evento->categoria) : 'No especificada' }}</td>
                                </tr>
                                <tr>
                                    <td class="font-weight-bold">Nivel:</td>
                                    <td>{{ $evento->nivel ? ucfirst($evento->nivel) : 'No especificado' }}</td>
                                </tr>
                                <tr>
                                    <td class="font-weight-bold">Ubicación:</td>
                                    <td>{{ $evento->ubicacion ?: 'No especificada' }}</td>
                                </tr>
                                <tr>
                                    <td class="font-weight-bold">Edad Mínima:</td>
                                    <td>{{ $evento->edad_minima ? $evento->edad_minima . ' años' : 'Sin restricción' }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="font-weight-bold">Fecha Inicio:</td>
                                    <td>{{ format_datetime_12h($evento->fecha_inicio) }}</td>
                                </tr>
                                <tr>
                                    <td class="font-weight-bold">Fecha Fin:</td>
                                    <td>{{ format_datetime_12h($evento->fecha_fin) }}</td>
                                </tr>
                                <tr>
                                    <td class="font-weight-bold">Duración:</td>
                                    <td>{{ $evento->fecha_inicio->diffForHumans($evento->fecha_fin, true) }}</td>
                                </tr>
                                <tr>
                                    <td class="font-weight-bold">Límite Inscripción:</td>
                                    <td>{{ $evento->fecha_limite_inscripcion ? format_datetime_12h($evento->fecha_limite_inscripcion) : 'Sin límite' }}</td>
                                </tr>
                                <tr>
                                    <td class="font-weight-bold">Creado:</td>
                                    <td>{{ format_datetime_12h($evento->created_at) }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    @if($evento->descripcion)
                        <div class="row mt-3">
                            <div class="col-12">
                                <h6 class="font-weight-bold">Descripción:</h6>
                                <p class="text-justify">{{ $evento->descripcion }}</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Canchas Asignadas -->
            <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-map-marker-alt"></i> Cancha Asignada @if($evento->cancha)(1)@else(0)@endif
                    </h6>
                </div>
                <div class="card-body">
                    @if($evento->cancha)
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="card border-left-primary">
                                    <div class="card-body py-3">
                                        <div class="d-flex align-items-center">
                                            <div class="mr-3">
                                                <i class="fas fa-futbol fa-2x text-primary"></i>
                                            </div>
                                            <div>
                                                <h6 class="font-weight-bold mb-1">{{ $evento->cancha->nombre }}</h6>
                                                <p class="text-muted mb-0">{{ $evento->cancha->categoria->nombre }} - {{ $evento->cancha->ubicacion }}</p>
                                                <small class="text-success">
                                                    <i class="fas fa-check-circle"></i> 
                                                    {{ $evento->cancha->estado === 'activa' ? 'Disponible' : ucfirst($evento->cancha->estado) }}
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-map-marker-alt fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No hay canchas asignadas a este evento</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- 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-users"></i> Participantes ({{ $evento->participantes->count() }})
                    </h6>
                    <div>
                        <button class="btn btn-sm btn-outline-primary" onclick="exportarParticipantes()">
                            <i class="fas fa-download"></i> Exportar
                        </button>
                        @if($evento->estado === 'publicado')
                            <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modalAgregarParticipante">
                                <i class="fas fa-plus"></i> Agregar
                            </button>
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    @if($evento->participantes->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered" id="tablaParticipantes">
                                <thead>
                                    <tr>
                                        <th>Participante</th>
                                        <th>Email</th>
                                        <th>Teléfono</th>
                                        <th>Estado</th>
                                        <th>Fecha Inscripción</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($evento->participantes as $participante)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    @if($participante->avatar)
                                                        <img src="{{ asset('storage/' . $participante->avatar) }}" 
                                                             class="rounded-circle mr-2" width="32" height="32">
                                                    @else
                                                        <div class="bg-primary rounded-circle mr-2 d-flex align-items-center justify-content-center" 
                                                             style="width: 32px; height: 32px;">
                                                            <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>
                                                        @if($participante->pivot->es_organizador)
                                                            <small class="badge badge-warning">Organizador</small>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ $participante->email }}</td>
                                            <td>{{ $participante->telefono ?: 'No especificado' }}</td>
                                            <td>
                                                <span class="badge badge-{{ $participante->pivot->estado_pago === 'completado' ? 'success' : ($participante->pivot->estado_pago === 'pendiente' ? 'warning' : 'danger') }}">
                                                    {{ ucfirst($participante->pivot->estado_pago) }}
                                                </span>
                                            </td>
                                            <td>{{ format_datetime_12h($participante->pivot->created_at) }}</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>
                                                    @if($participante->pivot->estado === 'pendiente')
                                                        <button class="btn btn-sm btn-outline-success" 
                                                                onclick="confirmarParticipante({{ $participante->id }})" 
                                                                title="Confirmar">
                                                            <i class="fas fa-check"></i>
                                                        </button>
                                                    @endif
                                                    <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-4">
                            <i class="fas fa-users fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No hay participantes inscritos en este evento</p>
                            @if($evento->estado === 'publicado')
                                <button class="btn btn-primary" data-toggle="modal" data-target="#modalAgregarParticipante">
                                    <i class="fas fa-plus"></i> Agregar Primer Participante
                                </button>
                            @endif
                        </div>
                    @endif
                </div>
            </div>

            <!-- Equipos -->
            <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-users-cog"></i> Equipos ({{ $evento->equipos->count() }})
                    </h6>
                    <div>
                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modalRegistroEquipo">
                            <i class="fas fa-plus"></i> Nuevo Equipo
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    @if($evento->equipos->count() > 0)
                        <div class="row">
                            @foreach($evento->equipos as $equipo)
                                <div class="col-md-6 mb-3">
                                    <div class="card border-left-{{ $equipo->estaCompleto() ? 'success' : 'warning' }}">
                                        <div class="card-body py-3">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <div class="flex-grow-1">
                                                    <h6 class="font-weight-bold mb-1">
                                                        @if($equipo->logo)
                                                            <img src="{{ asset('storage/' . $equipo->logo) }}" 
                                                                 alt="Logo" class="rounded mr-2" width="24" height="24">
                                                        @endif
                                                        {{ $equipo->nombre }}
                                                    </h6>
                                                    
                                                    <div class="mb-2">
                                                        <small class="text-muted">
                                                            <i class="fas fa-user-crown"></i>
                                                            @if($equipo->capitan)
                                                                {{ $equipo->capitan->name }}
                                                            @else
                                                                Sin capitán
                                                            @endif
                                                        </small>
                                                    </div>
                                                    
                                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                                        <small class="text-muted">
                                                            <i class="fas fa-running"></i>
                                                            {{ $equipo->jugadores->count() }} jugadores
                                                        </small>
                                                        <small class="text-muted">
                                                            <i class="fas fa-user-tie"></i>
                                                            {{ $equipo->tieneDirectorTecnico() ? 'DT asignado' : 'Sin DT' }}
                                                        </small>
                                                    </div>
                                                    
                                                    <div class="progress mb-2" style="height: 6px;">
                                                        <div class="progress-bar bg-{{ $equipo->jugadores->count() >= 10 ? 'success' : 'warning' }}" 
                                                             role="progressbar" 
                                                             style="width: {{ min(($equipo->jugadores->count() / 10) * 100, 100) }}%">
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <span class="badge badge-{{ $equipo->estado == 'activo' ? 'success' : 'secondary' }}">
                                                            {{ ucfirst($equipo->estado) }}
                                                        </span>
                                                        @if($equipo->estaCompleto())
                                                            <span class="badge badge-success">
                                                                <i class="fas fa-check"></i> Completo
                                                            </span>
                                                        @else
                                                            <span class="badge badge-warning">
                                                                <i class="fas fa-exclamation-triangle"></i> Incompleto
                                                            </span>
                                                        @endif
                                                    </div>
                                                </div>
                                                
                                                <div class="ml-2">
                                                    <div class="dropdown">
                                                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" 
                                                                type="button" data-bs-toggle="dropdown">
                                                            <i class="fas fa-ellipsis-v"></i>
                                                        </button>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a class="dropdown-item" href="{{ route('admin.equipos.show', $equipo) }}">
                                                                <i class="fas fa-eye"></i> Ver Detalles
                                                            </a>
                                                            <a class="dropdown-item" href="{{ route('admin.equipos.edit', $equipo) }}">
                                                                <i class="fas fa-edit"></i> Editar
                                                            </a>
                                                            <div class="dropdown-divider"></div>
                                                            <a class="dropdown-item text-danger" 
                                                               href="#" onclick="eliminarEquipo({{ $equipo->id }})">
                                                                <i class="fas fa-trash"></i> Eliminar
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        
                        <!-- Resumen de Equipos -->
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="card bg-light">
                                    <div class="card-body py-2">
                                        <div class="row text-center">
                                            <div class="col-3">
                                                <small class="text-muted d-block">Total Equipos</small>
                                                <strong class="text-primary">{{ $evento->equipos->count() }}</strong>
                                            </div>
                                            <div class="col-3">
                                                <small class="text-muted d-block">Equipos Completos</small>
                                                <strong class="text-success">{{ $evento->equipos->filter(fn($e) => $e->estaCompleto())->count() }}</strong>
                                            </div>
                                            <div class="col-3">
                                                <small class="text-muted d-block">Total Jugadores</small>
                                                <strong class="text-info">{{ $evento->equipos->sum(fn($e) => $e->jugadores->count()) }}</strong>
                                            </div>
                                            <div class="col-3">
                                                <small class="text-muted d-block">Con Director Técnico</small>
                                                <strong class="text-warning">{{ $evento->equipos->filter(fn($e) => $e->tieneDirectorTecnico())->count() }}</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-users-cog fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No hay equipos registrados en este evento</p>
                            <a href="{{ route('admin.equipos.create') }}?evento_id={{ $evento->id }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Crear Primer Equipo
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Panel Lateral -->
        <div class="col-lg-4">
            <!-- Estadísticas -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-info">
                        <i class="fas fa-chart-bar"></i> Estadísticas
                    </h6>
                </div>
                <div class="card-body">
                    <!-- Estadísticas Principales -->
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-right">
                                <h3 class="text-primary">{{ $evento->participantes->count() }}</h3>
                                <small class="text-muted">Total Participantes</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h3 class="text-success">{{ format_currency($evento->ingresos_total ?? 0, 2) }}</h3>
                            <small class="text-muted">Ingresos Totales</small>
                        </div>
                    </div>
                    
                    <!-- Estadísticas de Participantes -->
                    <hr>
                    <div class="row text-center">
                        <div class="col-4">
                            <h5 class="text-success">{{ $evento->participantes->where('pivot.estado', 'confirmado')->count() }}</h5>
                            <small class="text-muted">Confirmados</small>
                        </div>
                        <div class="col-4">
                            <h5 class="text-warning">{{ $evento->participantes->where('pivot.estado', 'pendiente')->count() }}</h5>
                            <small class="text-muted">Pendientes</small>
                        </div>
                        <div class="col-4">
                            <h5 class="text-danger">{{ $evento->participantes->where('pivot.estado', 'cancelado')->count() }}</h5>
                            <small class="text-muted">Cancelados</small>
                        </div>
                    </div>
                    
                    <!-- Estadísticas de Equipos -->
                    @if($evento->equipos->count() > 0)
                        <hr>
                        <div class="mb-2">
                            <small class="text-muted font-weight-bold">
                                <i class="fas fa-users-cog"></i> Estadísticas de Equipos
                            </small>
                        </div>
                        <div class="row text-center">
                            <div class="col-6">
                                <div class="border-right">
                                    <h4 class="text-info">{{ $evento->equipos->count() }}</h4>
                                    <small class="text-muted">Total Equipos</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <h4 class="text-warning">{{ $evento->equipos->sum(function($equipo) { return $equipo->jugadores->count(); }) }}</h4>
                                <small class="text-muted">Total Jugadores</small>
                            </div>
                        </div>
                        <div class="row text-center mt-2">
                            <div class="col-4">
                                <h6 class="text-success">{{ $evento->equipos->filter(function($equipo) { return $equipo->estaCompleto(); })->count() }}</h6>
                                <small class="text-muted">Completos</small>
                            </div>
                            <div class="col-4">
                                <h6 class="text-primary">{{ $evento->equipos->where('estado', 'activo')->count() }}</h6>
                                <small class="text-muted">Activos</small>
                            </div>
                            <div class="col-4">
                                <h6 class="text-info">{{ $evento->equipos->filter(function($equipo) { return $equipo->tieneDirectorTecnico(); })->count() }}</h6>
                                <small class="text-muted">Con DT</small>
                            </div>
                        </div>
                    @endif
                    
                    @if($evento->max_participantes)
                        <hr>
                        <div class="mb-2">
                            <small class="text-muted">Capacidad del Evento</small>
                            <div class="progress">
                                @php
                                    $porcentaje = ($evento->participantes->count() / $evento->max_participantes) * 100;
                                @endphp
                                <div class="progress-bar {{ $porcentaje >= 90 ? 'bg-danger' : ($porcentaje >= 70 ? 'bg-warning' : 'bg-success') }}" 
                                     role="progressbar" style="width: {{ $porcentaje }}%">
                                    {{ number_format($porcentaje, 1) }}%
                                </div>
                            </div>
                            <small class="text-muted">{{ $evento->participantes->count() }} / {{ $evento->max_participantes }} participantes</small>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Configuración -->
            <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-cog"></i> Configuración
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="font-weight-bold">Participantes:</label>
                        <div class="mt-1">
                            @if($evento->min_participantes)
                                <span class="badge badge-info">Mín: {{ $evento->min_participantes }}</span>
                            @endif
                            @if($evento->max_participantes)
                                <span class="badge badge-info">Máx: {{ $evento->max_participantes }}</span>
                            @endif
                            @if(!$evento->min_participantes && !$evento->max_participantes)
                                <span class="text-muted">Sin límites</span>
                            @endif
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="font-weight-bold">Opciones:</label>
                        <div class="mt-1">
                            @if($evento->es_publico)
                                <span class="badge badge-success"><i class="fas fa-globe"></i> Público</span>
                            @else
                                <span class="badge badge-secondary"><i class="fas fa-lock"></i> Privado</span>
                            @endif
                            
                            @if($evento->requiere_aprobacion)
                                <span class="badge badge-warning"><i class="fas fa-check-circle"></i> Requiere Aprobación</span>
                            @endif
                            
                            @if($evento->permite_invitados)
                                <span class="badge badge-info"><i class="fas fa-user-plus"></i> Permite Invitados</span>
                            @endif
                        </div>
                    </div>

                    @if(!$evento->es_gratuito)
                        <div class="mb-3">
                            <label class="font-weight-bold">Precios:</label>
                            <div class="mt-1">
                                <div class="d-flex justify-content-between">
                                    <span>Inscripción:</span>
                                    <span class="font-weight-bold">{{ format_currency($evento->precio_inscripcion, 2) }}</span>
                                </div>
                                @if($evento->precio_descuento)
                                    <div class="d-flex justify-content-between text-success">
                                        <span>Con descuento:</span>
                                        <span class="font-weight-bold">{{ format_currency($evento->precio_descuento, 2) }}</span>
                                    </div>
                                    @if($evento->fecha_limite_descuento)
                                        <small class="text-muted">Hasta: {{ $evento->fecha_limite_descuento->format('d/m/Y') }}</small>
                                    @endif
                                @endif
                            </div>
                        </div>
                    @else
                        <div class="mb-3">
                            <span class="badge badge-success badge-lg">
                                <i class="fas fa-gift"></i> Evento Gratuito
                            </span>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Acciones Rápidas -->
            <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-bolt"></i> Acciones Rápidas
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        @if($evento->estado === 'borrador')
                            <button class="btn btn-success btn-sm" onclick="publicarEvento()">
                                <i class="fas fa-bullhorn"></i> Publicar Evento
                            </button>
                        @endif
                        
                        @if($evento->estado === 'publicado')
                            <button class="btn btn-info btn-sm" onclick="notificarParticipantes()">
                                <i class="fas fa-bell"></i> Notificar Participantes
                            </button>
                        @endif
                        
                        <button class="btn btn-warning btn-sm" onclick="duplicarEvento()">
                            <i class="fas fa-copy"></i> Duplicar Evento
                        </button>
                        
                        @if($evento->estado !== 'cancelado')
                            <button class="btn btn-danger btn-sm" onclick="cancelarEvento()">
                                <i class="fas fa-times-circle"></i> Cancelar Evento
                            </button>
                        @endif
                        
                        <a href="{{ route('admin.eventos.reporte', $evento) }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-file-pdf"></i> Generar Reporte
                        </a>
                    </div>
                </div>
            </div>


            </div>
        </div>
    </div>
</div>

<!-- Modal Agregar Participante -->
<div class="modal fade" id="modalAgregarParticipante" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar Participante</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="formAgregarParticipante">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="usuario_id" class="form-label">Seleccionar Usuario</label>
                        <select class="form-select" id="usuario_id" name="usuario_id" required>
                            <option value="">Buscar usuario...</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="estado_participante" class="form-label">Estado</label>
                        <select class="form-select" id="estado_participante" name="estado" required>
                            <option value="pendiente">Pendiente</option>
                            <option value="confirmado">Confirmado</option>
                        </select>
                    </div>
                    <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="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Agregar Participante</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal de Registro de Equipo -->
<div class="modal fade" id="modalRegistroEquipo" tabindex="-1" aria-labelledby="modalRegistroEquipoLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalRegistroEquipoLabel">
                    <i class="fas fa-users"></i> Registro de Equipo
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formRegistroEquipo" action="{{ route('admin.equipos.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="evento_id" value="{{ $evento->id }}">
                
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="nombre" class="form-label">Nombre del Equipo *</label>
                                <input type="text" class="form-control" id="nombre" name="nombre" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="descripcion" class="form-label">Descripción</label>
                                <input type="text" class="form-control" id="descripcion" name="descripcion">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="logo" class="form-label">Logo del Equipo</label>
                                <input type="file" class="form-control" id="logo" name="logo" accept="image/*">
                                <small class="text-muted">Formatos permitidos: JPG, PNG, GIF (máx. 2MB)</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="color_camiseta" class="form-label">Color de Camiseta *</label>
                                <div class="input-group">
                                    <input type="color" class="form-control form-control-color" id="color_camiseta_picker" value="#ff0000" style="width: 60px;">
                                    <input type="text" class="form-control" id="color_camiseta" name="color_camiseta" placeholder="Ej: Rojo" required>
                                </div>
                                <small class="text-muted">Selecciona el color o escribe el nombre</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="notas" class="form-label">Notas</label>
                                <textarea class="form-control" id="notas" name="notas" rows="3"></textarea>
                            </div>
                        </div>
                    </div>

                    <h6 class="text-primary mb-3">
                        <i class="fas fa-running"></i> Jugadores (mínimo 6)
                    </h6>

                    <div id="jugadoresContainer">
                        @for($i = 1; $i <= 6; $i++)
                            <div class="card mb-3">
                                <div class="card-header py-2">
                                    <h6 class="mb-0">Jugador {{ $i }}</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <input type="text" class="form-control form-control-sm" name="jugadores[{{ $i-1 }}][nombre]" placeholder="Nombre" required>
                                        </div>
                                        <div class="col-md-3">
                                            <input type="text" class="form-control form-control-sm" name="jugadores[{{ $i-1 }}][apellido]" placeholder="Apellido" required>
                                        </div>
                                        <div class="col-md-3">
                                            <input type="text" class="form-control form-control-sm" name="jugadores[{{ $i-1 }}][documento]" placeholder="Documento" required>
                                        </div>
                                        <div class="col-md-3">
                                            <input type="date" class="form-control form-control-sm" name="jugadores[{{ $i-1 }}][fecha_nacimiento]" required>
                                        </div>
                                    </div>
                                    <div class="row mt-2">
                                        <div class="col-md-3">
                                            <select class="form-control form-control-sm" name="jugadores[{{ $i-1 }}][posicion]" required>
                                                <option value="">Posición</option>
                                                <option value="Portero">Portero</option>
                                                <option value="Defensa">Defensa</option>
                                                <option value="Mediocampo">Mediocampo</option>
                                                <option value="Delantero">Delantero</option>
                                                <option value="Suplente">Suplente</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <input type="number" class="form-control form-control-sm" name="jugadores[{{ $i-1 }}][numero_camiseta]" placeholder="# Camiseta" min="1" max="99" required>
                                        </div>
                                        <div class="col-md-3">
                                            <input type="tel" class="form-control form-control-sm" name="jugadores[{{ $i-1 }}][telefono]" placeholder="Teléfono">
                                        </div>
                                        <div class="col-md-3">
                                            <input type="email" class="form-control form-control-sm" name="jugadores[{{ $i-1 }}][email]" placeholder="Email">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>

                    <!-- Botón para agregar más jugadores -->
                    <div class="text-center mb-4">
                        <button type="button" class="btn btn-outline-primary" id="btnAgregarJugador">
                            <i class="fas fa-plus"></i> Agregar Jugador
                        </button>
                        <small class="d-block text-muted mt-1">
                            <span id="contadorJugadores">6</span> jugadores agregados
                        </small>
                    </div>

                    <h6 class="text-primary mb-3">
                        <i class="fas fa-user-tie"></i> Director Técnico
                    </h6>

                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="director_tecnico[nombre]" placeholder="Nombre" required>
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="director_tecnico[apellido]" placeholder="Apellido" required>
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="director_tecnico[documento]" placeholder="Documento" required>
                                </div>
                                <div class="col-md-3">
                                    <input type="date" class="form-control" name="director_tecnico[fecha_nacimiento]" required>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-md-6">
                                    <input type="tel" class="form-control" name="director_tecnico[telefono]" placeholder="Teléfono">
                                </div>
                                <div class="col-md-6">
                                    <input type="email" class="form-control" name="director_tecnico[email]" placeholder="Email">
                                </div>
                            </div>
                        </div>
                    </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">
                        <i class="fas fa-save"></i> Registrar Equipo
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Inicializar DataTable para participantes
    $('#tablaParticipantes').DataTable({

        order: [[4, 'desc']], // Ordenar por fecha de inscripción
        pageLength: 10
    });

    // Inicializar Select2 para usuarios
    $('#usuario_id').select2({
        placeholder: 'Buscar usuario...',
        ajax: {
            url: '{{ route("admin.usuarios.search") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term,
                    evento_id: {{ $evento->id }}
                };
            },
            processResults: function (data) {
                return {
                    results: data.map(function(user) {
                        return {
                            id: user.id,
                            text: user.nombre + ' ' + user.apellido + ' (' + user.email + ')'
                        };
                    })
                };
            }
        }
    });

    // 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 registro de equipo
    $('#formRegistroEquipo').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        // Mostrar loading
        const submitBtn = $(this).find('button[type="submit"]');
        const originalText = submitBtn.html();
        submitBtn.html('<i class="fas fa-spinner fa-spin"></i> Registrando...').prop('disabled', true);
        
        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                Swal.fire({
                    title: 'Éxito',
                    text: 'Equipo registrado exitosamente',
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then(() => {
                    // Limpiar formulario
                    $('#formRegistroEquipo')[0].reset();
                    // Recargar página para mostrar el nuevo equipo
                    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 registrar el equipo', 'error');
                }
            },
            complete: function() {
                // Restaurar botón
                submitBtn.html(originalText).prop('disabled', false);
            }
        });
    });

    // Sincronizar selector de color con campo de texto
    $('#color_camiseta_picker').on('change', function() {
        const colorHex = $(this).val();
        const colorName = hexToColorName(colorHex);
        $('#color_camiseta').val(colorName);
    });

    $('#color_camiseta').on('input', function() {
        const colorName = $(this).val().toLowerCase();
        const colorHex = colorNameToHex(colorName);
        if (colorHex) {
            $('#color_camiseta_picker').val(colorHex);
        }
    });

    // Función para convertir hex a nombre de color aproximado
    function hexToColorName(hex) {
        const colors = {
            '#ff0000': 'Rojo',
            '#00ff00': 'Verde',
            '#0000ff': 'Azul',
            '#ffff00': 'Amarillo',
            '#ff00ff': 'Magenta',
            '#00ffff': 'Cian',
            '#000000': 'Negro',
            '#ffffff': 'Blanco',
            '#808080': 'Gris',
            '#800000': 'Granate',
            '#008000': 'Verde Oscuro',
            '#000080': 'Azul Marino',
            '#808000': 'Oliva',
            '#800080': 'Púrpura',
            '#008080': 'Verde Azulado',
            '#c0c0c0': 'Plata',
            '#ffa500': 'Naranja',
            '#ffc0cb': 'Rosa',
            '#a52a2a': 'Marrón'
        };
        
        return colors[hex.toLowerCase()] || hex;
    }

    // Función para convertir nombre de color a hex aproximado
    function colorNameToHex(name) {
        const colors = {
            'rojo': '#ff0000',
            'verde': '#00ff00',
            'azul': '#0000ff',
            'amarillo': '#ffff00',
            'magenta': '#ff00ff',
            'cian': '#00ffff',
            'negro': '#000000',
            'blanco': '#ffffff',
            'gris': '#808080',
            'granate': '#800000',
            'verde oscuro': '#008000',
            'azul marino': '#000080',
            'oliva': '#808000',
            'púrpura': '#800080',
            'verde azulado': '#008080',
            'plata': '#c0c0c0',
            'naranja': '#ffa500',
            'rosa': '#ffc0cb',
            'marrón': '#a52a2a'
        };
        
        return colors[name.toLowerCase()] || null;
    }
});

function verParticipante(participanteId) {
    // Implementar vista de detalles del participante
    window.open(`{{ route('admin.usuarios.show', '') }}/${participanteId}`, '_blank');
}

function confirmarParticipante(participanteId) {
    Swal.fire({
        title: '¿Confirmar participante?',
        text: 'El participante será confirmado para este evento',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, confirmar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `{{ route('admin.eventos.participantes.confirmar', [$evento, '']) }}${participanteId}`,
                method: 'PUT',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    Swal.fire('Confirmado', 'Participante confirmado correctamente', 'success')
                        .then(() => location.reload());
                },
                error: function() {
                    Swal.fire('Error', 'No se pudo confirmar el 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, '']) }}${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 publicarEvento() {
    Swal.fire({
        title: '¿Publicar evento?',
        text: 'El evento será visible para todos los usuarios',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, publicar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `{{ route('admin.eventos.cambiarEstado', $evento) }}`,
                method: 'PUT',
                data: {
                    estado: 'programado',
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    Swal.fire('Publicado', 'Evento publicado correctamente', 'success')
                        .then(() => location.reload());
                },
                error: function() {
                    Swal.fire('Error', 'No se pudo publicar el evento', 'error');
                }
            });
        }
    });
}

function cancelarEvento() {
    Swal.fire({
        title: '¿Cancelar evento?',
        input: 'textarea',
        inputLabel: 'Motivo de cancelación',
        inputPlaceholder: 'Ingrese el motivo de la cancelación...',
        showCancelButton: true,
        confirmButtonText: 'Sí, cancelar evento',
        cancelButtonText: 'No cancelar',
        confirmButtonColor: '#d33',
        inputValidator: (value) => {
            if (!value) {
                return 'Debe especificar un motivo de cancelación';
            }
        }
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `{{ route('admin.eventos.cambiarEstado', $evento) }}`,
                method: 'PUT',
                data: {
                    estado: 'cancelado',
                    motivo: result.value,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    Swal.fire('Cancelado', 'Evento cancelado correctamente', 'success')
                        .then(() => location.reload());
                },
                error: function() {
                    Swal.fire('Error', 'No se pudo cancelar el evento', 'error');
                }
            });
        }
    });
}

function duplicarEvento() {
    Swal.fire({
        title: '¿Duplicar evento?',
        text: 'Se creará una copia de este evento como borrador',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, duplicar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `{{ route('admin.eventos.duplicar', $evento) }}`,
                method: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    Swal.fire('Duplicado', 'Evento duplicado correctamente', 'success')
                        .then(() => window.location.href = response.redirect_url);
                },
                error: function() {
                    Swal.fire('Error', 'No se pudo duplicar el evento', 'error');
                }
            });
        }
    });
}

function notificarParticipantes() {
    Swal.fire({
        title: 'Notificar participantes',
        input: 'textarea',
        inputLabel: 'Mensaje',
        inputPlaceholder: 'Escriba el mensaje para los participantes...',
        showCancelButton: true,
        confirmButtonText: 'Enviar notificación',
        cancelButtonText: 'Cancelar',
        inputValidator: (value) => {
            if (!value) {
                return 'Debe escribir un mensaje';
            }
        }
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `{{ route('admin.eventos.notificar', $evento) }}`,
                method: 'POST',
                data: {
                    mensaje: result.value,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    Swal.fire('Enviado', 'Notificación enviada a todos los participantes', 'success');
                },
                error: function() {
                    Swal.fire('Error', 'No se pudo enviar la notificación', 'error');
                }
            });
        }
    });
}

function exportarParticipantes() {
    window.open(`{{ route('admin.eventos.participantes.export', $evento) }}`, '_blank');
}

function eliminarEquipo(equipoId) {
    Swal.fire({
        title: '¿Estás seguro?',
        text: 'Esta acción no se puede deshacer',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            // Crear formulario para enviar DELETE request
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `{{ url('admin/equipos') }}/${equipoId}`;
            
            // Agregar token CSRF
            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = '{{ csrf_token() }}';
            form.appendChild(csrfToken);
            
            // Agregar método DELETE
            const methodField = document.createElement('input');
            methodField.type = 'hidden';
            methodField.name = '_method';
            methodField.value = 'DELETE';
            form.appendChild(methodField);
            
            // Enviar formulario
            document.body.appendChild(form);
            form.submit();
        }
    });
}

// Variables para el manejo de jugadores dinámicos
let contadorJugadores = 6; // Empezamos con 6 jugadores iniciales

// Función para agregar un nuevo jugador
function agregarJugador() {
    contadorJugadores++;
    
    const jugadorHtml = `
        <div class="card mb-3 jugador-dinamico" id="jugador-${contadorJugadores}">
            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Jugador ${contadorJugadores}</h6>
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="eliminarJugador(${contadorJugadores})">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <input type="text" class="form-control form-control-sm" name="jugadores[${contadorJugadores-1}][nombre]" placeholder="Nombre" required>
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control form-control-sm" name="jugadores[${contadorJugadores-1}][apellido]" placeholder="Apellido" required>
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control form-control-sm" name="jugadores[${contadorJugadores-1}][documento]" placeholder="Documento" required>
                    </div>
                    <div class="col-md-3">
                        <input type="date" class="form-control form-control-sm" name="jugadores[${contadorJugadores-1}][fecha_nacimiento]" required>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-md-3">
                         <select class="form-control form-control-sm" name="jugadores[${contadorJugadores-1}][posicion]" required>
                             <option value="">Posición</option>
                             <option value="Portero">Portero</option>
                             <option value="Defensa">Defensa</option>
                             <option value="Mediocampo">Mediocampo</option>
                             <option value="Delantero">Delantero</option>
                             <option value="Suplente">Suplente</option>
                         </select>
                     </div>
                    <div class="col-md-3">
                        <input type="number" class="form-control form-control-sm" name="jugadores[${contadorJugadores-1}][numero_camiseta]" placeholder="# Camiseta" min="1" max="99" required>
                    </div>
                    <div class="col-md-3">
                        <input type="tel" class="form-control form-control-sm" name="jugadores[${contadorJugadores-1}][telefono]" placeholder="Teléfono">
                    </div>
                    <div class="col-md-3">
                        <input type="email" class="form-control form-control-sm" name="jugadores[${contadorJugadores-1}][email]" placeholder="Email">
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Agregar el nuevo jugador al contenedor
    $('#jugadoresContainer').append(jugadorHtml);
    
    // Actualizar el contador visual
    actualizarContadorJugadores();
    
    // Scroll suave hacia el nuevo jugador
    $(`#jugador-${contadorJugadores}`)[0].scrollIntoView({ 
        behavior: 'smooth', 
        block: 'center' 
    });
}

// Función para eliminar un jugador
function eliminarJugador(numeroJugador) {
    if (contadorJugadores <= 6) {
        Swal.fire('Atención', 'Debe mantener al menos 6 jugadores', 'warning');
        return;
    }
    
    Swal.fire({
        title: '¿Eliminar jugador?',
        text: 'Esta acción no se puede deshacer',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            $(`#jugador-${numeroJugador}`).remove();
            contadorJugadores--;
            actualizarContadorJugadores();
            reindexarJugadores();
        }
    });
}

// Función para actualizar el contador visual
function actualizarContadorJugadores() {
    $('#contadorJugadores').text(contadorJugadores);
}

// Función para reindexar los nombres de los campos después de eliminar
function reindexarJugadores() {
    let indice = 0;
    $('#jugadoresContainer .card').each(function() {
        $(this).find('input, select').each(function() {
            const name = $(this).attr('name');
            if (name && name.includes('jugadores[')) {
                const newName = name.replace(/jugadores\[\d+\]/, `jugadores[${indice}]`);
                $(this).attr('name', newName);
            }
        });
        
        // Actualizar el título del jugador
        $(this).find('.card-header h6').text(`Jugador ${indice + 1}`);
        
        indice++;
    });
}

// Event listener para el botón de agregar jugador
$(document).ready(function() {
    $('#btnAgregarJugador').on('click', function() {
        agregarJugador();
    });
});
</script>
@endpush