@extends('admin.layouts.master')

@section('header')
<link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/pages/app-chat.css') }}">
<style>
    /* ── Page layout ───────────────────────────────────────────── */
    /* wrapper يجمع السايدبار والشات جنب بعض على الديسكتوب */
    .ticket-outer {
        display: flex;
        gap: 1.25rem;
        align-items: flex-start;
        width: 100%;
    }
    /* السايدبار: 340px ثابت */
    .ticket-layout-row {
        width: 340px;
        flex-shrink: 0;
    }
    .ticket-page-grid { width: 100%; }

    /* الشات: يملأ الباقي */
    .ticket-chat-panel {
        flex: 1;
        min-width: 0;
    }

    @media (max-width: 991px) {
        /* على الجوال: الـ wrapper يتحول لـ column */
        .ticket-outer { flex-direction: column; }
        /* السايدبار مخفي افتراضياً */
        .ticket-layout-row { display: none; width: 100%; }
        .ticket-layout-row.mobile-open { display: block; }
        .ticket-sidebar { display: block !important; }
        /* الشات يأخذ العرض الكامل */
        .ticket-chat-panel { width: 100%; }
    }

    /* ── Mobile sidebar toggle ─────────────────────────────────── */
    .mobile-sidebar-toggle {
        display: none;
        width: 100%;
        background: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 10px;
        padding: .75rem 1rem;
        margin-bottom: .75rem;
        cursor: pointer;
        align-items: center;
        justify-content: space-between;
        font-size: 13.5px;
        font-weight: 600;
        color: #444;
        box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .mobile-sidebar-toggle i { transition: transform .25s; }
    .mobile-sidebar-toggle.open i.toggle-chevron { transform: rotate(180deg); }
    .mobile-sidebar-toggle .user-mini {
        display: flex;
        align-items: center;
        gap: .5rem;
    }
    .mobile-sidebar-toggle .user-mini img {
        width: 28px; height: 28px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #e0e0e0;
    }
    @media (max-width: 991px) {
        .mobile-sidebar-toggle { display: flex; }
    }

    /* ── Sidebar card ──────────────────────────────────────────── */
    .ticket-sidebar .card { margin-bottom: 0; border-radius: 12px; overflow: hidden; }

    .ticket-user-banner {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 1.5rem 1.25rem 3rem;
        text-align: center;
        position: relative;
    }
    @media (max-width: 575px) {
        .ticket-user-banner { padding: 1.25rem 1rem 2rem; }
    }
    .ticket-user-banner .avatar-wrap {
        width: 72px; height: 72px;
        border-radius: 50%;
        border: 3px solid rgba(255,255,255,.4);
        overflow: hidden;
        margin: 0 auto .75rem;
        display: block;
    }
    .ticket-user-banner .avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
    .ticket-user-banner h5 { color: #fff; font-weight: 600; margin: 0 0 .2rem; }
    .ticket-user-banner small { color: rgba(255,255,255,.75); font-size: 12px; }

    .ticket-id-badge {
        position: absolute;
        top: .75rem; right: .75rem;
        background: rgba(255,255,255,.2);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 20px;
        letter-spacing: .5px;
    }

    .ticket-meta { padding: 1rem 1.25rem; }
    .ticket-meta-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .55rem 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: 13.5px;
    }
    .ticket-meta-row:last-child { border-bottom: none; }
    .ticket-meta-row .label { color: #888; font-weight: 500; flex-shrink: 0; }
    .ticket-meta-row .value { font-weight: 600; color: #333; text-align: right; max-width: 60%; }

    /* priority badges */
    .badge-priority-low    { background: #d4edda; color: #155724; }
    .badge-priority-medium { background: #fff3cd; color: #856404; }
    .badge-priority-high   { background: #f8d7da; color: #721c24; }

    /* status badges */
    .badge-status-open    { background: #d4edda; color: #155724; }
    .badge-status-pending { background: #fff3cd; color: #856404; }
    .badge-status-closed  { background: #f8d7da; color: #721c24; }

    .info-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .ticket-body-section {
        padding: .75rem 1.25rem 1rem;
        border-top: 1px solid #f0f0f0;
    }
    .ticket-body-section label { font-size: 12px; color: #888; font-weight: 500; margin-bottom: .35rem; display: block; }
    .ticket-body-text {
        background: #f8f9fa;
        border-radius: 8px;
        padding: .75rem 1rem;
        font-size: 13.5px;
        color: #444;
        line-height: 1.6;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .ticket-controls {
        padding: .75rem 1.25rem 1.25rem;
        border-top: 1px solid #f0f0f0;
    }
    .ticket-controls label { font-size: 12px; color: #888; font-weight: 500; margin-bottom: .3rem; display: block; }
    .ticket-controls select { font-size: 13px; border-radius: 8px; }
    .ticket-controls .form-group { margin-bottom: .75rem; }
    .ticket-controls .form-group:last-child { margin-bottom: 0; }

    /* Controls inline on mobile */
    @media (max-width: 575px) {
        .ticket-controls-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: .5rem;
        }
        .ticket-controls-inner .form-group { margin-bottom: 0; }
    }

    .ticket-image-section {
        padding: 0 1.25rem 1.25rem;
    }
    .ticket-image-section img {
        width: 100%;
        border-radius: 8px;
        border: 1px solid #eee;
        cursor: pointer;
    }

    /* ── Chat panel ────────────────────────────────────────────── */
    .ticket-chat-panel .card {
        margin-bottom: 0;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: calc(100vh - 160px);
        min-height: 520px;
    }
    @media (max-width: 991px) {
        .ticket-chat-panel .card {
            height: calc(100vh - 220px);
            min-height: 420px;
        }
    }
    @media (max-width: 575px) {
        .ticket-chat-panel .card {
            height: calc(100vh - 180px);
            min-height: 350px;
            border-radius: 10px;
        }
    }

    .chat-panel-header {
        display: flex;
        align-items: center;
        padding: .9rem 1.25rem;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
        flex-shrink: 0;
        gap: .5rem;
    }
    .chat-panel-header .user-link {
        display: flex;
        align-items: center;
        gap: .6rem;
        text-decoration: none;
        color: inherit;
        min-width: 0;
    }
    .chat-panel-header .user-link:hover h6 { color: #7367f0; }
    .chat-panel-header img {
        width: 42px; height: 42px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #e8e8e8;
        flex-shrink: 0;
    }
    .chat-panel-header .user-info { min-width: 0; }
    .chat-panel-header h6 { margin: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-panel-header small { color: #aaa; font-size: 11.5px; white-space: nowrap; }
    .chat-panel-header .ticket-count-badge {
        margin-left: auto;
        flex-shrink: 0;
        background: #f0f0f0;
        color: #666;
        font-size: 11px;
        padding: 3px 10px;
        border-radius: 20px;
        font-weight: 500;
        white-space: nowrap;
    }
    @media (max-width: 400px) {
        .chat-panel-header { padding: .7rem .9rem; }
        .chat-panel-header img { width: 36px; height: 36px; }
        .chat-panel-header .ticket-count-badge { display: none; }
    }

    /* messages area */
    .chat-messages-area {
        flex: 1;
        overflow-y: auto;
        padding: 1.25rem;
        background: #f8f9fa;
        -webkit-overflow-scrolling: touch;
    }
    @media (max-width: 575px) {
        .chat-messages-area { padding: .9rem .75rem; }
    }

    /* individual message */
    .msg-row {
        display: flex;
        align-items: flex-end;
        gap: .6rem;
        margin-bottom: 1.1rem;
    }
    .msg-row.msg-admin { flex-direction: row-reverse; }

    .msg-avatar a {
        display: block;
        width: 36px; height: 36px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        border: 2px solid #e0e0e0;
        transition: border-color .2s;
    }
    .msg-avatar a:hover { border-color: #7367f0; }
    .msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
    @media (max-width: 575px) {
        .msg-avatar a { width: 30px; height: 30px; }
    }

    .msg-content-wrap { max-width: 68%; }
    @media (max-width: 575px) {
        .msg-content-wrap { max-width: 82%; }
    }

    .msg-bubble {
        padding: .6rem .9rem;
        border-radius: 12px;
        font-size: 13.5px;
        line-height: 1.55;
        word-break: break-word;
    }
    @media (max-width: 575px) {
        .msg-bubble { font-size: 13px; padding: .55rem .8rem; }
    }
    .msg-bubble p { margin: 0; }

    .msg-admin .msg-bubble {
        background: #7367f0;
        color: #fff;
        border-bottom-right-radius: 4px;
    }
    .msg-user .msg-bubble {
        background: #fff;
        color: #333;
        border: 1px solid #eaeaea;
        border-bottom-left-radius: 4px;
    }

    .msg-bubble img {
        border-radius: 8px;
        max-width: 180px;
        max-height: 180px;
        object-fit: cover;
        margin-top: 4px;
        display: block;
        cursor: pointer;
    }
    @media (max-width: 575px) {
        .msg-bubble img { max-width: 140px; max-height: 140px; }
    }

    .msg-time {
        font-size: 10.5px;
        color: #bbb;
        margin-top: 3px;
        display: block;
    }
    .msg-admin .msg-time { text-align: right; }
    .msg-user  .msg-time { text-align: left; }

    /* thread actions (edit / delete) */
    .msg-thread-actions {
        display: none;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 3px;
        align-self: flex-end;
    }
    .msg-row:hover .msg-thread-actions { display: flex; }
    .msg-edit-btn {
        background: none;
        border: none;
        color: #5e50ee;
        font-size: 12px;
        cursor: pointer;
        padding: 2px 5px;
        border-radius: 4px;
        opacity: .85;
        transition: opacity .2s;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }
    .msg-edit-btn:hover { opacity: 1; }
    .msg-delete-btn {
        background: none;
        border: none;
        color: #e74c3c;
        font-size: 12px;
        cursor: pointer;
        padding: 2px 5px;
        border-radius: 4px;
        opacity: .7;
        transition: opacity .2s;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }
    .msg-delete-btn:hover { opacity: 1; }

    /* empty state */
    .chat-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #ccc;
        gap: .5rem;
    }
    .chat-empty-state i { font-size: 3rem; }
    .chat-empty-state p { font-size: 13px; color: #bbb; margin: 0; }

    /* file preview */
    #filePreviewArea {
        display: none;
        flex-wrap: wrap;
        gap: 6px;
        padding: .6rem 1rem;
        background: #f0f0f0;
        border-top: 1px solid #e8e8e8;
        flex-shrink: 0;
    }
    #filePreviewArea .preview-item {
        position: relative;
    }
    #filePreviewArea img {
        width: 56px; height: 56px;
        object-fit: cover;
        border-radius: 6px;
        border: 1px solid #ddd;
    }

    /* input bar — always LTR so send button stays on the right in RTL sites */
    .chat-input-bar {
        display: flex;
        flex-direction: row;
        direction: ltr;
        align-items: flex-end;
        gap: .5rem;
        padding: .75rem 1rem;
        background: #fff;
        border-top: 1px solid #f0f0f0;
        flex-shrink: 0;
    }
    @media (max-width: 575px) {
        .chat-input-bar { padding: .6rem .75rem; gap: .4rem; }
    }
    .chat-input-bar textarea#chatMessageInput {
        flex: 1;
        border-radius: 18px;
        padding: .5rem 1rem;
        border: 1px solid #e0e0e0;
        background: #f8f9fa;
        font-size: 13.5px;
        outline: none;
        transition: border-color .2s;
        min-width: 0;
        direction: rtl;
        text-align: right;
        resize: none;
        overflow: hidden;
        line-height: 1.5;
        min-height: 40px;
        max-height: 160px;
        overflow-y: auto;
        display: block;
        font-family: inherit;
        box-sizing: border-box;
    }
    @media (max-width: 575px) {
        .chat-input-bar textarea#chatMessageInput { font-size: 14px; padding: .5rem .85rem; }
    }
    .chat-input-bar textarea#chatMessageInput:focus {
        border-color: #7367f0;
        background: #fff;
    }
    .chat-input-bar .btn-attach {
        width: 40px; height: 40px;
        border-radius: 50%;
        border: none;
        background: #f0f0f0;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: background .2s;
        font-size: 16px;
        text-decoration: none;
    }
    .chat-input-bar .btn-attach:hover { background: #e0e0e0; color: #333; }
    .chat-input-bar .btn-send {
        width: 40px; height: 40px;
        border-radius: 50%;
        border: none;
        background: #7367f0;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: background .2s, transform .1s;
        font-size: 15px;
    }
    @media (max-width: 575px) {
        .chat-input-bar .btn-attach,
        .chat-input-bar .btn-send { width: 42px; height: 42px; font-size: 17px; }
    }
    .chat-input-bar .btn-send:hover { background: #5e50ee; }
    .chat-input-bar .btn-send:active { transform: scale(.93); }
    .chat-input-bar .btn-send:disabled { background: #b3adf7; cursor: not-allowed; }

    /* ── Breadcrumb mobile ─────────────────────────────────────── */
    @media (max-width: 575px) {
        .content-header-title { font-size: 16px !important; }
        .breadcrumb { font-size: 12px; }
    }
</style>
@endsection

@section('contents')
@php
    $supportUser      = $support->supportable;
    $userEmail        = $supportUser ? (is_array($supportUser->email)    ? '' : (string)($supportUser->email    ?? ''))  : '';
    $userName         = $supportUser ? (is_array($supportUser->name)     ? '' : (string)($supportUser->name     ?? '-')) : '-';
    $userImage        = $supportUser ? (is_array($supportUser->image)    ? '' : (string)($supportUser->image    ?? ''))  : '';
    $userUsername     = $supportUser ? (is_array($supportUser->username) ? '' : (string)($supportUser->username ?? ''))  : '';
    $supportTypeLabel = $support->type
        ? (function($v){ return is_array($v) ? implode(', ', $v) : (string)$v; })(getTrans($support->type->display_name, lang()))
        : '-';
    $supportTitle     = is_array($support->title)    ? '' : (string)($support->title    ?? '');
    $supportBody      = is_array($support->body)     ? '' : (string)($support->body     ?? '-');
    $supportPriority  = is_array($support->priority) ? '' : (string)($support->priority ?? '');
    $supportStatus    = is_array($support->status)   ? '' : (string)($support->status   ?? '');
    $supportImage     = is_array($support->image)    ? '' : (string)($support->image    ?? '');
    $adminUser        = auth()->user();
    $adminName        = $adminUser ? (is_array($adminUser->name)  ? '' : (string)($adminUser->name  ?? '')) : '';
    $adminImage       = $adminUser ? (is_array($adminUser->image) ? '' : (string)($adminUser->image ?? '')) : '';
    $adminId          = $adminUser ? $adminUser->id : 0;
@endphp
<div class="content-wrapper">

    {{-- Breadcrumb --}}
    <div class="content-header row">
        <div class="content-header-left col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12 d-flex align-items-center">
                    <h2 class="content-header-title float-left mb-0 mr-1">{{ __('Ticket') }} #{{ $support->id }}</h2>
                    <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">{{ __('Home') }}</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('supports.index') }}">{{ __('Supports') }}</a></li>
                            <li class="breadcrumb-item active">{{ __('Ticket') }} #{{ $support->id }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content-body">

        {{-- Mobile sidebar toggle (visible on small screens only) --}}
        <button class="mobile-sidebar-toggle" id="mobileSidebarToggle" type="button" aria-expanded="false">
            <span class="user-mini">
                <img src="{{ $userImage }}" alt="{{ $userName }}">
                <span>{{ $userName }}</span>
                <span class="info-badge badge-status-{{ $supportStatus }}" style="font-size:11px;padding:2px 8px;">{{ ucfirst($supportStatus) }}</span>
            </span>
            <i class="feather icon-chevron-down toggle-chevron"></i>
        </button>

        <div class="ticket-outer">

        <div class="ticket-layout-row">
        <div class="ticket-page-grid">

            {{-- ══════════ LEFT SIDEBAR ══════════ --}}
            <div class="ticket-sidebar" id="ticketSidebar">
                <div class="card shadow-sm">

                    {{-- User banner --}}
                    <div class="ticket-user-banner">
                        <span class="ticket-id-badge">#{{ $support->id }}</span>
                        <a href="{{ route('freelancers.details', $userUsername) }}" target="_blank" class="avatar-wrap">
                            <img src="{{ $userImage }}" alt="{{ $userName }}">
                        </a>
                        <h5>{{ $userName }}</h5>
                        <small>{{ $userEmail }}</small>
                    </div>

                    {{-- Ticket meta --}}
                    <div class="ticket-meta">
                        <div class="ticket-meta-row">
                            <span class="label">{{ __('Type') }}</span>
                            <span class="value">{{ $supportTypeLabel }}</span>
                        </div>
                        <div class="ticket-meta-row">
                            <span class="label">{{ __('Priority') }}</span>
                            <span class="value">
                                <span class="info-badge badge-priority-{{ strtolower($supportPriority) }}">
                                    {{ $supportPriority ?: '-' }}
                                </span>
                            </span>
                        </div>
                        <div class="ticket-meta-row">
                            <span class="label">{{ __('Status') }}</span>
                            <span class="value">
                                <span class="info-badge badge-status-{{ $supportStatus }}">
                                    {{ ucfirst($supportStatus) }}
                                </span>
                            </span>
                        </div>
                        <div class="ticket-meta-row">
                            <span class="label">{{ __('Created') }}</span>
                            <span class="value" style="font-size:12px;">{{ $support->created_at->format('Y-m-d H:i') }}</span>
                        </div>
                        <div class="ticket-meta-row">
                            <span class="label">{{ __('Messages') }}</span>
                            <span class="value">{{ $support->threads->count() }}</span>
                        </div>
                    </div>

                    {{-- Description --}}
                    <div class="ticket-body-section">
                        <label>{{ __('Title') }}</label>
                        <div class="ticket-body-text mb-75" style="font-weight:600;">{{ $supportTitle }}</div>
                        <label>{{ __('Description') }}</label>
                        <div class="ticket-body-text">{{ $supportBody }}</div>
                    </div>

                    {{-- Attached image --}}
                    @if($supportImage)
                    <div class="ticket-image-section">
                        <label style="font-size:12px;color:#888;font-weight:500;display:block;margin-bottom:.35rem;">{{ __('Attachment') }}</label>
                        <a href="{{ asset($supportImage) }}" target="_blank">
                            <img src="{{ asset($supportImage) }}" alt="attachment">
                        </a>
                    </div>
                    @endif

                    {{-- Controls --}}
                    <div class="ticket-controls">
                        <div class="ticket-controls-inner">
                            <div class="form-group">
                                <label>{{ __('Change Priority') }}</label>
                                <select id="selectPriority" onchange="changePriority()" class="form-control">
                                    @foreach($priorities as $priority)
                                        <option value="{{ $priority }}" @if($priority == $supportPriority) selected @endif>{{ $priority }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label>{{ __('Change Status') }}</label>
                                <select id="selectStatus" onchange="changeStatus()" class="form-control">
                                    @foreach($statuses as $status)
                                        <option value="{{ $status }}" @if($status == $supportStatus) selected @endif>{{ ucfirst($status) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            {{-- ══════════ END SIDEBAR ══════════ --}}

        </div>
        {{-- ══════════ END GRID ══════════ --}}

        </div>{{-- end ticket-layout-row --}}

        {{-- ══════════ CHAT PANEL (برا ticket-layout-row، جوه ticket-outer) ══════════ --}}
        <div class="ticket-chat-panel">
            <div class="card shadow-sm" style="display:flex;flex-direction:column;">

                {{-- Chat header --}}
                <div class="chat-panel-header">
                    <a href="{{ route('freelancers.details', $userUsername) }}" target="_blank" class="user-link">
                        <img src="{{ $userImage }}" alt="{{ $userName }}">
                        <div class="user-info">
                            <h6>{{ $userName }}</h6>
                            <small>{{ __('Support Conversation') }}</small>
                        </div>
                    </a>
                    <span class="ticket-count-badge">{{ $support->threads->count() }} {{ __('dash.messages_word') }}</span>
                </div>

                {{-- Messages --}}
                <div class="chat-messages-area" id="chatContainer">
                    @if($support->threads->count() > 0)
                        @foreach($support->threads as $thread)
                            @if(isset($thread->senderable))
                                @php
                                    $isAdmin        = $thread->senderable_type === "App\Models\Admin";
                                    $senderUsername = !$isAdmin ? (is_array($thread->senderable->username) ? '' : (string)($thread->senderable->username ?? '')) : '';
                                    $profileUrl     = $isAdmin
                                        ? route('admins.show', $thread->senderable->id)
                                        : route('freelancers.details', $senderUsername);
                                    $senderName     = is_array($thread->senderable->name)  ? '' : (string)($thread->senderable->name  ?? '');
                                    $senderImage    = is_array($thread->senderable->image) ? '' : (string)($thread->senderable->image ?? '');
                                    $threadMessage  = is_array($thread->message)           ? '' : (string)($thread->message           ?? '');
                                    $threadImages   = is_array($thread->images)            ? $thread->images : [];
                                @endphp
                                <div class="msg-row {{ $isAdmin ? 'msg-admin' : 'msg-user' }}" data-thread-id="{{ $thread->id }}">
                                    <div class="msg-avatar">
                                        <a href="{{ $profileUrl }}" target="_blank" title="{{ $senderName }}">
                                            <img src="{{ $senderImage }}" alt="{{ $senderName }}">
                                        </a>
                                    </div>
                                    <div class="msg-content-wrap">
                                        <div class="msg-bubble">
                                            @if($threadMessage)
                                                <p>{{ $threadMessage }}</p>
                                            @endif
                                            @foreach($threadImages as $file)
                                                @php $fileUrl = is_array($file) ? '' : (string)$file; @endphp
                                                @if($fileUrl)
                                                <a href="{{ $fileUrl }}" target="_blank">
                                                    <img src="{{ $fileUrl }}" alt="attachment">
                                                </a>
                                                @endif
                                            @endforeach
                                        </div>
                                        <span class="msg-time">{{ $thread->created_at->format('Y-m-d H:i') }}</span>
                                        <span class="msg-thread-actions">
                                            @can('update_supports')
                                            <button type="button" class="msg-edit-btn" data-thread-id="{{ $thread->id }}" data-message="{{ rawurlencode($threadMessage) }}" title="{{ __('Edit message') }}">
                                                <i class="feather icon-edit-2"></i> {{ __('Edit') }}
                                            </button>
                                            @endcan
                                            <button type="button" class="msg-delete-btn" data-thread-id="{{ $thread->id }}" title="{{ __('Delete message') }}">
                                                <i class="feather icon-trash-2"></i> {{ __('Delete') }}
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    @else
                        <div class="chat-empty-state" id="noMessagesPlaceholder">
                            <i class="feather icon-message-circle"></i>
                            <p>{{ __('No messages yet. Start the conversation.') }}</p>
                        </div>
                    @endif
                </div>

                {{-- File preview --}}
                <div id="filePreviewArea"></div>

                {{-- Input bar --}}
                <div class="chat-input-bar">
                    <input type="hidden" id="chatSupportId" value="{{ $support->id }}">
                    <textarea id="chatMessageInput" placeholder="{{ __('Type a message…') }}" rows="1"></textarea>
                    <label class="btn-attach" for="chatFileInput" title="{{ __('Attach image') }}">
                        <i class="feather icon-paperclip"></i>
                    </label>
                    <input type="file" id="chatFileInput" multiple hidden accept="image/*">
                    <button type="button" id="chatSendBtn" class="btn-send" title="{{ __('Send') }}">
                        <i class="feather icon-send"></i>
                    </button>
                </div>

            </div>
        </div>
        {{-- ══════════ END CHAT ══════════ --}}

        </div>{{-- end ticket-outer --}}
    </div>
</div>

@can('update_supports')
<div class="modal fade text-left" id="editThreadMessageModal" tabindex="-1" role="dialog" aria-labelledby="editThreadMessageModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="editThreadMessageModalLabel">{{ __('Edit message') }}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editThreadMessageId" value="">
                <div class="form-group">
                    <label for="editThreadMessageTextarea">{{ __('Message') }}</label>
                    <textarea class="form-control" id="editThreadMessageTextarea" rows="5"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{ __('Cancel') }}</button>
                <button type="button" class="btn btn-primary" id="editThreadMessageSave">{{ __('Save Changes') }}</button>
            </div>
        </div>
    </div>
</div>
@endcan

@endsection

@section('scripts')
<script>
    // ── Priority / Status ───────────────────────────────────────
    function changePriority() {
        $.ajax({
            type: 'patch',
            url: '{{ route('supports.update', $support) }}',
            data: { priority: $('#selectPriority').val(), _token: '{{ csrf_token() }}' },
            success: function(r) { toastr.success(r); }
        });
    }
    function changeStatus() {
        $.ajax({
            type: 'patch',
            url: '{{ route('supports.update', $support) }}',
            data: { status: $('#selectStatus').val(), _token: '{{ csrf_token() }}' },
            success: function(r) { toastr.success(r); }
        });
    }

    // ── Helpers ─────────────────────────────────────────────────
    function scrollToBottom() {
        var c = document.getElementById('chatContainer');
        if (c) c.scrollTop = c.scrollHeight;
    }
    function nowFormatted() {
        var d = new Date(), p = function(n){ return n < 10 ? '0'+n : n; };
        return d.getFullYear()+'-'+p(d.getMonth()+1)+'-'+p(d.getDate())+' '+p(d.getHours())+':'+p(d.getMinutes());
    }

    function appendAdminMessage(message, previewSrcs) {
        $('#noMessagesPlaceholder').remove();
        var imagesHtml = '';
        previewSrcs.forEach(function(src) {
            imagesHtml += '<a href="'+src+'" target="_blank"><img src="'+src+'" alt="attachment"></a>';
        });
        var bubbleContent = (message ? '<p>'+$('<div>').text(message).html()+'</p>' : '') + imagesHtml;
        var html =
            '<div class="msg-row msg-admin">' +
                '<div class="msg-avatar">' +
                    '<a href="{{ route('admins.show', $adminId) }}" target="_blank" title="{{ $adminName }}">' +
                        '<img src="{{ $adminImage }}" alt="me">' +
                    '</a>' +
                '</div>' +
                '<div class="msg-content-wrap">' +
                    '<div class="msg-bubble">'+bubbleContent+'</div>' +
                    '<span class="msg-time">'+nowFormatted()+'</span>' +
                '</div>' +
            '</div>';
        $('#chatContainer').append(html);
        scrollToBottom();
    }

    // ── File preview ────────────────────────────────────────────
    $('#chatFileInput').on('change', function() {
        var files = this.files, area = $('#filePreviewArea');
        area.empty();
        if (!files.length) { area.hide(); return; }
        area.show().css('display','flex');
        Array.from(files).forEach(function(file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                area.append('<div class="preview-item"><img src="'+e.target.result+'"></div>');
            };
            reader.readAsDataURL(file);
        });
    });

    // ── Send ─────────────────────────────────────────────────────
    function sendChatMessage() {
        var message = $('#chatMessageInput').val().trim();
        var files   = $('#chatFileInput')[0].files;
        if (!message && !files.length) return;

        var fd = new FormData();
        fd.append('_token', '{{ csrf_token() }}');
        fd.append('support_id', $('#chatSupportId').val());
        fd.append('message', message);
        Array.from(files).forEach(function(f) { fd.append('file[]', f); });

        var btn = $('#chatSendBtn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');

        $.ajax({
            type: 'POST',
            url: '{{ route('supports.thread-store') }}',
            data: fd,
            processData: false,
            contentType: false,
            success: function() {
                var srcs = [];
                $('#filePreviewArea img').each(function(){ srcs.push($(this).attr('src')); });
                appendAdminMessage(message, srcs);
                var inp = document.getElementById('chatMessageInput');
                inp.value = '';
                inp.style.height = 'auto';
                $('#chatFileInput').val('');
                $('#filePreviewArea').empty().hide();
            },
            error: function(xhr) {
                var err = xhr.responseJSON && xhr.responseJSON.message
                    ? xhr.responseJSON.message : '{{ __("Failed to send message") }}';
                toastr.error(err);
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="feather icon-send"></i>');
            }
        });
    }

    function autoResizeTextarea(el) {
        el.style.height = 'auto';
        el.style.height = Math.min(el.scrollHeight, 160) + 'px';
    }

    var msgInput = document.getElementById('chatMessageInput');
    msgInput.addEventListener('input', function() { autoResizeTextarea(this); });

    $('#chatSendBtn').on('click', sendChatMessage);
    $('#chatMessageInput').on('keydown', function(e) {
        if (e.key === 'Enter' && e.ctrlKey) {
            e.preventDefault();
            sendChatMessage();
        }
    });

    // ── Delete thread message ────────────────────────────────────
    $(document).on('click', '.msg-delete-btn', function() {
        var btn      = $(this);
        var threadId = btn.data('thread-id');
        var msgRow   = btn.closest('.msg-row');

        if (!confirm('{{ __("Are you sure you want to delete this message?") }}')) return;

        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');

        $.ajax({
            type: 'DELETE',
            url: '{{ url("dashboard/supports/thread") }}/' + threadId,
            data: { _token: '{{ csrf_token() }}' },
            success: function() {
                msgRow.fadeOut(300, function() {
                    $(this).remove();
                    if ($('#chatContainer .msg-row').length === 0) {
                        $('#chatContainer').html(
                            '<div class="chat-empty-state" id="noMessagesPlaceholder">' +
                            '<i class="feather icon-message-circle"></i>' +
                            '<p>{{ __("No messages yet. Start the conversation.") }}</p>' +
                            '</div>'
                        );
                    }
                });
                toastr.success('{{ __("Message deleted successfully") }}');
            },
            error: function(xhr) {
                var err = xhr.responseJSON && xhr.responseJSON.message
                    ? xhr.responseJSON.message : '{{ __("Failed to delete message") }}';
                toastr.error(err);
                btn.prop('disabled', false).html('<i class="feather icon-trash-2"></i> {{ __("Delete") }}');
            }
        });
    });

    @can('update_supports')
    // ── Edit thread message ─────────────────────────────────────
    function parseThreadMessageDataAttr(raw) {
        if (raw == null || raw === '') return '';
        try {
            return decodeURIComponent(String(raw).replace(/\+/g, ' '));
        } catch (e) {
            return raw;
        }
    }
    $(document).on('click', '.msg-edit-btn', function() {
        var btn = $(this);
        $('#editThreadMessageId').val(btn.attr('data-thread-id'));
        $('#editThreadMessageTextarea').val(parseThreadMessageDataAttr(btn.attr('data-message')));
        $('#editThreadMessageModal').modal('show');
    });
    $('#editThreadMessageSave').on('click', function() {
        var threadId = $('#editThreadMessageId').val();
        var message = $('#editThreadMessageTextarea').val();
        var saveBtn = $(this).prop('disabled', true);
        $.ajax({
            type: 'PATCH',
            url: '{{ url("dashboard/supports/thread") }}/' + threadId,
            data: { _token: '{{ csrf_token() }}', message: message },
            success: function(res) {
                var text = res.text != null ? String(res.text) : '';
                var msgRow = $('.msg-row[data-thread-id="' + threadId + '"]');
                var bubble = msgRow.find('.msg-bubble');
                var p = bubble.find('p').first();
                if (text) {
                    if (p.length) { p.text(text); }
                    else { bubble.prepend($('<p></p>').text(text)); }
                } else {
                    p.remove();
                }
                var editBtn = msgRow.find('.msg-edit-btn');
                if (editBtn.length) {
                    editBtn.attr('data-message', encodeURIComponent(text));
                }
                $('#editThreadMessageModal').modal('hide');
                toastr.success(res.message || '{{ __("Message updated successfully") }}');
            },
            error: function(xhr) {
                var err = xhr.responseJSON && xhr.responseJSON.message
                    ? xhr.responseJSON.message : '{{ __("Failed to update message") }}';
                toastr.error(err);
            },
            complete: function() { saveBtn.prop('disabled', false); }
        });
    });
    @endcan

    // ── Mobile sidebar toggle ───────────────────────────────────
    $('#mobileSidebarToggle').on('click', function() {
        var row = $('.ticket-layout-row');
        var btn = $(this);
        row.toggleClass('mobile-open');
        btn.toggleClass('open');
        btn.attr('aria-expanded', row.hasClass('mobile-open'));
    });

    $(document).ready(function() { scrollToBottom(); });
</script>
@endsection