@if(isset($subSection) && $subSection)
  <!-- Subscription Benefits CMS Section -->
  <div class="card mb-4 border-primary">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
      <h5 class="mb-0"><i class="bi bi-card-checklist me-2"></i>Subscription Benefits Section</h5>
      <span class="badge {{ $subSection->status === 'active' ? 'bg-success' : 'bg-secondary' }} fs-6">
        {{ ucfirst($subSection->status) }}
      </span>
    </div>
    <div class="card-body">
      <!-- Section Settings Form -->
      <form action="{{ route('admin-dining.sections.subscription-benefits.update', $subSection) }}" method="POST" class="mb-4 pb-3 border-bottom">
        @csrf
        @method('PUT')
        <div class="row g-3 align-items-end">
          <div class="col-md-7">
            <label class="form-label fw-bold">Section Heading <span class="text-danger">*</span></label>
            <input type="text" name="heading" class="form-control" value="{{ old('heading', $subSection->heading) }}" required>
          </div>
          <div class="col-md-3">
            <label class="form-label fw-bold">Section Status</label>
            <select name="status" class="form-select">
              <option value="active" {{ $subSection->status === 'active' ? 'selected' : '' }}>Active</option>
              <option value="inactive" {{ $subSection->status === 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
          </div>
          <div class="col-md-2">
            <button type="submit" class="btn btn-primary w-100">
              <i class="bi bi-save me-1"></i> Save
            </button>
          </div>
        </div>
      </form>

      <!-- Benefit Columns Header -->
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h6 class="fw-bold mb-0 text-secondary">BENEFIT COLUMNS ({{ $subSection->columns->count() }})</h6>
        <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addColumnModal">
          <i class="bi bi-plus-lg me-1"></i> Add Column
        </button>
      </div>

      @forelse($subSection->columns as $column)
        <div class="card mb-3 border">
          <div class="card-header bg-light d-flex justify-content-between align-items-center py-2">
            <div class="d-flex align-items-center gap-2">
              <span class="fw-bold text-dark fs-6">{{ $column->title }}</span>
              <span class="badge {{ $column->status === 'active' ? 'bg-success' : 'bg-secondary' }}">
                {{ ucfirst($column->status) }}
              </span>
              <small class="text-muted">(Order: {{ $column->sort_order }})</small>
            </div>
            <div class="btn-group btn-group-sm">
              <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editColumnModal{{ $column->id }}">
                <i class="bi bi-pencil"></i> Edit Column
              </button>
              <button type="button" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#addItemModal{{ $column->id }}">
                <i class="bi bi-plus-circle"></i> Add Item
              </button>
              <form action="{{ route('admin-dining.sections.columns.destroy', $column) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete column \'{{ $column->title }}\' and all its benefit items?');">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-outline-danger">
                  <i class="bi bi-trash"></i>
                </button>
              </form>
            </div>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-hover mb-0 align-middle">
                <thead class="table-light">
                  <tr>
                    <th style="width: 70px;">Order</th>
                    <th>Benefit Text</th>
                    <th style="width: 100px;">Status</th>
                    <th style="width: 110px;" class="text-end">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($column->items as $item)
                    <tr>
                      <td><span class="badge bg-secondary">{{ $item->sort_order }}</span></td>
                      <td>{{ $item->content }}</td>
                      <td>
                        <span class="badge {{ $item->status === 'active' ? 'bg-success' : 'bg-secondary' }}">
                          {{ ucfirst($item->status) }}
                        </span>
                      </td>
                      <td class="text-end">
                        <div class="btn-group btn-group-sm">
                          <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editItemModal{{ $item->id }}">
                            <i class="bi bi-pencil"></i>
                          </button>
                          <form action="{{ route('admin-dining.sections.benefit-items.destroy', $item) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this benefit item?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-outline-danger">
                              <i class="bi bi-trash"></i>
                            </button>
                          </form>
                        </div>
                      </td>
                    </tr>
                  @empty
                    <tr>
                      <td colspan="4" class="text-center text-muted py-3">No benefit items in this column yet. Click "Add Item" to create one.</td>
                    </tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>
        </div>
      @empty
        <div class="alert alert-info">No benefit columns defined yet. Click "Add Column" above to start.</div>
      @endforelse
    </div>
  </div>

  <!-- Add Column Modal -->
  <div class="modal fade" id="addColumnModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form action="{{ route('admin-dining.sections.columns.store', $subSection) }}" method="POST">
          @csrf
          <div class="modal-header">
            <h5 class="modal-title">Add Benefit Column</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label class="form-label fw-bold">Column Title <span class="text-danger">*</span></label>
              <input type="text" name="title" class="form-control" placeholder="e.g. FOOD & BEVERAGE DISCOUNTS" required>
            </div>
            <div class="mb-3">
              <label class="form-label fw-bold">Status</label>
              <select name="status" class="form-select">
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label fw-bold">Sort Order</label>
              <input type="number" name="sort_order" class="form-control" value="{{ $subSection->columns->count() + 1 }}">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-success">Add Column</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Edit & Add Modals for Columns and Benefit Items -->
  @foreach($subSection->columns as $column)
    <!-- Edit Column Modal -->
    <div class="modal fade" id="editColumnModal{{ $column->id }}" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <form action="{{ route('admin-dining.sections.columns.update', $column) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="modal-header">
              <h5 class="modal-title">Edit Column: {{ $column->title }}</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div class="mb-3">
                <label class="form-label fw-bold">Column Title <span class="text-danger">*</span></label>
                <input type="text" name="title" class="form-control" value="{{ $column->title }}" required>
              </div>
              <div class="mb-3">
                <label class="form-label fw-bold">Status</label>
                <select name="status" class="form-select">
                  <option value="active" {{ $column->status === 'active' ? 'selected' : '' }}>Active</option>
                  <option value="inactive" {{ $column->status === 'inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
              </div>
              <div class="mb-3">
                <label class="form-label fw-bold">Sort Order</label>
                <input type="number" name="sort_order" class="form-control" value="{{ $column->sort_order }}">
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Add Item Modal for Column -->
    <div class="modal fade" id="addItemModal{{ $column->id }}" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <form action="{{ route('admin-dining.sections.benefit-items.store', $column) }}" method="POST">
            @csrf
            <div class="modal-header">
              <h5 class="modal-title">Add Item to {{ $column->title }}</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div class="mb-3">
                <label class="form-label fw-bold">Benefit Item Text <span class="text-danger">*</span></label>
                <textarea name="content" class="form-control" rows="2" placeholder="e.g. 20% discount for 1 guest" required></textarea>
              </div>
              <div class="mb-3">
                <label class="form-label fw-bold">Status</label>
                <select name="status" class="form-select">
                  <option value="active">Active</option>
                  <option value="inactive">Inactive</option>
                </select>
              </div>
              <div class="mb-3">
                <label class="form-label fw-bold">Sort Order</label>
                <input type="number" name="sort_order" class="form-control" value="{{ $column->items->count() + 1 }}">
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-success">Add Item</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Edit Item Modals -->
    @foreach($column->items as $item)
      <div class="modal fade" id="editItemModal{{ $item->id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <form action="{{ route('admin-dining.sections.benefit-items.update', $item) }}" method="POST">
              @csrf
              @method('PUT')
              <div class="modal-header">
                <h5 class="modal-title">Edit Benefit Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="mb-3">
                  <label class="form-label fw-bold">Benefit Item Text <span class="text-danger">*</span></label>
                  <textarea name="content" class="form-control" rows="2" required>{{ $item->content }}</textarea>
                </div>
                <div class="mb-3">
                  <label class="form-label fw-bold">Status</label>
                  <select name="status" class="form-select">
                    <option value="active" {{ $item->status === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ $item->status === 'inactive' ? 'selected' : '' }}>Inactive</option>
                  </select>
                </div>
                <div class="mb-3">
                  <label class="form-label fw-bold">Sort Order</label>
                  <input type="number" name="sort_order" class="form-control" value="{{ $item->sort_order }}">
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Save Changes</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    @endforeach
  @endforeach
@endif

@if(isset($voucherSection) && $voucherSection)
  <!-- Complimentary One-Time Vouchers CMS Section -->
  <div class="card mb-4 border-info">
    <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
      <h5 class="mb-0"><i class="bi bi-ticket-perforated me-2"></i>Complimentary One-Time Vouchers Section</h5>
      <span class="badge {{ $voucherSection->status === 'active' ? 'bg-success' : 'bg-secondary' }} fs-6">
        {{ ucfirst($voucherSection->status) }}
      </span>
    </div>
    <div class="card-body">
      <!-- Section Settings Form -->
      <form action="{{ route('admin-dining.sections.complimentary-vouchers.update', $voucherSection) }}" method="POST" enctype="multipart/form-data" class="mb-4 pb-3 border-bottom">
        @csrf
        @method('PUT')
        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label fw-bold">Section Heading <span class="text-danger">*</span></label>
            <input type="text" name="heading" class="form-control" value="{{ old('heading', $voucherSection->heading) }}" required>
          </div>
          <div class="col-md-3">
            <label class="form-label fw-bold">Status</label>
            <select name="status" class="form-select">
              <option value="active" {{ $voucherSection->status === 'active' ? 'selected' : '' }}>Active</option>
              <option value="inactive" {{ $voucherSection->status === 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
          </div>
          <div class="col-md-3">
            <label class="form-label fw-bold">Sort Order</label>
            <input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', $voucherSection->sort_order) }}">
          </div>
          <div class="col-md-12">
            <label class="form-label fw-bold">Description / Subtitle</label>
            <input type="text" name="description" class="form-control" value="{{ old('description', $voucherSection->description) }}">
          </div>
          <div class="col-md-6">
            <label class="form-label fw-bold">Right-Side Image</label>
            @if($voucherSection->image)
              <div class="mb-2 d-flex align-items-center gap-3">
                <img src="{{ asset($voucherSection->image) }}" alt="{{ $voucherSection->image_alt ?? 'Voucher Image' }}" class="img-thumbnail" style="max-height: 90px;">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="remove_image" value="1" id="removeVoucherImg">
                  <label class="form-check-label text-danger" for="removeVoucherImg">Remove image</label>
                </div>
              </div>
            @endif
            <input type="file" name="image" class="form-control" accept="image/*">
            <small class="text-muted">Upload replacement image (jpeg, png, jpg, gif, webp. Max 2MB).</small>
          </div>
          <div class="col-md-6">
            <label class="form-label fw-bold">Image Alt Text</label>
            <input type="text" name="image_alt" class="form-control" value="{{ old('image_alt', $voucherSection->image_alt) }}">
          </div>
          <div class="col-12 text-end">
            <button type="submit" class="btn btn-info text-white">
              <i class="bi bi-save me-1"></i> Save Voucher Section Settings
            </button>
          </div>
        </div>
      </form>

      <!-- Voucher Items Header -->
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h6 class="fw-bold mb-0 text-secondary">VOUCHER ITEMS ({{ $voucherSection->voucherItems->count() }})</h6>
        <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addVoucherModal">
          <i class="bi bi-plus-lg me-1"></i> Add Voucher Item
        </button>
      </div>

      <div class="table-responsive">
        <table class="table table-hover align-middle border mb-0">
          <thead class="table-light">
            <tr>
              <th style="width: 70px;">Order</th>
              <th>Voucher Item Text</th>
              <th style="width: 100px;">Status</th>
              <th style="width: 110px;" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            @forelse($voucherSection->voucherItems as $voucher)
              <tr>
                <td><span class="badge bg-secondary">{{ $voucher->sort_order }}</span></td>
                <td class="fw-medium">{{ $voucher->content }}</td>
                <td>
                  <span class="badge {{ $voucher->status === 'active' ? 'bg-success' : 'bg-secondary' }}">
                    {{ ucfirst($voucher->status) }}
                  </span>
                </td>
                <td class="text-end">
                  <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editVoucherModal{{ $voucher->id }}">
                      <i class="bi bi-pencil"></i>
                    </button>
                    <form action="{{ route('admin-dining.sections.voucher-items.destroy', $voucher) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this voucher item?');">
                      @csrf
                      @method('DELETE')
                      <button type="submit" class="btn btn-outline-danger">
                        <i class="bi bi-trash"></i>
                      </button>
                    </form>
                  </div>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="4" class="text-center text-muted py-3">No voucher items found. Click "Add Voucher Item" to create one.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Add Voucher Item Modal -->
  <div class="modal fade" id="addVoucherModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form action="{{ route('admin-dining.sections.voucher-items.store', $voucherSection) }}" method="POST">
          @csrf
          <div class="modal-header">
            <h5 class="modal-title">Add Voucher Item</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label class="form-label fw-bold">Voucher Item Text <span class="text-danger">*</span></label>
              <textarea name="content" class="form-control" rows="2" placeholder="e.g. 1 × Complimentary Buffet for Two" required></textarea>
            </div>
            <div class="mb-3">
              <label class="form-label fw-bold">Status</label>
              <select name="status" class="form-select">
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label fw-bold">Sort Order</label>
              <input type="number" name="sort_order" class="form-control" value="{{ $voucherSection->voucherItems->count() + 1 }}">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-success">Add Voucher Item</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Edit Voucher Item Modals -->
  @foreach($voucherSection->voucherItems as $voucher)
    <div class="modal fade" id="editVoucherModal{{ $voucher->id }}" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <form action="{{ route('admin-dining.sections.voucher-items.update', $voucher) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="modal-header">
              <h5 class="modal-title">Edit Voucher Item</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div class="mb-3">
                <label class="form-label fw-bold">Voucher Item Text <span class="text-danger">*</span></label>
                <textarea name="content" class="form-control" rows="2" required>{{ $voucher->content }}</textarea>
              </div>
              <div class="mb-3">
                <label class="form-label fw-bold">Status</label>
                <select name="status" class="form-select">
                  <option value="active" {{ $voucher->status === 'active' ? 'selected' : '' }}>Active</option>
                  <option value="inactive" {{ $voucher->status === 'inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
              </div>
              <div class="mb-3">
                <label class="form-label fw-bold">Sort Order</label>
                <input type="number" name="sort_order" class="form-control" value="{{ $voucher->sort_order }}">
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  @endforeach
@endif