@extends('layouts.membership')

@section('title', 'Complimentary Vouchers - The LaLiT Dining')

@section('content')
<div class="container px-4 py-5">
  <!-- Page Header -->
  <div class="row mb-4 mt-5">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="mb-0" style="color: #333; font-weight: 600;">Complimentary Vouchers</h2>
        <a href="{{ url('/dining-dashboard') }}" class="btn-link" style="color: #666;">
          <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
        </a>
      </div>
      <div class="line"></div>
    </div>
  </div>

  <!-- Vouchers Table -->
  <div class="row">
    <div class="col-12">
      <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead style="background-color: #f8f9fa;">
                <tr>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Name</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Status</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Redeemed on Date/ Time</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Redeemed at Location</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Expiry date</th>
                </tr>
              </thead>
              <tbody>
                <!-- Redeemed Voucher -->
                <tr style="background-color: #f8f9fa;">
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">Comp Dinner for two</div>
                    <small class="text-muted">Voucher #VOU001</small>
                  </td>
                  <td class="px-4 py-3">
                    <span class="badge" style="background-color: #28a745; color: white; font-weight: 500;">Redeemed</span>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">Jan 15, 2026</div>
                    <small class="text-muted">07:30 PM</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">The LaLiT Delhi</div>
                    <small class="text-muted">Baluchi Restaurant</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #666;">Dec 31, 2026</div>
                  </td>
                </tr>

                <!-- Active Vouchers -->
                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">Comp. Cake</div>
                    <small class="text-muted">Voucher #VOU002</small>
                  </td>
                  <td class="px-4 py-3">
                    <span class="badge" style="background-color: #4169E1; color: white; font-weight: 500;">Active</span>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">Jan 01, 2026</div>
                    <small class="text-muted">12:00 AM</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">All Locations</div>
                    <small class="text-muted">All Outlets</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #666;">Dec 31, 2026</div>
                  </td>
                </tr>

                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">Comp. Wine</div>
                    <small class="text-muted">Voucher #VOU003</small>
                  </td>
                  <td class="px-4 py-3">
                    <span class="badge" style="background-color: #4169E1; color: white; font-weight: 500;">Active</span>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">Jan 01, 2026</div>
                    <small class="text-muted">12:00 AM</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">All Locations</div>
                    <small class="text-muted">All Restaurants</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #666;">Dec 31, 2026</div>
                  </td>
                </tr>

                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">50% less on 10 guest complimentary</div>
                    <small class="text-muted">Voucher #VOU004</small>
                  </td>
                  <td class="px-4 py-3">
                    <span class="badge" style="background-color: #4169E1; color: white; font-weight: 500;">Active</span>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">Jan 01, 2026</div>
                    <small class="text-muted">12:00 AM</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">All Locations</div>
                    <small class="text-muted">All Restaurants</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #666;">Dec 31, 2026</div>
                  </td>
                </tr>

                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">One Comp dessert voucher when dining</div>
                    <small class="text-muted">Voucher #VOU005</small>
                  </td>
                  <td class="px-4 py-3">
                    <span class="badge" style="background-color: #4169E1; color: white; font-weight: 500;">Active</span>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">Jan 01, 2026</div>
                    <small class="text-muted">12:00 AM</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">All Locations</div>
                    <small class="text-muted">All Restaurants</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #666;">Dec 31, 2026</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
@endsection