@extends('layouts.app')

@section('title', _lang('Support Chat'))

@section('content')
<style>
    .sup { --ink:#0f172a; --muted:#64748b; --line:#eef1f6; --red:#dc2626; --redsoft:#fee2e2; }
    .sup-head { margin:18px 0 18px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
    .sup-head h4 { font-size:22px; font-weight:700; color:var(--ink); margin:0; }
    .sup-head p { color:var(--muted); margin:3px 0 0; font-size:13.5px; }
    .sup-badge { background:var(--red); color:#fff; font-weight:700; font-size:13px; border-radius:999px; padding:5px 14px; }
    .sup-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin-bottom:18px; }
    .sup-card.alert { border-color:#fecaca; }
    .sup-card-t { font-size:14px; font-weight:700; color:var(--ink); margin:2px 4px 12px; display:flex; align-items:center; gap:8px; }
    .sup-card-t .dot { width:10px; height:10px; border-radius:50%; background:var(--red); animation:supdot 1s steps(1) infinite; }
    @keyframes supdot { 50%{ opacity:.15 } }
    .sup-search { display:flex; gap:8px; margin:0 0 16px; }
    .sup-search input { flex:1; height:42px; border:1px solid #e5e7eb; border-radius:10px; padding:0 14px; font-size:14px; }
    .sup-search button { height:42px; border:0; border-radius:10px; background:var(--ink); color:#fff; font-weight:600; padding:0 18px; }
    .sup-tbl { width:100%; border-collapse:collapse; }
    .sup-tbl th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:var(--muted); font-weight:600; padding:0 10px 10px; }
    .sup-tbl td { padding:12px 10px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink); vertical-align:middle; }
    .sup-tbl .nm { font-weight:600; }
    .sup-tbl .mut { color:var(--muted); font-size:12.5px; }
    .sup-tbl .msg { color:var(--muted); max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sup-cnt { background:var(--red); color:#fff; font-weight:700; font-size:12px; border-radius:999px; padding:2px 9px; }
    .sup-open { display:inline-flex; align-items:center; gap:6px; background:#eef2ff; color:#4f46e5; font-weight:700; font-size:13px; border-radius:10px; padding:7px 14px; text-decoration:none; }
    .sup-open.urgent { background:var(--red); color:#fff; }
    /* blinking row for not-yet-replied */
    .sup-tbl tr.blink td { animation:supblink 1.4s ease-in-out infinite; }
    @keyframes supblink { 0%,100%{ background:#fff } 50%{ background:var(--redsoft) } }
    .sup-empty { text-align:center; color:var(--muted); padding:24px 0; font-size:13.5px; }

    /* ---- mobile: stack each row into a card ---- */
    @media (max-width:640px) {
        .sup-tbl, .sup-tbl tbody, .sup-tbl tr, .sup-tbl td { display:block; }
        .sup-tbl thead { display:none; }
        .sup-tbl tr { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px; }
        .sup-tbl tr.blink { border-color:#fecaca; }
        .sup-tbl td { border:0; padding:5px 0; display:flex; justify-content:space-between; gap:14px; text-align:right; }
        .sup-tbl td::before { content:attr(data-label); font-weight:600; color:var(--muted); font-size:12px; text-align:left; }
        .sup-tbl td .msg { max-width:60vw; }
        .sup-tbl td.act { display:block; margin-top:6px; }
        .sup-tbl td.act::before { display:none; }
        .sup-tbl td.act .sup-open { display:flex; justify-content:center; }
    }
</style>

@php
    $rowTime = fn ($c) => optional($c->last_message_at)->format('d M, H:i') ?: '—';
    $rowMsg = fn ($c) => \Illuminate\Support\Str::limit(optional($c->latestMessage)->body, 60) ?: '—';
@endphp

<div class="sup">
    @include('partials.alerts')

    <div class="sup-head">
        <div>
            <h4>{{ _lang('Support Chat') }}</h4>
            <p>{{ _lang('Reply to messages from organization owners & staff.') }}</p>
        </div>
        @if ($unreadTotal > 0)
            <span class="sup-badge">{{ $unreadTotal }} {{ _lang('unread') }}</span>
        @endif
    </div>

    <form method="GET" action="{{ route('admin.support.index') }}" class="sup-search">
        <input type="text" name="search" value="{{ $search }}" placeholder="{{ _lang('Search name / phone / email') }}">
        <button>{{ _lang('Search') }}</button>
    </form>

    {{-- ===== Needs reply (blinking) ===== --}}
    @if ($needsReply->isNotEmpty())
        <div class="sup-card alert">
            <div class="sup-card-t"><span class="dot"></span> {{ _lang('Awaiting your reply') }} ({{ $needsReply->count() }})</div>
            <table class="sup-tbl">
                <thead>
                    <tr>
                        <th>{{ _lang('User') }}</th><th>{{ _lang('Organization') }}</th>
                        <th>{{ _lang('Last message') }}</th><th>{{ _lang('Unread') }}</th>
                        <th>{{ _lang('Updated') }}</th><th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($needsReply as $c)
                        <tr class="blink">
                            <td data-label="{{ _lang('User') }}"><span class="nm">{{ $c->user->name ?? _lang('User') }}</span> <span class="mut">{{ $c->user->phone ?? $c->user->email ?? '' }}</span></td>
                            <td data-label="{{ _lang('Organization') }}">{{ $c->organization->name ?? '—' }}</td>
                            <td data-label="{{ _lang('Last message') }}"><span class="msg">{{ $rowMsg($c) }}</span></td>
                            <td data-label="{{ _lang('Unread') }}"><span class="sup-cnt">{{ $c->unread_admin_count }}</span></td>
                            <td data-label="{{ _lang('Updated') }}"><span class="mut">{{ $rowTime($c) }}</span></td>
                            <td class="act"><a href="{{ route('admin.support.show', $c->id) }}" class="sup-open urgent">{{ _lang('Reply now') }}</a></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif

    {{-- ===== All conversations ===== --}}
    <div class="sup-card">
        <div class="sup-card-t">{{ _lang('All conversations') }}</div>
        <table class="sup-tbl">
            <thead>
                <tr>
                    <th>{{ _lang('User') }}</th><th>{{ _lang('Organization') }}</th>
                    <th>{{ _lang('Last message') }}</th><th>{{ _lang('Unread') }}</th>
                    <th>{{ _lang('Updated') }}</th><th></th>
                </tr>
            </thead>
            <tbody>
                @forelse ($conversations as $c)
                    <tr class="{{ $c->unread_admin_count > 0 ? 'blink' : '' }}">
                        <td data-label="{{ _lang('User') }}"><span class="nm">{{ $c->user->name ?? _lang('User') }}</span> <span class="mut">{{ $c->user->phone ?? $c->user->email ?? '' }}</span></td>
                        <td data-label="{{ _lang('Organization') }}">{{ $c->organization->name ?? '—' }}</td>
                        <td data-label="{{ _lang('Last message') }}"><span class="msg">{{ $rowMsg($c) }}</span></td>
                        <td data-label="{{ _lang('Unread') }}">@if ($c->unread_admin_count > 0)<span class="sup-cnt">{{ $c->unread_admin_count }}</span>@else<span class="mut">0</span>@endif</td>
                        <td data-label="{{ _lang('Updated') }}"><span class="mut">{{ $rowTime($c) }}</span></td>
                        <td class="act"><a href="{{ route('admin.support.show', $c->id) }}" class="sup-open {{ $c->unread_admin_count > 0 ? 'urgent' : '' }}">{{ _lang('Open chat') }}</a></td>
                    </tr>
                @empty
                    <tr><td class="sup-empty" colspan="6">{{ _lang('No conversations yet.') }}</td></tr>
                @endforelse
            </tbody>
        </table>
        @if ($conversations->hasPages())
            <div style="margin-top:12px">{{ $conversations->withQueryString()->links() }}</div>
        @endif
    </div>
</div>
@endsection