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

@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">
        @php
          $extraData = isset($membershipUser['extra_data']) ? (is_string($membershipUser['extra_data']) ? json_decode($membershipUser['extra_data'], true) : $membershipUser['extra_data']) : [];
          $salutation = $extraData['salutation'] ?? '';
          // Capitalize salutation properly (MR -> Mr, MS -> Ms, etc.)
          $salutation = $salutation ? ucfirst(strtolower($salutation)) : '';
          // Capitalize name properly
          $name = $membershipUser['name'] ?? 'Member';
          $name = ucwords(strtolower($name));
        @endphp
        <h1 class="display-6 mb-4">
          Welcome to The LaLiT Dining, {{ $salutation ? $salutation . ' ' : '' }}{{ $name }}
        </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-dining/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;">
                    {{ $membershipUser['membership_number'] ?? '' }}
                  </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;">{{ $membershipUser['membership_number'] ?? '' }}</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="{{ route('dining.edit-profile') }}" 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('/dining/member/voucher-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;">
                  @if(isset($membershipUser['complimentary_vouchers']) && count($membershipUser['complimentary_vouchers']) > 0)
                    @foreach($membershipUser['complimentary_vouchers'] as $voucher)
                      @if(isset($voucher['product']['name']))
                        <li class="mb-2">• {{ $voucher['product']['name'] }}</li>
                      @endif
                    @endforeach
                  @else
                    <li class="mb-2 text-muted">No complimentary vouchers available</li>
                  @endif
                </ul>
                <div class="text-center mt-4">
                  <a href="{{ url('/dining/member/voucher-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('/dining/member/voucher-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;">
                  @if(isset($membershipUser['discounted_vouchers']) && count($membershipUser['discounted_vouchers']) > 0)
                    @foreach($membershipUser['discounted_vouchers'] as $voucher)
                      @if(isset($voucher['product']['name']))
                        <li class="mb-2">• {{ $voucher['product']['name'] }}</li>
                      @endif
                    @endforeach
                  @else
                    <li class="mb-2 text-muted">No discounted vouchers available</li>
                  @endif
                </ul>
                <div class="text-center mt-4">
                  <a href="{{ url('/dining/member/voucher-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>

  <!-- Include Subscription Modal -->
  @if(!$hasSubscription)
    @include('dining.modals.subscription-modal')
  @endif
@endsection