@extends('layouts.membership')

@section('title', 'Dashboard - The LaLiT Dining')

@section('content')
<div class="container px-4 py-5 dashboard-wrapper">
  <!-- Welcome Header -->
  <div class="row mb-4 mt-5">
    <div class="col-12 text-center loyalty-header-label">
      <h1 class="display-6 mb-4">
        Welcome to The LaLiT Dining, Mrs. Tanika Shah
      </h1>
      <div class="line"></div>
    </div>
  </div>

  <!-- E-Card Section -->
  <div class="row mb-5">
    <div class="col-12 d-flex justify-content-center">
      <div class="membership-card" style="max-width: 350px;">
        <div class="card border-0">
          <div class="card-body text-center py-4">
            <div class="mb-3 d-flex justify-content-center">
              <div class="position-relative" style="max-width: 220px; width: 100%;">
                <img src="{{ asset('assets/images/blue-card.png') }}" alt="Blue Membership Card" class="img-fluid">
                <div class="position-absolute bottom-0 start-0 w-100 text-white px-3 pb-2" style="font-size: 0.75rem; font-weight: 600; letter-spacing: 1px;">
                  7201001547
                </div>
              </div>
            </div>
            <a href="#" class="btn-link px-4" style="color: #666;">
              YOUR E-CARD
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Membership Info Bar -->
  <div class="row mb-4 section-one-wrapper">
    <div class="col-12">
      <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center py-3 px-4 gap-3">
        <div>
          <small class="text-muted d-block mb-1">Membership Number</small>
          <strong style="font-size: 1.1rem; color: #333;">7201001547</strong>
        </div>
        <div class="d-flex flex-column flex-md-row gap-2 gap-md-4 align-items-start align-items-md-center">
          <a href="#"
            class="btn-link p-0 d-flex align-items-center position-relative"
            style="color: #666; font-size: 0.9rem; font-weight: 500;">
            <span class="position-relative me-2">
              <i class="fas fa-user-cog"></i>
              <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
                style="font-size: 0.6rem; padding: 0.2rem 0.4rem;">
                1
              </span>
            </span>
            My Profile
          </a>
          <a href="#"
            class="btn-link p-0 d-flex align-items-center"
            style="color: #666; font-size: 0.9rem; font-weight: 500;">
            <i class="fas fa-file-alt me-2"></i>
            My Account
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Voucher Details Section -->
  <div class="row justify-content-center mb-5">
    <div class="col-12">
      <div class="row g-4">
        <!-- Complimentary Vouchers -->
        <div class="col-12 col-lg-6">
          <div class="card border-0 h-100" style="background-color: #f5f0eb; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
            <div class="card-body p-4">
              <h3 class="mb-4 text-center" style="font-weight: 600; color: #333;">
                <a href="{{ url('/voucher-details/complimentary') }}" class="text-decoration-none text-dark" style="transition: all 0.3s ease;" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">
                  Complimentary Vouchers
                </a>
              </h3>
              <ul class="list-unstyled" style="line-height: 2; font-size: 1rem; color: #333;">
                <li class="mb-2">• One Comp Dinner</li>
                <li class="mb-2">• One Comp Cake</li>
                <li class="mb-2">• One Comp Wine</li>
                <li class="mb-2">• 50% less on 10 guest complimentary</li>
                <li class="mb-2">• One Comp desert voucher when dining</li>
              </ul>
              <div class="text-center mt-4">
                <a href="{{ url('/voucher-details/complimentary') }}" class="btn" style="background-color: transparent; border: 1px solid #666; color: #666; font-size: 0.9rem; font-weight: 500; padding: 0.5rem 1.5rem; transition: all 0.3s ease;" onmouseover="this.style.backgroundColor='#666'; this.style.color='#fff';" onmouseout="this.style.backgroundColor='transparent'; this.style.color='#666';">
                  View More →
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- Discounted Vouchers -->
        <div class="col-12 col-lg-6">
          <div class="card border-0 h-100" style="background-color: #f5f0eb; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
            <div class="card-body p-4">
              <h3 class="mb-4 text-center" style="font-weight: 600; color: #333;">
                <a href="{{ url('/voucher-details/discounted') }}" class="text-decoration-none text-dark" style="transition: all 0.3s ease;" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">
                  Discounted Vouchers
                </a>
                <p class="sup" style="font-size: 0.75rem; color: #666; font-weight: 400; margin-top: 0.5rem; margin-bottom: 0;">maximum usage 10 times in a month</p>
              </h3>
              <ul class="list-unstyled" style="line-height: 2; font-size: 1rem; color: #333;">
                <li class="mb-2">• 20% when dining alone –</li>
                <li class="mb-2">• 50% when dining with two</li>
                <li class="mb-2">• 33% when dining with three</li>
                <li class="mb-2">• 25% when dining with four</li>
                <li class="mb-2">• 20% when dining with five or more</li>
                <li class="mb-2">• 20% discount on alcoholic / non-alcoholic beverage</li>
              </ul>
              <div class="text-center mt-4">
                <a href="{{ url('/voucher-details/discounted') }}" class="btn" style="background-color: transparent; border: 1px solid #666; color: #666; font-size: 0.9rem; font-weight: 500; padding: 0.5rem 1.5rem; transition: all 0.3s ease;" onmouseover="this.style.backgroundColor='#666'; this.style.color='#fff';" onmouseout="this.style.backgroundColor='transparent'; this.style.color='#666';">
                  View More →
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
@endsection