@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">In Progress 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">

                      

                        <button
                            class="{{ $session->canCancel ? 'bg-[#D30000] text-white' : 'bg-[#EFEFEF] text-[#9A9A9A]' }} w-full   sm:py-2.75 py-2  rounded-sm font-medium cursor-pointer Poppins-medium">
                            Cancel Session
                        </button>

                 

                        @if ($session->canJoin)
                            <button onclick="window.open('{{ $session->student_zoom_url }}','_blank')"
                                class="bg-[#F4C701] w-full text-black py-2 rounded-sm font-medium Poppins-medium">
                                Join Zoom
                            </button>
                        @endif

                        @if ($session->canReschedule)
                            <button class="bg-[#F4C701] text-white w-full  py-2 rounded-sm font-medium Poppins-medium">
                                Reschedule
                            </button>
                        @endif
                    </div>
                </div>
            @endforeach


        </div>
    </div>
@endsection
