    @extends('tutor.layouts.layout')
    @section('title', 'Support and disputes')
    @section('content')
        <div class=" ">

            <div class="w-[full flex flex-col gap-3 mt-3 justify-between">
                <div class="grid sm:grid-cols-2 xl:grid-cols-3 grid-cols-1 xldesk:grid-cols-4 gap-4">


                    <div class="bg-white max-h-[155px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                        style="background-image: url('{{ asset('tutor/images/card-bg-1.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <img src="{{ asset('tutor/images/support-card-1.png') }}" />

                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Total Disputes</p>
                        <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">{{ $total_disputes }}</p>
                        <p class="text-[13.07px] Poppins-medium text-[#3F3F3F]">All Disputes</p>
                    </div>


                    <div class="bg-white max-h-[155px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                        style="background-image: url('{{ asset('tutor/images/card-bg-2.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <img src="{{ asset('tutor/images/support-card-2.png') }}" />

                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Open Disputes</p>
                        <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">{{ $open_disputes }}</p>
                        <p class="text-[13.07px] Poppins-medium text-[#3F3F3F]">Disputes that are under review</p>
                    </div>

                    <div class="bg-white max-h-38.75 p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                        style="background-image: url('{{ asset('tutor/images/card-bg-3.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <img src="{{ asset('tutor/images/support-card-3.png') }}" />
                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Resolved</p>
                        <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">{{ $resolved_disputes }}</p>
                        <p class="text-[13.07px] Poppins-medium text-[#3F3F3F]">Disputes that are resolved</p>
                    </div>
                    <div class="bg-white max-h-38.75 p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                        style="background-image: url('{{ asset('tutor/images/card-bg-red.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <img src="{{ asset('tutor/images/support-card-4.png') }}" />

                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Against You</p>
                        <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">{{ $against_disputes }}</p>
                        <p class="text-[13.07px] Poppins-medium text-[#3F3F3F]">disputes that are against you</p>
                    </div>
                </div>
                <div class="flex items-center gap-3 mt-2">
                    <img src="{{ asset('tutor/images/support-card-1.png') }}" alt="Disputes">
                    <p class="text-[#133754] Poppins-medium text-[20px] mb-2">
                        Disputes
                    </p>
                </div>
                {{-- <div class="flex gap-3">
                    <button onclick="window.location.href='{{ route('tutor.supportAndDispute') }}'"
                        class="cursor-pointer w-37.5 h-10.5 flex justify-center rounded-[5px] items-center   Poppins-medium text-[16px] border border-[#E5E5E5] {{ $against ? 'bg-[#FEFEFE] text-[#313131]' : 'bg-[#133754] text-[#FFFFFF]' }}">
                        By You
                    </button>
                    <button onclick="window.location.href='{{ route('tutor.supportAndDispute') }}?against=true'"
                        class="cursor-pointer w-37.5 h-10.5 flex border rounded-[5px] border-[#E5E5E5] justify-center items-center  Poppins text-sm {{ !$against ? 'bg-[#FEFEFE] text-[#313131]' : 'bg-[#133754] text-[#FFFFFF]' }}">
                        Against You
                    </button>
                </div> --}}
                <hr class="text-[#D7D7D7]">

                <div class="grid 2xl:grid-cols-4 lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 2xl:gap-4 gap-2">
                    @foreach ($disputes as $dispute)
                        <div class="lg:max-w-sm rounded-[5px] border border-[#DDDDDD] bg-white p-3  ">
                            <div class="flex justify-between items-end">
                                <div class="flex flex-col gap-3">

                                    <img src="{{ asset($dispute->OtherUser->userDefaultProfile) }}"
                                        class="h-19.5 w-19.5 rounded-[3px] object-cover" alt="Teacher" />
                                    <div>
                                        <h3 class="  text-[16px]  Inter-m text-[#133754]">{{ $dispute->OtherUser->name }}
                                        </h3>
                                        <p class="text-sm text-[#3B3B3B] Poppins">
                                            @if ($dispute->booking)
                                                {{ $dispute->booking->subjects()->pluck('subject_name')->join(' ,') }}
                                            @endif
                                        </p>
                                        <p class="text-sm text-[#3B3B3B] Poppins">Session ID:
                                            #{{ $dispute->session->session_id }}</p>
                                    </div>
                                </div>
                                <div class="flex flex-col gap-2 items-end">

                                    @if ($dispute->status=='under_review')
                                    <span
                                        class=" bg-[#00B200] rounded-[2.26px] px-5 py-1.5 text-sm text-white Poppins-medium">
                                            Under Review

                                        </span>
                                        @elseif($dispute->status=='pending')
                                        <span
                                        class=" bg-[#F4C701] rounded-[2.26px] px-5 py-1.5 text-sm text-white Poppins-medium">
                                        Pending
                                        </span>
                                            @else
                                               <span
                                        class=" bg-[#00B200] rounded-[2.26px] px-5 py-1.5 text-sm text-white Poppins-medium">
                                          Resolved

                                        </span>
                                        @endif

                                    <button
                                        class="rounded-[3px] Inter  bg-[#1CD8C4] border-[#1CD8C4] border px-6 py-1.25 text-[16px] font-semibold text-white">
                                        ${{ $dispute->session->amount }}/<span class="font-medium text-[13px]">hr</span>
                                    </button>
                                </div>
                            </div>

                            <hr class="my-2 text-[#D7D7D7]">

                            <div class="mt-4 flex justify-between  Poppins text-sm text-[#3B3B3B]">
                                <div class="flex items-center gap-3">
                                    <i class="fa-regular fa-calendar text-lg"></i>
                                    <span>{{ dateFormate($dispute->session->start_date, 'M d , Y') }}</span>
                                </div>

                                <div class="flex items-center gap-3">
                                    <i class="fa-regular fa-clock text-lg"></i>
                                    <span>{{ $dispute->session->start_time_formatted }} -
                                        {{ $dispute->session->end_time_formatted }}</span>
                                </div>


                            </div>

                            <div class="mt-4 flex justify-between items-center">
                                <p class="text-sm Poppins text-[#000000]">Total Fees</p>
                                <span
                                    class="rounded-[5px] bg-[#F2F2F2] px-7.75 py-1.25 text-[15px] font-semibold text-[#133754]">
                                    ${{ $dispute->amount }}
                                </span>
                            </div>

                            <div class="mt-3 flex justify-between items-center">
                                <p class="text-sm text-[#000000] Poppins">Payment Status</p>
                                <span
                                    class="rounded-[5px] Poppins-medium bg-[#F4C701] px-7.5 py-[7px] text-[13px]  text-black">
                                    {{ ucFirst($dispute->session->payment_status ?? 'N/A') }}
                                </span>
                            </div>

                            <hr class="my-3 text-[#D7D7D7]">

                            <h4 class="Poppins-medium text-[17px] text-[#133754]">Subject</h4>
                            <p class="mt-1 text-sm Poppins-l  text-[#090909]">
                                {{ $dispute->title }}
                            </p>

                            <h4 class="Poppins-medium text-[17px] text-[#133754]">Detail</h4>
                            <p class="mt-1 text-sm Poppins-l  text-[#090909]">
                                {!! $dispute->description !!}
                            </p>
                            {{-- @if ($against == false)
                                <div class="mt-4 flex gap-1">
                                    <button command="show-modal" commandfor="delete{{ $dispute->id }}"
                                        class="w-1/2 rounded-[3px] border cursor-pointer Poppins-medium text-sm border-[#E60000] py-3 text-[#E60000] hover:bg-red-50">
                                        Delete
                                    </button>
                                    <button command="show-modal" commandfor="editdisputepop{{ $dispute->id }}"
                                        class="w-1/2 rounded-[3px] bg-[#1CD8C4] py-2 cursor-pointer Poppins-medium text-sm text-black hover:bg-teal-500">
                                        Edit
                                    </button>
                                </div>
                            @endif

                            @if ($against == true)
                                <div class="mt-4 flex gap-1">
                                    <button type="button" command="show-modal" commandfor="response{{ $dispute->id }}"
                                        class="w-1/2 rounded-[3px] bg-[#1CD8C4] py-2 cursor-pointer Poppins-medium text-sm text-black hover:bg-teal-500">
                                        Response
                                    </button>
                                </div>
                            @endif --}}
                            @if($dispute->status=='pending' || $dispute->status == 'under_review')
                              <div class="mt-4 flex gap-1">
                                    <button type="button" command="show-modal" commandfor="response{{ $dispute->id }}"
                                        class="w-full rounded-[3px] bg-[#1CD8C4] py-2 cursor-pointer Poppins-medium text-sm text-black hover:bg-teal-500">
                                        Respond
                                    </button>
                                </div>
                            @endif
                        </div>
                    @endforeach


                </div>
                <div class="w-full flex justify-center mt-12">
                    {!! $disputes->links('components.pagination') !!}
                </div>
            </div>



        </div>

        
        
            @foreach ($disputes as $dispute)
                {{--  response modal --}}
                <el-dialog>
                    <dialog id="response{{ $dispute->id }}" aria-labelledby="dialog-title"
                        class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                        <el-dialog-backdrop
                            class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                        <div tabindex="0"
                            class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                            <el-dialog-panel
                                class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[554px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                                <div class="form bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">
                                    <form method="post"
                                        action="{{ route('tutor.dispute.response.add', encrypt($dispute->id)) }}"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="flex justify-between sm:items-start">
                                            <div>

                                                <h1
                                                    class="text-[#181D27] fo-m sm:text-[26px] text-[20px] Poppins font-semibold">
                                                    Response
                                                    Dispute</h1>
                                            </div>
                                            <button type="button" command="close"
                                                commandfor="response{{ $dispute->id }}" class="cursor-pointer">
                                                <img src="{{ asset('tutor/images/cros-icon.png') }}" />
                                            </button>
                                        </div>



                                        <div class="relative mb-3 mt-4">
                                            <label class="block mb-2 px-1 text-[17px] Poppins-medium text-[#414651]">
                                                Dispute Reply:
                                            </label>

                                            <div class="editor mt-2 border rounded max-h-[211px]">
                                                <div class="ql-toolbar ql-snow"></div>
                                                <div class="ql-container h-full">
                                                    <div class="ql-editor h-full overflow-y-auto leading-relaxed">
                                                        {!! $dispute->against_reply !!}
                                                    </div>
                                                </div>
                                            </div>
                                            <input type="hidden" name="response" value="{{ $dispute->against_reply }}"
                                                id="description-{{ $dispute->id }}" class="quill-input">
                                            @error('response')
                                                <span class="text-red-600"></span>
                                            @enderror

                                        </div>

                                        <label class=" block mb-3 text-[17px] Poppins-medium text-[#414651]">
                                            Upload Evidence
                                        </label>

                                        <div
                                            class="border-dashed border-2 border-gray-200  rounded-[11px] h-[139px] 
                                                     flex items-center justify-center">

                                            <label for="file-upload-{{ $dispute->id }}"
                                                class="flex flex-col items-center justify-center cursor-pointer transition">
                                                <img src="{{ asset('tutor/images/file-uploader.png') }}"
                                                    class="" />

                                                <span class="text-sm text-[#181D27] Poppins">
                                                    Click to <a class="underline-offset-0 text-blue-500">browse</a> or drag
                                                    &
                                                    drop here
                                                </span>
                                                <input id="file-upload-{{ $dispute->id }}" type="file"
                                                    name="evidence[]" multiple class="hidden dispute-file-input"
                                                    data-session="{{ $dispute->id }}" />


                                            </label>
                                        </div>






                                        <div id="upload-preview-container-{{ $dispute->id }}">
                                            @if ($dispute->response->count() > 0)
                                                @foreach ($dispute->response as $key => $img)
                                                    <div class="w-full p-4 bg-[#F4F4F4] border border-[#E7E7E7] rounded-md my-3 max-h-[104px] shadow-sm file-item"
                                                        data-file-index="{{ $key }}">
                                                        <div class="flex items-center justify-between">
                                                            <div class="flex items-center gap-3">
                                                                @if ($img->file_type == 'pdf')
                                                                    <img src="{{ asset('site/Sites/images/pdf-image.png') }}"
                                                                        style="width:40px;height:40px;object-fit:cover;border-radius:6px;">
                                                                @else
                                                                    <img src="{{ asset($img->file) }}"
                                                                        style="width:40px;height:40px;object-fit:cover;border-radius:6px;">
                                                                @endif
                                                                <div>
                                                                    <p
                                                                        class="font-semibold Poppins text-[#0B0B0B] text-[11px]">
                                                                        {{ $img->file_name }} <span
                                                                            class="text-red-500"></span></p>
                                                                    <p class="text-[#6D6D6D] Poppins text-[11px]">
                                                                        {{ $img->file_size }}</p>
                                                                </div>
                                                            </div>
                                                            <input type="hidden" name="image_ids[]"
                                                                value="{{ $img->id }}" id="">
                                                            <button type="button"
                                                                class="text-gray-400 hover:text-gray-600 focus:outline-none remove-file-btn"
                                                                data-session="{{ $dispute->id }}"
                                                                data-index="{{ $key }}">
                                                                <i class="fa-solid fa-xmark cursor-pointer"></i>
                                                            </button>
                                                        </div>


                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>

                                        <div class="mt-3">
                                            <button type="submit"
                                                class="bg-[#1CD8C4] cursor-pointer px-3 border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                                Save Changes
                                            </button>
                                        </div>
                                    </form>

                                </div>

                            </el-dialog-panel>
                        </div>
                    </dialog>
                </el-dialog>


                <el-dialog>
                    <dialog id="view{{ $dispute->id }}" aria-labelledby="dialog-title"
                        class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                        <el-dialog-backdrop
                            class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                        <div tabindex="0"
                            class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                            <el-dialog-panel
                                class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[554px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                                <div class="form bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">
                                    <form method="post" action="{{ route('tutor.tutor.disput.update', $dispute->id) }}"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="flex justify-between sm:items-start">
                                            <div>

                                                <h1
                                                    class="text-[#181D27] fo-m sm:text-[26px] text-[20px] Poppins font-semibold">
                                                    Student's
                                                    Dispute</h1>
                                            </div>
                                            <button command="close" commandfor="view{{ $dispute->id }}"
                                                class="cursor-pointer">
                                                <img src="{{ asset('tutor/images/cros-icon.png') }}" />
                                            </button>
                                        </div>

                                        <div class="mt-3">
                                            <p class="Poppins-medium text-lg text-[#414651] font-medium">Title</p>
                                            <div class="relative flex gap-5 w-full mt-3">
                                                <div class="field w-full">
                                                    <p class="text-[20px]  text-[#133754] Poppins-medium">
                                                        {{ $dispute->title }}
                                                    </p>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="relative mb-3 mt-4">
                                            <label class="block mb-2 px-1 text-[17px] Poppins-medium">
                                                Details
                                            </label>

                                            <div>
                                                <p class="text-[20px]  text-[#133754] Poppins-medium">
                                                    {!! $dispute->description !!}
                                                </p>
                                            </div>

                                        </div>






                                        <div id="upload-preview-container-{{ $dispute->id }}">
                                            @if ($dispute->attachments->count() > 0)
                                                @foreach ($dispute->attachments as $key => $img)
                                                    <div class="w-full p-4 bg-[#F4F4F4] border border-[#E7E7E7] rounded-md my-3 max-h-[104px] shadow-sm file-item"
                                                        data-file-index="{{ $key }}">
                                                        <div class="flex items-center justify-between">
                                                            <div class="flex items-center gap-3">
                                                                <img src="{{ asset('tutor/images/pdf-image.png') }}"
                                                                    style="width:40px;height:40px;object-fit:cover;border-radius:6px;">


                                                            </div>
                                                            <div>

                                                                <a type="button" href="{{ asset($img->file) }}"
                                                                    target="_blank"
                                                                    class="text-gray-400 hover:text-gray-600 focus:outline-none"
                                                                    data-session="{{ $dispute->id }}"
                                                                    data-index="{{ $key }}">
                                                                    <i class="fa-solid fa-eye"></i>
                                                                </a>
                                                                <a type="button" href="{{ asset($img->file) }}" download
                                                                    class="text-gray-400 ms-2 hover:text-gray-600 focus:outline-none"
                                                                    data-session="{{ $dispute->id }}"
                                                                    data-index="{{ $key }}">
                                                                    <i class="fa-solid fa-download"></i>
                                                                </a>
                                                            </div>
                                                        </div>


                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>

                                        <div class="mt-3">
                                            <button type="button" command="show-modal"
                                                commandfor="response{{ $dispute->id }}"
                                                class="bg-[#1CD8C4] cursor-pointer px-3 border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                                Response
                                            </button>

                                        </div>
                                    </form>

                                </div>

                            </el-dialog-panel>
                        </div>
                    </dialog>
                </el-dialog>
            @endforeach

        
        @push('scripts')
            <script>
                document.addEventListener("DOMContentLoaded", function() {

                    document.querySelectorAll('.dispute-file-input').forEach(input => {

                        let sessionId = input.dataset.session;
                        let container = document.getElementById('upload-preview-container-' + sessionId);
                        let dropArea = input.closest('.border-dashed');

                        // =============================
                        // HANDLE INPUT CHANGE
                        // =============================
                        input.addEventListener('change', function() {
                            handleFiles(this.files, input, container, sessionId);
                        });

                        // =============================
                        // DRAG EVENTS
                        // =============================
                        dropArea.addEventListener('dragover', function(e) {
                            e.preventDefault();
                            dropArea.classList.add('border-blue-400');
                        });

                        dropArea.addEventListener('dragleave', function(e) {
                            e.preventDefault();
                            dropArea.classList.remove('border-blue-400');
                        });

                        dropArea.addEventListener('drop', function(e) {
                            e.preventDefault();
                            dropArea.classList.remove('border-blue-400');

                            let files = e.dataTransfer.files;

                            let dt = new DataTransfer();
                            Array.from(files).forEach(file => dt.items.add(file));
                            input.files = dt.files;

                            handleFiles(files, input, container, sessionId);
                        });

                    });

                    // =============================
                    // HANDLE FILES FUNCTION
                    // =============================
                    function handleFiles(files, input, container, sessionId) {



                        Array.from(files).forEach((file, index) => {

                            let reader = new FileReader();

                            reader.onload = function(e) {

                                let isImage = file.type.startsWith('image/');
                                let previewImage = isImage ?
                                    e.target.result :
                                    "{{ asset('tutor/images/uploading-image.png') }}";

                                let fileSizeKB = (file.size / 1024).toFixed(2) + ' KB';

                                let wrapper = document.createElement('div');
                                wrapper.className =
                                    "w-full p-4 bg-[#F4F4F4] border border-[#E7E7E7] rounded-md my-3 max-h-[104px] shadow-sm file-item";
                                wrapper.setAttribute('data-file-index', index);

                                wrapper.innerHTML = `
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <img src="${previewImage}" style="width:40px;height:40px;object-fit:cover;border-radius:6px;" />

                            <div>
                                <p class="font-semibold Poppins text-[#0B0B0B] text-[11px]">${file.name}</p>
                                <p class="text-[#6D6D6D] Poppins text-[11px]">${fileSizeKB}</p>
                            </div>
                        </div>

                        <button type="button"
                            class="text-gray-400 hover:text-gray-600 focus:outline-none remove-file-btn"
                            data-session="${sessionId}"
                            data-index="${index}">
                            <i class="fa-solid fa-xmark cursor-pointer"></i>
                        </button>
                    </div>

                    <div class="mt-4 flex items-center justify-between">
                        <div class="flex-1 bg-gray-200 rounded-full h-2.5 mr-4">
                            <div class="bg-[#3EB8D4] h-2.5 rounded-full progress-bar"
                                style="width: 0%;"></div>
                        </div>
                        <p class="text-sm text-gray-500 w-12 text-right progress-text">0%</p>
                    </div>
                `;

                                container.appendChild(wrapper);

                                // 🔥 Get progress elements directly from this wrapper
                                let progressBar = wrapper.querySelector('.progress-bar');
                                let progressText = wrapper.querySelector('.progress-text');

                                let percent = 0;

                                let interval = setInterval(function() {
                                    percent += 5;

                                    progressBar.style.width = percent + '%';
                                    progressText.innerText = percent + '%';

                                    if (percent >= 100) {
                                        clearInterval(interval);
                                    }

                                }, 30);

                            };

                            reader.readAsDataURL(file);
                        });
                    }



                    document.addEventListener('click', function(e) {

                        let btn = e.target.closest('.remove-file-btn');
                        if (!btn) return;

                        let sessionId = btn.dataset.session;
                        let indexToRemove = parseInt(btn.dataset.index);
                        let input = document.querySelector('#file-upload-' + sessionId);

                        // 🔥 If it's an existing DB file (no file in input)
                        if (!input || input.files.length === 0) {
                            btn.closest('.file-item').remove();
                            return;
                        }

                        // 🔥 Remove only selected file from input
                        let dt = new DataTransfer();

                        Array.from(input.files).forEach((file, index) => {
                            if (index !== indexToRemove) {
                                dt.items.add(file);
                            }
                        });

                        input.files = dt.files;

                        // 🔥 Remove only this preview item (NO re-render)
                        btn.closest('.file-item').remove();

                    });


                });



                document.querySelectorAll('form').forEach(form => {

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

                        let dialog = form.closest('dialog');
                        let sessionId = dialog.id.replace('disput', '');

                        let editor = form.querySelector('.ql-editor');
                        let hiddenInput = form.querySelector('.quill-input');

                        if (editor && hiddenInput) {
                            hiddenInput.value = editor.innerHTML;
                        }

                    });

                });


                document.addEventListener('DOMContentLoaded', function() {
                    document.querySelectorAll('[command="close"]').forEach(btn => {
                        btn.addEventListener('click', function() {
                            const modalId = this.getAttribute('commandfor');
                            const modal = document.getElementById(modalId);
                            if (modal && modal.open) {
                                modal.close(); // ✅ correct way
                            }
                        });
                    });
                });
            </script>
        @endpush

    @endsection
