@extends('layouts.main')
@section('content')
    <style>
       /* Premium Dark theme compatible styles */
       .custom-btn {
          background-color: var(--primary);
          color: white;
          border: none;
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
          transition: 0.25s;
       }

       .custom-btn:hover {
          background-color: var(--primary-light);
       }

       .session-table {
          border-collapse: separate;
          border-spacing: 0 14px;
       }

       /* TABLE HEAD */
       .session-table thead th {
          border: none;
          background: rgba(255, 255, 255, 0.03);
          color: var(--primary-light);
          font-size: 13px;
          font-weight: 700;
          padding: 16px;
          text-transform: uppercase;
          white-space: nowrap;
       }

       /* TABLE ROW */
       .session-table tbody tr {
          background: rgba(255, 255, 255, 0.02);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
          border-radius: 18px;
          transition: 0.3s ease;
          border: 1px solid var(--border-color);
       }

       .session-table tbody tr:hover {
          transform: translateY(-3px);
          background: rgba(255, 255, 255, 0.04);
          box-shadow: 0 12px 28px rgba(99, 102, 241, 0.1);
       }

       .session-table tbody td {
          padding: 18px 16px;
          vertical-align: middle;
          border-top: none;
          border-bottom: none;
          color: var(--text-main) !important;
       }

       /* 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: #10B981;
          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;
       }

       .edit-btn {
          background: rgba(245, 158, 11, 0.12);
          color: #F59E0B;
       }

       .edit-btn:hover {
          background: #F59E0B;
          color: #fff;
          transform: scale(1.08);
       }

       /* DELETE */
       .delete-btn {
          background: rgba(239, 68, 68, 0.12);
          color: #ef4444;
       }

       .delete-btn:hover {
          background: #ef4444;
          color: #fff;
          transform: scale(1.08);
       }

       /* EMPTY */
       .empty-state {
          padding: 40px;
          text-align: center;
          color: var(--text-muted);
       }

       /* 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 var(--border-color);
          }

          .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: rgba(255, 255, 255, 0.03);
          color: var(--primary-light);
          font-size: 13px;
          font-weight: 700;
          padding: 16px;
          text-transform: uppercase;
          white-space: nowrap;
       }

       /* ROW STYLE */
       .session-list-table tbody tr {
          background: rgba(255, 255, 255, 0.02);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
          border-radius: 18px;
          transition: 0.3s ease;
          border: 1px solid var(--border-color);
       }

       .session-list-table tbody tr:hover {
          transform: translateY(-3px);
          background: rgba(255, 255, 255, 0.04);
          box-shadow: 0 12px 28px rgba(99, 102, 241, 0.1);
       }

       .session-list-table tbody td {
          padding: 18px 16px;
          vertical-align: middle;
          border-top: none;
          border-bottom: none;
          color: var(--text-main) !important;
       }

       /* SESSION TYPE */
       .session-type-badge {
          background: rgba(99, 102, 241, 0.12);
          color: var(--primary-light);
          padding: 8px 14px;
          border-radius: 30px;
          font-size: 13px;
          font-weight: 600;
       }

       /* FEES */
       .fees-box {
          background: rgba(16, 185, 129, 0.12);
          color: var(--accent);
          padding: 8px 14px;
          border-radius: 12px;
          font-weight: 700;
          display: inline-block;
       }

       /* 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 var(--border-color);
          }

          .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-12">
            <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">
                  
                     <form method="POST" action="{{ route('superadmin.session.type.store') }}">

                        @csrf

                        <div class="card shadow-lg border-0 rounded-4 overflow-hidden">
                           <!-- BODY -->
                           <div class="card-body p-4">

                              <div class="row g-4">

                                 <!-- SESSION TYPE -->
                                 <div class="col-md-4">

                                    <label class="form-label fw-semibold">
                                       Session Type
                                    </label>

                                    <input type="text" name="name" class="form-control form-control-lg"
                                       placeholder="e.g. Chat / Video / Voice Call" required>

                                 </div>

                                 <!-- SESSION TIME -->
                                 <div class="col-md-2">

                                    <label class="form-label fw-semibold">
                                       Session Time
                                    </label>

                                    <input type="text" name="session_time" class="form-control form-control-lg"
                                       placeholder="e.g. 30 Minutes" required>

                                 </div>

                                 <!-- TIME SLOT -->
                                 <div class="col-md-2">

                                    <label class="form-label fw-semibold">
                                       Time Slot
                                    </label>

                                    <input type="text" name="time_slot" class="form-control form-control-lg"
                                       placeholder="e.g. 10:00 AM" required>

                                 </div>

                                 <!-- FEES -->
                                <div class="col-md-4">
                                    <label class="form-label fw-semibold">Fees (₹)</label>

                                    <input type="number"
                                          name="fees"
                                          id="fees"
                                          class="form-control form-control-lg"
                                          placeholder="e.g. 1000"
                                          required>
                                 </div>

                                 <!-- DISCOUNT TYPE -->
                                 <div class="col-md-4">
                                    <label class="form-label fw-semibold">
                                       3 Session Discount Type
                                    </label>

                                    <select name="3_ssn_discount_type"
                                             id="three_type"
                                             class="form-select form-select-lg"
                                             required>

                                       <option value="">Select Discount Type</option>
                                       <option value="per">Percentage (%)</option>
                                       <option value="amount">Amount (₹)</option>

                                    </select>
                                 </div>

                                 <div class="col-md-4">
                                    <label class="form-label fw-semibold">
                                       3 Session Discount Value
                                    </label>

                                    <input type="number"
                                          name="3_ssn_value"
                                          id="three_value"
                                          class="form-control form-control-lg"
                                          required>
                                 </div>

                                 <div class="col-md-4">
                                    <label class="form-label fw-semibold">
                                       3 Session Total
                                    </label>

                                    <input type="number"
                                          name="3_ssn_total"
                                          id="three_total"
                                          class="form-control form-control-lg"
                                          readonly>
                                 </div>

                                  <!-- DISCOUNT TYPE -->
                                <div class="col-md-4">
                                    <label class="form-label fw-semibold">
                                       6 Session Discount Type
                                    </label>

                                    <select name="6_ssn_discount_type"
                                             id="six_type"
                                             class="form-select form-select-lg"
                                             required>

                                       <option value="">Select Discount Type</option>
                                       <option value="per">Percentage (%)</option>
                                       <option value="amount">Amount (₹)</option>

                                    </select>
                                 </div>

                                 <div class="col-md-4">
                                    <label class="form-label fw-semibold">
                                       6 Session Discount Value
                                    </label>

                                    <input type="number"
                                          name="6_ssn_value"
                                          id="six_value"
                                          class="form-control form-control-lg"
                                          required>
                                 </div>

                                 <div class="col-md-4">
                                    <label class="form-label fw-semibold">
                                       6 Session Total
                                    </label>

                                    <input type="number"
                                          name="6_ssn_total"
                                          id="six_total"
                                          class="form-control form-control-lg"
                                          readonly>
                                 </div>

                                 <!-- STATUS -->
                                 <div class="col-md-4">

                                    <label class="form-label fw-semibold">
                                       Status
                                    </label>

                                    <select name="status" class="form-select form-select-lg">

                                       <option value="1">
                                          Active
                                       </option>

                                       <option value="0">
                                          Inactive
                                       </option>

                                    </select>

                                 </div>

                              </div>

                           </div>

                           <!-- FOOTER -->
                           <div class="card-footer bg-transparent text-end py-3 px-4">

                              <button type="submit" class="btn btn-primary btn-lg px-5 rounded-pill">

                                 <i class="bi bi-plus-circle me-2"></i>

                                 Add Session

                              </button>

                           </div>

                        </div>

                     </form>



                  <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-white">
                                             {{ $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">

                                       <a href="{{ route('superadmin.session.type.edit', $type->id) }}"
                                          class="btn-action edit-btn"
                                          title="Edit">
                                             <i class="bi bi-pencil-fill"></i>
                                       </a>

                                      
                                       <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>
                                     
                                    </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>       
      </div>
   </div>

   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   <script>
      $(document).ready(function () {

         function calculateThreeSession() {

            let fee = parseFloat($('#fees').val()) || 0;
            let original = fee * 3;

            let discount = 0;

            if ($('#three_type').val() === 'per') {
                  discount = (original * (parseFloat($('#three_value').val()) || 0)) / 100;
            } else if ($('#three_type').val() === 'amount') {
                  discount = parseFloat($('#three_value').val()) || 0;
            }

            let total = original - discount;

            $('#three_total').val(total > 0 ? total.toFixed(2) : 0);
         }

         function calculateSixSession() {

            let fee = parseFloat($('#fees').val()) || 0;
            let original = fee * 6;

            let discount = 0;

            if ($('#six_type').val() === 'per') {
                  discount = (original * (parseFloat($('#six_value').val()) || 0)) / 100;
            } else if ($('#six_type').val() === 'amount') {
                  discount = parseFloat($('#six_value').val()) || 0;
            }

            let total = original - discount;

            $('#six_total').val(total > 0 ? total.toFixed(2) : 0);
         }

         $('#fees').on('keyup change', function () {
            calculateThreeSession();
            calculateSixSession();
         });

         $('#three_type, #three_value').on('keyup change', function () {
            calculateThreeSession();
         });

         $('#six_type, #six_value').on('keyup change', function () {
            calculateSixSession();
         });

      });
   </script>
@endsection