@extends('student.layouts.layout')
@section('title', 'Sessions')

@section('content')
    <div class="">
        <div class="flex flex-wrap gap-3">
            @include('student.components.sessionHeaderBtns')
        </div>
        <div class="flex justify-between   mt-10 mb-5  ">
            <div class="flex items-center sm:gap-4 gap-2 ">
                <div class="bg-[#2AE3D1] border border-[#EAEAEA] rounded-[5px] px-[8px] py-[11px]  flex justify-center">
                    <img src="{{ asset('student/Sites/images/session-frame.png') }}" alt="images" />
                </div>
                <h3 class="text-[#133754] Poppins-medium text-[20px]      mb-0">Completed Sessions</h3>
            </div>
        </div>
        <div class="grid grid-cols-1 desk:grid-cols-4 md:grid-cols-3 gap-8   ">
            @foreach ($sessions as $session)
                <div class="border border-[#D7D7D7] rounded-[7px] p-3 bg-white">
                    <div class="flex justify-between items-start">
                        <div class="relative">
                            <img src="{{ asset($session->tutor->tutorDefaultImage) }}"
                                class="w-20.25 h-20.25 rounded-md border-2 border-[#F4C701] object-cover" />
                        </div>

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

                    <div class="flex justify-between mt-2">

                        <h3 class="text-[17px]  Poppins-medium font-semibold  text-[#272727]">{{ $session->tutor->name }}
                        </h3>
                        <p class="text-[#434343] Poppins text-[13px]">#{{ $session->session_id }}</p>
                    </div>
                    <hr class="my-1  text-[#D7D7D7]">

                    <div class="mt-3 space-y-3 text-[15px]  text-[#151515] Poppins">
                        <div class="flex items-center gap-3">
                            <i class="fa-regular fa-calendar text-lg"></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-lg"></i> <span>{{ $session->start_time_formatted }} -
                                {{ $session->end_time_formatted }}</span>
                        </div>
                        <div>Duration: <span class="font-medium">{{ $session->duration }}</span></div>
                        <div> {{ $session->subject_names }} </div>
                    </div>





                    <div class="flex w-full gap-1 text-[13px] mt-4">


                        @if ($session->payment_approved_by_student == 0)
                            @if ($session->is_disputed == 0)
                                <button type="button" command="show-modal" commandfor="confirm{{ $session->id }}"
                                    class="bg-[#0AC400] text-[#fff]  w-full   sm:py-2.75 py-2  rounded-sm font-medium cursor-pointer Poppins-medium">
                                    Approve payment
                                </button>
                            @endif

                            @if ($session->is_disputed == 0)
                                <button type="button" command="show-modal" commandfor="editdisputepop{{ $session->id }}"
                                    class="bg-[#F4C701] text-[#000]  w-full   sm:py-2.75 py-2  rounded-sm font-medium cursor-pointer Poppins-medium">
                                    Open Dispute
                                </button>
                            @else
                                <button type="button"
                                    onclick="window.location.href='{{ route('student.supportAndDispute') }}'"
                                    class="bg-[#F4C701] text-[#000]  w-full   sm:py-2.75 py-2  rounded-sm font-medium cursor-pointer Poppins-medium">
                                    View Dispute
                                </button>
                            @endif
                        @else
                            <button
                                class="bg-[#EFEFEF] text-[#9A9A9A] w-full   sm:py-2.75 py-2  rounded-sm font-medium cursor-pointer Poppins-medium">
                                Open Dispute
                            </button>
                        @endif
                    </div>
                </div>
            @endforeach


        </div>
    </div>

    @foreach ($sessions as $session)
        <el-dialog>
            <dialog id="editdisputepop{{ $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">
                        <form action="{{ route('student.session.dispute.add', encrypt($session->id)) }}" method="post"
                            enctype="multipart/form-data">
                            @csrf
                            <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 type="button" command="close" commandfor="editdisputepop{{ $session->id }}"
                                        class="cursor-pointer">

                                        <img src="{{ asset('student/Sites/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">
                                            <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="Dispute title" name="dispute_title"
                                                >
                                        </div>
                                        @error('dispute_title')
                                            <span class="text-red-600">{{ $message }}</span>
                                        @enderror

                                    </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="dispute_description"
                                     
                                        class="dispute_description">
                                    @error('dispute_details')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror

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



                                <div id="drop-zone" class="mt-3"> <x-dispute-uploader name="evidence" :multiple="true"
                                        :accept=".pdf" accept="image/*,application/pdf" :existingFiles="[]"
                                        deleteInputName="deleted_attachments" />
                                </div>



                                <div class="mt-3">
                                    <button type="submit" 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">
                                        Save Changes
                                    </button>
                                </div>


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

        @include('components.confirmModal', [
            'id' => $session->id,
            'message' => 'Do you want to approve payment?',
            'route' => route('student.sessions.approve.payment', encrypt($session->id)),
        ])
    @endforeach
    <script src="{{ asset('uploader.js') }}"></script>
    <script>
        document.querySelectorAll('form').forEach(function(form){
    form.addEventListener('submit', function () {
        var editorContent = form.querySelector('.ql-editor').innerHTML;
        form.querySelector('.dispute_description').value = editorContent;
    });
});
    </script>
@endsection
