@extends('student.layouts.layout')
@section('title', 'Dashboard')
@section('content')
    <div>


        <div class=" flex lg:flex-row flex-col 2xl:gap-6 gap-3 mt-4 w-full">

            <div class="2xl:w-[75%] xl:w-[70%] lg:w-[65%] flex flex-col gap-4.5 ">
                <div class="grid sm:grid-cols-2 grid-cols-1 2xl:grid-cols-3 gap-3 ">
                    <div class="bg-white block   max-h-[155px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                        style="background-image: url('{{ asset('student/Sites/images/card-bg-1.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <img src="{{ asset('student/Sites/images/card-icon-1.png') }}" />
                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Upcoming Sessions  </p>
                        <p class="2xl:text-[28px] text-[20px]  text-[#133754] Poppins font-semibold  mb-0">
                            {{ $totalUpcomingSessions ?? 0 }}</p>
                        <p class="text-sm Poppins-medium text-[#3F3F3F]">Sessions This Week</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('student/Sites/images/card-bg-2.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <img src="{{ asset('student/Sites/images/card-icon-2.png') }}" />
                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Active Bookings</p>
                        <p class="2xl:text-[28px] text-[20px]  text-[#133754] Poppins font-semibold  mb-0">
                            {{ $activeBookingsCount ?? 0 }}</p>
                        <p class="text-sm Poppins-medium text-[#3F3F3F]">Bookings this month

                        </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('student/Sites/images/card-bg-3.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <img src="{{ asset('student/Sites/images/card-icon-3.png') }}" />
                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Hours Scheduled</p>
                        <p class="2xl:text-[28px] text-[20px]  text-[#133754] Poppins font-semibold  mb-0">
                            {{ $totalHours }} Hours</p>
                        <p class="text-sm Poppins-medium text-[#3F3F3F]">Hours scheduled this month</p>
                    </div>
                </div>
                <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('student/Sites/images/session-frame.png') }}" alt="images" />
                            </div>
                            <h3 class="text-[#133754] Poppins-medium text-lg      mb-0">Upcoming Sessions</h3>
                        </div>
                        <div>
                            <button onclick="window.location.href='{{ route('student.sessions') }}'"
                                class="text-[#000000] Poppins-medium text-[12px] border border-[#DFDFDF] bg-[#F4C701] sm:px-5 px-4 rounded-sm sm:py-3.5 py-2 cursor-pointer">View
                                All Sessions</button>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 desk:grid-cols-3 md:grid-cols-2 gap-4 sm:px-5  p-2">
                        @foreach ($upcomingSessions 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="{{ $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->canBeCancelledByStudent())
                                        <button command="show-modal" commandfor="cancel{{ $session->id }}"
                                            class=" bg-[#D30000] w-full  text-white sm:py-2.75 py-2 rounded-sm font-medium cursor-pointer Poppins-medium">
                                            Cancel Session
                                        </button>
                                        
                                    @else
                                        <button
                                            class=" bg-[#EFEFEF] w-full  text-[#9A9A9A] sm:py-2.75 py-2  rounded-sm font-medium cursor-pointer Poppins-medium">
                                            Cancel Session
                                        </button>
                                        
                                    @endif
                                    
                                    <button onclick="window.open('{{ $session->student_zoom_url }}', '_blank')"
                                        class=" bg-[#F4C701] w-full  text-[#000000] sm:py-2.75 py-2 rounded-sm font-medium cursor-pointer Poppins-medium">
                                        Join Zoom
                                    </button>
                                </div>
                            </div>
                        @endforeach

                      
                    </div>
                </div>





            </div>
            <div class="2xl:w-[25%] xl:w-[30%] lg:w-[35%]  flex justify-center">
                <div class="col-span-3 space-y-6">


                    <div class="bg-white rounded-[10px] border border-[#DADADA]  shadow">
                        <div class="p-3">


                            <div class="flex items-center gap-2 ">
                                <img src="{{ asset('student/Sites/images/calander-icon.png') }}" alt="Calendar Icon" />
                                <h3 class="text-[#133754] Poppins-medium  text-[16px]">Your Monthly Calendar</h3>
                            </div>
                        </div>
                        <h2 class="text-center text-[#262729] Poppins-medium  text-[15px] mb-3"> {{date('F Y')}} </h2>

                        <div
                            class="grid grid-cols-7  text-start border-t border-[#D2D2D2] text-xs font-semibold text-gray-700">

                            <div class="text-[#ED3779] Lato text-[10px] ml-2  font-bold">Sun</div>
                            <div class="text-[#B6C0D9] text-[10px] ml-2 font-bold Lato">Mon</div>
                            <div class="text-[#B6C0D9] text-[10px] ml-2 font-bold Lato">Tue</div>
                            <div class="text-[#B6C0D9] text-[10px] ml-2 font-bold Lato">Wed</div>
                            <div class="text-[#B6C0D9] text-[10px] ml-2 font-bold Lato">Thu</div>
                            <div class="text-[#B6C0D9] text-[10px] ml-2 font-bold Lato">Fri</div>
                            <div class="text-[#ED3779] Lato text-[10px] ml-2 font-bold">Sat</div>
                            @for ($i = 0; $i < $startDayOfWeek; $i++)
                                {{-- <div class="h-[58px] w-[54px] border border-[#E7EEF8] bg-white">{<} /div> --}}
                                    <div class="h-[58px] w-[54px] border border-[#E7EEF8] bg-white"></div>
                            @endfor


                            @for ($day = 1; $day <= $daysInMonth; $day++)
                                @php
                                    $dayData = $calendar[$day] ?? [
                                        'status' => 'none',
                                        'total_slots' => 0,
                                        'booked_slots' => 0,
                                        'available_slots' => 0,
                                    ];

                                    $status = $dayData['status'];   
                                        
                                @endphp

                                <div
                                    class="cursor-pointer relative group h-[58px] w-[54px] px-2 py-1 border border-[#E7EEF8] {{ $status }}">
                                    {{ $day }}

                                    @if ($dayData['total_slots'] > 0)
                                        <div
                                            class="absolute text-center z-10 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity duration-200 bottom-12 -left-12.5 -translate-x-1/2 mb-2 bg-[#078200] text-white px-6 py-2 rounded-tl-[8.59px] rounded-tr-[8.59px] rounded-bl-[8.59px] whitespace-nowrap">
                                            <h2 class="text-[14px] Poppins-medium">
                                                {{ $dayData['booked_slots'] }} Slots Booked
                                                <p class="text-[11.03px] Poppins italic font-normal">
                                                    Tutor: {{ implode(', ', $dayData['tutors']->toArray()) }}
                                                </p>
                                            </h2>
                                            <div
                                                class="absolute left-[94%] -translate-x-1/2 top-full border-[6px] border-transparent border-t-[#078200]">
                                            </div>
                                        </div>
                                    @else
                                        <div
                                            class="absolute text-center z-10 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity border-[#861A1A] border duration-200 bottom-12 -left-12.5 -translate-x-1/2 mb-2 bg-[#D01717] text-white px-6 py-2 rounded-tl-[8.59px] rounded-tr-[8.59px] rounded-bl-[8.59px] whitespace-nowrap">
                                            <h2 class="text-[14px] Poppins-medium">
                                                No Availability
                                                <p class="text-[11.03px] Poppins italic font-normal">No Available Slots on
                                                    {{ $day }}</p>
                                            </h2>


                                            <div
                                                class="absolute left-[94%] -translate-x-1/2 top-full border-[8px] border-transparent border-t-[#D01717]">
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endfor


                        </div>
                    </div>




                </div>
            </div>


        </div>

    </div>
    @foreach ($upcomingSessions as $session)
        @include('components.cancelModal',['id'=>$session->id,'route'=>route('student.session.cancel',encrypt($session->id))])
    @endforeach

@endsection
