@extends('layouts.app')
@section('title', $ticket->numero . ' — ' . $ticket->sujet)
@section('page-title', 'Ticket ' . $ticket->numero)

@push('styles')
<style>
.tk-layout { display:grid; grid-template-columns:1fr 280px; gap:20px; align-items:start; }

/* Carte info ticket */
.tk-info-card { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; margin-bottom:16px; }
.tk-info-header { padding:14px 20px; background:linear-gradient(135deg,var(--navy),var(--navy-light)); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tk-num-tag { font-family:monospace; font-size:12px; font-weight:700; color:rgba(255,255,255,.6); }
.tk-sujet-title { font-size:15px; font-weight:800; color:#fff; flex:1; }
.tk-badge { display:inline-flex; align-items:center; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:800; white-space:nowrap; }

/* Conversation */
.tk-conv-card { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.tk-conv-header { background:#F4F6FB; padding:10px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.tk-conv-header span { font-size:11px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; }
.tk-messages { padding:20px; display:flex; flex-direction:column; gap:16px; min-height:200px; }

/* Bulle message */
.msg-row { display:flex; gap:10px; align-items:flex-end; }
.msg-row.from-user { flex-direction:row-reverse; }
.msg-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0; }
.msg-row.from-admin .msg-avatar { background:#EEF2FF; color:var(--navy); }
.msg-row.from-user  .msg-avatar { background:var(--yellow); color:var(--navy); }
.msg-bubble-wrap { max-width:72%; display:flex; flex-direction:column; gap:4px; }
.msg-row.from-user .msg-bubble-wrap { align-items:flex-end; }
.msg-meta { font-size:11px; font-weight:600; color:var(--text-muted); padding:0 4px; display:flex; align-items:center; gap:6px; }
.msg-bubble { padding:12px 16px; border-radius:16px; font-size:13px; font-weight:600; line-height:1.6; word-break:break-word; }
.msg-row.from-admin .msg-bubble {
    background:#F4F6FB;
    border:1px solid var(--border);
    border-bottom-left-radius:4px;
    color:var(--text);
}
.msg-row.from-user .msg-bubble {
    background:var(--navy);
    color:#fff;
    border-bottom-right-radius:4px;
}
.msg-row.from-user .msg-bubble * { color:#fff !important; }
.msg-time { font-size:10px; color:var(--text-muted); font-weight:600; }

/* Formulaire réponse */
.tk-reply-card { border-top:1.5px solid var(--border); padding:18px 20px; background:#fff; }
.tk-reply-card .f-label { font-size:12px; font-weight:700; color:var(--text-muted); display:block; margin-bottom:6px; }

/* Éditeur */
.editor-wrap { border:1.5px solid var(--border); border-radius:8px; overflow:hidden; transition:border-color .2s; }
.editor-wrap:focus-within { border-color:var(--yellow); }
.editor-toolbar { background:#F4F6FB; border-bottom:1px solid var(--border); padding:5px 8px; display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.tb-btn { background:none; border:1px solid transparent; border-radius:5px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-family:'Nunito',sans-serif; font-size:12px; color:var(--text); transition:background .15s; flex-shrink:0; }
.tb-btn:hover { background:#E8ECF4; }
.tb-sep { width:1px; height:18px; background:var(--border); margin:0 3px; flex-shrink:0; }
.tb-color { width:18px; height:18px; border-radius:50%; border:2px solid #fff; outline:1px solid var(--border); cursor:pointer; flex-shrink:0; }
.tb-color:hover { outline-color:var(--navy); }
.editor-content { min-height:90px; padding:10px 12px; font-family:'Nunito',sans-serif; font-size:13px; color:var(--text); outline:none; line-height:1.6; }
.editor-content:empty:before { content:attr(data-placeholder); color:var(--text-muted); pointer-events:none; }

.reply-actions { display:flex; align-items:center; gap:10px; margin-top:10px; }
.btn-y { background:var(--yellow); color:var(--navy); border:none; border-radius:20px; padding:8px 22px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.btn-y:hover { background:var(--yellow-dark); }
.btn-ghost { background:#fff; color:var(--text-muted); border:1.5px solid var(--border); border-radius:20px; padding:7px 18px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; }
.btn-ghost:hover { background:#F4F6FB; }

/* Sidebar */
.tk-side { display:flex; flex-direction:column; gap:14px; }
.tk-side-card { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.tk-side-header { background:#F4F6FB; padding:10px 14px; border-bottom:1px solid var(--border); font-size:11px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.07em; }
.tk-side-body { padding:14px; }
.tk-info-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); font-size:12px; }
.tk-info-row:last-child { border-bottom:none; }
.tk-info-label { font-weight:700; color:var(--text-muted); }
.tk-info-val { font-weight:700; color:var(--text); }

.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; }
.tk-closed-notice { background:#FFF5F5; border:1px solid #FEB2B2; color:#C53030; padding:12px 16px; border-radius:8px; font-size:13px; font-weight:600; text-align:center; }
</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 style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
    <a href="{{ route('tickets.index') }}" style="color:var(--text-muted);font-size:13px;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:4px;">
        <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
        Mes tickets
    </a>
    <span style="color:var(--border);">/</span>
    <span style="font-size:13px;font-weight:700;color:var(--text);">{{ $ticket->numero }}</span>
</div>

<div class="tk-layout">
    {{-- ══ Colonne principale ══ --}}
    <div>
        {{-- En-tête ticket --}}
        <div class="tk-info-card">
            <div class="tk-info-header">
                <span class="tk-num-tag">{{ $ticket->numero }}</span>
                <span class="tk-sujet-title">{{ $ticket->sujet }}</span>
                <span class="tk-badge" style="background:{{ $ticket->statutBg() }};color:{{ $ticket->statutColor() }};border:1px solid {{ $ticket->statutColor() }}33;">
                    {{ $ticket->statutLabel() }}
                </span>
            </div>
        </div>

        {{-- Conversation --}}
        <div class="tk-conv-card">
            <div class="tk-conv-header">
                <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
                <span>Conversation — {{ $ticket->messages->count() }} message(s)</span>
            </div>

            <div class="tk-messages" id="msgList">
                @foreach($ticket->messages as $msg)
                @php $isUser = ($msg->user_id === auth()->id() && !$msg->is_admin); @endphp
                <div class="msg-row {{ $isUser ? 'from-user' : 'from-admin' }}">
                    <div class="msg-avatar">{{ strtoupper(substr($msg->user->name ?? '?', 0, 1)) }}</div>
                    <div class="msg-bubble-wrap">
                        <div class="msg-meta">
                            <span>{{ $msg->is_admin ? '⚡ Support Taxilog' : $msg->user->name }}</span>
                            <span class="msg-time">{{ $msg->created_at->format('d/m/Y à H:i') }}</span>
                        </div>
                        <div class="msg-bubble">{!! $msg->message !!}</div>
                    </div>
                </div>
                @endforeach
            </div>

            {{-- Formulaire réponse --}}
            @if($ticket->statut !== 'cloture')
            <div class="tk-reply-card">
                <form method="POST" action="{{ route('tickets.reply', $ticket) }}" id="replyForm">
                    @csrf
                    <label class="f-label">Votre réponse</label>
                    <div class="editor-wrap">
                        <div class="editor-toolbar">
                            <button type="button" class="tb-btn" onclick="fmt('bold')"      title="Gras"><b>B</b></button>
                            <button type="button" class="tb-btn" onclick="fmt('italic')"    title="Italique"><i>I</i></button>
                            <button type="button" class="tb-btn" onclick="fmt('underline')" title="Souligné"><u>U</u></button>
                            <div class="tb-sep"></div>
                            @foreach(['#1A2340','#E53E3E','#D69E2E','#38A169','#3182CE','#805AD5'] as $c)
                            <div class="tb-color" style="background:{{ $c }};" onclick="fmtColor('{{ $c }}')"></div>
                            @endforeach
                            <div class="tb-sep"></div>
                            <button type="button" class="tb-btn" onclick="fmt('removeFormat')" title="Effacer mise en forme" style="font-size:10px;">✕</button>
                        </div>
                        <div class="editor-content" id="replyEditor" contenteditable="true"
                             data-placeholder="Tapez votre réponse ici…"></div>
                    </div>
                    <input type="hidden" name="message" id="replyInput">
                    <div class="reply-actions">
                        <button type="submit" class="btn-y">
                            <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:var(--navy);fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                            Envoyer
                        </button>
                        <a href="{{ route('tickets.index') }}" class="btn-ghost">Retour</a>
                    </div>
                </form>
            </div>
            @else
            <div class="tk-reply-card">
                <div class="tk-closed-notice">
                    🔒 Ce ticket est clôturé — impossible d'ajouter des messages.
                </div>
            </div>
            @endif
        </div>
    </div>

    {{-- ══ Sidebar ══ --}}
    <div class="tk-side">
        <div class="tk-side-card">
            <div class="tk-side-header">Informations</div>
            <div class="tk-side-body">
                <div class="tk-info-row">
                    <span class="tk-info-label">Numéro</span>
                    <span class="tk-info-val" style="font-family:monospace;font-size:12px;">{{ $ticket->numero }}</span>
                </div>
                <div class="tk-info-row">
                    <span class="tk-info-label">Statut</span>
                    <span class="tk-badge" style="background:{{ $ticket->statutBg() }};color:{{ $ticket->statutColor() }};border:1px solid {{ $ticket->statutColor() }}33;font-size:11px;">{{ $ticket->statutLabel() }}</span>
                </div>
                <div class="tk-info-row">
                    <span class="tk-info-label">Priorité</span>
                    <span class="tk-info-val" style="color:{{ $ticket->prioriteColor() }};">{{ $ticket->prioriteLabel() }}</span>
                </div>
                <div class="tk-info-row">
                    <span class="tk-info-label">Créé le</span>
                    <span class="tk-info-val" style="font-size:11px;">{{ $ticket->created_at->format('d/m/Y H:i') }}</span>
                </div>
                <div class="tk-info-row">
                    <span class="tk-info-label">Mis à jour</span>
                    <span class="tk-info-val" style="font-size:11px;">{{ $ticket->updated_at->diffForHumans() }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function fmt(cmd) { document.execCommand(cmd, false, null); document.getElementById('replyEditor').focus(); }
function fmtColor(color) { document.execCommand('foreColor', false, color); document.getElementById('replyEditor').focus(); }

document.getElementById('replyForm')?.addEventListener('submit', function() {
    document.getElementById('replyInput').value = document.getElementById('replyEditor').innerHTML;
});

// Scroll vers le bas de la conversation
document.addEventListener('DOMContentLoaded', function() {
    const list = document.getElementById('msgList');
    if (list) list.scrollTop = list.scrollHeight;
});
</script>
@endpush