@extends('panel.layouts.master')
@section('content')
    @php
        use App\Models\Plan;
    @endphp
    <style>
        .is_reply {
            color: #fff !important;
            background: rgb(var(--color-primary) / .8) !important;
        }
    </style>
    <div
        class="content transition-[margin,width] duration-100 rtl:xl:pr-3.5 ltr:xl:pl-3.5 pt-[54px] relative z-10 group mode content--compact rtl:xl:mr-[275px] ltr:xl:ml-[275px] mode--light rtl:[&.content--compact]:xl:mr-[91px] ltr:[&.content--compact]:xl:ml-[91px]">
        <div class="px-5 mt-16">
            <div class="container">
                <div class="grid grid-cols-12 gap-x-6 gap-y-10">
                    <div class="col-span-12">
                        <div class="mt-3.5 flex flex-col gap-x-6 gap-y-10 lg:flex-row">
                            @cannot('user')
                                <div class="w-full flex-none lg:w-[23rem]">
                                    <div class="flex flex-col gap-y-7">
                                        <div class="box box--stacked flex flex-col p-2">
                                            <ul data-tw-merge="" role="tablist"
                                                class="p-0.5 border rounded-lg dark:border-darkmode-400 w-full flex border-transparent bg-transparent">
                                                <li id="example-1-tab" data-tw-merge="" role="presentation"
                                                    class="focus-visible:outline-none flex-1 rtl:first:rounded-r-[0.6rem] ltr:first:rounded-l-[0.6rem] rtl:last:rounded-l-[0.6rem] ltr:last:rounded-r-[0.6rem] [&[aria-selected='true']_button]:border-primary/[0.15] [&[aria-selected='true']_button]:bg-primary/[0.04] [&[aria-selected='true']_button]:font-medium [&[aria-selected='true']_button]:text-primary [&[aria-selected='true']_button]:shadow-sm">
                                                    <button data-tw-merge="" data-tw-target="#example-1" role="tab"
                                                            class="cursor-pointer appearance-none px-3 border border-transparent transition-colors dark:text-slate-400 [&.active]:text-slate-700 dark:border-transparent [&.active]:border [&.active]:shadow-sm [&.active]:font-medium [&.active]:border-slate-200 [&.active]:bg-white [&.active]:dark:text-slate-300 [&.active]:dark:bg-darkmode-400 [&.active]:dark:border-darkmode-400 active flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-[0.6rem] py-3 text-slate-500">
                                                        <i data-tw-merge="" data-lucide="messages-square"
                                                           class="h-4 w-4 stroke-[1.4]"></i>
                                                        چت ها
                                                        {{--                                                                                                            <span--}}
                                                        {{--                                                                                                                class="flex min-w-[1.15rem] items-center justify-center rounded-full bg-white text-xs">--}}
                                                        {{--                                                                                                                        <span--}}
                                                        {{--                                                                                                                            class="block h-full w-full rounded-full bg-theme-1/[0.75] px-1.5 py-0.5 leading-none text-white">--}}
                                                        {{--                                                                                                                            8--}}
                                                        {{--                                                                                                                        </span>--}}
                                                        {{--                                                                                                                    </span>--}}
                                                    </button>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="box box--stacked flex flex-col p-5">
                                            <div class="tab-content">
                                                <div data-transition="" data-selector=".active"
                                                     data-enter="transition-[visibility,opacity] ease-linear duration-150"
                                                     data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0"
                                                     data-enter-to="visible opacity-100"
                                                     data-leave="transition-[visibility,opacity] ease-linear duration-150"
                                                     data-leave-from="visible opacity-100"
                                                     data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0"
                                                     id="example-1" role="tabpanel" aria-labelledby="example-1-tab"
                                                     class="tab-pane active">
                                                    <div class="">
                                                        <div class="relative">
                                                            <i data-tw-merge="" data-lucide="search"
                                                               class="absolute inset-y-0 rtl:right-0 ltr:left-0 z-10 my-auto rtl:mr-4 ltr:ml-4 h-4 w-4 stroke-[1.3] text-slate-500/90"></i>
                                                            <input data-tw-merge="" type="text"
                                                                   placeholder="جستجوی پیام‌ها..."
                                                                   class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 rounded-full py-2.5 rtl:pr-10 ltr:pl-10">
                                                        </div>
                                                        <div class="mt-4 flex flex-col gap-1">
                                                            @foreach($others as $item)
                                                                @php
                                                                    $lastTicket = \App\Models\Ticket::whereChid($item->id)->orderByDesc('id')->first();
                                                                    $count = \App\Models\Ticket::whereChid($item->id)->whereNot('send_id', $authUser->id)->whereNull('read_at')->count();
                                                                    $name = 'ارتباط با مشاور تخصصی سیکس پک';
                                                                    $ticketUser = 'receiver';
                                                                    $avatar = asset('dist/images/pack-icons/gap-time.png');
                                                                    if(\Illuminate\Support\Facades\Gate::allows('adviser')){
                                                                        $ticketUser = 'sender';
                                                                        $avatar = $item->$ticketUser->avatar_file;
                                                                        $name = $item->$ticketUser->full_name;
                                                                    }
                                                                @endphp
                                                                <a href="{{ route('gaptimes.show', $item) }}">
                                                                    <div
                                                                        class="-mx-2 flex cursor-pointer items-center gap-4 rounded-lg px-2 py-2.5 hover:bg-slate-50">
                                                                        <div class="relative">
                                                                            <div
                                                                                class="image-fit h-12 w-12 overflow-hidden rounded-full border-2 border-slate-200/70">
                                                                                <img src="{{ $avatar }}"
                                                                                     style="object-fit: fill"
                                                                                     alt="{{ $name }}">
                                                                            </div>
                                                                        </div>
                                                                        <div class="w-full">
                                                                            <div class="flex w-full items-center">
                                                                                <div
                                                                                    class="max-w-[7rem] truncate font-medium md:max-w-[8rem]">
                                                                                    {{ $name }}
                                                                                </div>
                                                                                <div
                                                                                    class="rtl:mr-auto ltr:ml-auto flex items-center gap-2">
                                                                                    <i data-tw-merge=""
                                                                                       data-lucide="check-check"
                                                                                       class="h-3.5 w-3.5 stroke-[1.4] text-slate-500/90"></i>
                                                                                    <div
                                                                                        class="text-xs text-slate-500/90">
                                                                                        {{ $lastTicket ? verta($lastTicket->created_at)->format('m/d H:i') : '' }}
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="mt-1.5 flex items-center">
                                                                                <div
                                                                                    class="max-w-[7rem] truncate text-slate-500/90 md:max-w-[10rem]">
                                                                                    {{ $lastTicket ? \Illuminate\Support\Str::limit($lastTicket->message, 50, '...') : '' }}
                                                                                </div>
                                                                                @if($count)
                                                                                    <div
                                                                                        class="rtl:mr-auto ltr:ml-auto flex items-center gap-2">
                                                                                        <div
                                                                                            class="flex min-w-[1.15rem] items-center justify-center rounded-full bg-white text-xs">
                                                                                            <div
                                                                                                class="h-full w-full rounded-full bg-theme-1/[0.75] px-1.5 py-0.5 leading-none text-white">
                                                                                                {{ $count }}
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                @endif
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endcannot
                            @php
                                $ticketUser = 'receiver';
                                $name = 'ارتباط با مشاور تخصصی سیکس پک';
                                $avatar = asset('dist/images/pack-icons/gap-time.png');
                                if(\Illuminate\Support\Facades\Gate::any(['admin', 'adviser'])){
                                    $ticketUser = 'sender';
                                    $avatar = $data->$ticketUser->avatar_file;
                                    $name = $data->$ticketUser->full_name;
                                }
                            @endphp
                            <div class="flex w-full flex-col gap-y-7">
                                @cannot('user')
                                    <div class="box box--stacked flex flex-col p-2">
                                        <div
                                            class="mt-2.5 flex flex-col items-center justify-center gap-x-5 gap-y-2 sm:flex-row">
                                            <div class="flex items-center text-slate-500">
                                                <i data-tw-merge="" data-lucide="calendar"
                                                   class="rtl:ml-1.5 ltr:mr-1.5 h-3.5 w-3.5 stroke-[1.3]"></i>
                                                {{ $data->sender->is_special == 0 ? 'هفته' : '' }}
                                                {{ $data->sender->week }}
                                            </div>
                                            <div class="flex items-center text-slate-500">
                                                <i data-tw-merge="" data-lucide="book-up"
                                                   class="rtl:ml-1.5 ltr:mr-1.5 h-3.5 w-3.5 stroke-[1.3]"></i>
                                                رشته {{ $data->sender->field->name ?? '-' }}
                                            </div>
                                            @if($data->sender->is_farhangian)
                                                <div class="flex items-center text-slate-500">
                                                    <i data-tw-merge="" data-lucide="presentation"
                                                       class="rtl:ml-1.5 ltr:mr-1.5 h-3.5 w-3.5 stroke-[1.3]"></i>
                                                    متقاضی کنکور
                                                    فرهنگیان {{ Plan::IS_FARHANGIAN[$data->sender->is_farhangian] }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @endcannot
                                <div class="box box--stacked flex flex-col p-5" style="height: 80vh">
                                    @can('user')
                                        <div role="alert"
                                             class="alert mb-3 relative border rounded-md px-5 py-4 bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning dark:border-warning dark:border-opacity-20 flex items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                 stroke-linecap="round" stroke-linejoin="round"
                                                 data-lucide="alert-circle"
                                                 class="lucide lucide-alert-circle stroke-[1] rtl:ml-2 ltr:mr-2 h-6 w-6">
                                                <circle cx="12" cy="12" r="10"></circle>
                                                <line x1="12" x2="12" y1="8" y2="12"></line>
                                                <line x1="12" x2="12.01" y1="16" y2="16"></line>
                                            </svg>
                                            حداکثر تا 24 ساعت آینده پاسخ شما داده میشود.
                                        </div>
                                    @endcan
                                    <div class="grid grid-cols-6 items-center gap-3.5 border-b border-dashed pb-5">
                                        <div class="flex items-center gap-3">
                                            <div>
                                                <div
                                                    class="image-fit h-12 w-12 overflow-hidden rounded-full border-[3px] border-slate-200/70">
                                                    <img src="{{ $avatar }}"
                                                         alt="{{ $name }}" style="object-fit: fill">
                                                </div>
                                            </div>
                                            <div>
                                                <div class="max-w-[9rem] truncate font-medium md:max-w-none">
                                                    {{ $name }}
                                                </div>
                                            </div>
                                        </div>
                                        @can('admin')
                                            <div class="flex items-center justify-end gap-3">
                                                <div>
                                                    <div class="max-w-[9rem] truncate font-medium md:max-w-none">
                                                        {{ $data->receiver->full_name }}
                                                    </div>
                                                </div>
                                                <div>
                                                    <div
                                                        class="image-fit h-12 w-12 overflow-hidden rounded-full border-[3px] border-slate-200/70">
                                                        <img src="{{ asset('dist/images/pack-icons/gap-time.png') }}"
                                                             alt="{{ $data->receiver->full_name }}"
                                                             style="object-fit: fill">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="flex items-center">
                                                <input name="showDeletedMsg" id="showDeletedMsg"
                                                       autocomplete="off"
                                                       type="checkbox"
                                                       class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&amp;[type='radio']]:checked:bg-primary [&amp;[type='radio']]:checked:border-primary [&amp;[type='radio']]:checked:border-opacity-10 [&amp;[type='checkbox']]:checked:bg-primary [&amp;[type='checkbox']]:checked:border-primary [&amp;[type='checkbox']]:checked:border-opacity-10 [&amp;:disabled:not(:checked)]:bg-slate-100 [&amp;:disabled:not(:checked)]:cursor-not-allowed [&amp;:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&amp;:disabled:checked]:opacity-70 [&amp;:disabled:checked]:cursor-not-allowed [&amp;:disabled:checked]:dark:bg-darkmode-800/50 w-[38px] h-[24px] p-px rounded-full relative before:w-[20px] before:h-[20px] before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] rtl:before:transition-[margin-right] ltr:before:transition-[margin-left] before:duration-200 before:ease-in-out before:absolute before:inset-y-0 before:my-auto before:rounded-full before:dark:bg-darkmode-600 checked:bg-primary checked:border-primary checked:bg-none rtl:before:checked:mr-[14px] ltr:before:checked:ml-[14px] before:checked:bg-white"
                                                       id="product-status-active">
                                                <label for="showDeletedMsg"
                                                       class="cursor-pointer rtl:mr-2 ltr:ml-2">نمایش پیام های پاک
                                                    شده</label>
                                            </div>
                                        @endcan
                                    </div>
                                    <div
                                        class="chatbox scrollable-ref h-[46.6rem] -mx-3 overflow-y-auto [&:-webkit-scrollbar]:w-0 [&:-webkit-scrollbar]:bg-transparent [&_.simplebar-content]:p-0 [&_.simplebar-track.simplebar-vertical]:w-[10px] [&_.simplebar-track.simplebar-vertical]:mr-0.5 [&_.simplebar-track.simplebar-vertical_.simplebar-scrollbar]:before:bg-slate-400/20">
                                        <div class="flex flex-col gap-3.5 px-3 py-5">
                                            @foreach($tickets as $item)
                                                @php
                                                    $avatar = $item->sender->role == 'adviser' ? asset('dist/images/pack-icons/gap-time.png') : $item->sender->avatar_file;
                                                @endphp
                                                @if($item->type == 'text')
                                                    {{--                                            Text--}}
                                                    <div
                                                        class="{{ !is_null($item->deleted_at) ? 'deleted hidden' : '' }} max-w-[85%] sm:max-w-none relative rtl:ml-auto ltr:mr-auto group rtl:[&.right]:ml-0 ltr:[&.right]:mr-0 rtl:[&.right]:mr-auto ltr:[&.right]:ml-auto flex items-end gap-3 [&.right]:flex-row-reverse {{ $item->sender->id != $authUser->id ? 'right' : '' }}">
                                                        <div class="hidden sm:block">
                                                            <div
                                                                class="image-fit h-12 w-12 overflow-hidden rounded-full border-[3px] border-slate-200/70">
                                                                <img src="{{ $avatar }}" style="object-fit: fill"
                                                                     alt="{{ $item->sender->full_name }}">
                                                            </div>
                                                        </div>
                                                        <div
                                                            style="{{ !is_null($item->deleted_at) ? 'opacity: 0.8' : '' }}"
                                                            data-id="{{ $item->id }}"
                                                            class="{{ is_null($item->deleted_at) ? 'bg-slate-50/80' : 'bg-danger text-white' }} chat-bubble rtl:rounded-l-xl ltr:rounded-r-xl rtl:rounded-tr-xl ltr:rounded-tl-xl border border-slate-200/80  px-4 pb-4 pt-3 rtl:group-[.right]:rounded-r-xl ltr:group-[.right]:rounded-l-xl rtl:group-[.right]:rounded-bl-none ltr:group-[.right]:rounded-br-none rtl:group-[.right]:text-left ltr:group-[.right]:text-right">
                                                            @if($item->reply)
                                                                <div class="p-2 pr-3 mb-2 bg-slate-300/80 rounded">
                                                                    @if($item->reply->type == 'text')
                                                                        <p class="mb-2">پاسخ
                                                                            : {{ \Illuminate\Support\Str::limit($item->reply->message, 2000) }}</p>
                                                                    @elseif($item->reply->type == 'file')
                                                                        <p class="mb-2">پاسخ به فایل</p>
                                                                    @elseif($item->reply->type == 'voice')
                                                                        <p class="mb-2">پاسخ به ویس</p>
                                                                    @endif
                                                                </div>
                                                            @endif
                                                            <div>
                                                                <p style="overflow-wrap: break-word">{!! nl2br($item->message) !!}</p>
                                                            </div>
                                                            <div
                                                                class="mt-4 flex items-center gap-10 group-[.right]:flex-row-reverse">
                                                                <div
                                                                    class="rtl:ml-auto ltr:mr-auto flex items-center gap-2 rtl:group-[.right]:mr-auto ltr:group-[.right]:ml-auto rtl:group-[.right]:ml-0 ltr:group-[.right]:mr-0 group-[.right]:flex-row-reverse">
                                                                    <div class="text-xs text-slate-500/70">
                                                                        {{ verta($item->created_at)->format('Y/m/d H:i') }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @if(is_null($item->deleted_at))
                                                            <div data-tw-merge="" data-tw-placement="bottom-start"
                                                                 class="dropdown absolute inset-y-0 rtl:left-0 ltr:right-0 my-auto rtl:-ml-8 ltr:-mr-8 h-5 w-5 rtl:group-[.right]:right-0 ltr:group-[.right]:left-0 rtl:group-[.right]:-mr-8 ltr:group-[.right]:-ml-8">
                                                                <button data-tw-toggle="dropdown" aria-expanded="false"
                                                                        class="cursor-pointer h-5 w-5 text-slate-500"><i
                                                                        data-tw-merge="" data-lucide="more-vertical"
                                                                        class="stroke-[1] w-5 h-5 fill-slate-400/70 stroke-slate-400/70"></i>
                                                                </button>
                                                                <div data-transition="" data-selector=".show"
                                                                     data-enter="transition-all ease-linear duration-150"
                                                                     data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
                                                                     data-enter-to="!mt-1 visible opacity-100 translate-y-0"
                                                                     data-leave="transition-all ease-linear duration-150"
                                                                     data-leave-from="!mt-1 visible opacity-100 translate-y-0"
                                                                     data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
                                                                     class="dropdown-menu absolute z-[9999] hidden">
                                                                    <div data-tw-merge=""
                                                                         class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40">
                                                                        <a data-id="{{ $item->id }}"
                                                                           class="reply cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"><i
                                                                                data-tw-merge="" data-lucide="reply"
                                                                                class="stroke-[1] rtl:ml-2 ltr:mr-2 h-4 w-4"></i>
                                                                            پاسخ</a>
                                                                        @if($item->sender->id == auth()->id())
                                                                            <a data-id="{{ $item->id }}"
                                                                               data-msg="{{ $item->message }}"
                                                                               class="editMsg cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"><i
                                                                                    data-tw-merge=""
                                                                                    data-lucide="pencil"
                                                                                    class="stroke-[1] rtl:ml-2 ltr:mr-2 h-4 w-4"></i>
                                                                                ویرایش</a>
                                                                        @endif
                                                                        <a href="{{ route('gaptimes.message.delete', $item) }}"
                                                                           class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"><i
                                                                                data-tw-merge="" data-lucide="trash"
                                                                                class="stroke-[1] rtl:ml-2 ltr:mr-2 h-4 w-4"></i>
                                                                            حذف</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                @elseif($item->type == 'image')
                                                    {{--                                                    Image--}}
                                                    <div
                                                        class="{{ !is_null($item->deleted_at) ? 'deleted hidden' : '' }} max-w-[85%] sm:max-w-none relative rtl:ml-auto ltr:mr-auto group rtl:[&.right]:ml-0 ltr:[&.right]:mr-0 rtl:[&.right]:mr-auto ltr:[&.right]:ml-auto flex items-end gap-3 [&.right]:flex-row-reverse {{ $item->sender->id != $authUser->id ? 'right' : '' }}">
                                                        <div class="hidden sm:block">
                                                            <div
                                                                class="image-fit h-12 w-12 overflow-hidden rounded-full border-[3px] border-slate-200/70">
                                                                <img src="{{ $avatar }}"
                                                                     alt="{{ $item->sender->full_name }}">
                                                            </div>
                                                        </div>
                                                        <div
                                                            style="{{ !is_null($item->deleted_at) ? 'opacity: 0.8' : '' }}"
                                                            data-id="{{ $item->id }}"
                                                            class="{{ is_null($item->deleted_at) ? 'bg-slate-50/80' : 'bg-danger text-white' }} chat-bubble rtl:rounded-l-xl ltr:rounded-r-xl rtl:rounded-tr-xl ltr:rounded-tl-xl border border-slate-200/80 px-4 pb-4 pt-3 rtl:group-[.right]:rounded-r-xl ltr:group-[.right]:rounded-l-xl rtl:group-[.right]:rounded-bl-none ltr:group-[.right]:rounded-br-none rtl:group-[.right]:text-left ltr:group-[.right]:text-right">
                                                            @if($item->reply)
                                                                <div class="p-2 pr-3 mb-2 bg-slate-300/80 rounded">
                                                                    @if($item->reply->type == 'text')
                                                                        <p class="mb-2">پاسخ
                                                                            : {{ \Illuminate\Support\Str::limit($item->reply->message, 2000) }}</p>
                                                                    @elseif($item->reply->type == 'file')
                                                                        <p class="mb-2">پاسخ به فایل</p>
                                                                    @elseif($item->reply->type == 'voice')
                                                                        <p class="mb-2">پاسخ به ویس</p>
                                                                    @endif
                                                                </div>
                                                            @endif
                                                            @if(!is_null($item->message))
                                                                <div>
                                                                    <p>{!! nl2br($item->message) !!}</p>
                                                                </div>
                                                            @endif
                                                            <div
                                                                class="image-fit mb-4 mt-3 h-32 w-64 overflow-hidden rounded-lg rtl:group-[.right]:mr-auto ltr:group-[.right]:ml-auto">
                                                                <img data-action="zoom"
                                                                     src="{{ asset($item->file) }}"
                                                                     alt="تصویر"
                                                                     class="rounded-lg border p-0.5 saturate-150">
                                                            </div>
                                                            <div
                                                                class="mt-4 flex items-center gap-10 group-[.right]:flex-row-reverse">
                                                                <div
                                                                    class="rtl:ml-auto ltr:mr-auto flex items-center gap-2 rtl:group-[.right]:mr-auto ltr:group-[.right]:ml-auto rtl:group-[.right]:ml-0 ltr:group-[.right]:mr-0 group-[.right]:flex-row-reverse">
                                                                    <div class="text-xs text-slate-500/70">
                                                                        {{ verta($item->created_at)->format('Y/m/d H:i') }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @if(is_null($item->deleted_at))
                                                            <div data-tw-merge="" data-tw-placement="bottom-start"
                                                                 class="dropdown absolute inset-y-0 rtl:left-0 ltr:right-0 my-auto rtl:-ml-8 ltr:-mr-8 h-5 w-5 rtl:group-[.right]:right-0 ltr:group-[.right]:left-0 rtl:group-[.right]:-mr-8 ltr:group-[.right]:-ml-8">
                                                                <button data-tw-toggle="dropdown" aria-expanded="false"
                                                                        class="cursor-pointer h-5 w-5 text-slate-500"><i
                                                                        data-tw-merge="" data-lucide="more-vertical"
                                                                        class="stroke-[1] w-5 h-5 fill-slate-400/70 stroke-slate-400/70"></i>
                                                                </button>
                                                                <div data-transition="" data-selector=".show"
                                                                     data-enter="transition-all ease-linear duration-150"
                                                                     data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
                                                                     data-enter-to="!mt-1 visible opacity-100 translate-y-0"
                                                                     data-leave="transition-all ease-linear duration-150"
                                                                     data-leave-from="!mt-1 visible opacity-100 translate-y-0"
                                                                     data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
                                                                     class="dropdown-menu absolute z-[9999] hidden">
                                                                    <div data-tw-merge=""
                                                                         class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40">
                                                                        <a data-id="{{ $item->id }}"
                                                                           class="reply cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"><i
                                                                                data-tw-merge="" data-lucide="reply"
                                                                                class="stroke-[1] rtl:ml-2 ltr:mr-2 h-4 w-4"></i>
                                                                            پاسخ</a>
                                                                        <a href="{{ route('gaptimes.message.delete', $item) }}"
                                                                           class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"><i
                                                                                data-tw-merge="" data-lucide="trash"
                                                                                class="stroke-[1] rtl:ml-2 ltr:mr-2 h-4 w-4"></i>
                                                                            حذف</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                @elseif($item->type == 'voice')
                                                    {{--                                            Voice--}}
                                                    <div
                                                        class="max-w-[85%] sm:max-w-none relative rtl:ml-auto ltr:mr-auto group rtl:[&.right]:ml-0 ltr:[&.right]:mr-0 rtl:[&.right]:mr-auto ltr:[&.right]:ml-auto flex items-end gap-3 [&.right]:flex-row-reverse {{ $item->sender->id != $authUser->id ? 'right' : '' }}">
                                                        <div class="hidden sm:block">
                                                            <div
                                                                class="image-fit h-12 w-12 overflow-hidden rounded-full border-[3px] border-slate-200/70">
                                                                <img src="{{ $avatar }}" style="object-fit: fill"
                                                                     alt="{{ $item->sender->full_name }}">
                                                            </div>
                                                        </div>
                                                        <div data-id="{{ $item->id }}"
                                                             class="chat-bubble rtl:rounded-l-xl ltr:rounded-r-xl rtl:rounded-tr-xl ltr:rounded-tl-xl border border-slate-200/80 bg-slate-50/80 px-4 pb-4 pt-3 rtl:group-[.right]:rounded-r-xl ltr:group-[.right]:rounded-l-xl rtl:group-[.right]:rounded-bl-none ltr:group-[.right]:rounded-br-none rtl:group-[.right]:text-left ltr:group-[.right]:text-right">
                                                            @if($item->reply)
                                                                @if($item->reply->type == 'text')
                                                                    <p class="mb-2">پاسخ
                                                                        : {{ \Illuminate\Support\Str::limit($item->reply->message, 2000) }}</p>
                                                                @elseif($item->reply->type == 'file')
                                                                    <p class="mb-2">پاسخ به فایل</p>
                                                                @elseif($item->reply->type == 'voice')
                                                                    <p class="mb-2">پاسخ به ویس</p>
                                                                @endif
                                                            @endif
                                                            <div
                                                                class="mb-3 mt-3.5 flex items-center gap-3 group-[.right]:justify-end">
                                                                <audio controls class="hidde">
                                                                    <source src="{{ asset($item->file) }}"
                                                                            type="audio/mp3">
                                                                    <source src="{{ asset($item->file) }}"
                                                                            type="audio/wav">
                                                                    <source src="{{ asset($item->file) }}"
                                                                            type="audio/mpeg">
                                                                    <source src="{{ asset($item->file) }}"
                                                                            type="audio/ogg">
                                                                </audio>
{{--                                                                <a data-placement="top" title="پخش"--}}
{{--                                                                   class="tooltip cursor-pointer flex h-6 w-6 items-center justify-center rounded-full bg-primary/80 playVoice">--}}
{{--                                                                    <i--}}
{{--                                                                        data-tw-merge="" data-lucide="play"--}}
{{--                                                                        class="stroke-[1] rtl:-ml-0.5 ltr:-mr-0.5 h-3 w-3 fill-white/80"></i></a>--}}
{{--                                                                <div class="flex h-6 items-center gap-0.5">--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[15%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[25%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[35%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[45%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[40%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[30%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[20%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[25%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[35%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[45%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[40%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[30%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[40%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[50%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[70%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[100%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[90%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[70%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[50%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[40%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[30%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[40%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[45%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[35%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[25%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[15%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[15%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[25%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[35%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[45%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[40%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[30%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                    <div--}}
{{--                                                                        class="h-[20%] w-0.5 rounded-full bg-slate-300/80 [&.active]:bg-gradient-to-b [&.active]:from-theme-1/70 [&.active]:to-theme-2/70">--}}
{{--                                                                    </div>--}}
{{--                                                                </div>--}}
                                                            </div>
                                                            <div
                                                                class="mt-4 flex items-center gap-10 group-[.right]:flex-row-reverse">
                                                                <div
                                                                    class="rtl:ml-auto ltr:mr-auto flex items-center gap-2 rtl:group-[.right]:mr-auto ltr:group-[.right]:ml-auto rtl:group-[.right]:ml-0 ltr:group-[.right]:mr-0 group-[.right]:flex-row-reverse">
                                                                    <div class="text-xs text-slate-500/70">
                                                                        {{ verta($item->created_at)->format('Y/m/d H:i') }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @if(is_null($item->deleted_at))
                                                            <div data-tw-merge="" data-tw-placement="bottom-start"
                                                                 class="dropdown absolute inset-y-0 rtl:left-0 ltr:right-0 my-auto rtl:-ml-8 ltr:-mr-8 h-5 w-5 rtl:group-[.right]:right-0 ltr:group-[.right]:left-0 rtl:group-[.right]:-mr-8 ltr:group-[.right]:-ml-8">
                                                                <button data-tw-toggle="dropdown"
                                                                        aria-expanded="false"
                                                                        class="cursor-pointer h-5 w-5 text-slate-500">
                                                                    <i
                                                                        data-tw-merge=""
                                                                        data-lucide="more-vertical"
                                                                        class="stroke-[1] w-5 h-5 fill-slate-400/70 stroke-slate-400/70"></i>
                                                                </button>
                                                                <div data-transition="" data-selector=".show"
                                                                     data-enter="transition-all ease-linear duration-150"
                                                                     data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
                                                                     data-enter-to="!mt-1 visible opacity-100 translate-y-0"
                                                                     data-leave="transition-all ease-linear duration-150"
                                                                     data-leave-from="!mt-1 visible opacity-100 translate-y-0"
                                                                     data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
                                                                     class="dropdown-menu absolute z-[9999] hidden">
                                                                    <div data-tw-merge=""
                                                                         class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40">
                                                                        <a data-id="{{ $item->id }}"
                                                                           class="reply cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"><i
                                                                                data-tw-merge="" data-lucide="reply"
                                                                                class="stroke-[1] rtl:ml-2 ltr:mr-2 h-4 w-4"></i>
                                                                            پاسخ</a>
                                                                        <a href="{{ route('gaptimes.message.delete', $item) }}"
                                                                           class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"><i
                                                                                data-tw-merge=""
                                                                                data-lucide="trash"
                                                                                class="stroke-[1] rtl:ml-2 ltr:mr-2 h-4 w-4"></i>
                                                                            حذف</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                @endif
                                            @endforeach


                                        </div>
                                    </div>
                                    <div class="relative">
                                        <form action="{{ route('gaptimes.update', $data) }}" method="post"
                                              enctype="multipart/form-data">
                                            @csrf
                                            @method('PUT')
                                            <input type="hidden" name="receive_id"
                                                   value="{{ $data->receiver->id == $authUser->id ? $data->send_id : $data->receive_id }}">
                                            <input type="hidden" id="ticket_id" name="ticket_id"
                                                   value="">
                                            <input type="hidden" id="edit_id" name="edit_id"
                                                   value="">
                                            <input type="file" name="file" class="file-inp hidden">

                                            <div
                                                class="absolute mx-2 gap-x-2 inset-y-0 rtl:right-0 ltr:left-0 flex w-[4rem] items-center justify-center mic-container">
                                                <audio id="audio" class="hidden" controls></audio>
                                                <button type="button" data-user-id="{{ auth()->id() }}"
                                                        data-ticket-id="{{ $data->id }}"
                                                        data-receive-id="{{ $data->receiver->id == $authUser->id ? $data->send_id : $data->receive_id }}"
                                                        class="box flex ml-auto h-9 w-9 cursor-pointer items-center justify-center rounded-full border-transparent bg-primary recordVoice">
                                                    <i data-tw-merge=""
                                                       data-lucide="mic"
                                                       class="rtl:-mr-0.5 ltr:-ml-0.5 h-4 w-4 text-white"></i>
                                                </button>
                                            </div>
                                            <div class="main-controls">
                                                <canvas class="visualizer" style="display: none" height="60px"></canvas>
                                                <textarea data-tw-merge="" placeholder="پیام خود را بنویسید..."
                                                          style="padding-right: 4em; padding-left: 6em;"
                                                          name="message"
                                                          class="inp disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 -mb-1.5 resize-none rounded-xl"></textarea>
                                            </div>
                                            <div
                                                class="absolute mx-2 gap-x-2 inset-y-0 rtl:left-0 ltr:right-0 flex w-[4rem] items-center justify-center">
                                                <button type="button"
                                                        class="box file flex h-9 w-9 cursor-pointer items-center justify-center rounded border-transparent bg-primary">
                                                    <i data-tw-merge="" data-lucide="file"
                                                       class="rtl:-mr-0.5 ltr:-ml-0.5 h-4 w-4 text-white"></i>
                                                </button>
                                                <button type="submit"
                                                        class="box flex h-9 w-9 cursor-pointer items-center justify-center rounded border-transparent bg-primary">
                                                    <i data-tw-merge="" data-lucide="send"
                                                       class="rtl:-mr-0.5 ltr:-ml-0.5 h-4 w-4 text-white"></i>
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('dist/js/voice-recorder.js') }}"></script>
    <script>
        function scrollToBottom() {
            var chatBox = $('.chatbox');
            chatBox.scrollTop(chatBox[0].scrollHeight);
        }

        $(document).on('click', '.file', function (e) {
            $('.file-inp').trigger('click');
        })

        $('#showDeletedMsg').on('change', function () {
            $('.deleted').toggleClass('hidden')
        })

        $('.inp').on('input', function () {
            scrollToBottom();
        });

        $(document).on('click', '.reply', function (e) {
            e.preventDefault();
            let self = $(this);
            let id = self.data('id');
            let bubble = self.parents().find(`.chat-bubble[data-id="${id}"]`);
            console.log(bubble)
            $('#ticket_id').val(id);
            $('.is_reply').removeClass('is_reply');
            bubble.addClass('is_reply');
        })

        $(document).on('click', '.is_reply', function (e) {
            let self = $(this);
            self.removeClass('is_reply');
            $('#ticket_id').val(0);
        })

        $(document).on('click', '.editMsg', function (e) {
            e.preventDefault();
            let self = $(this);
            let id = self.data('id');
            let msg = self.data('msg')
            $('#edit_id').val(id);
            $('.inp').val(msg);
        })

        scrollToBottom()

        // $(document).on('click', '.playVoice', async function (e) {
        //     e.preventDefault();
        //     let self = $(this);
        //     let voice = self.siblings('audio')[0];
        //
        //     // بررسی آیفون
        //     let isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
        //
        //     if (!voice) {
        //         console.error("Audio element not found!");
        //         return;
        //     }
        //     if (isIOS) {
        //         // روش Web Audio API برای آیفون
        //         let audioURL = $(voice).children().first().attr('src');
        //
        //         if (!audioURL) {
        //             console.log("Audio URL not found!");
        //             return;
        //         }
        //
        //         let audioCtxx = new (window.AudioContext || window.webkitAudioContext)();
        //         let response = await fetch(audioURL);
        //         let arrayBuffer = await response.arrayBuffer();
        //         let audioBuffer = await audioCtxx.decodeAudioData(arrayBuffer);
        //         let source = audioCtxx.createBufferSource();
        //         source.buffer = audioBuffer;
        //         source.connect(audioCtxx.destination);
        //         source.start(0);
        //     } else {
        //         // روش استاندارد برای بقیه دستگاه‌ها
        //         if (voice.paused) {
        //             voice.play();
        //         } else {
        //             voice.pause();
        //         }
        //     }
        //
        //     toggleVoiceIcon(self);
        // });

        var audioCtxx;
        var source;
        var isPlaying = false;
        var startTime = 0;
        var pausedAt = 0;
        var audioBuffer;

        $(document).on('click', '.playVoice', async function (e) {
            e.preventDefault();
            let self = $(this);
            let voice = self.siblings('audio')[0];

            // بررسی آیفون
            let isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);

            if (!voice) {
                alert("Audio element not found!");
                return;
            }

            if (isIOS) {
                let audioURL = $(voice).children().first().attr('src');

                if (!audioURL) {
                    alert("Audio URL not found!");
                    return;
                }

                if (!audioCtxx) {
                    audioCtxx = new (window.AudioContext || window.webkitAudioContext)();
                }

                if (isPlaying) {
                    source.stop();
                    isPlaying = false;
                    pausedAt += audioCtxx.currentTime - startTime; // ذخیره موقعیت توقف
                    toggleVoiceIcon(self);
                    return;
                }

                if (!audioBuffer) {
                    let response = await fetch(audioURL);
                    let arrayBuffer = await response.arrayBuffer();
                    audioBuffer = await audioCtxx.decodeAudioData(arrayBuffer);
                }

                source = audioCtxx.createBufferSource();
                source.buffer = audioBuffer;
                source.connect(audioCtxx.destination);
                source.start(0, pausedAt); // ادامه از جایی که توقف شده بود
                startTime = audioCtxx.currentTime;
                isPlaying = true;

                source.onended = function () {
                    isPlaying = false;
                    pausedAt = 0; // بازنشانی بعد از پایان پخش
                };
            } else {
                // روش استاندارد برای بقیه دستگاه‌ها
                if (voice.paused) {
                    voice.play();
                } else {
                    voice.pause();
                }
            }

            toggleVoiceIcon(self);
        });


        function toggleVoiceIcon(el) {
            let self = el;
            let icon = self.children().data('lucide');
            if (icon === 'play') {
                self.html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="pause" data-tw-merge="" class="lucide lucide-pause stroke-[1] rtl:-ml-0.5 ltr:-mr-0.5 h-3 w-3 fill-white/80"><rect x="14" y="4" width="4" height="16" rx="1"/><rect x="6" y="4" width="4" height="16" rx="1"/></svg>');
            } else {
                self.html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" data-tw-merge="" class="lucide lucide-play stroke-[1] rtl:-ml-0.5 ltr:-mr-0.5 h-3 w-3 fill-white/80"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>');
            }
        }
    </script>
@endsection