@extends('layouts.membership')

@section('title', 'Voucher Details - The LaLiT Dining')

@section('content')
<div class="container px-4 py-5">
  <!-- Page Header -->
  <div class="row mb-4">
    <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: 500;">Voucher Details</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>

  <!-- Voucher Statistics Section -->
  <div class="card border-0 shadow-sm mb-5" style="background-color: #f5f0eb;">
    <div class="card-body p-5">
      <div class="text-center mb-4">
        <h4 style="color: #333; font-weight: 400;">My Vouchers</h4>
      </div>

      <div class="row justify-content-center">
        <!-- Total Vouchers -->
        <div class="col-md-3 mb-4">
          <div class="text-center">
            <p class="text-muted text-uppercase mb-3"
              style="font-size: 0.8rem; letter-spacing: 1px; color: #8b7355 !important;">TOTAL VOUCHERS</p>
            <div class="border-0 rounded p-4" style="background-color: white; position: relative;">
              <h2 class="mb-0" style="color: #333; font-weight: 300; font-size: 3rem;">18</h2>
              <i class="fas fa-info-circle position-absolute"
                style="top: 12px; right: 12px; color: #ccc; font-size: 1.1rem;"></i>
            </div>
          </div>
        </div>

        <!-- Active Vouchers -->
        <div class="col-md-3 mb-4">
          <div class="text-center">
            <p class="text-muted text-uppercase mb-3"
              style="font-size: 0.8rem; letter-spacing: 1px; color: #8b7355 !important;">ACTIVE</p>
            <div class="border-0 rounded p-4" style="background-color: white; position: relative;">
              <h2 class="mb-0" style="color: #4169E1; font-weight: 300; font-size: 3rem;">3</h2>
              <i class="fas fa-info-circle position-absolute"
                style="top: 12px; right: 12px; color: #ccc; font-size: 1.1rem;"></i>
            </div>
          </div>
        </div>

        <!-- Redeemed Vouchers -->
        <div class="col-md-3 mb-4">
          <div class="text-center">
            <p class="text-muted text-uppercase mb-3"
              style="font-size: 0.8rem; letter-spacing: 1px; color: #8b7355 !important;">REDEEMED</p>
            <div class="border-0 rounded p-4" style="background-color: white; position: relative;">
              <h2 class="mb-0" style="color: #28a745; font-weight: 300; font-size: 3rem;">12</h2>
              <i class="fas fa-info-circle position-absolute"
                style="top: 12px; right: 12px; color: #ccc; font-size: 1.1rem;"></i>
            </div>
          </div>
        </div>

        <!-- Expired Vouchers -->
        <div class="col-md-3 mb-4">
          <div class="text-center">
            <p class="text-muted text-uppercase mb-3"
              style="font-size: 0.8rem; letter-spacing: 1px; color: #8b7355 !important;">EXPIRED</p>
            <div class="border-0 rounded p-4" style="background-color: white; position: relative;">
              <h2 class="mb-0" style="color: #dc3545; font-weight: 300; font-size: 3rem;">3</h2>
              <i class="fas fa-info-circle position-absolute"
                style="top: 12px; right: 12px; color: #ccc; font-size: 1.1rem;"></i>
            </div>
          </div>
        </div>
      </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;">Date & Time</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Validity</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Location</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Outlet</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Sponsors</th>
                </tr>
              </thead>
              <tbody>
                <!-- Active Vouchers -->
                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">Complimentary Breakfast</div>
                    <small class="text-muted">Voucher #VOU001</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 15, 2026</div>
                    <small class="text-muted">10:30 AM</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">Valid Until</div>
                    <small class="text-muted">Mar 31, 2026</small>
                  </td>
                  <td class="px-4 py-3" style="color: #333;">New Delhi</td>
                  <td class="px-4 py-3" style="color: #333;">24/7 Restaurant</td>
                  <td class="px-4 py-3" style="color: #333;">The LaLiT</td>
                </tr>

                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">Spa Discount 20%</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 20, 2026</div>
                    <small class="text-muted">02:15 PM</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">Valid Until</div>
                    <small class="text-muted">Feb 28, 2026</small>
                  </td>
                  <td class="px-4 py-3" style="color: #333;">Mumbai</td>
                  <td class="px-4 py-3" style="color: #333;">Rejuve Spa</td>
                  <td class="px-4 py-3" style="color: #333;">The LaLiT</td>
                </tr>

                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">Welcome Drink</div>
                    <small class="text-muted">Voucher #VOU003</small>
                  </td>
                  <td class="px-4 py-3">
                    <span class="badge" style="background-color: #ffc107; color: white; font-weight: 500;">Expiring Soon</span>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">Jan 10, 2026</div>
                    <small class="text-muted">11:00 AM</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #ffc107;">Valid Until</div>
                    <small style="color: #ffc107;">Jan 31, 2026</small>
                  </td>
                  <td class="px-4 py-3" style="color: #333;">Bangalore</td>
                  <td class="px-4 py-3" style="color: #333;">Lobby Bar</td>
                  <td class="px-4 py-3" style="color: #333;">The LaLiT</td>
                </tr>

                <!-- Redeemed Vouchers -->
                <tr style="background-color: #f8f9fa;">
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">Room Upgrade</div>
                    <small class="text-muted">Voucher #VOU004</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;">Dec 15, 2025</div>
                    <small class="text-muted">03:45 PM</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #666;">Redeemed On</div>
                    <small class="text-muted">Dec 20, 2025</small>
                  </td>
                  <td class="px-4 py-3" style="color: #333;">Goa</td>
                  <td class="px-4 py-3" style="color: #333;">Front Desk</td>
                  <td class="px-4 py-3" style="color: #333;">The LaLiT</td>
                </tr>

                <tr style="background-color: #f8f9fa;">
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">Dinner Buffet</div>
                    <small class="text-muted">Voucher #VOU005</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;">Dec 10, 2025</div>
                    <small class="text-muted">07:30 PM</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #666;">Redeemed On</div>
                    <small class="text-muted">Dec 24, 2025</small>
                  </td>
                  <td class="px-4 py-3" style="color: #333;">New Delhi</td>
                  <td class="px-4 py-3" style="color: #333;">Baluchi Restaurant</td>
                  <td class="px-4 py-3" style="color: #333;">The LaLiT</td>
                </tr>

                <tr style="background-color: #f8f9fa;">
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">Pool Access</div>
                    <small class="text-muted">Voucher #VOU006</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;">Nov 28, 2025</div>
                    <small class="text-muted">09:00 AM</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #666;">Redeemed On</div>
                    <small class="text-muted">Dec 05, 2025</small>
                  </td>
                  <td class="px-4 py-3" style="color: #333;">Mumbai</td>
                  <td class="px-4 py-3" style="color: #333;">Recreation Center</td>
                  <td class="px-4 py-3" style="color: #333;">The LaLiT</td>
                </tr>

                <!-- Expired Vouchers -->
                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #999; font-weight: 500;">Lunch Special</div>
                    <small class="text-muted">Voucher #VOU007</small>
                  </td>
                  <td class="px-4 py-3">
                    <span class="badge" style="background-color: #dc3545; color: white; font-weight: 500;">Expired</span>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #666;">Oct 15, 2025</div>
                    <small class="text-muted">12:00 PM</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #dc3545;">Expired On</div>
                    <small style="color: #dc3545;">Dec 31, 2025</small>
                  </td>
                  <td class="px-4 py-3" style="color: #666;">Chennai</td>
                  <td class="px-4 py-3" style="color: #666;">All Day Dining</td>
                  <td class="px-4 py-3" style="color: #666;">The LaLiT</td>
                </tr>

                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #999; font-weight: 500;">Bar Discount 15%</div>
                    <small class="text-muted">Voucher #VOU008</small>
                  </td>
                  <td class="px-4 py-3">
                    <span class="badge" style="background-color: #dc3545; color: white; font-weight: 500;">Expired</span>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #666;">Sep 20, 2025</div>
                    <small class="text-muted">06:00 PM</small>
                  </td>
                  <td class="px-4 py-3">
                    <div style="color: #dc3545;">Expired On</div>
                    <small style="color: #dc3545;">Nov 30, 2025</small>
                  </td>
                  <td class="px-4 py-3" style="color: #666;">Kolkata</td>
                  <td class="px-4 py-3" style="color: #666;">Sky Lounge</td>
                  <td class="px-4 py-3" style="color: #666;">The LaLiT</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- Pagination -->
      <div class="d-flex justify-content-between align-items-center mt-4">
        <div class="text-muted" style="font-size: 0.9rem;">
          Showing 1 to 8 of 18 vouchers
        </div>
        <nav>
          <ul class="pagination mb-0">
            <li class="page-item disabled">
              <a class="page-link" href="#" style="color: #666;">Previous</a>
            </li>
            <li class="page-item active">
              <a class="page-link" href="#" style="background-color: #333; border-color: #333;">1</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="#" style="color: #666;">2</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="#" style="color: #666;">3</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="#" style="color: #666;">Next</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>
@endsection