@extends('layouts.app')
@section('title', 'Mes tickets')
@section('page-title', 'Mes tickets support')

@push('styles')
<style>
.tk-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.btn-y { background:var(--yellow); color:var(--navy); border:none; border-radius:20px; padding:9px 24px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
.btn-y:hover { background:var(--yellow-dark); }

.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 16px; 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:12px 16px; font-size:13px; color:var(--text); }
.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 10px; 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 8px; border-radius:10px; }
.tk-date { font-size:12px; font-weight:600; color:var(--text-muted); white-space:nowrap; }

.tk-empty { padding:60px; text-align:center; }
.tk-empty svg { stroke:var(--border); margin:0 auto 14px; display:block; }
.tk-empty p { font-size:14px; font-weight:600; color:var(--text-muted); margin-bottom:20px; }

.alert-success { background:#F0FFF4; border:1px solid #9AE6B4; color:#276749; padding:10px 16px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
</style>
@endpush

@section('content')

@if(session('success'))
<div class="alert-success">
    <svg viewBox="0 0 24 24" width="14" height="14" style="stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;flex-shrink:0;"><polyline points="20 6 9 17 4 12"/></svg>
    {{ session('success') }}
</div>
@endif

<div class="tk-toolbar">
    <div>
        <span style="font-size:13px;font-weight:600;color:var(--text-muted);">{{ $tickets->count() }} ticket(s)</span>
    </div>
    <a href="{{ route('tickets.create') }}" class="btn-y">
        <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--navy);fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        Nouveau ticket
    </a>
</div>

<div class="tk-table-card">
    @if($tickets->isEmpty())
    <div class="tk-empty">
        <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke-width="1.5"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
        <p>Vous n'avez aucun ticket pour le moment.</p>
        <a href="{{ route('tickets.create') }}" class="btn-y">Créer mon premier ticket</a>
    </div>
    @else
    <table class="tk-table">
        <thead>
            <tr>
                <th>Numéro</th>
                <th>Sujet</th>
                <th>Statut</th>
                <th>Priorité</th>
                <th style="text-align:center;">Messages</th>
                <th>Dernière activité</th>
            </tr>
        </thead>
        <tbody>
            @foreach($tickets as $t)
            <tr onclick="window.location='{{ route('tickets.show', $t) }}'">
                <td><span class="tk-num">{{ $t->numero }}</span></td>
                <td><span class="tk-sujet">{{ $t->sujet }}</span></td>
                <td>
                    <span class="tk-badge" style="background:{{ $t->statutBg() }};color:{{ $t->statutColor() }};border:1px solid {{ $t->statutColor() }}33;">
                        {{ $t->statutLabel() }}
                    </span>
                </td>
                <td>
                    <span style="font-size:12px;font-weight:700;color:{{ $t->prioriteColor() }};">
                        {{ $t->prioriteLabel() }}
                    </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