@extends('layouts.admin')

@section('title')
    @lang('translation.Perfil Usuario')
@endsection

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

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            <a href="{{ route('admin.usuarios.index') }}">Usuarios</a>
        @endslot
        @slot('title')
            Perfil de {{ $usuario->nombre }} {{ $usuario->apellido }}
        @endslot
    @endcomponent

    <div class="row">
        <!-- Información del Usuario -->
        <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <div class="text-center">
                        <div class="mb-3">
                            <img src="{{ $usuario->avatar ? asset('storage/' . $usuario->avatar) : asset('images/users/avatar-default.svg') }}" 
                                 alt="Avatar" class="rounded-circle avatar-lg" width="120" height="120" 
                                 style="object-fit: cover; border: 4px solid #e9ecef;">
                        </div>
                        <h5 class="mb-1">{{ $usuario->nombre }} {{ $usuario->apellido }}</h5>
                        <p class="text-muted mb-2">{{ ucfirst($usuario->rol) }}</p>
                        
                        <div class="mb-3">
                            <span class="badge bg-{{ $usuario->estado == 'activo' ? 'success' : ($usuario->estado == 'inactivo' ? 'warning' : 'danger') }} fs-6">
                                {{ ucfirst($usuario->estado) }}
                            </span>
                            @if($usuario->email_verified_at)
                                <span class="badge bg-success fs-6 ms-1">
                                    <i class="bx bx-check-circle"></i> Verificado
                                </span>
                            @else
                                <span class="badge bg-warning fs-6 ms-1">
                                    <i class="bx bx-error-circle"></i> No verificado
                                </span>
                            @endif
                        </div>
                        
                        <div class="d-flex justify-content-center gap-1 mb-3 flex-wrap">
                            <!-- Editar -->
                            <a href="{{ route('admin.usuarios.edit', $usuario->id) }}" 
                               class="btn btn-primary btn-sm" 
                               title="Editar Usuario">
                                <i class="bx bx-edit"></i>
                            </a>
                            
                            <!-- Mensaje -->
                            <button type="button" 
                                    class="btn btn-outline-info btn-sm" 
                                    onclick="enviarMensaje()"
                                    title="Enviar Mensaje">
                                <i class="bx bx-message"></i>
                            </button>
                            
                            <!-- Verificar Email -->
                            @if(!$usuario->email_verified_at)
                                <button type="button" 
                                        class="btn btn-outline-success btn-sm" 
                                        onclick="verificarEmail({{ $usuario->id }})"
                                        title="Verificar Email">
                                    <i class="bx bx-check-shield"></i>
                                </button>
                            @endif
                            
                            <!-- Reset Password -->
                            <button type="button" 
                                    class="btn btn-outline-warning btn-sm" 
                                    onclick="resetPassword({{ $usuario->id }})"
                                    title="Reset Password">
                                <i class="bx bx-key"></i>
                            </button>
                            
                            <!-- Exportar Datos -->
                            <button type="button" 
                                    class="btn btn-outline-secondary btn-sm" 
                                    onclick="exportarDatos({{ $usuario->id }})"
                                    title="Exportar Datos">
                                <i class="bx bx-download"></i>
                            </button>
                            
                            <!-- Suspender/Activar -->
                            @if($usuario->estado == 'activo')
                                <button type="button" 
                                        class="btn btn-outline-warning btn-sm" 
                                        onclick="suspenderUsuario({{ $usuario->id }})"
                                        title="Suspender Usuario">
                                    <i class="bx bx-user-x"></i>
                                </button>
                            @else
                                <button type="button" 
                                        class="btn btn-outline-success btn-sm" 
                                        onclick="activarUsuario({{ $usuario->id }})"
                                        title="Activar Usuario">
                                    <i class="bx bx-user-check"></i>
                                </button>
                            @endif
                            
                            <!-- Eliminar -->
                            <button type="button" 
                                    class="btn btn-outline-danger btn-sm" 
                                    onclick="eliminarUsuario({{ $usuario->id }})"
                                    title="Eliminar Usuario">
                                <i class="bx bx-trash"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Información de Contacto -->
                    <div class="border-top pt-3">
                        <h6 class="text-muted text-uppercase fw-semibold mb-3">Información de Contacto</h6>
                        
                        <div class="mb-2">
                            <i class="bx bx-envelope text-muted me-2"></i>
                            <span class="text-muted">Email:</span>
                            <p class="mb-0">{{ $usuario->email }}</p>
                        </div>
                        
                        @if($usuario->telefono)
                            <div class="mb-2">
                                <i class="bx bx-phone text-muted me-2"></i>
                                <span class="text-muted">Teléfono:</span>
                                <p class="mb-0">{{ $usuario->telefono }}</p>
                            </div>
                        @endif
                        
                        @if($usuario->direccion)
                            <div class="mb-2">
                                <i class="bx bx-map text-muted me-2"></i>
                                <span class="text-muted">Dirección:</span>
                                <p class="mb-0">{{ $usuario->direccion }}</p>
                            </div>
                        @endif
                    </div>
                    
                    <!-- Información Personal -->
                    <div class="border-top pt-3 mt-3">
                        <h6 class="text-muted text-uppercase fw-semibold mb-3">Información Personal</h6>
                        
                        @if($usuario->tipo_documento && $usuario->numero_documento)
                            <div class="mb-2">
                                <i class="bx bx-id-card text-muted me-2"></i>
                                <span class="text-muted">Documento:</span>
                                <p class="mb-0">{{ $usuario->tipo_documento }} {{ $usuario->numero_documento }}</p>
                            </div>
                        @endif
                        
                        @if($usuario->fecha_nacimiento)
                            <div class="mb-2">
                                <i class="bx bx-calendar text-muted me-2"></i>
                                <span class="text-muted">Fecha Nacimiento:</span>
                                <p class="mb-0">{{ $usuario->fecha_nacimiento->format('d/m/Y') }} ({{ $usuario->fecha_nacimiento->age }} años)</p>
                            </div>
                        @endif
                        
                        @if($usuario->genero)
                            <div class="mb-2">
                                <i class="bx bx-user text-muted me-2"></i>
                                <span class="text-muted">Género:</span>
                                <p class="mb-0">{{ ucfirst($usuario->genero) }}</p>
                            </div>
                        @endif
                        
                        @if($usuario->profesion)
                            <div class="mb-2">
                                <i class="bx bx-briefcase text-muted me-2"></i>
                                <span class="text-muted">Profesión:</span>
                                <p class="mb-0">{{ $usuario->profesion }}</p>
                            </div>
                        @endif
                    </div>
                    
                    <!-- Fechas Importantes -->
                    <div class="border-top pt-3 mt-3">
                        <h6 class="text-muted text-uppercase fw-semibold mb-3">Fechas Importantes</h6>
                        
                        <div class="mb-2">
                            <i class="bx bx-calendar-plus text-muted me-2"></i>
                            <span class="text-muted">Registrado:</span>
                            <p class="mb-0">{{ $usuario->created_at->format('d/m/Y H:i') }}</p>
                            <small class="text-muted">({{ $usuario->created_at->diffForHumans() }})</small>
                        </div>
                        
                        <div class="mb-2">
                            <i class="bx bx-edit text-muted me-2"></i>
                            <span class="text-muted">Última actualización:</span>
                            <p class="mb-0">{{ $usuario->updated_at->format('d/m/Y H:i') }}</p>
                            <small class="text-muted">({{ $usuario->updated_at->diffForHumans() }})</small>
                        </div>
                        
                        @if($usuario->last_login_at)
                            <div class="mb-2">
                                <i class="bx bx-log-in text-muted me-2"></i>
                                <span class="text-muted">Último acceso:</span>
                                <p class="mb-0">{{ $usuario->last_login_at->format('d/m/Y H:i') }}</p>
                                <small class="text-muted">({{ $usuario->last_login_at->diffForHumans() }})</small>
                            </div>
                        @endif
                        
                        @if($usuario->email_verified_at)
                            <div class="mb-2">
                                <i class="bx bx-check-circle text-success me-2"></i>
                                <span class="text-muted">Email verificado:</span>
                                <p class="mb-0">{{ $usuario->email_verified_at->format('d/m/Y H:i') }}</p>
                            </div>
                        @endif
                    </div>
                    
                    @if($usuario->observaciones)
                        <div class="border-top pt-3 mt-3">
                            <h6 class="text-muted text-uppercase fw-semibold mb-3">Observaciones</h6>
                            <p class="text-muted mb-0">{{ $usuario->observaciones }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        
        <!-- Estadísticas y Actividad -->
        <div class="col-xl-8">
            <!-- Estadísticas Generales -->
            <div class="row">
                <div class="col-md-3">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium">Total Reservas</p>
                                    <h4 class="mb-0">{{ $estadisticas['total_reservas'] ?? 0 }}</h4>
                                </div>
                                <div class="flex-shrink-0 align-self-center">
                                    <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                                        <span class="avatar-title">
                                            <i class="bx bx-calendar font-size-24"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium">Total Pagado</p>
                                    <h4 class="mb-0">{{ format_currency($estadisticas['total_gastado'] ?? 0, 0) }}</h4>
                                </div>
                                <div class="flex-shrink-0 align-self-center">
                                    <div class="mini-stat-icon avatar-sm rounded-circle bg-success">
                                        <span class="avatar-title">
                                            <i class="bx bx-dollar font-size-24"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium">Eventos</p>
                                    <h4 class="mb-0">{{ $usuario->eventos->count() }}</h4>
                                </div>
                                <div class="flex-shrink-0 align-self-center">
                                    <div class="mini-stat-icon avatar-sm rounded-circle bg-info">
                                        <span class="avatar-title">
                                            <i class="bx bx-trophy font-size-24"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium">Reservas Activas</p>
                                    <h4 class="mb-0">{{ $usuario->reservas->where('estado', 'confirmada')->count() }}</h4>
                                </div>
                                <div class="flex-shrink-0 align-self-center">
                                    <div class="mini-stat-icon avatar-sm rounded-circle bg-warning">
                                        <span class="avatar-title">
                                            <i class="bx bx-calendar-event font-size-24"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                

            </div>
            
            <!-- Gráfico de Actividad -->
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Actividad de Reservas (Últimos 6 meses)</h4>
                </div>
                <div class="card-body">
                    <canvas id="actividadChart" height="300"></canvas>
                </div>
            </div>
            
            <!-- Tabs de Información Detallada -->
            <div class="card">
                <div class="card-body">
                    <ul class="nav nav-tabs nav-tabs-custom nav-justified" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#reservas" role="tab">
                                <span class="d-block d-sm-none"><i class="bx bx-calendar"></i></span>
                                <span class="d-none d-sm-block">Reservas</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#pagos" role="tab">
                                <span class="d-block d-sm-none"><i class="bx bx-dollar"></i></span>
                                <span class="d-none d-sm-block">Pagos</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#eventos" role="tab">
                                <span class="d-block d-sm-none"><i class="bx bx-trophy"></i></span>
                                <span class="d-none d-sm-block">Eventos</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#historial" role="tab">
                                <span class="d-block d-sm-none"><i class="bx bx-history"></i></span>
                                <span class="d-none d-sm-block">Historial</span>
                            </a>
                        </li>
                    </ul>
                    
                    <div class="tab-content p-3 text-muted">
                        <!-- Tab Reservas -->
                        <div class="tab-pane active" id="reservas" role="tabpanel">
                            <div class="table-responsive">
                                <table class="table table-nowrap mb-0" id="tablaReservas">
                                    <thead class="table-light">
                                        <tr>
                                            <th>ID</th>
                                            <th>Cancha</th>
                                            <th>Fecha</th>
                                            <th>Hora</th>
                                            <th>Estado</th>
                                            <th>Total</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($usuario->reservas ?? [] as $reserva)
                                            <tr>
                                                <td>#{{ $reserva->id }}</td>
                                                <td>{{ $reserva->cancha->nombre ?? 'N/A' }}</td>
                                                <td>{{ $reserva->fecha ? $reserva->fecha->format('d/m/Y') : 'N/A' }}</td>
                                                <td>{{ $reserva->hora_inicio }} - {{ $reserva->hora_fin }}</td>
                                                <td>
                                                    <span class="badge bg-{{ $reserva->estado == 'confirmada' ? 'success' : ($reserva->estado == 'pendiente' ? 'warning' : 'danger') }}">
                                                        {{ ucfirst($reserva->estado) }}
                                                    </span>
                                                </td>
                                                <td>{{ format_currency($reserva->precio_total ?? 0, 0) }}</td>
                                                <td>
                                                    <div class="d-flex gap-1">
                                                        <!-- Ver Detalles -->
                                                        <a href="{{ route('admin.reservas.show', $reserva->id) }}" 
                                                           class="btn btn-outline-primary btn-sm" 
                                                           title="Ver Detalles">
                                                            <i class="bx bx-show"></i>
                                                        </a>
                                                        
                                                        <!-- Editar -->
                                                        <a href="{{ route('admin.reservas.edit', $reserva->id) }}" 
                                                           class="btn btn-outline-secondary btn-sm" 
                                                           title="Editar">
                                                            <i class="bx bx-edit"></i>
                                                        </a>
                                                        
                                                        @if($reserva->estado == 'pendiente')
                                                            <!-- Confirmar -->
                                                            <button type="button" 
                                                                    class="btn btn-outline-success btn-sm" 
                                                                    onclick="confirmarReserva({{ $reserva->id }})"
                                                                    title="Confirmar">
                                                                <i class="bx bx-check"></i>
                                                            </button>
                                                            
                                                            <!-- Cancelar -->
                                                            <button type="button" 
                                                                    class="btn btn-outline-danger btn-sm" 
                                                                    onclick="cancelarReserva({{ $reserva->id }})"
                                                                    title="Cancelar">
                                                                <i class="bx bx-x"></i>
                                                            </button>
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="7" class="text-center text-muted py-4">
                                                    <i class="bx bx-calendar-x font-size-24 d-block mb-2"></i>
                                                    No hay reservas registradas
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <!-- Tab Pagos -->
                        <div class="tab-pane" id="pagos" role="tabpanel">
                            <div class="table-responsive">
                                <table class="table table-nowrap mb-0" id="tablaPagos">
                                    <thead class="table-light">
                                        <tr>
                                            <th>ID</th>
                                            <th>Reserva</th>
                                            <th>Método</th>
                                            <th>Monto</th>
                                            <th>Estado</th>
                                            <th>Fecha</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($usuario->reservas->flatMap->pagos ?? [] as $pago)
                                            <tr>
                                                <td>#{{ $pago->id }}</td>
                                                <td>#{{ $pago->reserva_id }}</td>
                                                <td>{{ ucfirst($pago->metodo_pago ?? 'N/A') }}</td>
                                                <td>{{ format_currency($pago->monto ?? 0, 0) }}</td>
                                                <td>
                                                    <span class="badge bg-{{ $pago->estado == 'completado' ? 'success' : ($pago->estado == 'pendiente' ? 'warning' : 'danger') }}">
                                                        {{ ucfirst($pago->estado ?? 'pendiente') }}
                                                    </span>
                                                </td>
                                                <td>{{ $pago->created_at ? $pago->created_at->format('d/m/Y H:i') : 'N/A' }}</td>
                                                <td>
                                                    <div class="d-flex gap-1">
                                                        <!-- Ver Detalles -->
                                                        <button type="button" 
                                                                class="btn btn-outline-primary btn-sm" 
                                                                title="Ver Detalles">
                                                            <i class="bx bx-show"></i>
                                                        </button>
                                                        
                                                        <!-- Descargar Recibo -->
                                                        <button type="button" 
                                                                class="btn btn-outline-secondary btn-sm" 
                                                                title="Descargar Recibo">
                                                            <i class="bx bx-download"></i>
                                                        </button>
                                                        
                                                        @if($pago->estado == 'completado')
                                                            <!-- Reembolsar -->
                                                            <button type="button" 
                                                                    class="btn btn-outline-warning btn-sm" 
                                                                    title="Reembolsar">
                                                                <i class="bx bx-undo"></i>
                                                            </button>
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="7" class="text-center text-muted py-4">
                                                    <i class="bx bx-credit-card-off font-size-24 d-block mb-2"></i>
                                                    No hay pagos registrados
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <!-- Tab Eventos -->
                        <div class="tab-pane" id="eventos" role="tabpanel">
                            <div class="table-responsive">
                                <table class="table table-nowrap mb-0" id="tablaEventosUsuario">
                                    <thead class="table-light">
                                        <tr>
                                            <th>ID</th>
                                            <th>Evento</th>
                                            <th>Fecha</th>
                                            <th>Rol</th>
                                            <th>Estado</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($usuario->eventos ?? [] as $evento)
                                            <tr>
                                                <td>#{{ $evento->id }}</td>
                                                <td>{{ $evento->nombre ?? 'N/A' }}</td>
                                                <td>{{ $evento->fecha_inicio ? $evento->fecha_inicio->format('d/m/Y') : 'N/A' }}</td>
                                                <td>
                                                    <span class="badge bg-info">
                                                        {{ $evento->pivot->rol ?? 'Participante' }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <span class="badge bg-{{ $evento->estado == 'activo' ? 'success' : 'secondary' }}">
                                                        {{ ucfirst($evento->estado ?? 'inactivo') }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <div class="d-flex gap-1">
                                                        <!-- Ver Evento -->
                                                        <a href="{{ route('admin.eventos.show', $evento->id) }}" 
                                                           class="btn btn-outline-primary btn-sm" 
                                                           title="Ver Evento">
                                                            <i class="bx bx-trophy"></i>
                                                        </a>
                                                        
                                                        <!-- Ver Participación -->
                                                        <button type="button" 
                                                                class="btn btn-outline-info btn-sm" 
                                                                title="Ver Participación">
                                                            <i class="bx bx-user-detail"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-center text-muted py-4">
                                                    <i class="bx bx-trophy font-size-24 d-block mb-2"></i>
                                                    No hay eventos registrados
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <!-- Tab Historial -->
                        <div class="tab-pane" id="historial" role="tabpanel">
                            <div class="timeline">
                                @forelse($historial ?? [] as $item)
                                    <div class="timeline-item">
                                        <div class="timeline-marker">
                                            <div class="timeline-marker-icon bg-{{ $item['tipo'] == 'login' ? 'success' : ($item['tipo'] == 'reserva' ? 'primary' : 'info') }}">
                                                <i class="bx bx-{{ $item['tipo'] == 'login' ? 'log-in' : ($item['tipo'] == 'reserva' ? 'calendar' : 'edit') }}"></i>
                                            </div>
                                        </div>
                                        <div class="timeline-content">
                                            <h6 class="timeline-title">{{ $item['titulo'] }}</h6>
                                            <p class="timeline-description">{{ $item['descripcion'] }}</p>
                                            <span class="timeline-date">{{ $item['fecha'] }}</span>
                                        </div>
                                    </div>
                                @empty
                                    <div class="text-center text-muted py-4">
                                        <i class="bx bx-history font-size-24 d-block mb-2"></i>
                                        No hay historial disponible
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- DataTables -->
    <script src="{{ URL::asset('build/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <!-- Chart.js -->
    <script src="{{ URL::asset('build/libs/chart.js/Chart.bundle.min.js') }}"></script>
    
    <script>
        $(document).ready(function() {
            // Inicializar DataTables para la tabla de reservas (visible por defecto)
            $('#tablaReservas').DataTable({
                pageLength: 10,
                responsive: true,
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.11.5/i18n/es-ES.json'
                },
                order: [[0, 'desc']]
            });
            
            // Inicializar DataTables para las otras tablas cuando se muestren sus tabs
            $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
                var target = $(e.target).attr("href");
                
                if (target === '#pagos' && !$.fn.DataTable.isDataTable('#tablaPagos')) {
                    $('#tablaPagos').DataTable({
                        pageLength: 10,
                        responsive: true,
                        language: {
                            url: '//cdn.datatables.net/plug-ins/1.11.5/i18n/es-ES.json'
                        },
                        order: [[0, 'desc']]
                    });
                }
                
                if (target === '#eventos' && !$.fn.DataTable.isDataTable('#tablaEventosUsuario')) {
                    $('#tablaEventosUsuario').DataTable({
                        pageLength: 10,
                        responsive: true,
                        language: {
                            url: '//cdn.datatables.net/plug-ins/1.11.5/i18n/es-ES.json'
                        },
                        order: [[0, 'desc']]
                    });
                }
            });
            
            // Gráfico de actividad
            const ctx = document.getElementById('actividadChart').getContext('2d');
            const actividadChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: {!! json_encode($graficoLabels ?? []) !!},
                    datasets: [{
                        label: 'Reservas',
                        data: {!! json_encode($graficoReservas ?? []) !!},
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.1)',
                        tension: 0.1
                    }, {
                        label: 'Pagos ($)',
                        data: {!! json_encode($graficoPagos ?? []) !!},
                        borderColor: 'rgb(255, 99, 132)',
                        backgroundColor: 'rgba(255, 99, 132, 0.1)',
                        tension: 0.1,
                        yAxisID: 'y1'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            grid: {
                                drawOnChartArea: false,
                            },
                        }
                    }
                }
            });
        });
        
        function enviarMensaje() {
            @if($usuario->telefono)
                Swal.fire({
                    title: 'Enviar Mensaje por WhatsApp',
                    html: `
                        <div class="mb-3">
                            <label for="mensaje" class="form-label">Mensaje</label>
                            <textarea class="form-control" id="mensaje" rows="4" placeholder="Escriba su mensaje..."></textarea>
                        </div>
                        <p class="text-muted">Se enviará a: {{ $usuario->telefono }}</p>
                    `,
                    showCancelButton: true,
                    confirmButtonText: 'Enviar por WhatsApp',
                    cancelButtonText: 'Cancelar',
                    preConfirm: () => {
                        const mensaje = document.getElementById('mensaje').value;
                        
                        if (!mensaje.trim()) {
                            Swal.showValidationMessage('Por favor escriba un mensaje');
                            return false;
                        }
                        
                        return { mensaje };
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        const mensaje = encodeURIComponent(result.value.mensaje);
                        const telefono = '{{ $usuario->telefono }}';
                        // Limpiar el número de teléfono (quitar espacios, guiones, etc.)
                        const telefonoLimpio = telefono.replace(/\D/g, '');
                        const whatsappUrl = `https://wa.me/${telefonoLimpio}?text=${mensaje}`;
                        window.open(whatsappUrl, '_blank');
                    }
                });
            @else
                Swal.fire({
                    icon: 'warning',
                    title: 'Sin número de teléfono',
                    text: 'Este usuario no tiene un número de teléfono registrado.',
                    confirmButtonText: 'Entendido'
                });
            @endif
        }
        
        function verificarEmail(usuarioId) {
            Swal.fire({
                icon: 'question',
                title: 'Verificar Email',
                text: '¿Marcar el email como verificado?',
                showCancelButton: true,
                confirmButtonText: 'Sí, verificar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Aquí harías la petición AJAX
                    Swal.fire('¡Verificado!', 'Email marcado como verificado', 'success');
                }
            });
        }
        
        function resetPassword(usuarioId) {
            Swal.fire({
                icon: 'question',
                title: 'Reset Password',
                text: '¿Enviar email para restablecer contraseña?',
                showCancelButton: true,
                confirmButtonText: 'Sí, enviar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(`/admin/usuarios/${usuarioId}/reset-password`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire('¡Enviado!', data.message, 'success');
                        } else {
                            Swal.fire('Error', data.message, 'error');
                        }
                    })
                    .catch(error => {
                        Swal.fire('Error', 'Error al enviar el email', 'error');
                    });
                }
            });
        }
        
        function exportarDatos(usuarioId) {
            Swal.fire({
                title: 'Exportar Datos',
                text: 'Seleccione el formato de exportación',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'PDF',
                cancelButtonText: 'Excel',
                showDenyButton: true,
                denyButtonText: 'CSV'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Exportar PDF
                    window.open(`/admin/usuarios/${usuarioId}/export-pdf`, '_blank');
                } else if (result.isDenied) {
                    // Exportar CSV
                    window.open(`/admin/usuarios/${usuarioId}/export-csv`, '_blank');
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    // Exportar Excel
                    window.open(`/admin/usuarios/${usuarioId}/export-excel`, '_blank');
                }
            });
        }
        
        function suspenderUsuario(usuarioId) {
            Swal.fire({
                icon: 'warning',
                title: 'Suspender Usuario',
                text: '¿Está seguro que desea suspender este usuario?',
                showCancelButton: true,
                confirmButtonText: 'Sí, suspender',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#d33'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(`/admin/usuarios/${usuarioId}/cambiar-estado`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({ estado: 'suspendido' })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire('¡Suspendido!', data.message, 'success').then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire('Error', data.error, 'error');
                        }
                    })
                    .catch(error => {
                        Swal.fire('Error', 'Error al suspender usuario', 'error');
                    });
                }
            });
        }

        function activarUsuario(usuarioId) {
            Swal.fire({
                icon: 'question',
                title: 'Activar Usuario',
                text: '¿Activar este usuario?',
                showCancelButton: true,
                confirmButtonText: 'Sí, activar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(`/admin/usuarios/${usuarioId}/cambiar-estado`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({ estado: 'activo' })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire('¡Activado!', data.message, 'success').then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire('Error', data.error, 'error');
                        }
                    })
                    .catch(error => {
                        Swal.fire('Error', 'Error al activar usuario', 'error');
                    });
                }
            });
        }
        
        function eliminarUsuario(usuarioId) {
            Swal.fire({
                icon: 'error',
                title: '¿Eliminar Usuario?',
                text: 'Esta acción no se puede deshacer. Se eliminarán todos los datos relacionados.',
                showCancelButton: true,
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#d33'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Confirme escribiendo "ELIMINAR"',
                        input: 'text',
                        inputPlaceholder: 'Escriba ELIMINAR para confirmar',
                        showCancelButton: true,
                        confirmButtonText: 'Eliminar',
                        cancelButtonText: 'Cancelar',
                        inputValidator: (value) => {
                            if (value !== 'ELIMINAR') {
                                return 'Debe escribir "ELIMINAR" para confirmar';
                            }
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            fetch(`/admin/usuarios/${usuarioId}`, {
                                method: 'DELETE',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                                }
                            })
                            .then(response => {
                                if (response.ok) {
                                    Swal.fire('¡Eliminado!', 'Usuario eliminado correctamente', 'success').then(() => {
                                        window.location.href = '/admin/usuarios';
                                    });
                                } else {
                                    return response.text().then(text => {
                                        throw new Error(text);
                                    });
                                }
                            })
                            .catch(error => {
                                Swal.fire('Error', 'Error al eliminar usuario', 'error');
                            });
                        }
                    });
                }
            });
        }
        
        // Mostrar mensaje de éxito si existe
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: '¡Éxito!',
                text: '{{ session('success') }}',
                timer: 3000,
                showConfirmButton: false
            });
        @endif
    </script>
    
    <style>
        .timeline {
            position: relative;
            padding-left: 30px;
        }
        
        .timeline::before {
            content: '';
            position: absolute;
            left: 15px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #e9ecef;
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 30px;
        }
        
        .timeline-marker {
            position: absolute;
            left: -22px;
            top: 0;
        }
        
        .timeline-marker-icon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
        }
        
        .timeline-content {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border-left: 3px solid #007bff;
        }
        
        .timeline-title {
            margin-bottom: 5px;
            font-weight: 600;
        }
        
        .timeline-description {
            margin-bottom: 10px;
            color: #6c757d;
        }
        
        .timeline-date {
            font-size: 12px;
            color: #adb5bd;
        }
    </style>
@endsection