@extends('layouts.membership')

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

@section('content')
<div class="container px-4 py-5 dashboard-wrapper">
  <!-- Welcome Header -->
  <div class="row mb-5">
    <div class="col-12 text-center loyalty-header-label">
      <h1 class="display-6 mb-4">
        Welcome to Lalit Loyalty, {{ $membershipUser['name'] ?? 'Member' }}
      </h1>
      <div class="line"></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 No</small>
          <strong style="font-size: 1.1rem; color: #333;">{{ $membershipUser['membership_number'] ?? '2007513951'
            }}</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('membership.edit-profile') }}"
            class="btn-link text-decoration-none 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>
            MANAGE ACCOUNT
          </a>
          <a href="{{ route('membership.myrewards') }}"
            class="btn-link text-decoration-none p-0 d-flex align-items-center"
            style="color: #666; font-size: 0.9rem; font-weight: 500;">
            <i class="fas fa-gift me-2"></i>
            MY REWARDS
          </a>
          <a href="{{ route('membership.statement') }}"
            class="btn-link text-decoration-none 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>
            STATEMENT SUMMARY
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Points Balance Section -->
  <div class="row justify-content-center mb-5">
    <div class="col-12">
      <div class="row g-4">
        <!-- Jumeirah One Points Balance -->
        <div class="col-12 col-md-4 points-balance-card">
          <div class="card border-0 h-100">
            <div class="card-body text-center py-4 py-md-5">
              <h5 class="mb-3 mb-md-4" style="color: #333;">Lalit Loyalty Points balance</h5>
              <h1 class="display-2 display-md-1 mb-3" style="font-weight: 300; color: #333;">{{ $totalPoints ?? '0' }}</h1>
              <p class="text-muted mb-3 mb-md-4">
                Available Lalit Loyalty balance
                <i class="fas fa-info-circle ms-1"></i>
              </p>
              <a class="btn-link px-4" href="{{ route('membership.exchange-points') }}" style="color: #666;">EXCHANGE POINTS</a>
            </div>
          </div>
        </div>

        <!-- Tier Points Balance -->
        <div class="col-12 col-md-4 tier-points-card">
          <div class="card border-0 h-100">
            <div class="card-body text-center py-4 py-md-5">
              <h5 class="mb-3 mb-md-4" style="color: #333;">Tier Points balance</h5>

              <!-- Tier Progress Indicators -->
              <div class="mb-3 mb-md-4">
                <div class="d-flex justify-content-center align-items-center gap-2 gap-md-4 mb-3 flex-wrap">
                  <div class="text-center">
                    <div class="rounded-circle d-flex align-items-center justify-content-center mb-2"
                      style="width: 35px; height: 35px; background-color: #d4a574;">
                    </div>
                    <small style="color: #d4a574; font-weight: 500; font-size: 0.75rem;">MEMBER</small>
                  </div>
                  <div class="text-center">
                    <div class="rounded-circle d-flex align-items-center justify-content-center mb-2"
                      style="width: 35px; height: 35px; background-color: #c0c0c0;">
                    </div>
                    <small style="color: #c0c0c0; font-size: 0.75rem;">SILVER</small>
                  </div>
                  <div class="text-center">
                    <div class="rounded-circle d-flex align-items-center justify-content-center mb-2"
                      style="width: 35px; height: 35px; background-color: #d4af37;">
                    </div>
                    <small style="color: #d4af37; font-size: 0.75rem;">GOLD</small>
                  </div>
                  <div class="text-center">
                    <div class="rounded-circle d-flex align-items-center justify-content-center mb-2"
                      style="width: 35px; height: 35px; background-color: #708090;">
                    </div>
                    <small style="color: #708090; font-size: 0.75rem;">PLATINUM</small>
                  </div>
                </div>
                <p class="text-primary mb-0">{{ $tierPointsCollected ?? '0' }} points collected</p>
              </div>

              <p class="text-muted mb-3 mb-md-4" style="font-size: 0.9rem;">
                Spend an additional USD 2,500 to collect 5,000 Tier Points to become a Silver member
              </p>
              <a class="btn-link px-4" href="https://loyalitylalit.mwsserver.co.in/package-details" style="color: #666;">MEMBER BENEFITS</a>
            </div>
          </div>
        </div>

        <!-- E-Card Section -->
        <div class="col-12 col-md-4 membership-card">
          <div class="card border-0 h-100">
            <div class="card-body text-center py-4 py-md-5">
              <div class="mb-3 d-flex justify-content-center">
                <img src="{{ asset('assets/images/loyalty-card.png') }}" alt="Membership Card" class="img-fluid" style="max-width: 180px; width: 70%; margin-top: 1rem;">
              </div>
              <a href="{{ route('membership.manage-card') }}" class="btn-link" style="color: #666;">
                YOUR E-CARD
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>
@endsection