@extends('layouts.membership')

@section('title', 'Account Statement - The LaLiT Loyalty')

@section('content')
  <div class="container px-4 py-5">
    <div class="row justify-content-center">
      <div class="col-lg-12">
        <!-- Page Header -->
        <div class="d-flex justify-content-between align-items-center mb-5">
          <div class="flex-grow-1 text-center">
            <h2 class="mb-2 statement-title">LaLit Loyalty Account Statement</h2>
          </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>

        <!-- My Points Section -->

        <div class="row">
          <div class="col-8">
            <div class="card border-0 shadow-sm mb-5" style="background-color: #f5f0eb;">
              <div class="card-body p-5">
                <div class="text-center mb-4">
                  <h4 style="color: #333; font-weight: 400;">My Points</h4>
                </div>

                <div class="row justify-content-center">
                  <!-- LaLit Loyalty Balance -->
                  <div class="col-md-4 mb-4">
                    <div class="text-center">
                      <p class="text-muted text-uppercase mb-3"
                        style="font-size: 0.8rem; letter-spacing: 1px; color: #8b7355 !important;">JUMEIRAH ONE BALANCE
                      </p>
                      <div class="border-0 rounded p-4" style="background-color: white; position: relative;">
                        <h2 class="mb-0" style="color: #333; font-weight: 300; font-size: 3rem;">0</h2>
                        <i class="fas fa-info-circle position-absolute"
                          style="top: 12px; right: 12px; color: #ccc; font-size: 1.1rem;"></i>
                      </div>
                    </div>
                  </div>

                  <!-- Tier Points -->
                  <div class="col-md-4 mb-4">
                    <div class="text-center">
                      <p class="text-muted text-uppercase mb-3"
                        style="font-size: 0.8rem; letter-spacing: 1px; color: #8b7355 !important;">TIER POINTS</p>
                      <div class="border-0 rounded p-4" style="background-color: white; position: relative;">
                        <h2 class="mb-0" style="color: #333; font-weight: 300; font-size: 3rem;">0</h2>
                        <i class="fas fa-info-circle position-absolute"
                          style="top: 12px; right: 12px; color: #ccc; font-size: 1.1rem;"></i>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Points Information -->
                <div class="row justify-content-center mt-4">
                  <div class="col-md-10">
                    <div class="text-center">
                      <p class="text-muted" style="font-size: 0.9rem; line-height: 1.6; color: #666 !important;">
                        All Jumeirah One Members will earn two (2) Jumeirah One Points and two (2) Tier Points for every
                        eligible 1 USD spent. For further information, please visit our
                        <a href="#" class="text-decoration-none" style="color: #8b7355;">FAQs</a>.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-4">
            <div class="card border-0 shadow-sm mb-4" style="background-color: #f5f0eb;">
              <div class="card-body p-5">
                <!-- Right side stats -->
                <div class="row d-flex justify-content-center">

                  <!-- Points Due to Expire -->
                  <div class="text-center mb-4">
                    <p class="text-muted text-uppercase mb-2"
                      style="font-size: 0.75rem; letter-spacing: 1px; color: #8b7355 !important;">POINTS DUE TO</p>
                    <p class="text-muted text-uppercase mb-3"
                      style="font-size: 0.75rem; letter-spacing: 1px; color: #8b7355 !important; margin-top: -8px;">
                      EXPIRE
                      BY</p>
                    <h3 class="mb-0" style="color: #333; font-weight: 300; font-size: 2rem;">0</h3>
                  </div>

                </div>
              </div>
            </div>

            <div class="card border-0 shadow-sm mb-5" style="background-color: #f5f0eb;">
              <div class="card-body p-5">
                <!-- Total Points Expired -->
                <div class="row d-flex justify-content-center">
                  <div class="text-center">
                    <p class="text-muted text-uppercase mb-2"
                      style="font-size: 0.75rem; letter-spacing: 1px; color: #8b7355 !important;">TOTAL POINTS</p>
                    <p class="text-muted text-uppercase mb-3"
                      style="font-size: 0.75rem; letter-spacing: 1px; color: #8b7355 !important; margin-top: -8px;">
                      EXPIRED</p>
                    <h3 class="mb-0" style="color: #333; font-weight: 300; font-size: 2rem;">0</h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-lg-12">
        <!-- Transaction History Section -->
        <div class="card border-0 shadow-sm" style="background-color: #f5f0eb;">
          <div class="card-body p-5">
            <div class="d-flex justify-content-between align-items-center mb-4">
              <h4 style="color: #333; font-weight: 400;">Transaction History</h4>

              <div class="d-flex align-items-center gap-3">
                <!-- Download Button -->
                <button class="btn btn-link text-decoration-none p-0 border-0" style="color: #666;">
                  <i class="fas fa-download me-2"></i>
                  <span class="text-uppercase" style="font-size: 0.8rem; letter-spacing: 1px;">DOWNLOAD</span>
                </button>

                <!-- Fast 30 Days Dropdown -->
                <div class="dropdown">
                  <button class="btn btn-link text-decoration-none p-0 dropdown-toggle border-0" type="button"
                    data-bs-toggle="dropdown" style="color: #666;">
                    <i class="fas fa-calendar-alt me-2"></i>
                    <span class="text-uppercase" style="font-size: 0.8rem; letter-spacing: 1px;">FAST 30 DAYS</span>
                  </button>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Last 30 Days</a></li>
                    <li><a class="dropdown-item" href="#">Last 60 Days</a></li>
                    <li><a class="dropdown-item" href="#">Last 90 Days</a></li>
                    <li><a class="dropdown-item" href="#">This Year</a></li>
                    <li><a class="dropdown-item" href="#">All Time</a></li>
                  </ul>
                </div>
              </div>
            </div>

            <!-- No Data State -->
            <div class="text-center py-5">
              <div class="mb-4">
                <i class="fas fa-receipt" style="font-size: 3rem; color: #ddd;"></i>
              </div>
              <h5 class="mb-3" style="color: #666; font-weight: 400;">NO DATA FOUND</h5>
              <a href="#" class="btn btn-link text-decoration-none" style="color: #666;">
                <span class="text-uppercase">CLAIM MISSING POINTS</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  @push('scripts')
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        // Download button functionality
        const downloadBtn = document.querySelector('button[style*="color: #666"]');
        if (downloadBtn) {
          downloadBtn.addEventListener('click', function () {
            // Add download functionality here
            console.log('Download statement clicked');
          });
        }

        // Dropdown functionality for date ranges
        const dropdownItems = document.querySelectorAll('.dropdown-item');
        dropdownItems.forEach(item => {
          item.addEventListener('click', function (e) {
            e.preventDefault();
            const selectedRange = this.textContent;
            console.log('Selected range:', selectedRange);
            // Add filtering logic here
          });
        });

        // Claim missing points link
        const claimLink = document.querySelector('a[href="#"]');
        if (claimLink) {
          claimLink.addEventListener('click', function (e) {
            e.preventDefault();
            // Add claim missing points functionality here
            console.log('Claim missing points clicked');
          });
        }
      });
    </script>
  @endpush
