@extends('user.support.layout')

@section('title', 'Ticket #' . $ticket->st_no)

@section('content')

<style>
    /* ================= DESKTOP STYLES ================= */

    .customer-chat-page {
        font-size: 13px;
        width: 100%;
    }

    .customer-chat-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 12px;
        height: calc(100vh - 130px);
        min-height: 400px;
        overflow: hidden;
    }

    .customer-chat-panel,
    .customer-info-panel {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        overflow: hidden;
        min-width: 0;
    }

    .customer-chat-panel {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .customer-chat-header {
        flex: 0 0 auto;
        padding: 10px 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid #e5e7eb;
    }

    .customer-chat-header h5 {
        font-size: 15px;
        margin: 0 0 3px;
        overflow-wrap: anywhere;
    }

    .customer-chat-header .subtitle {
        color: #6b7280;
        font-size: 12px;
    }

    .customer-chat-messages {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        padding: 12px 15px;
        background: #f3f6fa;
        scrollbar-width: thin;
        overscroll-behavior: contain;
    }

    .customer-chat-row {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 7px;
    }

    .customer-chat-row.mine {
        justify-content: flex-end;
    }

    .customer-chat-bubble {
        max-width: 82%;
        padding: 7px 10px;
        border: 1px solid #e2e7ee;
        border-radius: 10px;
        background: #fff;
        overflow-wrap: anywhere;
        font-size: 12px;
        line-height: 1.4;
    }

    .customer-chat-row.mine .customer-chat-bubble {
        background: #dcf8c6;
        border-color: #cce9b7;
    }

    .customer-chat-author {
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 3px;
    }

    .customer-chat-text {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        margin: 0;
    }

    .customer-chat-time {
        font-size: 10px;
        color: #7c8797;
        text-align: right;
        margin-top: 4px;
    }

    /* Reply composer stays at the bottom of the chat panel */
    .customer-chat-composer {
        flex: 0 0 auto;
        padding: 7px 10px;
        background: #fff;
        border-top: 1px solid #e5e7eb;
    }

    .customer-chat-composer form {
        margin: 0;
    }

    .customer-chat-composer textarea {
        display: block;
        width: 100%;
        height: 36px;
        min-height: 36px;
        max-height: 75px;
        resize: none;
        font-size: 13px;
        padding: 7px 10px;
        margin: 0 0 5px;
        line-height: 1.3;
    }

    .customer-chat-composer .file-input {
        width: 100%;
        max-width: 280px;
        font-size: 11px;
        padding: 3px;
        height: 30px;
    }

    .customer-chat-composer small {
        display: block;
        color: #778196;
        font-size: 10px;
        margin-top: 2px;
    }

    .customer-chat-composer .btn {
        font-size: 12px;
        padding: 7px 12px;
        margin: 0;
        white-space: nowrap;
    }

    /* Ticket information sidebar */
    .customer-info-panel {
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .customer-info-section {
        padding: 12px;
        border-bottom: 1px solid #e5e7eb;
    }

    .customer-info-section h6 {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .customer-info-item {
        margin-bottom: 11px;
    }

    .customer-info-label {
        color: #778196;
        font-size: 10px;
        margin-bottom: 2px;
    }

    .customer-info-value {
        font-size: 12px;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .customer-attachment {
        display: inline-block;
        padding: 5px 8px;
        margin-top: 5px;
        background: rgba(0, 0, 0, .04);
        border-radius: 6px;
        font-size: 11px;
        overflow-wrap: anywhere;
    }

    /* Mobile controls hidden on desktop */
    .customer-mobile-toolbar {
        display: none;
    }

    .customer-info-backdrop {
        display: none;
    }

    /* ================= MOBILE STYLES ================= */

    @media (max-width: 767px) {
        html,
        body {
            overflow: hidden;
        }

        .customer-chat-page {
            box-sizing: border-box;
            height: 100dvh;
            min-height: 0;
            padding: 4px !important;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* Hide full navigation on mobile */
        .customer-navigation {
            display: none;
            position: fixed;
            z-index: 1400;
            top: 48px;
            left: 8px;
            right: 8px;
            margin: 0 !important;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
        }

        .customer-navigation.menu-open {
            display: block;
        }

        .customer-navigation nav {
            display: flex !important;
            flex-direction: column !important;
            gap: 2px;
        }

        .customer-navigation .nav-link {
            padding: 9px !important;
            font-size: 13px !important;
        }

        /* Compact top toolbar */
        .customer-mobile-toolbar {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            padding: 5px 2px 8px;
            background: #f8f9fa;
        }

        .customer-mobile-toolbar .btn {
            font-size: 12px;
            padding: 6px 9px;
            white-space: nowrap;
        }

        .customer-mobile-toolbar .ticket-short-title {
            flex: 1;
            min-width: 0;
            text-align: center;
            font-size: 11px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Hide alerts after they are no longer needed.
           Validation errors remain visible. */
        .customer-chat-layout {
            display: flex !important;
            flex-direction: column;
            flex: 1 1 0;
            height: auto !important;
            min-height: 0 !important;
            overflow: hidden !important;
            gap: 0;
        }

        .customer-chat-panel {
            display: flex;
            flex-direction: column;
            flex: 1 1 0;
            width: 100%;
            height: 100%;
            min-height: 0;
            overflow: hidden;
            border-radius: 8px;
        }

        .customer-chat-header {
            flex: 0 0 auto;
            padding: 8px 10px;
        }

        .customer-chat-header h5 {
            font-size: 13px;
        }

        .customer-chat-header .subtitle {
            font-size: 11px;
        }

        .customer-chat-header .badge {
            font-size: 10px;
            flex-shrink: 0;
        }

        .customer-chat-messages {
            flex: 1 1 0;
            min-height: 0;
            overflow-y: auto;
            padding: 8px;
            -webkit-overflow-scrolling: touch;
        }

        .customer-chat-row {
            margin-bottom: 6px;
        }

        .customer-chat-bubble {
            max-width: 88%;
            padding: 6px 9px;
            font-size: 12px;
        }

        .customer-chat-author {
            font-size: 11px;
            margin-bottom: 3px;
        }

        .customer-chat-time {
            font-size: 10px;
        }

        /* Compact fixed-bottom composer within chat */
        .customer-chat-composer {
            flex: 0 0 auto;
            padding: 6px;
            padding-bottom: max(6px, env(safe-area-inset-bottom));
        }

        .customer-chat-composer textarea {
            height: 36px;
            min-height: 36px;
            max-height: 70px;
            font-size: 13px;
        }

        .customer-chat-composer .file-input {
            max-width: 190px;
            font-size: 10px;
        }

        .customer-chat-composer .btn {
            padding: 7px 9px;
            font-size: 11px;
        }

        .customer-chat-composer .d-flex {
            gap: 5px !important;
        }

        .customer-chat-composer small {
            font-size: 9px;
        }

        /* Ticket details open in a drawer */
        .customer-info-panel {
            display: none;
            position: fixed;
            z-index: 1200;
            top: 0;
            right: 0;
            bottom: 0;
            width: min(88vw, 340px);
            max-height: 100dvh;
            height: 100dvh;
            overflow-y: auto;
            border-radius: 12px 0 0 12px;
            box-shadow: -5px 0 20px rgba(0, 0, 0, .15);
            background: #fff;
        }

        .customer-info-panel.info-open {
            display: block;
        }

        .customer-info-backdrop.backdrop-open {
            display: block;
            position: fixed;
            z-index: 1100;
            inset: 0;
            background: rgba(0, 0, 0, .4);
        }
    }

    @media (max-width: 380px) {
        .customer-chat-composer .file-input {
            max-width: 155px;
        }

        .customer-chat-composer .btn {
            padding: 7px;
        }

        .customer-mobile-toolbar .btn {
            padding: 6px;
            font-size: 11px;
        }
    }
</style>

<div class="container-fluid py-2 customer-chat-page">

    {{-- Customer navigation --}}
    <div class="mb-3 customer-navigation" id="customerNavigation">
        <nav class="nav nav-pills flex-column flex-sm-row text-center bg-white shadow-sm rounded-3 p-2">

            <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.index') ? 'active' : '' }}"
               href="{{ route('ticket.index') }}">
                <i class="bi bi-speedometer2"></i> Dashboard
            </a>

            <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.open') ? 'active' : '' }}"
               href="{{ route('ticket.open') }}">
                <i class="bi bi-folder2-open"></i> Open
            </a>

            <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.inprogress') ? 'active' : '' }}"
               href="{{ route('ticket.inprogress') }}">
                <i class="bi bi-hourglass-split"></i> In Progress
            </a>

            <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.closed') ? 'active' : '' }}"
               href="{{ route('ticket.closed') }}">
                <i class="bi bi-folder-x"></i> Closed
            </a>

            <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.create') ? 'active' : '' }}"
               href="{{ route('ticket.create') }}">
                <i class="bi bi-plus-circle"></i> New Ticket
            </a>

        </nav>
    </div>

    {{-- Mobile toolbar --}}
    <div class="customer-mobile-toolbar">

        <button type="button"
                class="btn btn-light btn-sm"
                id="toggleCustomerMenu">
            <i class="bi bi-list"></i> Menu
        </button>

        <span class="ticket-short-title">
            Ticket #{{ $ticket->st_no }}
        </span>

        <button type="button"
                class="btn btn-light btn-sm"
                id="toggleTicketInfo">
            <i class="bi bi-info-circle"></i> Info
        </button>

    </div>

    {{-- Ticket info backdrop --}}
    <div class="customer-info-backdrop" id="customerInfoBackdrop"></div>

    {{-- Success message --}}
    @if(session('success'))
        <div class="alert alert-success py-2 mb-2">
            {{ session('success') }}
        </div>
    @endif

    {{-- Validation errors --}}
    @if($errors->any())
        <div class="alert alert-danger py-2 mb-2">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="customer-chat-layout">

        {{-- ================= CHAT PANEL ================= --}}
        <section class="customer-chat-panel">

            {{-- Chat header --}}
            <div class="customer-chat-header">
                <div class="min-w-0">
                    <h5>Ticket #{{ $ticket->st_no }}</h5>

                    <div class="subtitle">
                        {{ $ticket->issueType->sit_name ?? 'Support' }}
                        &middot;
                        {{ $ticket->st_subject }}
                    </div>
                </div>

                <span class="badge
                    @if($ticket->st_status === 'Open')
                        bg-success
                    @elseif($ticket->st_status === 'In Progress')
                        bg-warning text-dark
                    @else
                        bg-secondary
                    @endif">
                    {{ $ticket->st_status }}
                </span>
            </div>

            {{-- Conversation history --}}
            <div class="customer-chat-messages" id="customerChatMessages">

                @forelse($ticket->comments as $comment)

                    @php
                        $isCustomer = $comment->user !== null;
                    @endphp

                    <div class="customer-chat-row {{ $isCustomer ? 'mine' : '' }}">

                        <div class="customer-chat-bubble">

                            {{-- Show staff name only; customer name remains hidden --}}
                            @if($comment->staff)
                                <div class="customer-chat-author">
                                    {{ $comment->staff->ul_name }}
                                    <span class="text-primary">(Support)</span>
                                </div>
                            @endif

                            <p class="customer-chat-text">{{ $comment->stc_comment }}</p>

                            {{-- Comment attachments --}}
                            @if($comment->attachments && $comment->attachments->count() > 0)
                                @foreach($comment->attachments as $attachment)
                                    <div>
                                        <a class="customer-attachment"
                                           href="{{ asset('storage/' . $attachment->stca_file_path) }}"
                                           target="_blank"
                                           rel="noopener">
                                            <i class="bi bi-paperclip"></i>
                                            {{ basename($attachment->stca_file_path) }}
                                        </a>
                                    </div>
                                @endforeach
                            @endif

                            <div class="customer-chat-time">
                                {{ $comment->created_at?->format('d M Y, h:i A') }}
                            </div>

                        </div>
                    </div>

                @empty
                    <div class="text-center text-muted py-4">
                        No replies yet. Send a message to start the conversation.
                    </div>
                @endforelse

            </div>

            {{-- ================= REPLY COMPOSER ================= --}}
            <div class="customer-chat-composer">

                @if($ticket->st_status !== 'Closed')

                    <form method="POST"
                          action="{{ route('ticket.reply.store', $ticket->st_id) }}"
                          enctype="multipart/form-data">

                        @csrf

                        <textarea name="stc_comment"
                                  class="form-control"
                                  rows="1"
                                  placeholder="Type your reply..."
                                  required>{{ old('stc_comment') }}</textarea>

                        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">

                            <div class="min-w-0">
                                <input type="file"
                                       name="attachments[]"
                                       class="form-control file-input"
                                       multiple
                                       accept=".jpg,.jpeg,.png,.mp4,.mp3,.wav">

                                <small>JPG, PNG, MP4, MP3, WAV · Max 10MB each</small>
                            </div>

                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-send me-1"></i> Send Reply
                            </button>

                        </div>
                    </form>

                @else

                    <div class="alert alert-secondary mb-0 py-2">
                        <i class="bi bi-lock"></i>
                        This ticket is closed and cannot receive new replies.
                    </div>

                @endif

            </div>

        </section>

        {{-- ================= TICKET DETAILS SIDEBAR ================= --}}
        <aside class="customer-info-panel" id="customerInfoPanel">

            <div class="customer-info-section">

                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="mb-0">Ticket Details</h6>

                    {{-- Close button visible on mobile --}}
                    <button type="button"
                            class="btn btn-sm btn-light d-md-none"
                            id="closeTicketInfo"
                            aria-label="Close ticket details">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>

                <div class="mb-3">
                    <span class="badge
                        @if($ticket->st_status === 'Open')
                            bg-success
                        @elseif($ticket->st_status === 'In Progress')
                            bg-warning text-dark
                        @else
                            bg-secondary
                        @endif">
                        {{ $ticket->st_status }}
                    </span>
                </div>

                <div class="customer-info-item">
                    <div class="customer-info-label">Ticket Number</div>
                    <div class="customer-info-value">
                        #{{ $ticket->st_no }}
                    </div>
                </div>

                <div class="customer-info-item">
                    <div class="customer-info-label">Subject</div>
                    <div class="customer-info-value">
                        {{ $ticket->st_subject }}
                    </div>
                </div>

                <div class="customer-info-item">
                    <div class="customer-info-label">Issue Type</div>
                    <div class="customer-info-value">
                        {{ $ticket->issueType->sit_name ?? 'N/A' }}
                    </div>
                </div>

                <div class="customer-info-item">
                    <div class="customer-info-label">Assigned To</div>
                    <div class="customer-info-value">
                        {{ $ticket->assignedTo->ul_name ?? 'Unassigned' }}
                    </div>
                </div>

                <div class="customer-info-item mb-0">
                    <div class="customer-info-label">Created At</div>
                    <div class="customer-info-value">
                        {{ $ticket->created_at?->format('d M Y, h:i A') }}
                    </div>
                </div>

            </div>

            {{-- Original request and ticket attachments --}}
            <div class="customer-info-section">

                <h6>
                    <i class="bi bi-chat-left-text me-1"></i>
                    Original Request
                </h6>

                <p class="customer-chat-text">{{ $ticket->st_description }}</p>

                @if($ticket->attachments && $ticket->attachments->count() > 0)
                    <div class="mt-2">
                        <strong>Attachments</strong>

                        @foreach($ticket->attachments as $attachment)
                            <div>
                                <a class="customer-attachment"
                                   href="{{ asset('storage/' . $attachment->sta_file_path) }}"
                                   target="_blank"
                                   rel="noopener">
                                    <i class="bi bi-paperclip"></i>
                                    {{ basename($attachment->sta_file_path) }}
                                </a>
                            </div>
                        @endforeach
                    </div>
                @endif

            </div>

            <div class="p-3">
                <a href="{{ route('ticket.index') }}"
                   class="btn btn-light btn-sm w-100">
                    <i class="bi bi-arrow-left me-1"></i>
                    Back to Tickets
                </a>
            </div>

        </aside>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {

    const chat = document.getElementById('customerChatMessages');
    const textarea = document.querySelector('.customer-chat-composer textarea');

    const menuButton = document.getElementById('toggleCustomerMenu');
    const navigation = document.getElementById('customerNavigation');

    const infoButton = document.getElementById('toggleTicketInfo');
    const infoPanel = document.getElementById('customerInfoPanel');
    const closeInfoButton = document.getElementById('closeTicketInfo');
    const backdrop = document.getElementById('customerInfoBackdrop');

    /* Scroll to the latest message */
    function scrollChatToBottom() {
        if (chat) {
            chat.scrollTop = chat.scrollHeight;
        }
    }

    scrollChatToBottom();

    /* Auto-grow reply textarea */
    if (textarea) {
        textarea.addEventListener('input', function () {
            this.style.height = '36px';
            this.style.height = Math.min(this.scrollHeight, 75) + 'px';
        });
    }

    /* Mobile navigation menu */
    if (menuButton && navigation) {
        menuButton.addEventListener('click', function () {
            navigation.classList.toggle('menu-open');
        });
    }

    /* Close ticket information drawer */
    function closeTicketInfo() {
        if (infoPanel) {
            infoPanel.classList.remove('info-open');
        }

        if (backdrop) {
            backdrop.classList.remove('backdrop-open');
        }
    }

    /* Open / close ticket information */
    if (infoButton && infoPanel && backdrop) {
        infoButton.addEventListener('click', function () {

            const isOpen = infoPanel.classList.contains('info-open');

            if (isOpen) {
                closeTicketInfo();
            } else {
                infoPanel.classList.add('info-open');
                backdrop.classList.add('backdrop-open');

                if (navigation) {
                    navigation.classList.remove('menu-open');
                }
            }
        });
    }

    if (closeInfoButton) {
        closeInfoButton.addEventListener('click', closeTicketInfo);
    }

    if (backdrop) {
        backdrop.addEventListener('click', closeTicketInfo);
    }

    /* Escape key closes mobile overlays */
    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape') {
            closeTicketInfo();

            if (navigation) {
                navigation.classList.remove('menu-open');
            }
        }
    });

    /* Close mobile menu after choosing a navigation link */
    if (navigation) {
        navigation.querySelectorAll('a').forEach(function (link) {
            link.addEventListener('click', function () {
                navigation.classList.remove('menu-open');
            });
        });
    }

});
</script>

@endsection