@extends('layouts.layout')

@section('content')
<div class="my-6">
    <h2 class="text-2xl text-[#133754] Poppins-medium">
        Booking Details
    </h2>
    <div class="border desk:w-[67%] lg:w-[80%] w-full my-6  border-[#EAEAEA] rounded-[5px] overflow-hidden bg-white flex items-center">


        <div class="p-2">
            <img src="{{ asset('newsites/admin/images/booking-profile-img.png') }}" class="md:w-[159px] md:h-[162px] sm:w-[100px] sm:h-[100px] w-[70px] h-[70px]" />
        </div>


        <div class="flex-1 py-1 md:px-5 sm:px-2 px-1">
            <h3 class="md:text-[22px] sm:text-lg text-[15px] font-semibold text-[#454545] Poppins-medium">
                Jane Smith
            </h3>

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


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




            <div class="flex md:flex-nowrap flex-wrap md:gap-3 gap-1 md:mt-6 w-full">
                <button
                    class="border border-[#FF8C8C] md:w-1/2 w-full md:py-[14px] py-1.5 cursor-pointer text-[#9D0000]  text-sm flex justify-center items-center  Poppins-medium  rounded-sm font-medium hover:bg-red-50 transition">
                    Cancel Booking
                </button>

                <!-- <button
                    class="bg-[#1CD8C4] cursor-pointer md:w-1/2 w-full md:py-[14px] py-1.5 text-[#272727]  rounded-sm Poppins-medium text-sm flex justify-center items-center  font-medium  transition">
                    Chat0
                </button> -->
            </div>
        </div>
        <div class="border-l border-[#EAEAEA] border-1 h-[150px] "></div>






        <div class="md:w-40 sm:w-24 w-20   h-full flex flex-col justify-center  text-center ">


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

        </div>

    </div>
    <div class="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1   gap-2">
        <div class="max-w-[504px] border border-gray-300 rounded-lg xldesk:p-4 p-2 xldesk:px-6 px-4 pt-5 bg-white">

            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="flex items-center xldesk:gap-4 gap-2 ">
                        <div class="bg-[#F4C701] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                            <img src="{{ asset('newsites/admin/images/session-frame.png') }}" alt="images" />
                        </div>
                        <h3 class="text-[#272727] Poppins-medium  xldesk:text-[22px] text-lg  mb-0">Monday</h3>
                    </div>
                </div>

                <span class="bg-[#F49F01] rounded-[5px] xldesk:px-[39px] px-6 py-2 text-sm text-[#000000] Poppins-medium">
                    Upcoming
                </span>
            </div>

            <div class="space-y-3 text-[#151515] text-lg Poppins">
                <div class="flex  justify-between">
                    <div class="flex items-center gap-3">
                        <i class="fa-regular fa-calendar text-2xl"></i> <span>13-Dec-2025</span>
                    </div>
                    <span class="bg-[#00D2BB] Inter  text-white font-semibold xldesk:px-8 px-4 xldesk:py-1.5 py-1 rounded-sm">
                        $40
                    </span>
                </div>

                <div class="flex items-center gap-3">
                    <i class="fa-regular fa-clock text-2xl"></i> <span>11:00 - 13:00</span>
                </div>
                <p><span class="font-medium">Duration:</span> 2 Hours</p>
                <p>English, History</p>
            </div>



            <hr class="my-4  text-[#D7D7D7]">

            <button
                class="w-full bg-[#C00000] Poppins-medium cursor-pointer text-white py-3 rounded-sm text-[15px] font-medium hover:bg-red-700 transition">
                Cancel Session
            </button>
        </div>
        
        <div class="max-w-[504px] border border-gray-300 rounded-lg xldesk:p-4 p-2 xldesk:px-6 px-4 pt-5 bg-white">

            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="flex items-center xldesk:gap-4 gap-2 ">
                        <div class="bg-[#F4C701] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                            <img src="{{ asset('newsites/admin/images/session-frame.png') }}" alt="images" />
                        </div>
                        <h3 class="text-[#272727] Poppins-medium  xldesk:text-[22px] text-lg  mb-0">Monday</h3>
                    </div>
                </div>

                <span class="bg-[#F49F01] rounded-[5px] xldesk:px-[39px] px-6 py-2 text-sm text-[#000000] Poppins-medium">
                    Upcoming
                </span>
            </div>

            <div class="space-y-3 text-[#151515] text-lg Poppins">
                <div class="flex  justify-between">
                    <div class="flex items-center gap-3">
                        <i class="fa-regular fa-calendar text-2xl"></i> <span>13-Dec-2025</span>
                    </div>
                    <span class="bg-[#00D2BB] Inter  text-white font-semibold xldesk:px-8 px-4 xldesk:py-1.5 py-1 rounded-sm">
                        $40
                    </span>
                </div>

                <div class="flex items-center gap-3">
                    <i class="fa-regular fa-clock text-2xl"></i> <span>11:00 - 13:00</span>
                </div>
                <p><span class="font-medium">Duration:</span> 2 Hours</p>
                <p>English, History</p>
            </div>



            <hr class="my-4  text-[#D7D7D7]">

            <button
                class="w-full bg-[#C00000] Poppins-medium cursor-pointer text-white py-3 rounded-sm text-[15px] font-medium hover:bg-red-700 transition">
                Cancel Session
            </button>
        </div>
        
        <div class="max-w-[504px] border border-gray-300 rounded-lg xldesk:p-4 p-2 xldesk:px-6 px-4 pt-5 bg-white">

            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="flex items-center xldesk:gap-4 gap-2 ">
                        <div class="bg-[#F4C701] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                            <img src="{{ asset('newsites/admin/images/session-frame.png') }}" alt="images" />
                        </div>
                        <h3 class="text-[#272727] Poppins-medium  xldesk:text-[22px] text-lg  mb-0">Monday</h3>
                    </div>
                </div>

                <span class="bg-[#F49F01] rounded-[5px] xldesk:px-[39px] px-6 py-2 text-sm text-[#000000] Poppins-medium">
                    Upcoming
                </span>
            </div>

            <div class="space-y-3 text-[#151515] text-lg Poppins">
                <div class="flex  justify-between">
                    <div class="flex items-center gap-3">
                        <i class="fa-regular fa-calendar text-2xl"></i> <span>13-Dec-2025</span>
                    </div>
                    <span class="bg-[#00D2BB] Inter  text-white font-semibold xldesk:px-8 px-4 xldesk:py-1.5 py-1 rounded-sm">
                        $40
                    </span>
                </div>

                <div class="flex items-center gap-3">
                    <i class="fa-regular fa-clock text-2xl"></i> <span>11:00 - 13:00</span>
                </div>
                <p><span class="font-medium">Duration:</span> 2 Hours</p>
                <p>English, History</p>
            </div>



            <hr class="my-4  text-[#D7D7D7]">

            <button
                class="w-full bg-[#C00000] Poppins-medium cursor-pointer text-white py-3 rounded-sm text-[15px] font-medium hover:bg-red-700 transition">
                Cancel Session
            </button>
        </div>
        
        <div class="max-w-[504px] border border-gray-300 rounded-lg xldesk:p-4 p-2 xldesk:px-6 px-4 pt-5 bg-white">

            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="flex items-center xldesk:gap-4 gap-2 ">
                        <div class="bg-[#F4C701] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                            <img src="{{ asset('newsites/admin/images/session-frame.png') }}" alt="images" />
                        </div>
                        <h3 class="text-[#272727] Poppins-medium  xldesk:text-[22px] text-lg  mb-0">Monday</h3>
                    </div>
                </div>

                <span class="bg-[#F49F01] rounded-[5px] xldesk:px-[39px] px-6 py-2 text-sm text-[#000000] Poppins-medium">
                    Upcoming
                </span>
            </div>

            <div class="space-y-3 text-[#151515] text-lg Poppins">
                <div class="flex  justify-between">
                    <div class="flex items-center gap-3">
                        <i class="fa-regular fa-calendar text-2xl"></i> <span>13-Dec-2025</span>
                    </div>
                    <span class="bg-[#00D2BB] Inter  text-white font-semibold xldesk:px-8 px-4 xldesk:py-1.5 py-1 rounded-sm">
                        $40
                    </span>
                </div>

                <div class="flex items-center gap-3">
                    <i class="fa-regular fa-clock text-2xl"></i> <span>11:00 - 13:00</span>
                </div>
                <p><span class="font-medium">Duration:</span> 2 Hours</p>
                <p>English, History</p>
            </div>



            <hr class="my-4  text-[#D7D7D7]">

            <button
                class="w-full bg-[#C00000] Poppins-medium cursor-pointer text-white py-3 rounded-sm text-[15px] font-medium hover:bg-red-700 transition">
                Cancel Session
            </button>
        </div>
        
        

    </div>





</div>
@endsection