@extends('layouts.membership')

@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 (maximum usage 10times in a month)</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;">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>
                <!-- 20% Discount -->
                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">20% when dining alone</div>
                    <small class="text-muted">Voucher #DIS001</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" style="color: #333;">10</td>
                  <td class="px-4 py-3" style="color: #dc3545; font-weight: 500;">3</td>
                  <td class="px-4 py-3" style="color: #28a745; font-weight: 500;">7</td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">Feb 01, 2026</div>
                    <small class="text-muted">Monthly 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('20% when dining alone')">View Details</a>
                  </td>
                </tr>

                <!-- 50% Discount -->
                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">50% when dining with two</div>
                    <small class="text-muted">Voucher #DIS002</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" style="color: #333;">10</td>
                  <td class="px-4 py-3" style="color: #dc3545; font-weight: 500;">0</td>
                  <td class="px-4 py-3" style="color: #28a745; font-weight: 500;">10</td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">Feb 01, 2026</div>
                    <small class="text-muted">Monthly 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('50% when dining with two')">View Details</a>
                  </td>
                </tr>

                <!-- 33% Discount -->
                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">33% when dining with three</div>
                    <small class="text-muted">Voucher #DIS003</small>
                  </td>
                  <td class="px-4 py-3">
                    <span class="badge" style="background-color: #ffc107; color: white; font-weight: 500;">Limited</span>
                  </td>
                  <td class="px-4 py-3" style="color: #333;">10</td>
                  <td class="px-4 py-3" style="color: #dc3545; font-weight: 500;">9</td>
                  <td class="px-4 py-3" style="color: #ffc107; font-weight: 500;">1</td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">Feb 01, 2026</div>
                    <small class="text-muted">Monthly 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('33% when dining with three')">View Details</a>
                  </td>
                </tr>

                <!-- 25% Discount -->
                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">25% when dining with four</div>
                    <small class="text-muted">Voucher #DIS004</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" style="color: #333;">10</td>
                  <td class="px-4 py-3" style="color: #dc3545; font-weight: 500;">5</td>
                  <td class="px-4 py-3" style="color: #28a745; font-weight: 500;">5</td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">Feb 01, 2026</div>
                    <small class="text-muted">Monthly 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('25% when dining with four')">View Details</a>
                  </td>
                </tr>

                <!-- 20% Beverage Discount -->
                <tr>
                  <td class="px-4 py-3">
                    <div style="color: #333; font-weight: 500;">20% discount on alcoholic / non-alcoholic beverage</div>
                    <small class="text-muted">Voucher #DIS005</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" style="color: #333;">10</td>
                  <td class="px-4 py-3" style="color: #dc3545; font-weight: 500;">2</td>
                  <td class="px-4 py-3" style="color: #28a745; font-weight: 500;">8</td>
                  <td class="px-4 py-3">
                    <div style="color: #333;">Feb 01, 2026</div>
                    <small class="text-muted">Monthly 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('20% discount on alcoholic / non-alcoholic beverage')">View Details</a>
                  </td>
                </tr>
              </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>
function loadVoucherDetails(voucherName) {
  // Sample data - in production this would come from the backend
  const voucherData = {
    '20% when dining alone': [
      {
        name: '20% when dining alone',
        status: 'Redeemed',
        redeemedDate: '15/01/2026',
        location: 'The LaLiT Delhi',
        expiryDate: '31/12/2026'
      },
      {
        name: '20% when dining alone',
        status: 'Redeemed',
        redeemedDate: '20/01/2026',
        location: 'The LaLiT Delhi',
        expiryDate: '31/12/2026'
      },
      {
        name: '20% when dining alone',
        status: 'Available',
        redeemedDate: 'N/A',
        location: 'N/A',
        expiryDate: '31/12/2026'
      }
    ],
    '25% when dining with two': [
      {
        name: '25% when dining with two',
        status: 'Available',
        redeemedDate: 'N/A',
        location: 'N/A',
        expiryDate: '31/12/2026'
      }
    ],
    '33% when dining with three': [
      {
        name: '33% when dining with three',
        status: 'Redeemed',
        redeemedDate: '10/01/2026',
        location: 'The LaLiT Delhi',
        expiryDate: '31/12/2026'
      }
    ],
    '50% when dining with four': [
      {
        name: '50% when dining with four',
        status: 'Available',
        redeemedDate: 'N/A',
        location: 'N/A',
        expiryDate: '31/12/2026'
      }
    ],
    '20% discount on alcoholic / non-alcoholic beverage': [
      {
        name: '20% discount on alcoholic / non-alcoholic beverage',
        status: 'Available',
        redeemedDate: 'N/A',
        location: 'N/A',
        expiryDate: '31/12/2026'
      }
    ]
  };

  const details = voucherData[voucherName] || [];
  const tbody = document.getElementById('voucherDetailsBody');
  tbody.innerHTML = '';

  details.forEach(item => {
    const row = `
      <tr>
        <td class="py-3 px-4">${item.name}</td>
        <td class="py-3 px-4">${item.status}</td>
        <td class="py-3 px-4">${item.redeemedDate}</td>
        <td class="py-3 px-4">${item.location}</td>
        <td class="py-3 px-4">${item.expiryDate}</td>
      </tr>
    `;
    tbody.innerHTML += row;
  });
}
</script>
@endsection