@extends('layouts.main')
@section('content')
<style>
   /* ================= MINI SESSION CARD ================= */
   .mini-session-card{
   position: relative;
   background: #fff;
   border-radius: 24px;
   padding: 22px;
   overflow: hidden;
   height: 100%;
   transition: 0.35s ease;
   border: 1px solid #eef2ff;
   box-shadow: 0 10px 28px rgba(0,0,0,0.05);
   }
   .mini-session-card:hover{
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(0,0,0,0.08);
   }
   /* TOP SHAPE */
   .mini-top-shape{
   position: absolute;
   top: -45px;
   right: -45px;
   width: 130px;
   height: 130px;
   background: linear-gradient(135deg,#6366f1,#8b5cf6);
   opacity: 0.08;
   border-radius: 50%;
   }
   /* ================= ICON ================= */
   .mini-session-icon{
   width: 62px;
   height: 62px;
   border-radius: 20px;
   background: linear-gradient(135deg,#4f46e5,#7c3aed);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   margin-bottom: 18px;
   box-shadow: 0 12px 24px rgba(99,102,241,0.30);
   }
   /* ================= TITLE ================= */
   .mini-session-title{
   font-size: 20px;
   font-weight: 700;
   color: #0f172a;
   margin-bottom: 20px;
   line-height: 1.4;
   }
   /* ================= INFO ================= */
   .mini-session-info{
   display: flex;
   flex-direction: column;
   gap: 12px;
   }
   /* ITEM */
   .mini-info-item{
   display: flex;
   align-items: center;
   gap: 12px;
   background: #f8fafc;
   padding: 12px 14px;
   border-radius: 16px;
   transition: 0.3s;
   }
   .mini-info-item:hover{
   background: #eef2ff;
   }
   /* ICON */
   .mini-info-icon{
   width: 42px;
   height: 42px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   flex-shrink: 0;
   }
   .duration{
   background: rgba(59,130,246,0.12);
   color: #2563eb;
   }
   .type{
   background: rgba(99,102,241,0.12);
   color: #4f46e5;
   }
   /* LABEL */
   .mini-label{
   font-size: 12px;
   color: #64748b;
   margin-bottom: 2px;
   }
   /* VALUE */
   .mini-value{
   font-size: 14px;
   font-weight: 600;
   color: #0f172a;
   }
   /* NOTE */
   .mini-note{
   margin-top: 16px;
   background: rgba(16,185,129,0.08);
   color: #047857;
   border-radius: 14px;
   padding: 12px 14px;
   font-size: 13px;
   line-height: 1.6;
   }
   /* ================= PRICE ================= */
   .mini-price-wrapper{
   margin-top: 20px;
   margin-bottom: 20px;
   padding-top: 18px;
   border-top: 1px dashed #dbeafe;
   display: flex;
   align-items: center;
   justify-content: space-between;
   }
   .mini-price{
   font-size: 28px;
   font-weight: 800;
   color: #16a34a;
   }
   /* BADGE */
   .mini-badge{
   background: rgba(99,102,241,0.12);
   color: #4f46e5;
   padding: 7px 13px;
   border-radius: 30px;
   font-size: 12px;
   font-weight: 600;
   }
   /* ================= BUTTON ================= */
   .mini-book-btn{
   width: 100%;
   border-radius: 16px;
   padding: 14px;
   background: linear-gradient(135deg,#4f46e5,#6366f1);
   color: #fff;
   text-decoration: none;
   font-size: 14px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   transition: 0.3s;
   box-shadow: 0 12px 24px rgba(79,70,229,0.25);
   }
   .mini-book-btn:hover{
   color: #fff;
   transform: translateY(-2px);
   box-shadow: 0 18px 34px rgba(79,70,229,0.35);
   }
   /* ================= MOBILE ================= */
   @media(max-width:768px){
   .mini-session-card{
   padding: 18px;
   }
   .mini-session-title{
   font-size: 18px;
   }
   .mini-price{
   font-size: 24px;
   }
   }
</style>
<div>
   <div class="page-title">Session List</div>
   {{-- Success Message --}}
   @if(session('success'))
   <div class="alert alert-success text-center">
      {{ session('success') }}
   </div>
   @endif
   <div class="row g-3">
      @forelse($sessions as $session)
      <div class="col-lg-4 col-md-6 col-sm-6 mb-4">
         <div class="mini-session-card">
            <!-- TOP CIRCLE -->
            <div class="mini-top-shape"></div>
            <!-- ICON -->
            <div class="mini-session-icon">
               <i class="bi bi-heart-pulse-fill"></i>
            </div>
            <!-- TITLE -->
            <h5 class="mini-session-title">
               {{ $session->name }}
            </h5>
            <!-- SESSION DETAILS -->
            <div class="mini-session-info">
               <!-- DURATION -->
               <div class="mini-info-item">
                  <div class="mini-info-icon duration">
                     <i class="bi bi-clock-fill"></i>
                  </div>
                  <div>
                     <div class="mini-label">
                        Duration
                     </div>
                     <div class="mini-value">
                        {{ $session->duration }} Min
                     </div>
                  </div>
               </div>
               <!-- TYPE -->
               <div class="mini-info-item">
                  <div class="mini-info-icon type">
                     <i class="bi bi-grid-fill"></i>
                  </div>
                  <div>
                     <div class="mini-label">
                        Type
                     </div>
                     <div class="mini-value">
                        {{ $session->sessionType->name ?? 'General' }}
                     </div>
                  </div>
               </div>
            </div>
            <!-- NOTE -->
            @if($session->remarks)
            <div class="mini-note">
               {{ $session->remarks }}
            </div>
            @endif
            <!-- PRICE -->
            <div class="mini-price-wrapper">
               <div class="mini-price">
                  ₹ {{ number_format($session->fees, 2) }}
               </div>
               {{-- 
               <div class="mini-badge">
                  Premium
               </div>
               --}}
            </div>
            <!-- BUTTON -->
            <a href="{{ route('user.booking') }}"
               class="mini-book-btn">
            <i class="bi bi-calendar-check-fill"></i>
            Book Now
            </a>
         </div>
      </div>
      @empty
      <div class="col-12">
         <div class="empty-box">
            <h6>No Sessions Available</h6>
         </div>
      </div>
      @endforelse
   </div>
</div>
@endsection