    @extends('tutor.layouts.layout')
    @section('title', 'Sessions')
    @section('content')
        <div class="  border h-full  border-[#D9D9D9] rounded-[10px] w-full">
            <div class="flex justify-between   p-5 pb-3  border-b border-[#DADADA]">
                <div class="flex items-center sm:gap-4 gap-2 ">
                    <div class="bg-[#2AE3D1] border border-[#EAEAEA] rounded-[5px] px-[6px] py-[6px]  flex justify-center">
                        <img src="{{ asset('tutor/images/session-frame.png') }}" alt="images" />
                    </div>
                    <h3 class="text-[#272727] Poppins-medium  text-[16px]  mb-0">Sessions</h3>
                </div>
                <div>
                    <button onclick="window.location.href='{{ route('tutor.sessions') }}'"
                        class="text-[#000000] Poppins text-sm border border-[#DFDFDF] bg-[#F4C701] sm:px-[58px] px-7 rounded-sm sm:py-3.5 py-2 cursor-pointer">Upcoming
                        Sessions</button>
                </div>
            </div>
            <div class="grid grid-cols-1 desk:grid-cols-3 md:grid-cols-2 gap-4 sm:p-5 p-2">

                @foreach ($sessions as $session)
                    <div class="border border-[#D7D7D7] rounded-[7px] p-4 bg-white">

                        <div class="flex justify-between items-start">
                            <div class="relative">
                                <img src="{{ $session->student->studentDefaultImage }}"
                                    class="w-24 h-24 rounded-md border-2 border-[#F4C701] object-cover" />
                            </div>

                            <div class="text-right space-y-2">
                                <div
                                    class="bg-[#00D2BB] Inter sm:text-[20px] text-lg text-[#FFFFFF] font-semibold sm:px-[30px] px-5 py-[5px] rounded-[5px] inline-block">
                                    ${{ $session->amount }}
                                </div>
                                <div
                                    class="{{ $session->status_class }} Poppins-medium text-[15px] text-[#000000]  sm:px-[26px] px-5 sm:py-2 py-1.5 rounded-md">
                                    {{ ucFirst($session->session_status) }}
                                </div>
                            </div>
                        </div>


                        <h3 class="sm:text-[22px] text-lg Poppins-medium font-semibold mt-4 text-[#272727]">
                            {{ $session->student->name }} </h3>

                        <div class="mt-3 space-y-3 sm:text-lg text-[16px] text-[#151515] Poppins">
                            <div class="flex items-center gap-3">
                                <i class="fa-regular fa-calendar text-2xl"></i> <span>
                                    {{ dateFormate($session->start_date, 'd-M-Y') }}</span>
                            </div>

                            <div class="flex items-center gap-3">
                                <i class="fa-regular fa-clock text-2xl"></i> <span>{{ $session->start_time_formatted }} -
                                    {{ $session->end_time_formatted }}</span>
                            </div>
                            <div>Duration: <span class="font-medium">{{ $session->duration }}</span></div>
                            <div class="h-[28px]">
                                {{ $session->booking->subjects->pluck('subject_name')->join(', ') }}

                            </div>
                        </div>

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


                        <div class="flex justify-between items-center mb-3">
                            <span class="font-medium text-[#151515] Poppins-medium sm:text-lg text-[16px]">Payment
                                Status</span>

                            <span
                                class="text-[#000000] Poppins-medium text-sm border border-[#DFDFDF] bg-[#F4C701] px-[38px] rounded-sm py-2">{{ ucFirst($session->payment_status) }}</span>
                        </div>


                        <div class="flex gap-2">
                            {{-- @if ($session->status != 'complete')
                    <button onclick='window.location.href="{{$session->start_url}}"' class="w-full bg-[#133754]  text-white sm:py-3 py-2 rounded-sm font-medium cursor-pointer Poppins-medium">
                        Join Zoom
                    </button>
                
                    @endif
                    --}}

                            {{-- @if ($session->tutorDispute()->count())
                                <button
                                    class="w-full bg-[#EFEFEF] text-sm text-[#9A9A9A]  sm:py-4 py-2 rounded-sm font-medium Poppins-medium cursor-pointer"
                                    disabled="">
                                    Open Dispute
                                </button>
                            @elseif($session->payment_approved_by_student == 1)
                                <button
                                    class="w-full bg-[#EFEFEF] text-sm text-[#9A9A9A]  sm:py-4 py-2 rounded-sm font-medium Poppins-medium cursor-pointer"
                                    disabled="">
                                    Open Dispute
                                </button>
                            @else
                                <button command="show-modal" commandfor="disput{{ $session->id }}"
                                    class="w-full bg-[#1CD8C4] text-sm text-[#000000] cursor-pointer  sm:py-4 py-2.5 rounded-sm font-medium Poppins-medium">
                                    Open Dispute
                                </button>
                            @endif --}}
                            @if ($session->is_disputed == 1)
                                <button onclick="window.location.href='{{route('tutor.supportAndDispute')}}'"
                                    class="w-full bg-[#1CD8C4] text-sm text-[#000000] cursor-pointer  sm:py-4 py-2.5 rounded-sm font-medium Poppins-medium">
                                    View Dispute
                                </button>
                            @endif
                            
                        </div>
                    </div>
                @endforeach


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

            </div>
        </div>
        @foreach ($sessions as $session)
            <el-dialog>
                <dialog id="disput{{ $session->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">
                                <div class="flex justify-between sm:items-start">
                                    <div>

                                        <h1 class="text-[#181D27] fo-m sm:text-[26px] text-[20px] Poppins font-semibold">Add
                                            Dispute</h1>
                                    </div>
                                    <button command="close" commandfor="disput{{ $session->id }}" class="cursor-pointer">

                                        <img src="{{ asset('tutor/images/cros-icon.png') }}" />
                                    </button>
                                </div>
                                <form action="{{ route('tutor.tutor.disput.add', encrypt($session->id)) }}" method="post"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <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">
                                                <input
                                                    class="w-full text-[#717680] placeholder:text-[#717680] shadow-[0px_1.38px_2.77px_0px_#0A0D120D]  Poppins text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-3 p-3 rounded-[10px] bg-white"
                                                    placeholder="Enter disput title" name="disput_title"
                                                    value="{{ old('disput_title') }}">
                                                @error('disput_title')
                                                    <span class="text-error">{{ $message }}</span>
                                                @enderror
                                            </div>

                                        </div>
                                    </div>

                                    <div class="relative mb-3 mt-4">
                                        <label class="block mb-2 px-1 text-[17px] Poppins-medium text-[#414651]">
                                            Details
                                        </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">

                                                </div>
                                            </div>
                                        </div>
                                        <input type="hidden" name="description" id="description-{{ $session->id }}">


                                    </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-{{ $session->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-{{ $session->id }}" type="file" name="evidence[]"
                                                multiple class="hidden dispute-file-input"
                                                data-session="{{ $session->id }}" />


                                        </label>
                                    </div>


                                    {{-- Upload Preview Box (Hidden Initially) --}}
                                    <div id="upload-preview-container-{{ $session->id }}"></div>


                                    <div class="mt-3">
                                        <button
                                            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>
        @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) {

                        container.innerHTML = '';

                        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);
                        });
                    }


                    // =============================
                    // REMOVE FILE
                    // =============================
                    document.addEventListener('click', function(e) {

                        if (e.target.closest('.remove-file-btn')) {

                            let btn = e.target.closest('.remove-file-btn');
                            let sessionId = btn.dataset.session;
                            let indexToRemove = parseInt(btn.dataset.index);
                            let input = document.getElementById('file-upload-' + sessionId);

                            let dt = new DataTransfer();

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

                            input.files = dt.files;

                            let container = document.getElementById('upload-preview-container-' + sessionId);
                            handleFiles(input.files, input, container, sessionId);
                        }

                    });

                });


                // =============================
                // SET DESCRIPTION BEFORE SUBMIT
                // =============================
                document.querySelectorAll('form').forEach(form => {

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

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

                        let editor = dialog.querySelector('.ql-editor');
                        let hiddenInput = document.getElementById('description-' + sessionId);

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

                    });

                });
            </script>
        @endpush


    @endsection
