@extends('layouts.panel')

@section('content')

<!-- STATS -->
<div class="panel-stats">
    <div class="panel-stat-card">
        <div class="stat-icon">👥</div>
        <div class="stat-value">{{ $totalClientes }}</div>
        <div class="stat-label">Clientes</div>
    </div>
    <div class="panel-stat-card">
        <div class="stat-icon">🎟️</div>
        <div class="stat-value">{{ $totalTickets }}</div>
        <div class="stat-label">Tickets vendidos</div>
    </div>
    <div class="panel-stat-card">
        <div class="stat-icon">💰</div>
        <div class="stat-value">$ {{ number_format($totalMonto, 0, ',', '.') }}</div>
        <div class="stat-label">Ingresos totales</div>
    </div>
</div>

<!-- TABLA DE CLIENTES -->
<div class="panel-card">
    <div class="panel-card-header">
        <h5>Lista de Clientes</h5>

        <div class="panel-search">
            <span class="search-icon">🔍</span>
            <input type="text" id="panelSearch" placeholder="Buscar cliente..." autocomplete="off">
        </div>
    </div>

    @if ($clientes->isEmpty())
        <div class="text-center py-4">
            <p style="color: #6b6b7b;">No hay clientes registrados aún.</p>
        </div>
    @else
        <!-- CARDS: vista móvil -->
        <div class="d-md-none cliente-cards" id="clienteCards">
            @foreach ($clientes as $index => $cliente)
                <div class="cliente-card" data-search="{{ $cliente->full_name }} {{ $cliente->email }} {{ $cliente->phone ?? '' }}">
                    <div class="cliente-card-header">
                        <strong>{{ $cliente->full_name }}</strong>
                        <span class="badge-paid">{{ $cliente->orders_count }} orden{{ $cliente->orders_count > 1 ? 'es' : '' }}</span>
                    </div>
                    <div class="cliente-card-body">
                        <div class="cliente-card-row">
                            <span class="cliente-card-label">Email</span>
                            <span class="cliente-card-value">{{ $cliente->email }}</span>
                        </div>
                        <div class="cliente-card-row">
                            <span class="cliente-card-label">Teléfono</span>
                            <span class="cliente-card-value">{{ $cliente->phone ?? '—' }}</span>
                        </div>
                        <div class="cliente-card-row">
                            <span class="cliente-card-label">Órdenes</span>
                            <span class="cliente-card-value">{{ $cliente->orders_count }}</span>
                        </div>
                        <div class="cliente-card-row">
                            <span class="cliente-card-label">Cantidad</span>
                            <span class="cliente-card-value">{{ $clienteStats[$cliente->id]['tickets'] ?? 0 }}</span>
                        </div>
                        <div class="cliente-card-row">
                            <span class="cliente-card-label">Monto/Ticket</span>
                            <span class="cliente-card-value">
                                @if (($clienteStats[$cliente->id]['tickets'] ?? 0) > 0)
                                    COP {{ number_format($clienteStats[$cliente->id]['monto'] / $clienteStats[$cliente->id]['tickets'], 0, ',', '.') }}
                                @else
                                    —
                                @endif
                            </span>
                        </div>
                        <div class="cliente-card-row">
                            <span class="cliente-card-label">Total</span>
                            <span class="cliente-card-value" style="color: #198754; font-weight: 700;">COP {{ number_format($clienteStats[$cliente->id]['monto'] ?? 0, 0, ',', '.') }}</span>
                        </div>
                        <div class="cliente-card-row">
                            <span class="cliente-card-label">Fecha</span>
                            <span class="cliente-card-value">{{ $cliente->created_at->format('d/m/Y H:i') }}</span>
                        </div>
                    </div>
                    <div class="cliente-card-footer">
                        <div class="d-flex gap-2 justify-content-center">
                            <a href="{{ route('admin.clientes.show', $cliente->id) }}" class="btn-panel-primary">Ver QRs</a>
                            <form action="{{ route('admin.clientes.destroy', $cliente->id) }}" method="POST"
                                  data-nombre="{{ $cliente->full_name }}"
                                  data-confirm="¿Eliminar {nombre}? Se borrarán sus órdenes, tickets y QRs. Las sillas vuelven a estar disponibles."
                                  data-loading-msg="Eliminando cliente">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-panel-danger">Eliminar</button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- TABLA: vista escritorio -->
        <div class="d-none d-md-block table-responsive">
            <table class="panel-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Nombre</th>
                        <th>Email</th>
                        <th>Teléfono</th>
                        <th>Órdenes</th>
                        <th>Cantidad</th>
                        <th>Monto/Ticket</th>
                        <th>Total</th>
                        <th>Fecha</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody id="panelTableBody">
                    @foreach ($clientes as $index => $cliente)
                        <tr data-search="{{ $cliente->full_name }} {{ $cliente->email }} {{ $cliente->phone ?? '' }}">
                            <td>{{ $clientes->firstItem() + $index }}</td>
                            <td><strong>{{ $cliente->full_name }}</strong></td>
                            <td>{{ $cliente->email }}</td>
                            <td>{{ $cliente->phone ?? '—' }}</td>
                            <td>
                                <span class="badge-paid">{{ $cliente->orders_count }} orden{{ $cliente->orders_count > 1 ? 'es' : '' }}</span>
                            </td>
                            <td>{{ $clienteStats[$cliente->id]['tickets'] ?? 0 }}</td>
                            <td>
                                @if (($clienteStats[$cliente->id]['tickets'] ?? 0) > 0)
                                    COP {{ number_format($clienteStats[$cliente->id]['monto'] / $clienteStats[$cliente->id]['tickets'], 0, ',', '.') }}
                                @else
                                    —
                                @endif
                            </td>
                            <td><strong style="color: #198754;">COP {{ number_format($clienteStats[$cliente->id]['monto'] ?? 0, 0, ',', '.') }}</strong></td>
                            <td>{{ $cliente->created_at->format('d/m/Y H:i') }}</td>
                            <td>
                                <div class="d-flex gap-2">
                                    <a href="{{ route('admin.clientes.show', $cliente->id) }}" class="btn-panel-primary btn-panel-sm">Ver QRs</a>
                                    <form action="{{ route('admin.clientes.destroy', $cliente->id) }}" method="POST"
                                          data-nombre="{{ $cliente->full_name }}"
                                          data-confirm="¿Eliminar {nombre}? Se borrarán sus órdenes, tickets y QRs. Las sillas vuelven a estar disponibles."
                                          data-loading-msg="Eliminando cliente">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn-panel-danger btn-panel-sm">Eliminar</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- PAGINACIÓN -->
        @if ($clientes->hasPages())
            <nav class="panel-pagination">
                <ul class="pagination pagination-sm">
                    {{-- Primera página --}}
                    <li class="page-item {{ $clientes->onFirstPage() ? 'disabled' : '' }}">
                        <a class="page-link" href="{{ $clientes->url(1) }}">«</a>
                    </li>
                    {{-- Página anterior --}}
                    <li class="page-item {{ $clientes->onFirstPage() ? 'disabled' : '' }}">
                        <a class="page-link" href="{{ $clientes->previousPageUrl() ?? '#' }}">‹</a>
                    </li>
                    {{-- Números de página --}}
                    @foreach ($clientes->getUrlRange(max(1, $clientes->currentPage() - 2), min($clientes->lastPage(), $clientes->currentPage() + 2)) as $page => $url)
                        <li class="page-item {{ $page === $clientes->currentPage() ? 'active' : '' }}">
                            <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                        </li>
                    @endforeach
                    {{-- Página siguiente --}}
                    <li class="page-item {{ $clientes->onLastPage() ? 'disabled' : '' }}">
                        <a class="page-link" href="{{ $clientes->nextPageUrl() ?? '#' }}">›</a>
                    </li>
                    {{-- Última página --}}
                    <li class="page-item {{ $clientes->onLastPage() ? 'disabled' : '' }}">
                        <a class="page-link" href="{{ $clientes->url($clientes->lastPage()) }}">»</a>
                    </li>
                </ul>
            </nav>
        @endif
    @endif
</div>

@endsection