@extends('tutor.layouts.layout')
@section('title', 'Dashboard')
@section('content')
    <div>
        @if(!auth()->user()->isProfileComplete())
            <div class="bg-yellow-100 border border-yellow-300 text-yellow-800 p-4 rounded-md mb-5">

                <strong class="block font-semibold">
                    ⚠️ Complete Your Profile
                </strong>

                <p class="mt-2 text-sm">
                    Your profile is not visible to students yet. Complete your profile to start receiving bookings.
                </p>

                <div class="mt-4">
                    <a href="{{route('tutor.tutorProfile')}}"
                        class="inline-block bg-yellow-400 text-blue-900 px-5 py-2 rounded-md font-semibold hover:bg-yellow-500 transition">
                        Complete Profile
                    </a>
                </div>

            </div>
           
            
            
          @elseif(!auth()->user()->notAddedSlots())
    <div class="bg-yellow-100 border border-yellow-300 text-yellow-800 p-4 rounded-md mb-5">

        <strong class="block font-semibold">
            ⚠️ Profile Incomplete
        </strong>

        <p class="mt-2 text-sm">
            Your profile is currently not visible to students. Please add your availability slots to complete your profile setup.
        </p>

        <div class="mt-4">
            <a href="{{ route('tutor.my-calender') }}"
                class="inline-block bg-yellow-400 text-blue-900 px-5 py-2 rounded-md font-semibold hover:bg-yellow-500 transition">
                Add Availability Slots
            </a>
        </div>

    </div>
           @elseif(!auth()->user()->notSubscripted())
    <div class="bg-yellow-100 border border-yellow-300 text-yellow-800 p-4 rounded-md mb-5">

        <strong class="block font-semibold">
            ⚠️ Subscription Required
        </strong>

        <p class="mt-2 text-sm">
            Your profile is currently not visible to students. Please subscribe to a plan to activate your profile and start receiving bookings.
        </p>


    </div>
            
            @endif

        <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-3 ">
                <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('tutor/images/card-bg-1.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <img src="{{ asset('tutor/images/card-icon-1.png') }}" />
                            <button type="button" onclick="window.location.href='{{route('tutor.earningsAndPayout')}}'"
                                class="text-[#133754] cursor-pointer Poppins-medium text-[12px] border border-[#DFDFDF] bg-[#FFFFFF] px-4 rounded-sm py-2">View
                                Earnings</button>
                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Monthly Earnings</p>
                        <p class="2xl:text-[28px] text-[20px]  text-[#133754] Poppins font-semibold  mb-0">
                            ${{ auth()->user()->getTutorMonthEarning() ?? 0 }}</p>
                        <p class="text-sm Poppins-medium text-[#3F3F3F]">Earnings for {{ date('M Y') }}</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('tutor/images/card-bg-2.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <img src="{{ asset('tutor/images/card-icon-2.png') }}" />
                            <button onclick="window.location.href='{{route('tutor.bookingRequest')}}?status=pending'" type="button"
                                class="text-[#133754] cursor-pointer Poppins-medium text-[12px] border border-[#DFDFDF] bg-[#FFFFFF] px-4 rounded-sm py-2">View
                                Bookings</button>
                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Pending Booking Requests</p>
                        <p class="2xl:text-[28px] text-[20px]  text-[#133754] Poppins font-semibold  mb-0">
                            {{ $totalPendingSessions ?? 0 }}</p>
                        <p class="text-sm Poppins-medium text-[#3F3F3F]">Awaiting Your Approval</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('tutor/images/card-bg-3.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <img src="{{ asset('tutor/images/card-icon-3.png') }}" />
                            <button type="button" onclick="window.location.href='{{route('tutor.past.sessions')}}'"
                                class="text-[#133754] Poppins-medium cursor-pointer text-[12px] border border-[#DFDFDF] bg-[#FFFFFF] px-4 rounded-sm py-2">View
                                Sessions</button>
                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Hours Taught This Month</p>
                        <p class="2xl:text-[28px] text-[20px]  text-[#133754] Poppins font-semibold  mb-0">
                            {{ auth()->user()->getCurrentMonthTeachingHours() }}
                            Hours</p>
                        <p class="text-sm Poppins-medium text-[#3F3F3F]">Total Teaching Time For {{ date('M Y') }}</p>
                    </div>
                </div>
                <div class="bg-white grid  rounded-[10px] border border-[#DADADA]  shadow max-h-[400px] overflow-y-auto">
                    <div class="flex justify-between p-5 pb-2  border-b border-[#DADADA]">

                        <div class="flex items-center gap-2 ">
                            <img src="{{ asset('tutor/images/upcomingtable-icon.png') }}" alt="images" />
                            <h3 class="text-[#4A4A4A] Poppins-medium  sm:text-[16px] text-[12px]  mb-0">Upcoming Sessions
                            </h3>
                        </div>
                        <div>
                            <button onclick="window.location.href='{{ route('tutor.sessions') }}'"
                                class="text-[#133754] Poppins-medium text-[12px] border border-[#DFDFDF] bg-[#FFFFFF] px-4 rounded-sm py-[10px] cursor-pointer">View
                                All Sessions</button>
                        </div>
                    </div>


                    <div class="w-full overflow-x-auto">

                        <table
                            class="min-w-[900px] w-full p-5 text-left
                            text-[#1F1F1F] text-sm bg-white
                            border-separate border-spacing-0">

                            <thead class="bg-[#F3F3F3] border">
                                <tr class="">
                                    <th
                                        class="py-2 px-4 w-[27%] Poppins text-[#1F1F1F] text-[14px] font-normal rounded-bl-2xl rounded-tl-2xl overflow-hidden">
                                        Student
                                    </th>
                                    <th class="py-2 px-3 w-[25%] Poppins text-[#1F1F1F] text-[14px] font-normal">
                                        Date
                                    </th>
                                    <th class="py-2 px-3 w-[30%] Poppins text-[#1F1F1F] text-[14px] font-normal">
                                        Time
                                    </th>
                                    <th
                                        class="py-2 px-3 Poppins text-[#1F1F1F] text-[14px] font-normal rounded-tr-2xl rounded-br-2xl overflow-hidden">
                                        Actions
                                    </th>
                                </tr>
                            </thead>

                            <tbody>
                                {{-- @for ($i = 0; $i < 3; $i++) --}}
                                @foreach ($upcomingSessions as $session)
                                    <tr class="">
                                        <td class="py-4 px-3 border-b border-[#E6E6E6]">
                                            <div
                                                class="flex items-center gap-2 text-[#111111] text-sm Inter-m font-medium w-[36px] h-[36px] object-cover">
                                                <img src="{{ asset($session->student->studentProfile) }}" />
                                                {{ $session->student->name }} {{ $session->id }}
                                            </div>
                                        </td>
                                        <td
                                            class="py-4 px-4 text-[#4B4B4B] text-[14.65px] font-medium Inter-m border-b border-[#E6E6E6]">
                                            {{ date('d-m-Y', strtotime($session->start_date)) }}

                                        </td>
                                        <td
                                            class="py-4 px-4 text-[#4B4B4B] text-[14.65px] font-medium Inter-m border-b border-[#E6E6E6]">
                                            {{ date('h:i A', strtotime($session->start_time)) }} –
                                            {{ date('h:i A', strtotime($session->end_time)) }}

                                        </td>
                                        <td class="py-4 px-4 flex gap-1 border-b border-[#E6E6E6]">
                                            <!-- <button class="border-2 cursor-pointer border-[#F4C701] text-[#000000] rounded-[5px] 2xl:px-13 px-8 py-2 Inter font-medium">
                                                                                                                                    Chat
                                                                                                                                </button> -->

                                            <a href="{{ $session->tutor_zoom_url }}" target="_blank"
                                                class="bg-[#133754] cursor-pointer rounded-[5px] 2xl:px-8 px-5 py-2 Inter font-medium text-white">
                                                Join Zoom
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach

                            </tbody>


                        </table>

                    </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-5">

                            <div class="flex items-center gap-2 mb-2">
                                <img src="{{ asset('tutor/images/calander-icon.png') }}" alt="Calendar Icon" />
                                <h3 class="text-[#133754] Poppins-medium  text-[16px]">Today’s Availability</h3>
                            </div>
                            <div class="flex items-center gap-2 mb-2 mt-5">
                                <span class="inline-block w-[22px] h-[22px] rounded-full bg-yellow-400"></span>
                                <p class="text-[15px] Poppins-medium text-[#313131]">Limited Availability</p>
                            </div>

                            @php
                                $slot = auth()->user()->nextFreeSlot();
                            @endphp

                            <p class="text-sm text-[#313131] Poppins mb-5">
                                Next Free Slot:
                                @if ($slot)
                                    <span class="text-[#133754] Poppins-medium">
                                        {{ \Carbon\Carbon::parse($slot['start_time'])->format('h:i A') }} -
                                        {{ \Carbon\Carbon::parse($slot['end_time'])->format('h:i A') }}
                                    </span>
                                @else
                                    <span class="text-[#133754] Poppins-medium">No free slots available</span>
                                @endif
                            </p>

                            <div class="flex items-center gap-2 ">
                                <img src="{{ asset('tutor/images/calander-icon.png') }}" alt="Calendar Icon" />
                                <h3 class="text-[#133754] Poppins-medium  text-[16px]">Month’s Availability</h3>
                            </div>
                        </div>
                        <h2 class="text-center text-[#262729] Lato font-bold text-[11px] "> {{ date('F Y') }} </h2>

                        <div class="grid grid-cols-7  text-start 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>
                            @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'];

                                    $bgClass = match ($status) {
                                        'green' => 'bg-green-100 text-green-700 font-semibold',
                                        'yellow' => 'bg-[#FFD20138] font-semibold',
                                        'red' => 'bg-[#FF00004D]',
                                        'none' => 'bg-white text-black font-normal',
                                        default => 'bg-white',
                                    };
                                @endphp

                                <div
                                    class="cursor-pointer relative group h-[58px] w-[54px] px-2 py-1 border border-[#E7EEF8] {{ $bgClass }}">
                                    {{ $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
                                            </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 class="bg-white    max-h-[420px]  2xl:w-[73%]">
            <div class="flex justify-between   mt-3 mb-3 pb-3 border-b border-[#DADADA]">

                <div class="flex items-center gap-2 ">
                    <img src="{{ asset('tutor/images/booking-icon.png') }}" alt="images" />
                    <h3 class="text-[#4A4A4A] Poppins-medium  text-[16px]  mb-0">Booking Sessions</h3>
                </div>
                <div>

                    <button onclick="window.location.href='{{ route('tutor.sessions') }}'"
                        class="text-[#133754] Poppins-medium text-[12px] border border-[#DFDFDF] bg-[#FFFFFF] px-4 rounded-sm py-[10px] cursor-pointer">View
                        All Sessions</button>
                </div>
            </div>

            <div class="flex lg:flex-nowrap flex-wrap md:justify-start justify-center gap-4">

                @foreach ($bookedSessions as $session)
                    <div class="rounded-sm   tutor-cardstyle   p-4 mt-5 sm:w-90 w-full bg-white relative overflow-visible">
                        <div class="flex items-start justify-between ">
                            <div class="flex items-start flex-col gap-3">
                                <img src="{{ asset($session->student->studentProfile) }}" alt="Jane Smith"
                                    class="w-[62px] h-[62px] flex justify-center items-center rounded object-cover
                                     -mt-8  border border-[#2AE3D1] bg-[#2AE3D1]" />

                                <h4 class=" text-[16px] mt-1 Poppins-medium text-[#0D0D0D]">{{ $session->student->name }}
                                </h4>
                            </div>
                            <div class="flex">
                                <p class="text-[13px] text-right text-[#424242] Poppins desk:ml-16 mt-[6px]">
                                    @if (\Carbon\Carbon::parse($session->booking_date)->diffInDays(now()) > 0)
                                        {{ \Carbon\Carbon::parse($session->booking_date)->diffInDays(now()) }} days ago
                                    @else
                                        Today
                                    @endif
                                </p>
                                @php
                                    $meetingDate = \Carbon\Carbon::parse($session->start_date);
                                    $remainingDays = now()->diffInDays($meetingDate, false);
                                @endphp

                                <div
                                    class="bg-[#FED210] text-xs font-semibold Poppins text-[#000000] rounded px-4 py-[6px] ms-2">
                                    @if ($remainingDays > 0)
                                        {{ $remainingDays }} Days
                                    @elseif($remainingDays == 0)
                                        Today
                                    @else
                                        Completed
                                    @endif
                                </div>
                            </div>
                        </div>


                        <p class="text-sm text-[#474747] Poppins mb-1">
                            Duration: <strong class="text-[#0D0D0D]">{{ $session->duration }}</strong>
                        </p>
                        <p class="text-sm text-[#474747] Poppins mb-1 ">
                            Start Date: <strong
                                class="text-[#0D0D0D]">{{ \Carbon\Carbon::parse($session->start_date)->format('D, d M, Y') }}</strong>
                        </p>

                        <div class="border-b pt-2 border-[#d8d4d4]">

                        </div>
                        <div class="flex justify-between mt-3">
                            <p class="text-sm Poppins text-[#0D0D0D] mb-3 ">
                                Subject(s): <strong class="font-semibold"> {{ $session->subjectNames }} </strong>
                            </p>
                            <p class="text-[17.53px] text-base Inter font-semibold">
                                ${{ $session->tutor->tutor_hourly_rate }}/hr</p>
                        </div>




                        <div class="flex items-center justify-between gap-2">
                            <button type="button" command="show-modal" commandfor="cancel{{ $session->id }}"
                                class="border-2 border-[#E32A2A] cursor-pointer w-full text-[#0D0D0D] Poppins-medium rounded px-3 py-2 text-sm hover:bg-red-50">
                                Cancel
                            </button>



                        </div>

                    </div>
                @endforeach


            </div>


        </div>
    </div>

    @foreach ($bookedSessions as $session)
        @include('components.cancelModal', [
            'id' => $session->id,
            'route' => route('tutor.session.cancel', $session->id),
        ])
    @endforeach


@endsection
