@extends('user::layouts.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 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">
                <h2>Message list</h2>
                <div>
                    <a class="btn btn-primary btn-black" href="{{ route('author.conversations.index') }}">Back</a>
                </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('user.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