@extends('layouts.main')
@section('content')
<style>
   .custom-btn {
   background-color: #007bff;
   color: white;
   border: none;
   padding: 10px 20px;
   border-radius: 5px;
   cursor: pointer;
   }
   .custom-btn:hover {
   background-color: #0056b3;
   }
   .session-table{
   border-collapse: separate;
   border-spacing: 0 14px;
   }
   /* TABLE HEAD */
   .session-table thead th{
   border: none;
   background: #f8fafc;
   color: #64748b;
   font-size: 13px;
   font-weight: 700;
   padding: 16px;
   text-transform: uppercase;
   white-space: nowrap;
   }
   /* TABLE ROW */
   .session-table tbody tr{
   background: #fff;
   box-shadow: 0 4px 20px rgba(0,0,0,0.05);
   border-radius: 18px;
   transition: 0.3s ease;
   }
   .session-table tbody tr:hover{
   transform: translateY(-3px);
   box-shadow: 0 12px 28px rgba(0,0,0,0.08);
   }
   .session-table tbody td{
   padding: 18px 16px;
   vertical-align: middle;
   border-top: none;
   border-bottom: none;
   }
   /* ICON */
   .session-icon{
   width: 52px;
   height: 52px;
   border-radius: 16px;
   background: linear-gradient(135deg,#06b6d4,#3b82f6);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   box-shadow: 0 4px 15px rgba(59,130,246,0.3);
   }
   /* STATUS */
   .active-badge{
   background: rgba(34,197,94,0.12);
   color: #16a34a;
   padding: 8px 14px;
   border-radius: 30px;
   font-size: 13px;
   font-weight: 600;
   }
   /* BUTTON */
   .btn-action{
   width: 42px;
   height: 42px;
   border: none;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   transition: 0.3s;
   }
   /* DELETE */
   .delete-btn{
   background: rgba(239,68,68,0.12);
   color: #dc2626;
   }
   .delete-btn:hover{
   background: #dc2626;
   color: #fff;
   transform: scale(1.08);
   }
   /* EMPTY */
   .empty-state{
   padding: 40px;
   text-align: center;
   }
   /* MOBILE */
   @media(max-width:768px){
   .session-table thead{
   display: none;
   }
   .session-table tbody tr{
   display: block;
   margin-bottom: 20px;
   }
   .session-table tbody td{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 16px;
   border-bottom: 1px solid #f1f5f9;
   }
   .session-table tbody td:last-child{
   border-bottom: none;
   }
   }
   .session-list-table{
   border-collapse: separate;
   border-spacing: 0 14px;
   }
   /* TABLE HEAD */
   .session-list-table thead th{
   border: none;
   background: #f8fafc;
   color: #64748b;
   font-size: 13px;
   font-weight: 700;
   padding: 16px;
   text-transform: uppercase;
   white-space: nowrap;
   }
   /* ROW STYLE */
   .session-list-table tbody tr{
   background: #fff;
   box-shadow: 0 4px 20px rgba(0,0,0,0.05);
   border-radius: 18px;
   transition: 0.3s ease;
   }
   .session-list-table tbody tr:hover{
   transform: translateY(-3px);
   box-shadow: 0 12px 28px rgba(0,0,0,0.08);
   }
   .session-list-table tbody td{
   padding: 18px 16px;
   vertical-align: middle;
   border-top: none;
   border-bottom: none;
   }
   /* SESSION ICON */
   .session-icon{
   width: 54px;
   height: 54px;
   border-radius: 16px;
   background: linear-gradient(135deg,#06b6d4,#3b82f6);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   box-shadow: 0 4px 15px rgba(59,130,246,0.3);
   }
   /* SESSION TYPE */
   .session-type-badge{
   background: rgba(99,102,241,0.12);
   color: #4f46e5;
   padding: 8px 14px;
   border-radius: 30px;
   font-size: 13px;
   font-weight: 600;
   }
   /* FEES */
   .fees-box{
   background: rgba(34,197,94,0.12);
   color: #16a34a;
   padding: 8px 14px;
   border-radius: 12px;
   font-weight: 700;
   display: inline-block;
   }
   /* BUTTON */
   .btn-action{
   width: 42px;
   height: 42px;
   border: none;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   transition: 0.3s;
   }
   /* DELETE */
   .delete-btn{
   background: rgba(239,68,68,0.12);
   color: #dc2626;
   }
   .delete-btn:hover{
   background: #dc2626;
   color: #fff;
   transform: scale(1.08);
   }
   /* EMPTY */
   .empty-state{
   padding: 40px;
   text-align: center;
   }
   /* MOBILE */
   @media(max-width:768px){
   .session-list-table thead{
   display: none;
   }
   .session-list-table tbody tr{
   display: block;
   margin-bottom: 20px;
   }
   .session-list-table tbody td{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 16px;
   border-bottom: 1px solid #f1f5f9;
   }
   .session-list-table tbody td:last-child{
   border-bottom: none;
   }
   }
</style>
<div class="container-fluid py-4">
   <div class="row">
      <!-- ================= SESSION TYPES ================= -->
      <div class="col-md-5">
         <div class="card shadow-sm">
            <div class="card-header bg-primary text-white">
               <h5 class="mb-0">Session Types</h5>
            </div>
            <div class="card-body">
               @can('session_create')
               <form method="POST" action="{{ route('superadmin.session.type.store') }}">
                  @csrf
                  <div class="card shadow-sm border-0 rounded-3">
                     <div class="card-header bg-dark text-white">
                        <h5 class="mb-0">Add Session Type</h5>
                     </div>
                     <div class="card-body">
                        <div class="row g-3">
                           {{-- Session Name --}}
                           <div class="col-md-6">
                              <label class="form-label fw-semibold">Session Type</label>
                              <input type="text" name="name" class="form-control" placeholder="e.g. Chat / Video / Call" required>
                           </div>
                           {{-- Time Slot --}}
                           <div class="col-md-3">
                              <label class="form-label fw-semibold">Time Slot</label>
                              <input type="text" name="time_slot" class="form-control" placeholder="e.g. 10:00 AM" required>
                           </div>
                           {{-- Fees --}}
                           <div class="col-md-3">
                              <label class="form-label fw-semibold">Fees (₹)</label>
                              <input type="number" name="fees" class="form-control" placeholder="e.g. 100" required>
                           </div>
                        </div>
                     </div>
                     <div class="card-footer bg-light text-end">
                        <button type="submit" class="btn btn-primary px-4">
                        <i class="bi bi-plus-circle"></i> Add Session
                        </button>
                     </div>
                  </div>
               </form>

               
               
               @endcan
               <div class="table-responsive">
                  <table class="table align-middle session-table mb-0">
                     <thead>
                        <tr>
                           <th width="80">#ID</th>
                           <th>Session Type</th>
                           <th width="140" class="text-center">Status</th>
                           <th width="120" class="text-center">Action</th>
                        </tr>
                     </thead>
                     <tbody>
                        @forelse($types as $type)
                        <tr>
                           <!-- ID -->
                           <td>
                              <span class="fw-bold text-primary">
                              #{{ $type->id }}
                              </span>
                           </td>
                           <!-- SESSION TYPE -->
                           <td>
                              <div class="d-flex align-items-center gap-3">
                                 <!-- ICON -->
                                 <div class="session-icon">
                                    <i class="bi bi-calendar2-check-fill"></i>
                                 </div>
                                 <!-- NAME -->
                                 <div>
                                    <h6 class="mb-0 fw-semibold text-dark">
                                       {{ $type->name }}
                                    </h6>
                                    <small class="text-muted">
                                    Session Type
                                    </small>
                                 </div>
                              </div>
                           </td>
                           <!-- STATUS -->
                           <td class="text-center">
                              <span class="badge active-badge">
                              <i class="bi bi-check-circle-fill me-1"></i>
                              Active
                              </span>
                           </td>
                           <!-- ACTION -->
                           <td class="text-center">
                              <div class="d-flex justify-content-center align-items-center gap-2">
                                 @can('session_delete')
                                 <form action="{{ route('superadmin.session.type.delete', $type->id) }}"
                                    method="POST"
                                    class="m-0">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                       class="btn-action delete-btn"
                                       onclick="return confirm('Delete this session type?')"
                                       title="Delete">
                                    <i class="bi bi-trash"></i>
                                    </button>
                                 </form>
                                 @endcan
                              </div>
                           </td>
                        </tr>
                        @empty
                        <tr>
                           <td colspan="4">
                              <div class="empty-state">
                                 <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                                    width="120"
                                    class="mb-3">
                                 <h5>No Session Types Found</h5>
                                 <p class="text-muted mb-0">
                                    No session type records available.
                                 </p>
                              </div>
                           </td>
                        </tr>
                        @endforelse
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
      <!-- ================= ADD SESSION ================= -->
      <div class="col-md-7">
         <div class="card shadow-sm">
            <div class="card-header bg-success text-white">
               <h5 class="mb-0">Add Session</h5>
            </div>
            <div class="card-body">
               <form action="{{ route('superadmin.session.store') }}" method="POST">
                  @csrf
                  <div class="row g-3">
                     <div class="col-md-6">
                        <label class="form-label">Session Name</label>
                        <input type="text" name="name" class="form-control" required>
                     </div>
                     <div class="col-md-6">
                        <label class="form-label">Session Type</label>
                        <select name="session_type_id" class="form-control" required>
                           <option value="">Select Type</option>
                           @foreach($types as $type)
                           <option value="{{ $type->id }}">{{ $type->name }}</option>
                           @endforeach
                        </select>
                     </div>
                     <div class="col-md-4">
                        <label class="form-label">Duration (Minutes)</label>
                        <input type="number" name="duration" class="form-control" required>
                     </div>
                     <div class="col-md-4">
                        <label class="form-label">Fees</label>
                        <input type="text" name="fees" class="form-control" required>
                     </div>
                     <div class="col-md-4">
                        <label class="form-label">Remarks</label>
                        <input type="text" name="remarks" class="form-control" required>
                     </div>
                  </div>
                  <div class="mt-3">
                     <button class="custom-btn btn-success">Save Session</button>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
   
   <!-- ================= SESSION LIST ================= -->
   <div class="card shadow-sm mt-4">
      <div class="card-header bg-dark text-white">
         <h5 class="mb-0">Session Type List</h5>
      </div>
      <div class="card-body">
         <div class="table-responsive">
            <table class="table align-middle session-list-table mb-0">
               <thead>
                  <tr>
                     <th width="80">#ID</th>
                     <th>Session</th>
                     <th>Type</th>
                     <th width="140">Duration</th>
                     <th width="120">Fees</th>
                     <th>Remarks</th>
                     <th width="120" class="text-center">Action</th>
                  </tr>
               </thead>
               <tbody>
                  @forelse($sessions as $session)
                  <tr>
                     <!-- ID -->
                     <td>
                        <span class="fw-bold text-primary">
                        #{{ $session->id }}
                        </span>
                     </td>
                     <!-- SESSION NAME -->
                     <td>
                        <div class="d-flex align-items-center gap-3">
                           <!-- ICON -->
                           <div class="session-icon">
                              <i class="bi bi-journal-medical"></i>
                           </div>
                           <!-- NAME -->
                           <div>
                              <h6 class="mb-0 fw-semibold text-dark">
                                 {{ $session->name }}
                              </h6>
                              <small class="text-muted">
                              Therapy Session
                              </small>
                           </div>
                        </div>
                     </td>
                     <!-- TYPE -->
                     <td>
                        <span class="session-type-badge">
                        {{ $session->sessionType->name ?? 'N/A' }}
                        </span>
                     </td>
                     <!-- DURATION -->
                     <td>
                        <div class="fw-semibold text-dark">
                           {{ $session->duration }} Min
                        </div>
                     </td>
                     <!-- FEES -->
                     <td>
                        <div class="fees-box">
                           ₹{{ $session->fees }}
                        </div>
                     </td>
                     <!-- REMARKS -->
                     <td>
                        <span class="text-muted">
                        {{ $session->remarks ?? 'No Remarks' }}
                        </span>
                     </td>
                     <!-- ACTION -->
                     <td class="text-center">
                        <div class="d-flex justify-content-center align-items-center">
                           <form action="{{ route('superadmin.session.delete', $session->id) }}"
                              method="POST"
                              class="m-0">
                              @csrf
                              @method('DELETE')
                              <button type="submit"
                                 class="btn-action delete-btn"
                                 onclick="return confirm('Delete this session?')"
                                 title="Delete">
                              <i class="bi bi-trash"></i>
                              </button>
                           </form>
                        </div>
                     </td>
                  </tr>
                  @empty
                  <tr>
                     <td colspan="7">
                        <div class="empty-state">
                           <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                              width="120"
                              class="mb-3">
                           <h5>No Sessions Found</h5>
                           <p class="text-muted mb-0">
                              No session records available right now.
                           </p>
                        </div>
                     </td>
                  </tr>
                  @endforelse
               </tbody>
            </table>
         </div>
      </div>
   </div>
</div>
@endsection