@extends('admin.layouts.app')

@section('title', 'Support Ticket | EMI CREDITS Admin')

@section('page-title', 'Support Ticket')

@section('page-description', 'Client support conversation')

@section('content')

@push('styles')
<link rel="stylesheet" href="{{ asset('admin/css/support-show.css') }}">
@endpush

<div class="support-content">


    {{-- BACK --}}

    <a
        href="{{ route('admin.support.index') }}"
        class="back-link"
    >
        ← Back to Support
    </a>


    {{-- 
        Intentionally no success alert here.
        Reply/status update should not show green message.
    --}}


    {{-- =========================
         TICKET HEADER
    ========================== --}}

    <div class="ticket-header">

        <div class="ticket-title-row">

            <div class="ticket-main-info">

                <div class="ticket-title">
                    {{ $ticket->subject }}
                </div>

                <div class="ticket-client">

                    Client:
                    <strong>
                        {{ $ticket->client->name ?? 'Unknown' }}
                    </strong>

                    @if($ticket->client)

                        · {{ $ticket->client->email }}

                    @endif

                </div>

            </div>


            {{-- STATUS --}}

            <div>

                @if($ticket->status === 'pending')

                    <span class="status status-pending">

                        <span class="status-dot"></span>

                        Pending

                    </span>

                @elseif($ticket->status === 'in_progress')

                    <span class="status status-progress">

                        <span class="status-dot"></span>

                        In Progress

                    </span>

                @else

                    <span class="status status-closed">

                        <span class="status-dot"></span>

                        Closed

                    </span>

                @endif

            </div>

        </div>


        {{-- =========================
             STATUS UPDATE
        ========================== --}}

        <div class="status-box">

            <form
                method="POST"
                action="{{ route('admin.support.status', $ticket) }}"
            >

                @csrf
                @method('PATCH')

                <label>
                    Ticket Status
                </label>

                <select
                    name="status"
                    class="status-select"
                >

                    <option
                        value="pending"
                        @selected($ticket->status === 'pending')
                    >
                        Pending
                    </option>

                    <option
                        value="in_progress"
                        @selected($ticket->status === 'in_progress')
                    >
                        In Progress
                    </option>

                    <option
                        value="closed"
                        @selected($ticket->status === 'closed')
                    >
                        Closed
                    </option>

                </select>

                <button
                    type="submit"
                    class="status-btn"
                >
                    Update Status
                </button>

            </form>

        </div>

    </div>


    {{-- =========================
         CHAT
    ========================== --}}

    <div class="chat-card">


        {{-- CHAT HEADER --}}

        <div class="chat-header">

            <div class="chat-header-left">

                <div class="chat-header-icon">

                    <svg
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M20 11.5a7.5 7.5 0 0 1-7.5 7.5H7l-4 2v-4.5A7.5 7.5 0 1 1 20 11.5Z"/>
                    </svg>

                </div>

                <div>

                    <div class="chat-header-title">
                        Conversation
                    </div>

                    <div class="chat-header-sub">
                        Client support messages
                    </div>

                </div>

            </div>


            <span class="online-dot"></span>

        </div>


        {{-- =========================
             CHAT BODY
        ========================== --}}

        <div
            class="chat-body"
            id="chatBody"
        >

            @forelse($ticket->messages as $message)

                @php

                    $isAdmin =
                        $message->user_id === auth()->id();

                    $clientName =
                        $ticket->client->name ?? 'Client';

                @endphp


                <div
                    class="message-row {{ $isAdmin ? 'admin' : 'client' }}"
                >

                    <div class="message-wrap">


                        {{-- AVATAR --}}

                        <div
                            class="message-avatar {{ $isAdmin ? 'admin' : 'client' }}"
                        >

                            @if($isAdmin)

                                A

                            @else

                                {{ strtoupper(substr($clientName, 0, 1)) }}

                            @endif

                        </div>


                        {{-- MESSAGE --}}

                        <div
                            class="message {{ $isAdmin ? 'admin' : 'client' }}"
                        >


                            <div class="message-user">

                                @if($isAdmin)

                                    Admin

                                @else

                                    {{ $clientName }}

                                @endif

                            </div>


                            <div class="message-content">

                                {!! nl2br(e($message->message)) !!}

                            </div>


                            <div class="message-time">

                                {{ $message->created_at
                                    ? $message->created_at->format('d M Y, h:i A')
                                    : ''
                                }}

                            </div>


                        </div>

                    </div>

                </div>


            @empty


                <div class="empty-chat">

                    <div class="empty-chat-icon">

                        <svg
                            width="21"
                            height="21"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >

                            <path d="M20 11.5a7.5 7.5 0 0 1-7.5 7.5H7l-4 2v-4.5A7.5 7.5 0 1 1 20 11.5Z"/>

                            <path d="M8 11h.01"/>
                            <path d="M12 11h.01"/>
                            <path d="M16 11h.01"/>

                        </svg>

                    </div>


                    <strong>
                        No messages yet
                    </strong>

                    <span>
                        Start the conversation with the client.
                    </span>

                </div>


            @endforelse

        </div>


        {{-- =========================
             REPLY
        ========================== --}}

        <div class="reply-box">


            @if($ticket->status === 'closed')


                <div class="closed-notice">

                    This ticket is closed.
                    You cannot send a reply.

                </div>


            @else


                <form
                    method="POST"
                    action="{{ route('admin.support.message', $ticket) }}"
                    class="reply-form"
                    id="replyForm"
                >

                    @csrf


                    <div class="reply-input-wrap">

                        <textarea
                            name="message"
                            id="replyMessage"
                            class="reply-textarea"
                            placeholder="Type your reply..."
                            required
                            maxlength="2000"
                            autocomplete="off"
                        ></textarea>

                    </div>


                    <button
                        type="submit"
                        class="send-btn"
                        id="sendBtn"
                    >

                        <svg
                            class="send-icon"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >

                            <path d="M22 2L11 13"/>

                            <path d="M22 2L15 22L11 13L2 9L22 2Z"/>

                        </svg>

                        <span class="send-text">
                            Send
                        </span>

                    </button>

                </form>


            @endif


        </div>

    </div>

</div>

@endsection


@push('scripts')

<script>

document.addEventListener(
    'DOMContentLoaded',
    function () {

        /*
        |--------------------------------------------------------------------------
        | Scroll chat to bottom
        |--------------------------------------------------------------------------
        */

        const chatBody =
            document.getElementById('chatBody');

        if (chatBody) {

            chatBody.scrollTop =
                chatBody.scrollHeight;

        }


        /*
        |--------------------------------------------------------------------------
        | Enter = Send
        | Shift + Enter = New Line
        |--------------------------------------------------------------------------
        */

        const textarea =
            document.getElementById('replyMessage');

        const form =
            document.getElementById('replyForm');

        if (textarea && form) {

            textarea.addEventListener(
                'keydown',
                function (event) {

                    if (
                        event.key === 'Enter' &&
                        !event.shiftKey
                    ) {

                        event.preventDefault();

                        if (
                            textarea.value.trim() !== ''
                        ) {

                            form.submit();

                        }

                    }

                }
            );

        }


        /*
        |--------------------------------------------------------------------------
        | Prevent double submit
        |--------------------------------------------------------------------------
        */

        if (form) {

            form.addEventListener(
                'submit',
                function () {

                    const button =
                        document.getElementById('sendBtn');

                    if (button) {

                        button.disabled = true;

                        button.style.opacity = '0.65';

                        button.style.cursor = 'not-allowed';

                    }

                }
            );

        }

    }
);

</script>

@endpush