@endsection
@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const filterBtn = document.getElementById('filterBtn');
      const dateFrom = document.getElementById('dateFrom');
      const dateTo = document.getElementById('dateTo');
      const transactionType = document.getElementById('transactionType');
      const rows = document.querySelectorAll('.transaction-row');

      // Filter functionality
      filterBtn.addEventListener('click', function () {
        const fromDate = new Date(dateFrom.value);
        const toDate = new Date(dateTo.value);
        const typeFilter = transactionType.value;

        rows.forEach(function (row) {
          const rowDate = new Date(row.getAttribute('data-date'));
          const rowType = row.getAttribute('data-type');

          let showRow = true;

          // Date filter
          if (dateFrom.value && rowDate < fromDate) {
            showRow = false;
          }
          if (dateTo.value && rowDate > toDate) {
            showRow = false;
          }

          // Type filter
          if (typeFilter && rowType !== typeFilter) {
            showRow = false;
          }

          row.style.display = showRow ? '' : 'none';
        });

        // Update count
        const visibleRows = Array.from(rows).filter(row => row.style.display !== 'none');
        const countElement = document.querySelector('.card-footer small');
        if (countElement) {
          countElement.textContent = `Showing ${visibleRows.length} transactions`;
        }
      });

      // Reset filters
      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
          dateFrom.value = '{{ date("Y-m-01") }}';
          dateTo.value = '{{ date("Y-m-d") }}';
          transactionType.value = '';

          rows.forEach(function (row) {
            row.style.display = '';
          });

          const countElement = document.querySelector('.card-footer small');
          if (countElement) {
            countElement.textContent = `Showing ${rows.length} transactions`;
          }
        }
      });
    });

    // Export functions
    function exportToPDF() {
      alert('PDF export functionality would be implemented here.');
      // You can integrate with libraries like jsPDF or send request to server
    }

    function exportToCSV() {
      const table = document.getElementById('statementTable');
      const rows = Array.from(table.querySelectorAll('tr:not([style*="display: none"])'));

      let csv = '';
      rows.forEach(function (row) {
        const cols = Array.from(row.querySelectorAll('th, td'));
        const rowData = cols.map(col => {
          // Clean up the cell content
          const text = col.textContent.trim().replace(/\s+/g, ' ');
          return '"' + text.replace(/"/g, '""') + '"';
        });
        csv += rowData.join(',') + '\n';
      });

      // Download CSV
      const blob = new Blob([csv], { type: 'text/csv' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'lalit-loyalty-statement-' + new Date().toISOString().split('T')[0] + '.csv';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }

    // Print styles
    const printStyles = `
                              @media print {
                                  .btn, .dropdown { display: none !important; }
                                  .card { border: 1px solid #ddd !important; box-shadow: none !important; }
                                  .table { font-size: 12px; }
                                  .badge { background-color: #6c757d !important; }
                              }
                          `;

    const style = document.createElement('style');
    style.textContent = printStyles;
    document.head.appendChild(style);
  </script>
@endpush