@extends('layouts.membership')

@section('title', 'Manage Card - The LaLiT Loyalty')

@section('content')
<div class="container px-4 py-5 dashboard-wrapper">
  <!-- Header Section -->
  <div class="row mb-5">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="flex-grow-1 text-center">
          <h1 class="display-6 mb-4">
            Manage Card
          </h1>
          <div class="line"></div>
        </div>
        <div>
          <a href="{{ route('membership.dashboard') }}" class="btn back-to-dashboard-btn">
            <i class="fas fa-arrow-left me-2"></i>BACK TO DASHBOARD
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Content Section -->
  <div class="row justify-content-center">
    <div class="col-lg-10">
      <div class="card border-0 manage-card-section" style="background-color: #f5f0eb;">
        <div class="card-body p-5">
          <div class="row">
            <!-- Left Column - Card Info -->
            <div class="col-md-7">
              <div class="manage-card-content">
                <h3 class="manage-card-title mb-4">
                  Your Jumeirah One card is your ticket to<br>
                  ultimate rewards & benefits
                </h3>
                <p class="manage-card-description mb-4">
                  Your Jumeirah One membership card entitles you to exclusive member benefits, privileges and rewards when you stay, dine or relax with Jumeirah Hotels & Resorts.
                </p>

                <!-- Card Details Section -->
                <div class="card-details-section mb-4">
                  <div class="row">
                    <div class="col-md-6 mb-3">
                      <div class="card-detail-item">
                        <label class="card-detail-label">CARD NUMBER</label>
                        <div class="card-detail-value">{{ $membershipUser['membership_number'] ?? '2007513951' }}</div>
                      </div>
                    </div>
                    <div class="col-md-6 mb-3">
                      <div class="card-detail-item">
                        <label class="card-detail-label">CARD HOLDER NAME</label>
                        <div class="card-detail-value">{{ strtoupper($membershipUser['name'] ?? 'MEMBER NAME') }}</div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Action Links -->
                <div class="manage-card-actions">
                    Print or add card to device
                </div>

                <!-- Card Options -->
                <div class="card-options mt-4">
                  <div class="row g-3">
                    <div class="col-3">
                      <div class="card-option-item text-center" data-option="print">
                        <a title="Print your membership card" href="#"><i class="fa-solid fa-print fa-2x mb-2"></i></a>
                      </div>
                    </div>
                    <div class="col-3">
                      <div class="card-option-item text-center" data-option="apple-wallet">
                        <a href="#" title="Add your membership card to Apple Wallet"><i class="fas fa-apple-alt fa-2x mb-2"></i></a>
                      </div>
                    </div>
                    <div class="col-3">
                      <div class="card-option-item text-center" data-option="android-wallet">
                        <a href="#" title="Add your membership card to Android Wallet"> <i class="fa-brands fa-android fa-2x mb-2"></i></a>
                      </div>
                    </div>
                    <div class="col-3">
                      <div class="card-option-item text-center" data-option="download">
                        <a href="#" title="Download your membership card"><i class="fas fa-download fa-2x mb-2"></i></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Right Column - Card Image -->
            <div class="col-md-5">
              <div class="manage-card-visual text-center">
                <div class="membership-card-display">
                  <img src="{{ asset('assets/images/loyalty-card.png') }}" alt="LaLiT Loyalty Card" class="img-fluid membership-card-img">
                  <div class="card-overlay-info">
                    <div class="card-number">{{ $membershipUser['membership_number'] ?? '2007513951' }}</div>
                    <div class="card-name">{{ strtoupper($membershipUser['name'] ?? 'MEMBER NAME') }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Print card functionality
    const printCardBtn = document.getElementById('printCardBtn');
    if (printCardBtn) {
        printCardBtn.addEventListener('click', function(e) {
            e.preventDefault();
            // Open print dialog or show options
            showCardOptions();
        });
    }

    // Card option clicks
    const cardOptions = document.querySelectorAll('.card-option-item');
    cardOptions.forEach(option => {
        option.addEventListener('click', function() {
            const optionType = this.getAttribute('data-option');
            handleCardOption(optionType);
        });
    });

    function showCardOptions() {
        // Show the card options section
        const cardOptions = document.querySelector('.card-options');
        cardOptions.scrollIntoView({ behavior: 'smooth' });
    }

    function handleCardOption(type) {
        switch(type) {
            case 'apple-wallet':
                // Add to Apple Wallet functionality
                alert('Add to Apple Wallet functionality would be implemented here');
                break;
            case 'google-pay':
                // Add to Google Pay functionality
                alert('Add to Google Pay functionality would be implemented here');
                break;
            case 'samsung-pay':
                // Add to Samsung Pay functionality
                alert('Add to Samsung Pay functionality would be implemented here');
                break;
            case 'print':
                // Print card functionality
                window.print();
                break;
            default:
                console.log('Unknown card option:', type);
        }
    }
});
</script>
@endpush
@endsection