@extends('layouts.app')
@section('title', 'Admin — Gestion des tickets')
@section('page-title', 'Admin — Gestion des tickets')

@push('styles')
<style>
.tk-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px; }
.tk-stat { background:#fff; border-radius:10px; border:1px solid var(--border); padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.tk-stat-val { font-size:26px; font-weight:800; color:var(--navy); line-height:1; }
.tk-stat-label { font-size:11px; font-weight:700; color:var(--text-muted); }

.tk-tabs { display:flex; gap:0; background:#fff; border-radius:10px; border:1px solid var(--border); overflow:hidden; margin-bottom:16px; }
.tk-tab { padding:10px 18px; font-size:12px; font-weight:800; color:var(--text-muted); cursor:pointer; text-decoration:none; border-right:1px solid var(--border); display:flex; align-items:center; gap:6px; transition:background .12s,color .12s; white-space:nowrap; }
.tk-tab:last-child { border-right:none; }
.tk-tab:hover { background:#F4F6FB; color:var(--navy); }
.tk-tab.active { background:var(--navy); color:#fff; }
.tk-tab .cnt { background:rgba(255,255,255,.2); padding:1px 7px; border-radius:10px; font-size:10px; }
.tk-tab:not(.active) .cnt { background:#EEF2FF; color:var(--navy); }

.tk-table-card { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.tk-table { width:100%; border-collapse:collapse; }
.tk-table thead th { background:#F4F6FB; padding:10px 14px; font-size:11px; font-weight:800; color:var(--text-muted); text-align:left; border-bottom:1.5px solid var(--border); text-transform:uppercase; letter-spacing:.06em; }
.tk-table tbody tr { border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; }
.tk-table tbody tr:hover { background:#F8F9FF; }
.tk-table tbody td { padding:11px 14px; font-size:13px; color:var(--text); vertical-align:middle; }
.tk-num { font-family:monospace; font-size:12px; font-weight:700; color:var(--text-muted); }
.tk-sujet { font-weight:700; color:var(--navy); }
.tk-badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:800; white-space:nowrap; }
.tk-msg-count { background:#EEF2FF; color:var(--navy); font-size:11px; font-weight:800; padding:2px 7px; border-radius:10px; }
.tk-date { font-size:11px; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.tk-urgent { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.tk-empty { padding:50px; text-align:center; color:var(--text-muted); font-size:13px; font-weight:600; }
</style>
@endpush

@section('content')

<div class="tk-stats">
    <div class="tk-stat">
        <div class="tk-stat-val">{{ $counts['tous'] }}</div>
        <div class="tk-stat-label">Total tickets</div>
    </div>
    <div class="tk-stat" style="border-left:3px solid #D69E2E;">
        <div class="tk-stat-val" style="color:#D69E2E;">{{ $counts['en_attente'] }}</div>
        <div class="tk-stat-label">En attente</div>
    </div>
    <div class="tk-stat" style="border-left:3px solid #3182CE;">
        <div class="tk-stat-val" style="color:#3182CE;">{{ $counts['en_cours'] }}</div>
        <div class="tk-stat-label">En cours</div>
    </div>
    <div class="tk-stat" style="border-left:3px solid #38A169;">
        <div class="tk-stat-val" style="color:#38A169;">{{ $counts['pris_en_charge'] }}</div>
        <div class="tk-stat-label">Pris en charge</div>
    </div>
    <div class="tk-stat" style="border-left:3px solid #718096;">
        <div class="tk-stat-val" style="color:#718096;">{{ $counts['cloture'] }}</div>
        <div class="tk-stat-label">Clôturés</div>
    </div>
</div>

<div class="tk-tabs">
    @foreach(['tous'=>'Tous','en_attente'=>'En attente','en_cours'=>'En cours','pris_en_charge'=>'Pris en charge','cloture'=>'Clôturés'] as $key=>$label)
    <a href="{{ route('admin.tickets.index', ['statut' => $key]) }}"
       class="tk-tab {{ $statut === $key ? 'active' : '' }}">
        {{ $label }} <span class="cnt">{{ $counts[$key] }}</span>
    </a>
    @endforeach
</div>

<div class="tk-table-card">
    @if($tickets->isEmpty())
    <div class="tk-empty">Aucun ticket pour ce filtre.</div>
    @else
    <table class="tk-table">
        <thead>
            <tr>
                <th style="width:14px;"></th>
                <th>Numéro</th>
                <th>Sujet</th>
                <th>Utilisateur</th>
                <th>Statut</th>
                <th style="text-align:center;">Msg</th>
                <th>Activité</th>
            </tr>
        </thead>
        <tbody>
            @foreach($tickets as $t)
            <tr onclick="window.location='{{ route('admin.tickets.show', $t) }}'">
                <td><span class="tk-urgent" style="background:{{ $t->prioriteColor() }};" title="Priorité : {{ $t->prioriteLabel() }}"></span></td>
                <td><span class="tk-num">{{ $t->numero }}</span></td>
                <td><span class="tk-sujet">{{ $t->sujet }}</span></td>
                <td>
                    <div style="font-size:13px;font-weight:700;">{{ $t->user->name ?? '—' }}</div>
                    <div style="font-size:11px;color:var(--text-muted);font-weight:600;">{{ $t->user->email ?? '' }}</div>
                </td>
                <td>
                    <span class="tk-badge" style="background:{{ $t->statutBg() }};color:{{ $t->statutColor() }};border:1px solid {{ $t->statutColor() }}33;">
                        {{ $t->statutLabel() }}
                    </span>
                </td>
                <td style="text-align:center;"><span class="tk-msg-count">{{ $t->messages_count }}</span></td>
                <td><span class="tk-date">{{ $t->updated_at->diffForHumans() }}</span></td>
            </tr>
            @endforeach
        </tbody>
    </table>
    @endif
</div>

@endsection