@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.past.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">
                    Past 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>

                                <button
                                    class="{{$session->status_class}} Poppins-medium text-[15px] text-[#000000] sm:px-[26px] px-5 sm:py-2 py-1.5 rounded-md cursor-pointer">
                                    {{ ucFirst($session->SessionStatus) }}
                                </button>
                            </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>
                            {{ $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.open("{{ $session->tutor_zoom_url }}", "_blank")'
                                class="w-full bg-[#133754] text-white sm:py-3 py-2 rounded-sm font-medium cursor-pointer Poppins-medium">
                                Join Zoom
                            </button>
                        @endif
                    </div>

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

    </div>


    @foreach ($sessions as $session)
        <el-dialog>
            <dialog id="dialog{{ $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-50 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="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="relative sm:w-[585px] rounded-sm bg-white shadow-xl transition-all">

                        <div class="bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">

                            <form action="{{ route('tutor.past.sessions.updateStatus', ['id' => $session->id]) }}"
                                method="post">
                                @csrf

                                <div class="flex justify-between sm:items-start">

                                    <div>
                                        <h1 class="text-[#181D27] fo-m sm:text-[23px] text-lg">
                                            Status confirmation
                                        </h1>
                                    </div>

                                    <button type="button"
                                        onclick="document.getElementById('dialog{{ $session->id }}').close()"
                                        class="cursor-pointer">
                                        <i class="fa-solid fa-x text-[#717680]"></i>
                                    </button>


                                </div>

                                <div class="mt-3">
                                    <p class="fo-m text-[16px] text-left text-[#414651] font-medium">
                                        Select Status*
                                    </p>

                                    <div class="relative w-full mt-3">
                                        <select id="courseApplyModal" name="status"
                                            class="w-full appearance-none text-[#717680] fo-n text-sm border-[#D5D7DA] border-[1.29px] p-3 pr-10 rounded-[10px] bg-white">
                                            <option value="in progress"
                                                {{ $session->status == 'in progress' ? 'selected' : '' }}>
                                                In progress
                                            </option>
                                            <option value="upcoming"
                                                {{ $session->status == 'upcoming' ? 'selected' : '' }}>
                                                Upcoming
                                            </option>

                                            <option value="completed"
                                                {{ $session->status == 'completed' ? 'selected' : '' }}>
                                                Complete
                                            </option>
                                        </select>
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <button type="submit"
                                        class="w-full mt-5 bg-[#1CD8C4] text-white py-3 rounded-md font-medium">
                                        Submit
                                    </button>
                                </div>

                            </form>

                        </div>

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

            </dialog>
        </el-dialog>
    @endforeach
@endsection
