@extends('layouts.layout')

@section('content')
<div class="">
    <div class="flex flex-wrap gap-3">
        <button class=" bg-[#133754]  text-white   rounded-sm h-[48px] sm:w-[198px] w-full flex justify-center items-center font-medium text-[15px] cursor-pointer Poppins-medium">
            Approved Bookings
        </button>
        <button class=" bg-[#FEFEFE] text-sm text-[#5D5D5D] border-[#EDEDED] border   rounded-sm h-[48px] sm:w-[198px] w-full flex justify-center items-center font-medium Poppins cursor-pointer" disabled>
            Pending Approval
        </button>
        <button class=" bg-[#FEFEFE] text-sm text-[#5D5D5D] border-[#EDEDED] border   rounded-sm h-[48px] sm:w-[198px] w-full flex justify-center items-center font-medium Poppins cursor-pointer" disabled>
            Past Bookings
        </button>
    </div>
    <div class="grid 2xl:grid-cols-2 desk:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1  2xl:gap-6 gap-3 sm:mt-10 mt-4">
        <div class="border border-[#EAEAEA] rounded-sm overflow-hidden bg-white flex 2xl:items-center 2xl:flex-row flex-col">


            <div class="p-2">
                <img src="{{ asset('newsites/admin/images/booking-profile-img.png') }}" class="2xl:w-[180px] 2xl:h-[180px] w-full w-full " />
            </div>


            <div class="flex-1 py-2 px-2">
                <h3 class="text-[20px]  text-[#133754] Poppins-medium">
                    Jane Smith
                </h3>

                <p class="text-[#3B3B3B] Poppins font-normal mt-1">
                    English, History
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Recurring Schedule : 15 Days
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Booking Created : 05-Feb-2025
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Total Sessions : 20
                </p>


                <div class="flex  w-full gap-3 mt-4">
                    <button

                        class="border border-[#FF8C8C] w-1/2 cursor-pointer text-[#9D0000]  2xl:text-sm text-[12px] flex justify-center items-center h-[43px] 2xl:w-[164px]  Poppins-medium  rounded-sm font-medium hover:bg-red-50 transition">
                        Cancel Booking
                    </button>

                    <button onclick="window.location.href='booking-detail'"
                        class="bg-[#133754] w-1/2 cursor-pointer text-white  rounded-sm Poppins-medium 2xl:text-sm text-[12px] flex justify-center items-center h-[43px] 2xl:w-[164px]  font-medium hover:bg-slate-700 transition">
                        View Details
                    </button>
                </div>
            </div>


            <div class="  h-full 2xl:w-[70px] w-[95%] py-2 self-center    flex border border-[#1CD8C4] bg-[#1CD8C4] flex-col justify-center items-center text-center px-3">


                <p class="text-[#FFFFFF] Poppins-medium text-[13px]">Up coming</p>

            </div>



            <div class="2xl:w-32 w-full  h-full flex flex-col justify-center items-center text-center px-3">


                <span class="text-[#3A3A3A] Poppins text-[11px] mt-1">
                    Total Earnings
                </span>
                <span class="text-[#02B502] 2xl:text-[30px] text-[25px] Poppins-medium ">
                    $450
                </span>

            </div>

        </div>
        <div class="border border-[#EAEAEA] rounded-sm overflow-hidden bg-white flex 2xl:items-center 2xl:flex-row flex-col">


            <div class="p-2">
                <img src="{{ asset('newsites/admin/images/booking-profile-img.png') }}" class="2xl:w-[180px] 2xl:h-[180px] w-full w-full " />
            </div>


            <div class="flex-1 py-2 px-2">
                <h3 class="text-[20px] font-semibold text-[#133754] Poppins-medium">
                    Jane Smith
                </h3>

                <p class="text-[#3B3B3B] Poppins font-normal mt-1">
                    English, History
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Recurring Schedule : 15 Days
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Booking Created : 05-Feb-2025
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Total Sessions : 20
                </p>


                <div class="flex  w-full gap-3 mt-4">
                    <button
                        class="border border-[#FF8C8C] w-1/2 cursor-pointer text-[#9D0000]  2xl:text-sm text-[12px] flex justify-center items-center h-[43px] 2xl:w-[164px]  Poppins-medium  rounded-sm font-medium hover:bg-red-50 transition">
                        Cancel Booking
                    </button>

                    <button onclick="window.location.href='/booking-detail'"
                        class="bg-[#133754] w-1/2 cursor-pointer text-white  rounded-sm Poppins-medium 2xl:text-sm text-[12px] flex justify-center items-center h-[43px] 2xl:w-[164px]  font-medium hover:bg-slate-700 transition">
                        View Details
                    </button>
                </div>
            </div>


            <div class="  h-full 2xl:w-[70px] w-[95%] py-2 self-center    flex border border-[#1CD8C4] bg-[#1CD8C4] flex-col justify-center items-center text-center px-3">


                <p class="text-[#FFFFFF] Poppins-medium text-[13px]">Up coming</p>

            </div>



            <div class="2xl:w-32 w-full  h-full flex flex-col justify-center items-center text-center px-3">


                <span class="text-[#3A3A3A] Poppins text-[11px] mt-1">
                    Total Earnings
                </span>
                <span class="text-[#02B502] 2xl:text-[30px] text-[25px] Poppins-medium ">
                    $450
                </span>

            </div>

        </div>
        <div class="border border-[#EAEAEA] rounded-sm overflow-hidden bg-white flex 2xl:items-center 2xl:flex-row flex-col">


            <div class="p-2">
                <img src="{{ asset('newsites/admin/images/booking-profile-img.png') }}" class="2xl:w-[180px] 2xl:h-[180px] w-full w-full " />
            </div>


            <div class="flex-1 py-2 px-2">
                <h3 class="text-[20px] font-semibold text-[#133754] Poppins-medium">
                    Jane Smith
                </h3>

                <p class="text-[#3B3B3B] Poppins font-normal mt-1">
                    English, History
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Recurring Schedule : 15 Days
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Booking Created : 05-Feb-2025
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Total Sessions : 20
                </p>


                <div class="flex  w-full gap-3 mt-4">
                    <button
                        class="border border-[#FF8C8C] w-1/2 cursor-pointer text-[#9D0000]  2xl:text-sm text-[12px] flex justify-center items-center h-[43px] 2xl:w-[164px]  Poppins-medium  rounded-sm font-medium hover:bg-red-50 transition">
                        Cancel Booking
                    </button>

                    <button onclick="window.location.href='/booking-detail'"
                        class="bg-[#133754] w-1/2 cursor-pointer text-white  rounded-sm Poppins-medium 2xl:text-sm text-[12px] flex justify-center items-center h-[43px] 2xl:w-[164px]  font-medium hover:bg-slate-700 transition">
                        View Details
                    </button>
                </div>
            </div>


            <div class="  h-full 2xl:w-[70px] w-[95%] py-2 self-center    flex border border-[#1CD8C4] bg-[#1CD8C4] flex-col justify-center items-center text-center px-3">


                <p class="text-[#FFFFFF] Poppins-medium text-[13px]">Up coming</p>

            </div>



            <div class="2xl:w-32 w-full  h-full flex flex-col justify-center items-center text-center px-3">


                <span class="text-[#3A3A3A] Poppins text-[11px] mt-1">
                    Total Earnings
                </span>
                <span class="text-[#02B502] 2xl:text-[30px] text-[25px] Poppins-medium ">
                    $450
                </span>

            </div>

        </div>
        <div class="border border-[#EAEAEA] rounded-sm overflow-hidden bg-white flex 2xl:items-center 2xl:flex-row flex-col">


            <div class="p-2">
                <img src="{{ asset('newsites/admin/images/booking-profile-img.png') }}" class="2xl:w-[180px] 2xl:h-[180px] w-full w-full " />
            </div>


            <div class="flex-1 py-2 px-2">
                <h3 class="text-[20px] font-semibold text-[#133754] Poppins-medium">
                    Jane Smith
                </h3>

                <p class="text-[#3B3B3B] Poppins font-normal mt-1">
                    English, History
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Recurring Schedule : 15 Days
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Booking Created : 05-Feb-2025
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Total Sessions : 20
                </p>


                <div class="flex  w-full gap-3 mt-4">
                    <button
                        class="border border-[#FF8C8C] w-1/2 cursor-pointer text-[#9D0000]  2xl:text-sm text-[12px] flex justify-center items-center h-[43px] 2xl:w-[164px]  Poppins-medium  rounded-sm font-medium hover:bg-red-50 transition">
                        Cancel Booking
                    </button>

                    <button onclick="window.location.href='/booking-detail'"
                        class="bg-[#133754] w-1/2 cursor-pointer text-white  rounded-sm Poppins-medium 2xl:text-sm text-[12px] flex justify-center items-center h-[43px] 2xl:w-[164px]  font-medium hover:bg-slate-700 transition">
                        View Details
                    </button>
                </div>
            </div>


            <div class="  h-full 2xl:w-[70px] w-[95%] py-2 self-center    flex border border-[#1CD8C4] bg-[#1CD8C4] flex-col justify-center items-center text-center px-3">


                <p class="text-[#FFFFFF] Poppins-medium text-[13px]">Up coming</p>

            </div>



            <div class="2xl:w-32 w-full  h-full flex flex-col justify-center items-center text-center px-3">


                <span class="text-[#3A3A3A] Poppins text-[11px] mt-1">
                    Total Earnings
                </span>
                <span class="text-[#02B502] 2xl:text-[30px] text-[25px] Poppins-medium ">
                    $450
                </span>

            </div>

        </div>
        <div class="border border-[#EAEAEA] rounded-sm overflow-hidden bg-white flex 2xl:items-center 2xl:flex-row flex-col">


            <div class="p-2">
                <img src="{{ asset('newsites/admin/images/booking-profile-img.png') }}" class="2xl:w-[180px] 2xl:h-[180px] w-full w-full " />
            </div>


            <div class="flex-1 py-2 px-2">
                <h3 class="text-[20px] font-semibold text-[#133754] Poppins-medium">
                    Jane Smith
                </h3>

                <p class="text-[#3B3B3B] Poppins font-normal mt-1">
                    English, History
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Recurring Schedule : 15 Days
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Booking Created : 05-Feb-2025
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                    Total Sessions : 20
                </p>


                <div class="flex  w-full gap-3 mt-4">
                    <button
                        class="border border-[#FF8C8C] w-1/2 cursor-pointer text-[#9D0000]  2xl:text-sm text-[12px] flex justify-center items-center h-[43px] 2xl:w-[164px]  Poppins-medium  rounded-sm font-medium hover:bg-red-50 transition">
                        Cancel Booking
                    </button>

                    <button onclick="window.location.href='/booking-detail'"
                        class="bg-[#133754] w-1/2 cursor-pointer text-white  rounded-sm Poppins-medium 2xl:text-sm text-[12px] flex justify-center items-center h-[43px] 2xl:w-[164px]  font-medium hover:bg-slate-700 transition">
                        View Details
                    </button>
                </div>
            </div>


            <div class="  h-full 2xl:w-[70px] w-[95%] py-2 self-center    flex border border-[#1CD8C4] bg-[#1CD8C4] flex-col justify-center items-center text-center px-3">


                <p class="text-[#FFFFFF] Poppins-medium text-[13px]">Up coming</p>

            </div>



            <div class="2xl:w-32 w-full  h-full flex flex-col justify-center items-center text-center px-3">


                <span class="text-[#3A3A3A] Poppins text-[11px] mt-1">
                    Total Earnings
                </span>
                <span class="text-[#02B502] 2xl:text-[30px] text-[25px] Poppins-medium ">
                    $450
                </span>

            </div>

        </div>

        <!-- <div class="border border-[#EAEAEA] rounded-sm overflow-hidden bg-white flex items-center">


            <div class="p-2">
                <img src="{{ asset('newsites/admin/images/booking-profile-img.png') }}"  class="w-[180px] h-[180px]"/>
            </div>


            <div class="flex-1 py-1 px-2">
                <h3 class="text-[20px] font-semibold text-[#133754] Poppins-medium">
                    Jane Smith
                </h3>

                <p class="text-[#3B3B3B] Poppins font-normal mt-1">
                    English, History
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal text-sm ">
                    Recurring Schedule : 15 Days
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal text-sm ">
                    Booking Created : 05-Feb-2025
                </p>

                <p class="text-[#3B3B3B] Poppins font-normal text-sm ">
                    Total Sessions : 20
                </p>


                <div class="flex gap-3 mt-4">
                  
                    <button
                        class="bg-[#133754] cursor-pointer text-white  rounded-sm Poppins-medium text-sm flex justify-center items-center h-[43px] w-full font-medium hover:bg-slate-700 transition">
                        View Details
                    </button>
                </div>
            </div>


            <div class="  h-full w-[70px] flex border border-[#1CD8C4] bg-[#1CD8C4] flex-col justify-center items-center text-center px-3">


               <p class="text-[#FFFFFF] Poppins-medium text-[13px]">Up coming</p>

            </div>

            <div class="w-32  h-full flex flex-col justify-center items-center text-center px-3">


                <span class="text-[#3A3A3A] Poppins text-[11px] mt-1">
                    Total Earnings
                </span>
                <span class="text-[#02B502] text-[30px] Poppins-medium ">
                    $450
                </span>

            </div>

        </div> -->




    </div>
</div>
@endsection