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

@section('title', 'Discounted 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;">Discounted 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;">Max Usage</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Redeemed</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Available</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Refresh Date</th>
                  <th class="px-4 py-3" style="color: #666; font-weight: 600; font-size: 0.85rem;">Action</th>
                </tr>
              </thead>
              <tbody>
                @if(isset($discountedVouchers) && count($discountedVouchers) > 0)
                  @foreach($discountedVouchers 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));
                      
                      // Get usage policy data
                      $maxUsage = $voucher['usage_policy']['usage_count'] ?? 0;
                      $usageFrequency = $voucher['usage_policy']['usage_frequency'] ?? 'Monthly';
                      
                      // Calculate redeemed count from history[0]['availment_count']
                      $redeemedCount = 0;
                      if (isset($voucher['history']) && is_array($voucher['history']) && count($voucher['history']) > 0) {
                        $redeemedCount = $voucher['history'][0]['availment_count'] ?? 0;
                      }
                      
                      // Calculate available count
                      $availableCount = max(0, $maxUsage - $redeemedCount);
                      
                      // Calculate refresh date - 1st of next month
                      $refreshDate = \Carbon\Carbon::now()->addMonth()->startOfMonth()->format('M d, Y');
                      
                      // Determine status badge based on availability
                      if ($availableCount == 0) {
                        $displayStatusColor = '#dc3545'; // Red for exhausted
                        $displayStatusText = 'Exhausted';
                      } elseif ($availableCount <= 2) {
                        $displayStatusColor = '#ffc107'; // Yellow for limited
                        $displayStatusText = 'Limited';
                      } else {
                        $displayStatusColor = $statusColor; // Use original status color
                        $displayStatusText = $statusText;
                      }
                    @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: {{ $displayStatusColor }}; color: white; font-weight: 500;">{{ $displayStatusText }}</span>
                      </td>
                      <td class="px-4 py-3" style="color: #333;">{{ $maxUsage }}</td>
                      <td class="px-4 py-3" style="color: #dc3545; font-weight: 500;">{{ $redeemedCount }}</td>
                      <td class="px-4 py-3" style="color: {{ $availableCount > 2 ? '#28a745' : ($availableCount > 0 ? '#ffc107' : '#dc3545') }}; font-weight: 500;">{{ $availableCount }}</td>
                      <td class="px-4 py-3">
                        <div style="color: #333;">{{ $refreshDate }}</div>
                        <small class="text-muted">{{ ucfirst($usageFrequency) }} Reset</small>
                      </td>
                      <td class="px-4 py-3">
                        <a href="#" class="btn btn-sm" style="background-color: transparent; border: 1px solid #666; color: #666; font-size: 0.8rem; padding: 0.25rem 0.75rem;" data-bs-toggle="modal" data-bs-target="#voucherModal" onclick="loadVoucherDetails('{{ $voucher['product']['name'] ?? 'N/A' }}', {{ $loop->index }})">View Details</a>
                      </td>
                    </tr>
                  @endforeach
                @else
                  <tr>
                    <td colspan="7" class="px-4 py-5 text-center text-muted">
                      No discounted vouchers available at this time.
                    </td>
                  </tr>
                @endif
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- Voucher Details Modal -->
<div class="modal fade" id="voucherModal" tabindex="-1" aria-labelledby="voucherModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header border-0">
        <h5 class="modal-title" id="voucherModalLabel">Voucher Redemption Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="table-responsive">
          <table class="table table-bordered">
            <thead style="background-color: #5B9BD5; color: white;">
              <tr>
                <th class="py-3 px-4" style="font-weight: 600;">Name</th>
                <th class="py-3 px-4" style="font-weight: 600;">Status</th>
                <th class="py-3 px-4" style="font-weight: 600;">Redeemed on Date/ Time</th>
                <th class="py-3 px-4" style="font-weight: 600;">Redeemed at Location</th>
                <th class="py-3 px-4" style="font-weight: 600;">Expiry date</th>
              </tr>
            </thead>
            <tbody id="voucherDetailsBody" style="background-color: #D9E2F3;">
              <!-- Dynamic content will be loaded here -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// Pass vouchers data to JavaScript
const vouchersData = @json($discountedVouchers ?? []);

function loadVoucherDetails(voucherName, voucherIndex) {
  const voucher = vouchersData[voucherIndex];
  const tbody = document.getElementById('voucherDetailsBody');
  tbody.innerHTML = '';

  if (!voucher || !voucher.history || voucher.history.length === 0) {
    tbody.innerHTML = `
      <tr>
        <td colspan="5" class="py-3 px-4 text-center text-muted">
          No redemption history available for this voucher.
        </td>
      </tr>
    `;
    return;
  }

  voucher.history.forEach(item => {
    const redeemedDate = item.redeemed_date ? new Date(item.redeemed_date).toLocaleDateString('en-GB') : 'N/A';
    const location = item.location || item.redeemed_location || 'N/A';
    const expiryDate = item.expiry_date ? new Date(item.expiry_date).toLocaleDateString('en-GB') : 'N/A';
    const status = item.status || 'Redeemed';
    
    const row = `
      <tr>
        <td class="py-3 px-4">${voucher.product.name || voucherName}</td>
        <td class="py-3 px-4">${status}</td>
        <td class="py-3 px-4">${redeemedDate}</td>
        <td class="py-3 px-4">${location}</td>
        <td class="py-3 px-4">${expiryDate}</td>
      </tr>
    `;
    tbody.innerHTML += row;
  });
}
</script>
@endsection