@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">
        @php
          $extraData = isset($membershipUser['extra_data']) ? (is_string($membershipUser['extra_data']) ? json_decode($membershipUser['extra_data'], true) : $membershipUser['extra_data']) : [];
          $extraData = is_array($extraData) ? $extraData : [];
          $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));

          $tierEndDateRaw = null;
          if (!empty($extraData['tier_data']) && is_array($extraData['tier_data']) && !empty($extraData['tier_data'][0]['tier_end_date'])) {
              $tierEndDateRaw = $extraData['tier_data'][0]['tier_end_date'];
          } elseif (isset($membershipUser['tier_data']) && is_array($membershipUser['tier_data']) && !empty($membershipUser['tier_data'][0]['tier_end_date'])) {
              $tierEndDateRaw = $membershipUser['tier_data'][0]['tier_end_date'];
          } elseif (isset($memberData['extra_data']['tier_data'][0]['tier_end_date'])) {
              $tierEndDateRaw = $memberData['extra_data']['tier_data'][0]['tier_end_date'];
          }

          $tierEndDateFormatted = null;
          if ($tierEndDateRaw && is_string($tierEndDateRaw)) {
              try {
                  $tierEndDateFormatted = \Carbon\Carbon::parse($tierEndDateRaw)->format('d M Y');
              } catch (\Throwable $e) {
                  $tierEndDateFormatted = null;
              }
          }
        @endphp
        <h1 class="display-6 mb-4">
          Welcome to The LaLiT Loyalty, {{ $salutation ? $salutation . ' ' : '' }}{{ $name }}
        </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 Number</small>
            <strong style="font-size: 1.1rem; color: #333;">{{ $membershipUser['membership_number'] ?? '2007513951' }}@if($tierEndDateFormatted) <span class="text-muted fw-normal" style="font-size: 0.95rem;">(Tier End Date: {{ $tierEndDateFormatted }})</span>@endif</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 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="{{ route('membership.myrewards') }}" class="btn-link 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 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>

    <!-- 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;">The 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 The 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;">REDEEM
                  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 Status</h5>

                <!-- Tier Progress Indicators -->
                <div class="mb-3 mb-md-4">
                  @php
                    // Define tier order and colors
                    $tiers = [
                      'BLUE' => ['color' => '#4169E1', 'order' => 1],
                      'SILVER' => ['color' => '#c0c0c0', 'order' => 2],
                      'GOLD' => ['color' => '#d4af37', 'order' => 3],
                      'PLATINUM' => ['color' => '#708090', 'order' => 4]
                    ];

                    // Get current member tier from tier_data or fallback to tier column
                    $currentTier = 'BLUE'; // default
                    $tierStartDate = null;
                    $tierEndDate = null;

                    if (isset($membershipUser['tier_data']) && is_array($membershipUser['tier_data']) && !empty($membershipUser['tier_data'])) {
                      $currentTierData = $membershipUser['tier_data'][0] ?? [];
                      $currentTier = $currentTierData['tier_code_id'] ?? $membershipUser['tier'] ?? 'BLUE';
                      $tierStartDate = $currentTierData['tier_start_date'] ?? null;
                      $tierEndDate = $currentTierData['tier_end_date'] ?? null;
                    } else {
                      $currentTier = $membershipUser['tier'] ?? 'BLUE';
                    }

                    $currentTierOrder = $tiers[strtoupper($currentTier)]['order'] ?? 1;
                    $currentTierColor = $tiers[strtoupper($currentTier)]['color'] ?? '#4169E1';
                  @endphp

                  <div class="d-flex justify-content-center align-items-center gap-2 gap-md-4 mb-3 flex-wrap">
                    @foreach($tiers as $tierName => $tierInfo)
                      @php
                        $isActive = $tierInfo['order'] <= $currentTierOrder;
                        $isCurrent = strtoupper($currentTier) === $tierName;
                      @endphp
                      <div class="text-center">
                        <div
                          class="rounded-circle d-flex align-items-center justify-content-center mb-2 position-relative {{ $isCurrent ? 'tier-current' : '' }}"
                          style="width: 35px; height: 35px; background-color: {{ $isActive ? $tierInfo['color'] : '#e9ecef' }}; {{ $isCurrent ? 'box-shadow: 0 0 0 3px ' . $currentTierColor . '33;' : '' }}">
                          @if($isCurrent)
                            <i class="fas fa-crown" style="color: white; font-size: 12px;"></i>
                          @elseif($isActive)
                            <i class="fas fa-check" style="color: white; font-size: 12px;"></i>
                          @endif
                        </div>
                        <small
                          style="color: {{ $isActive ? $tierInfo['color'] : '#6c757d' }}; font-weight: {{ $isCurrent ? '600' : ($isActive ? '500' : 'normal') }}; font-size: 0.75rem;">
                          {{ $tierName }}
                        </small>
                      </div>
                    @endforeach
                  </div>

                  @php
                    // Calculate tier progress message
                    $progressMessage = "Spend an additional INR 2,500 to collect 5,000 Tier Points to become a Silver member";

                    if (strtoupper($currentTier) === 'SILVER') {
                      $progressMessage = "Spend an additional INR 5,000 to collect 10,000 Tier Points to become a Gold member";
                    } elseif (strtoupper($currentTier) === 'GOLD') {
                      $progressMessage = "Spend an additional INR 10,000 to collect 20,000 Tier Points to become a Platinum member";
                    } elseif (strtoupper($currentTier) === 'PLATINUM') {
                      $progressMessage = "Congratulations! You have achieved the highest tier status.";
                    }
                  @endphp

                  <p class="mb-0" style="color: {{ $currentTierColor }}; font-weight: 600;">
                    <strong>Current Tier: {{ strtoupper($currentTier) }}</strong>
                    @if($tierEndDate)
                      <br><small class="text-muted">Valid until {{ date('M d, Y', strtotime($tierEndDate)) }}</small>
                    @endif
                  </p>
                </div>
                <a class="btn-link px-4" href="{{ url('/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 d-flex flex-column">
                @php
                  // Get current tier and determine card image
                  $currentTierCode = strtolower($currentTier ?? 'blue');
                  $cardImage = 'blue-card.png'; // default

                  // Map tier to card image
                  $tierImages = [
                    'blue' => 'blue-card.png',
                    'silver' => 'silver-card.png',
                    'gold' => 'gold-card.png',
                    'platinum' => 'platinum-card.png'
                  ];

                  if (isset($tierImages[$currentTierCode])) {
                    $cardImage = $tierImages[$currentTierCode];
                  }
                @endphp
                <div class="mb-3 d-flex justify-content-center flex-grow-1 align-items-center">
                  <div class="position-relative" style="max-width: 180px; width: 70%;">
                    <img src="{{ asset('assets/images/' . $cardImage) }}"
                      alt="{{ ucfirst($currentTierCode) }} 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'] ?? '2007513951' }}
                    </div>
                  </div>
                </div>
                <a href="{{ route('membership.manage-card') }}" class="btn-link px-4" style="color: #666;">
                  YOUR E-CARD
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- MY STAYS SECTION -->
    <div class="row justify-content-center mt-5 mb-4">
      <div class="col-12">
        <div class="text-center loyalty-header-label mb-4">
          <h2 class="h3 mb-3" style="color: #333; font-weight: 400; letter-spacing: 1px;">MY STAYS</h2>
          <div class="line mx-auto"></div>
        </div>

        @if(isset($staysError) && $staysError)
          <div class="alert alert-warning text-center border-0 shadow-sm rounded-3 py-3 mb-4" role="alert"
            style="background-color: #fff9e6; color: #856404;">
            <i class="fas fa-exclamation-circle me-2"></i> {{ $staysError }}
          </div>
        @endif

        <!-- Navigation Tabs -->
        <ul class="nav nav-tabs justify-content-center border-bottom mb-4 stays-tabs" id="staysTab" role="tablist"
          style="border-color: #e9ecef !important;">
          <li class="nav-item" role="presentation">
            <button class="nav-link active fw-bold text-uppercase px-4 py-3 border-0 bg-transparent" id="upcoming-tab"
              data-bs-toggle="tab" data-bs-target="#upcoming" type="button" role="tab" aria-controls="upcoming"
              aria-selected="true"
              style="color: #d4af37; border-bottom: 3px solid #d4af37 !important; letter-spacing: 0.5px;">
              <i class="fas fa-calendar-alt me-2"></i>Upcoming Stays
              @if(!empty($upcomingStays))
                <span class="badge rounded-pill bg-dark ms-1">{{ count($upcomingStays) }}</span>
              @endif
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link fw-bold text-uppercase px-4 py-3 border-0 bg-transparent text-muted" id="previous-tab"
              data-bs-toggle="tab" data-bs-target="#previous" type="button" role="tab" aria-controls="previous"
              aria-selected="false" style="border-bottom: 3px solid transparent !important; letter-spacing: 0.5px;">
              <i class="fas fa-history me-2"></i>Previous Stays
              @if(!empty($previousStays))
                <span class="badge rounded-pill bg-secondary ms-1">{{ count($previousStays) }}</span>
              @endif
            </button>
          </li>
        </ul>

        <!-- Tab Content -->
        <div class="tab-content" id="staysTabContent">
          <!-- UPCOMING STAYS TAB -->
          <div class="tab-pane fade show active" id="upcoming" role="tabpanel" aria-labelledby="upcoming-tab">
            @if(empty($upcomingStays))
              <div class="card border-0 shadow-sm text-center py-5">
                <div class="card-body">
                  <i class="fas fa-hotel fa-3x text-muted mb-3" style="color: #ccc !important;"></i>
                  <h5 class="text-muted fw-normal">No upcoming stays found.</h5>
                </div>
              </div>
            @else
              <div class="row g-4">
                @foreach($upcomingStays as $stay)
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="card border-0 shadow-sm h-100 stay-card position-relative overflow-hidden"
                      style="border-radius: 10px;">
                      <div
                        class="card-header bg-white border-0 pt-4 px-4 pb-0 d-flex justify-content-between align-items-start">
                        <div>
                          <h5 class="fw-bold mb-1" style="color: #333;">{{ $stay['hotelName'] ?? 'The LaLiT Hotel' }}</h5>
                          <small class="text-muted d-block">Reservation No: <strong
                              style="color: #555;">{{ $stay['reservationNumber'] ?? 'N/A' }}</strong></small>
                        </div>
                        @php
                          $status = strtoupper($stay['bookingStatus'] ?? 'CONFIRMED');
                          $badgeClass = 'bg-success';
                          if ($status === 'CANCELLED')
                            $badgeClass = 'bg-danger';
                          elseif ($status === 'PENDING')
                            $badgeClass = 'bg-warning text-dark';
                        @endphp
                        <span class="badge {{ $badgeClass }} px-3 py-2 text-uppercase"
                          style="font-size: 0.75rem; letter-spacing: 0.5px;">
                          {{ $status }}
                        </span>
                      </div>

                      <div class="card-body px-4 py-3">
                        <div class="mb-3 py-2 px-3 bg-light rounded-3 d-flex justify-content-between align-items-center">
                          <div>
                            <small class="text-muted d-block" style="font-size: 0.75rem;">CHECK-IN</small>
                            <strong style="color: #333; font-size: 0.95rem;">
                              {{ isset($stay['checkIn']) ? date('d M Y', strtotime($stay['checkIn'])) : 'N/A' }}
                            </strong>
                          </div>
                          <i class="fas fa-arrow-right text-muted px-2"></i>
                          <div class="text-end">
                            <small class="text-muted d-block" style="font-size: 0.75rem;">CHECK-OUT</small>
                            <strong style="color: #333; font-size: 0.95rem;">
                              {{ isset($stay['checkOut']) ? date('d M Y', strtotime($stay['checkOut'])) : 'N/A' }}
                            </strong>
                          </div>
                        </div>

                        <div class="row g-2 mb-3">
                          <div class="col-6">
                            <small class="text-muted d-block" style="font-size: 0.8rem;">Room Type</small>
                            <span class="fw-semibold text-dark" style="font-size: 0.9rem;">
                              {{ $stay['roomType'] ?? ($stay['rooms'][0]['roomName'] ?? 'Executive Room') }}
                            </span>
                          </div>
                          <div class="col-6 text-end">
                            <small class="text-muted d-block" style="font-size: 0.8rem;">Total Amount</small>
                            <span class="fw-bold" style="color: #d4af37; font-size: 0.95rem;">
                              {{ isset($stay['totalAmountSpent']) && is_numeric($stay['totalAmountSpent']) ? '₹' . number_format($stay['totalAmountSpent'], 2) : 'N/A' }}
                            </span>
                          </div>
                        </div>

                        <div class="p-2 border rounded bg-white mb-2">
                          <small class="text-muted d-block fw-semibold" style="font-size: 0.75rem;"><i
                              class="fas fa-comment-dots me-1"></i>Special Requests:</small>
                          <small class="text-dark d-block text-truncate" style="font-size: 0.825rem;"
                            title="{{ $stay['specialRequests'] ?? 'None' }}">
                            {{ !empty($stay['specialRequests']) ? $stay['specialRequests'] : 'No special requests' }}
                          </small>
                        </div>
                      </div>

                      <div class="card-footer bg-white border-0 px-4 pb-4 pt-0">
                        <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center">
                          @if(!empty($stay['bookingDetailsUrl']))
                            <a href="{{ $stay['bookingDetailsUrl'] }}" target="_blank" rel="noopener noreferrer"
                              class="btn btn-sm btn-outline-dark flex-grow-1" style="font-size: 0.8rem; border-color: #ccc;">
                              <i class="fas fa-external-link-alt me-1"></i>View Details
                            </a>
                          @endif

                          @if(!empty($stay['modifyAllowed']))
                            <a href="{{ $stay['bookingDetailsUrl'] ?? '#' }}" target="_blank" rel="noopener noreferrer"
                              class="btn btn-sm btn-outline-primary" style="font-size: 0.8rem;">
                              <i class="fas fa-edit me-1"></i>Modify
                            </a>
                          @endif

                          @if(!empty($stay['cancelAllowed']))
                            <a href="{{ $stay['bookingDetailsUrl'] ?? '#' }}" target="_blank" rel="noopener noreferrer"
                              class="btn btn-sm btn-outline-danger" style="font-size: 0.8rem;">
                              <i class="fas fa-times-circle me-1"></i>Cancel
                            </a>
                          @endif
                        </div>
                      </div>
                    </div>
                  </div>
                @endforeach
              </div>
            @endif
          </div>

          <!-- PREVIOUS STAYS TAB -->
          <div class="tab-pane fade" id="previous" role="tabpanel" aria-labelledby="previous-tab">
            @if(empty($previousStays))
              <div class="card border-0 shadow-sm text-center py-5">
                <div class="card-body">
                  <i class="fas fa-history fa-3x text-muted mb-3" style="color: #ccc !important;"></i>
                  <h5 class="text-muted fw-normal">No previous stays found.</h5>
                </div>
              </div>
            @else
              <div class="row g-4">
                @foreach($previousStays as $stay)
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="card border-0 shadow-sm h-100 stay-card position-relative overflow-hidden"
                      style="border-radius: 10px;">
                      <div
                        class="card-header bg-white border-0 pt-4 px-4 pb-0 d-flex justify-content-between align-items-start">
                        <div>
                          <h5 class="fw-bold mb-1" style="color: #333;">{{ $stay['hotelName'] ?? 'The LaLiT Hotel' }}</h5>
                          <small class="text-muted d-block">Reservation No: <strong
                              style="color: #555;">{{ $stay['reservationNumber'] ?? ($stay['bookingRef'] ?? 'N/A') }}</strong></small>
                        </div>
                        <span class="badge bg-secondary px-3 py-2 text-uppercase"
                          style="font-size: 0.75rem; letter-spacing: 0.5px;">
                          COMPLETED
                        </span>
                      </div>

                      <div class="card-body px-4 py-3">
                        <div class="mb-3 py-2 px-3 bg-light rounded-3 d-flex justify-content-between align-items-center">
                          <div>
                            <small class="text-muted d-block" style="font-size: 0.75rem;">CHECK-IN</small>
                            <strong style="color: #333; font-size: 0.95rem;">
                              {{ isset($stay['checkIn']) ? date('d M Y', strtotime($stay['checkIn'])) : 'N/A' }}
                            </strong>
                          </div>
                          <i class="fas fa-arrow-right text-muted px-2"></i>
                          <div class="text-end">
                            <small class="text-muted d-block" style="font-size: 0.75rem;">CHECK-OUT</small>
                            <strong style="color: #333; font-size: 0.95rem;">
                              {{ isset($stay['checkOut']) ? date('d M Y', strtotime($stay['checkOut'])) : 'N/A' }}
                            </strong>
                          </div>
                        </div>

                        <div class="row g-2 mb-2">
                          <div class="col-12">
                            <small class="text-muted d-block" style="font-size: 0.8rem;">Amount Spent</small>
                            <span class="fw-bold text-dark" style="font-size: 0.9rem;">
                              {{ isset($stay['totalAmountSpent']) && is_numeric($stay['totalAmountSpent']) ? '₹' . number_format($stay['totalAmountSpent'], 2) : 'N/A' }}
                            </span>
                          </div>
                        </div>

                        <div class="row g-2 mb-2">
                          <div class="col-6 text-end">
                            <small class="text-muted d-block" style="font-size: 0.8rem;">Pay By Loyalty Points</small>
                            <span class="fw-bold" style="color: #d4af37; font-size: 0.9rem;">
                              @if(isset($stay['loyaltyPointsUsed']) && $stay['loyaltyPointsUsed'] !== null)
                                {{ $stay['loyaltyPointsUsed'] }} pts
                              @else
                                <span class="badge bg-warning text-dark">Pending</span>
                              @endif
                            </span>
                          </div>
                          <div class="col-6 text-end">
                            <small class="text-muted d-block" style="font-size: 0.8rem;">Loyalty Points Earned</small>
                            <span class="fw-bold" style="color: #d4af37; font-size: 0.9rem;">
                              @if(isset($stay['loyaltyPointsEarned']) && $stay['loyaltyPointsEarned'] !== null)
                                {{ $stay['loyaltyPointsEarned'] }} pts
                              @else
                                <span class="badge bg-warning text-dark">Pending</span>
                              @endif
                            </span>
                          </div>
                        </div>
                      </div>

                      <div class="card-footer bg-white border-0 px-4 pb-4 pt-0">
                        <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center">
                          @if(!empty($stay['invoiceDownloadUrl']))
                            <a href="{{ $stay['invoiceDownloadUrl'] }}" target="_blank" rel="noopener noreferrer"
                              class="btn btn-sm btn-outline-dark" style="font-size: 0.8rem;">
                              <i class="fas fa-file-invoice me-1"></i>Download Invoice
                            </a>
                          @else
                            <span class="text-muted" style="font-size: 0.8rem;"><i class="fas fa-info-circle me-1"></i>Invoice
                              Not Available</span>
                          @endif

                          @if(!empty($stay['rebookUrl']))
                            <a href="{{ $stay['rebookUrl'] }}" target="_blank" rel="noopener noreferrer"
                              class="btn btn-sm btn-outline-warning text-dark fw-semibold"
                              style="font-size: 0.8rem; background-color: #fff8e7; border-color: #d4af37;">
                              <i class="fas fa-redo me-1"></i>Rebook
                            </a>
                          @endif

                          @if(!empty($stay['reviewUrl']))
                            <a href="{{ $stay['reviewUrl'] }}" target="_blank" rel="noopener noreferrer"
                              class="btn btn-sm btn-outline-success" style="font-size: 0.8rem;">
                              <i class="fas fa-star me-1"></i>Write a Review
                            </a>
                          @elseif(!empty($stay['reviewStatus']) && strtolower($stay['reviewStatus']) === 'completed')
                            <span class="badge bg-success" style="font-size: 0.8rem;"><i
                                class="fas fa-check-circle me-1"></i>Reviewed</span>
                          @endif
                        </div>
                      </div>
                    </div>
                  </div>
                @endforeach
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>

  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const staysTab = document.getElementById('staysTab');
      if (staysTab) {
        staysTab.addEventListener('click', function (e) {
          const targetBtn = e.target.closest('.nav-link');
          if (targetBtn) {
            staysTab.querySelectorAll('.nav-link').forEach(btn => {
              btn.classList.remove('active');
              btn.classList.add('text-muted');
              btn.style.color = '#6c757d';
              btn.style.borderBottomColor = 'transparent';
            });
            targetBtn.classList.add('active');
            targetBtn.classList.remove('text-muted');
            targetBtn.style.color = '#d4af37';
            targetBtn.style.borderBottomColor = '#d4af37';
          }
        });
      }
    });
  </script>
@endsection