@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Support Messages')

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.2.0/magnific-popup.css"
        integrity="sha512-UhvuUthI9VM4N3ZJ5o1lZgj2zNtANzr3zyucuZZDy67BO6Ep5+rJN2PST7kPj+fOI7M/7wVeYaSaaAICmIQ4sQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush

@section('content')
    <!-- chat section  -->
    <div class="flex h-full w-full bg-white rounded-lg sm:overflow-hidden border border-border">
        <div id="chat-sidebar"
            class="fixed lg:static top-0 left-0 z-50 p-4 lg:p-0 w-full lg:w-fit h-full lg:h-auto bg-white lg:bg-transparent lg:!translate-x-0 transition-all duration-300">
            <div class="w-full lg:max-w-[360px] xl:max-w-[460px] h-full py-5 border-r border-border grid">
                <div class="px-5">
                    <h3 class="">All Support</h3>
                    <div class="left-sides-icon-input mt-2 hidden">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M2.29102 9.58317C2.29102 13.6102 5.55561 16.8748 9.58268 16.8748C13.6098 16.8748 16.8743 13.6102 16.8743 9.58317C16.8743 5.55609 13.6098 2.2915 9.58268 2.2915C5.55561 2.2915 2.29102 5.55609 2.29102 9.58317ZM9.58268 18.1248C4.86525 18.1248 1.04102 14.3006 1.04102 9.58317C1.04102 4.86574 4.86525 1.0415 9.58268 1.0415C14.3001 1.0415 18.1243 4.86574 18.1243 9.58317C18.1243 11.7169 17.342 13.668 16.0484 15.165L18.7746 17.8912C19.0187 18.1353 19.0187 18.531 18.7746 18.7751C18.5305 19.0192 18.1348 19.0192 17.8907 18.7751L15.1645 16.0489C13.6675 17.3424 11.7164 18.1248 9.58268 18.1248Z"
                                fill="currentColor" />
                        </svg>
                        <input type="text" placeholder="Search " />
                    </div>
                </div>
                <div class="h-full overflow-y-auto thin-scrollbar divide-y divide-border w-full pt-5">
                    @foreach ($conversations as $conversation)
                        <a class="block border-border" href="{{ route('admin.conversations.show', $conversation->id) }}">
                            <div
                                class="p-5 flex items-start justify-between w-full hover:bg-gray transition-all duration-300 {{ $conversation->id == request()->id ? 'bg-main bg-opacity' : '' }}">
                                <div class="flex items-start gap-3 w-full">
                                    <div class="size-10 rounded-full relative mt-1.5">
                                        <img src="{{ $conversation?->user?->getFirstMediaUrl('avatar') }}"
                                            class="rounded-full" />
                                        <div
                                            class="absolute right-0 bottom-0.5 border-2 border-white bg-success size-2 rounded-full">
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <h3 class="font-semibold flex items-center justify-between gap-3 mb-0.5">
                                            {{ $conversation?->user?->name }}
                                            @if ($conversation?->unseen_message_count > 0)
                                                <span
                                                    class="size-5 flex justify-center items-center rounded-full bg-main text-white font-medium text-[10px] overflow-hidden">
                                                    {{ $conversation?->unseen_message_count }}
                                                </span>
                                            @endif
                                        </h3>
                                        <div class="flex items-start gap-2 justify-between">
                                            <h4 class="font-normal line-clamp-1 mt-0.5 text-paragraph flex-1">
                                                {{ $conversation?->latestMessage?->message ?? 'Not message yet.' }}
                                            </h4>
                                            <h4 class="font-normal text-paragraph">
                                                {{ $conversation?->latestMessage?->created_at->diffForHumans() }}</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="flex-1 h-full bg-white flex flex-col">
            <!-- header  -->
            <div class="flex justify-between items-center py-3 px-5 border-b border-border">
                <!-- profile side  -->
                <div class="relative z-20">
                    <a href="{{ route('admin.users.edit', $conversation?->user?->id) }}"
                        class="flex items-center gap-3.5 text-left">
                        <div class="flex items-center gap-2.5">
                            <div
                                class="size-10 rounded-full bg-white relative after:absolute after:content-[''] after:bottom-1 after:right-0 after:size-2 after:rounded-full after:bg-success after:border after:border-white">
                                <img src="{{ $conversation?->user?->getFirstMediaUrl('avatar') }}" alt=""
                                    class="rounded-full" />
                            </div>
                            <div class="hidden sm:block text-sm font-medium">
                                <h3 class="text-primary pb-1">{{ $conversation?->user?->name }}</h3>
                                <p class="text-12m">{{ $conversation?->user?->username ?? $conversation?->user?->email }}
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="flex items-center gap-2">
                    <a class="btn-primary px-4 py-2.5 mr-5"
                        href="{{ route('admin.users.edit', $conversation?->user?->id) }}">
                        View Profile
                    </a>
                    <div class="rounded-sm bg-border text-headline flex justify-center items-center p-1.5 py-5 lg:hidden"
                        onclick="document.querySelector('#chat-sidebar').classList.toggle('translate-x-full')">
                        <svg class="-rotate-90" width="10" height="5" viewBox="0 0 10 5" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M0.833984 0.833496L5.00065 4.16683L9.16732 0.833496" stroke="currentColor"
                                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                </div>
            </div>

            <!-- content  -->
            <div class="w-full h-[calc(100vh-300px)] sm:h-full overflow-y-auto sm-scroll px-4 pt-5" id="chat-content">
                <div class="grid gap-4">
                    @forelse ($conversation->messages as $msg)
                        @if ($msg->sender_id != auth()->id())
                            <!-- Left message (received) -->
                            <div class="max-w-[90%] w-fit">
                                <!-- Attachments for received messages -->
                                @if ($msg->attachment_path && count($msg->attachment_path) > 0)
                                    <div class="max-w-[90%] ml-auto w-fit flex gap-6 flex-wrap mt-2 justify-end">
                                        @if (is_array($msg->attachment_path) && count($msg->attachment_path) > 0)
                                            <div class="grid grid-cols-3 gap-3">
                                                @foreach ($msg->attachment_path as $key => $attachment)
                                                    <div class="attachment">
                                                        <img class="w-full max-h-52 popup-image rounded"
                                                            src="{{ asset($attachment['path']) }}">
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                @endif

                                @if ($msg->message)
                                    <div class="flex gap-3 items-end py-1.5 w-fit">
                                        <p class="whitespace-pre-line text-14 p-3 rounded bg-slate-50">
                                            {{ $msg->message }}
                                        </p>
                                        <p class="text-nowrap text-12 text-paragraph">
                                            {{ $msg->created_at->format('g:i A') }}
                                        </p>
                                    </div>
                                @endif

                            </div>
                        @else
                            <!-- Right message (sent) -->
                            <div class="max-w-[90%] ml-auto w-fit">
                                <!-- Attachments for sent messages -->
                                @if ($msg->attachment_path && count($msg->attachment_path) > 0)
                                    <div class="max-w-[90%] ml-auto w-fit flex gap-6 flex-wrap mt-2 justify-end">
                                        @if (is_array($msg->attachment_path) && count($msg->attachment_path) > 0)
                                            <div class="grid grid-cols-3 gap-3">
                                                @foreach ($msg->attachment_path as $key => $attachment)
                                                    <div class="attachment">
                                                        <a class="popup-image" href="{{ asset($attachment['path']) }}">
                                                            <img class="w-full max-h-52 rounded"
                                                                src="{{ asset($attachment['path']) }}">
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                @endif
                                @if ($msg->message)
                                    <div class="flex gap-3 items-end py-1.5 w-full">
                                        <p class="text-nowrap text-12 text-paragraph">
                                            {{ $msg->created_at->format('g:i A') }}
                                        </p>
                                        <p class="whitespace-pre-line text-14 p-3 rounded bg-main text-white">
                                            {{ $msg->message }}
                                        </p>
                                    </div>
                                @endif
                            </div>
                        @endif
                    @empty
                        <div class="empty-state text-center py-10">
                            <svg class="mx-auto mb-4 text-slate-300" width="64" height="64" viewBox="0 0 24 24"
                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <h6 class="font-semibold text-lg mb-2">No messages yet</h6>
                            <p class="text-slate-500">Start the conversation by sending a message below.</p>
                        </div>
                    @endforelse
                </div>
            </div>


            <!-- send box  -->
            <form action="{{ route('admin.conversations.send', $conversation->id) }}" method="POST" id="messageForm"
                enctype="multipart/form-data">
                @csrf
                <div class="flex items-start w-full px-5 gap-3.5 mb-5">
                    <div
                        class="border flex items-end gap-2 flex-col sm:flex-row border-border bg-input-bg rounded-lg w-full p-3 relative">
                        <div
                            class="w-full relative flex-col flex rounded text-headiline outline-none focus:outline-none transition-all duration-300">
                            <div class="flex items-center">
                                <textarea name="message" type="text" rows="4" placeholder="Type Message Here a message"
                                    class="w-full bg-transparent !outline-none leading-6 focus:outline-none text-headline border-0 focus:border-0 rounded"></textarea>
                            </div>
                            <div class="flex gap-2">
                                <ul id="fileList" class="flex gap-2 flex-wrap"></ul>
                                <ul id="ImageList" class="flex gap-2 flex-wrap"></ul>
                            </div>
                        </div>
                        <div class="absolute bottom-20 right-20">
                            <div class="flex gap-3 items-center justify-end">
                                <div class="flex gap-1.5 mr-1.5 items-center">
                                    <label for="image-attach"
                                        class="text-tu-gray hover:text-tu-dark-green cursor-pointer">
                                        <svg width="19" height="23" viewBox="0 0 19 23" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M0.839138 18.8602L0.820813 18.8813C0.57342 18.2618 0.417654 17.5583 0.353516 16.7812C0.417654 17.5478 0.591745 18.2407 0.839138 18.8602Z"
                                                fill="currentcolor" stroke="#CACACA" stroke-width="0.5" />
                                            <path
                                                d="M6.72174 9.79878C7.92615 9.79878 8.90244 8.67993 8.90244 7.29978C8.90244 5.91962 7.92615 4.80078 6.72174 4.80078C5.51735 4.80078 4.54102 5.91962 4.54102 7.29978C4.54102 8.67993 5.51735 9.79878 6.72174 9.79878Z"
                                                fill="currentcolor" stroke="#CACACA" stroke-width="0.5" />
                                            <path
                                                d="M13.3104 1H5.63211C2.2969 1 0.308594 3.2785 0.308594 7.1005V15.8995C0.308594 17.044 0.482685 18.0415 0.821704 18.8815C1.6097 20.8765 3.29563 22 5.63211 22H13.3104C16.6457 22 18.634 19.7215 18.634 15.8995V13.495V7.1005C18.634 3.2785 16.6457 1 13.3104 1ZM17.1404 12.025C16.4258 11.3215 15.2713 11.3215 14.5566 12.025L10.7449 15.7735C10.0302 16.477 8.87571 16.477 8.16102 15.7735L7.84948 15.4795C7.19893 14.8285 6.16355 14.7655 5.43054 15.3325L2.00369 17.968C1.80211 17.38 1.683 16.6975 1.683 15.8995V7.1005C1.683 4.1395 3.04824 2.575 5.63211 2.575H13.3104C15.8943 2.575 17.2596 4.1395 17.2596 7.1005V12.1405L17.1404 12.025Z"
                                                fill="currentcolor" stroke="#CACACA" stroke-width="0.5" />
                                        </svg>
                                    </label>
                                    <input type="file" name="attachment[]" id="image-attach" multiple
                                        accept="image/*"
                                        class="bg-transparent outline-none focus:outline-none w-0 overflow-hidden" />
                                </div>
                                <button type="submit" class="btn-primary px-6 py-2">Send</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.2.0/jquery.magnific-popup.min.js"
        integrity="sha512-fCRpXk4VumjVNtE0j+OyOqzPxF1eZwacU3kN3SsznRPWHgMTSSo7INc8aY03KQDBWztuMo5KjKzCFXI/a5rVYQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(document).ready(function() {
            $('.popup-image').magnificPopup({
                type: 'image',
                closeOnContentClick: true,
                mainClass: 'mfp-img-mobile',
                image: {
                    verticalFit: true
                }
            });

            $('#chat-content').animate({
                scrollTop: $('#chat-content')[0].scrollHeight
            }, 500);

        });
    </script>
@endpush