@extends('tutor.layouts.layout')
@section('title', 'Session Reschedule Request')
@section('content')
    <div class="my-6">
        <h2 class="text-2xl text-[#133754] Poppins-medium">
            Session Reschedule Request
        </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($session->student->userDefaultProfile) }}"
                    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">
                    {{ $session->student->name }}
                </h3>

                <p class="text-[#3B3B3B] Poppins sm:text-[16px] text-sm font-normal sm:mt-1">
                    Booking Created :
                    {{ !$session->booking->booking_days_ago > 0 ? 'Today' : $session->booking->booking_days_ago . ' Days ago' }}
                </p>


                <p class="text-[#3B3B3B] Poppins  sm:text-[16px] text-sm font-normal  ">
                    Total Sessions: {{ $session->booking->total_sessions }}
                </p>




                <div class="flex md:flex-nowrap flex-wrap md:gap-3 gap-1 md:mt-6 w-full">

                    


                </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 ">
                    ${{ $session->amount }}
                </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-3 xldesk:px-6 px-4 pt-5 bg-white">

    <!-- Header -->
    <div class="flex items-center justify-between mb-4">
        <div class="flex items-center gap-3">
            <div class="bg-[#F4C701] border border-[#EAEAEA] rounded-[5px] p-2 flex justify-center">
                <img src="{{ asset('tutor/images/session-frame.png') }}" class="w-5 h-5" />
            </div>

            <h3 class="text-[#272727] Poppins-medium xldesk:text-[22px] text-lg mb-0">
                {{ date('l', strtotime($session->start_date)) }}
            </h3>
        </div>
        @if($session->rescheduled_status!='approved')
        
        <span class="{{ $session->status_class }} rounded-[5px] xldesk:px-[30px] px-4 py-2 text-sm text-[#000000] Poppins-medium">
            {{ ucFirst($session->rescheduled_status) }}
        </span>
        @else
        <span class=" rounded-[5px] xldesk:px-[30px] px-4 py-2 text-sm text-[#000000] Poppins-medium completed">
            {{ ucFirst($session->rescheduled_status) }}
        </span>
        @endif
    </div>

    <!-- Current Session -->
    <div class="space-y-3 text-[#151515] text-lg Poppins">

        <div class="flex justify-between items-center">
            <div class="flex items-center gap-2">
                <i class="fa-regular fa-calendar text-[18px]"></i>
                <span>{{ date('d-M-y', strtotime($session->start_date)) }}</span>
            </div>

            <span class="bg-[#00D2BB] Inter text-white font-semibold xldesk:px-6 px-3 py-1 rounded-sm">
                ${{ $session->amount }}
            </span>
        </div>

        <div class="flex items-center gap-2">
            <i class="fa-regular fa-clock text-[18px]"></i>
            <span>
                {{ $session->start_time_formatted }} -
                {{ $session->end_time_formatted }}
            </span>
        </div>

    </div>

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

    <!-- Rescheduled Session -->
    <div class="space-y-3 text-[#151515] text-lg Poppins">

        <p class="Poppins-medium text-[#3B3B3B]">
            Rescheduled Slot
        </p>

        <div class="flex items-center gap-2">
            <i class="fa-regular fa-calendar text-[18px]"></i>
            <span>
                {{ date('d-M-y', strtotime($session->rescheduled_start_date)) }}
            </span>
        </div>

        <div class="flex items-center gap-2">
            <i class="fa-regular fa-clock text-[18px]"></i>
            <span>
                {{ $session->rescheduled_start_time_formatted }} -
                {{ $session->rescheduled_end_time_formatted }}
            </span>
        </div>

        <p>
            <span class="font-medium">Duration:</span>
            {{ $session->duration }}
        </p>

    </div>

    <!-- Actions -->
    @if($session->rescheduled_status == 'requested')
        <div class="flex gap-3 mt-5">

          

            <button command="show-modal" commandfor="confirm{{ $session->id }}"
                class="w-full bg-[#1CD8C4] Poppins-medium text-white py-3 rounded-sm text-[15px] font-medium hover:opacity-90 transition cursor-pointer">
                Respond
            </button>

        </div>
    @endif

</div>





    </div>


          @include('components.sessionRescheduleMessage', [
              'id' => $session->id,
              'message' => 'Are you sure to approve reschedule request?',
              'route' => route('tutor.session.reschedule',encrypt($session->id)),
          ])
      


  


@endsection
