@extends('dining.layouts.dining-member')

@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/member/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;">Start Date</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Sponsor</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Expiry Date</th>
                </tr>
              </thead>
              <tbody>
                @if(isset($complimentaryVouchers) && count($complimentaryVouchers) > 0)
                  @foreach($complimentaryVouchers as $voucher)
                    @php
                      $status = strtoupper($voucher['status'] ?? 'AVAILABLE');
                      
                      // Set status color based on status value
                      $statusColor = match($status) {
                        'USED' => '#28a745',          // Green
                        'AVAILABLE' => '#4169E1',      // Blue
                        'EXPIRED' => '#dc3545',        // Red
                        'TRANSFERED' => '#ffc107',     // Yellow
                        'CANCELLED' => '#6c757d',      // Gray
                        default => '#4169E1'           // Default Blue
                      };
                      
                      $statusText = ucfirst(strtolower($status));
                      $startDate = isset($voucher['start_date']) ? \Carbon\Carbon::parse($voucher['start_date'])->format('M d, Y') : 'N/A';
                      
                      // If status is AVAILABLE, don't show expiry date (lifetime use)
                      // For other statuses, show the end_date
                      if ($status === 'AVAILABLE') {
                        $endDate = '';
                      } else {
                        $endDate = isset($voucher['end_date']) ? \Carbon\Carbon::parse($voucher['end_date'])->format('M d, Y') : 'N/A';
                      }
                    @endphp
                    <tr>
                      <td class="px-4 py-3">
                        <div style="color: #333; font-weight: 500;">{{ $voucher['product']['name'] ?? 'N/A' }}</div>
                        <small class="text-muted">Code: {{ $voucher['privilege_code'] ?? 'N/A' }}</small>
                      </td>
                      <td class="px-4 py-3">
                        <span class="badge" style="background-color: {{ $statusColor }}; color: white; font-weight: 500;">{{ $statusText }}</span>
                      </td>
                      <td class="px-4 py-3">
                        <div style="color: #333;">{{ $startDate }}</div>
                      </td>
                      <td class="px-4 py-3">
                        <div style="color: #333;">{{ $voucher['product']['sponsor_name'] ?? 'The LaLiT Hotels' }}</div>
                      </td>
                      <td class="px-4 py-3">
                        @if($endDate)
                          <div style="color: #666;">{{ $endDate }}</div>
                        @else
                          <span style="color: #999;">-</span>
                        @endif
                      </td>
                    </tr>
                  @endforeach
                @else
                  <tr>
                    <td colspan="5" class="px-4 py-5 text-center text-muted">
                      No complimentary vouchers available at this time.
                    </td>
                  </tr>
                @endif
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
@endsection