@extends('user.layouts.app')

@push('styles')
<style>
  .payment-history-receipt-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
  }

  .payment-history-receipt-modal.is-visible {
    display: flex;
  }

  .payment-history-receipt-dialog {
    width: min(960px, 100%);
    height: min(88vh, 820px);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
  }

  .payment-history-receipt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e6ece5;
  }

  .payment-history-receipt-toolbar h4 {
    margin: 0;
    color: #002b10;
  }

  .payment-history-receipt-close {
    border: 0;
    background: transparent;
    color: #002b10;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }

  .payment-history-receipt-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #f6f6f6;
  }

  @media (max-width: 767px) {
    .payment-history-receipt-dialog {
      height: min(85vh, 720px);
    }
  }
</style>
@endpush

@section('body_class', 'payment-history')

@section('content')
<section class="banner-slider">
      @foreach($bannerImages as $image)
    <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}" alt="Slide {{ $loop->iteration }}"></div>
    @endforeach
    </section>

    <div class="banner-inner-content">
      <div class="container">
        <ul class="bread-come">
          <li>
            <!-- <a href="/">Home</a> -->
            <a href="/dashboard">Dashboard</a>
          </li>
          <li>Payment History</li>
        </ul>
      </div>
    </div>
    <section class="affiliated-clubs">
      <div class="container">
        <div class="page-title">
          <h4 data-aos="fade-up">Payment History</h4>          
        </div>        
      </div>
    </section>

    <section class="payment-history-outer pt-0">
      <div class="container">
        <div class="overflow-auto">
          <table class="payment-table-list custom-table">                    
            <thead>
              <tr>
                <th class="text-center">SL No.</th>
                <th class="text-center">Order Id</th>                        
                <th class="text-center">Receipt Id</th>
                <!-- <th>Payment Id</th> -->
                <th class="text-center">Source</th>
                <th class="text-center">Amount(₹)</th>
                <!-- <th>Gateway</th> -->
                <!-- <th>Response</th> -->
                <th class="text-center">Status</th>
                <th class="text-center">Date/Time</th>
                <th class="text-center">View Receipt</th>
              </tr>	
            </thead>
            <tbody>
              @if($transactions->isNotEmpty())
              @foreach ($transactions as $index => $transaction)
              <tr>
                  <td>{{ $loop->iteration }}</td>
                  <td>{{ $transaction->order_id }}</td>
                  <td>{{ $transaction->receipt_id }}</td>
                  <!-- <td>{{ $transaction->payment_id }}</td> -->
                  <td>{{ ucfirst(str_replace('_', ' ', $transaction->payment_source ?? data_get($transaction->notes, 'source', ''))) }}</td>
                  <td class="text-end">{{ $transaction->amount }}</td>
                  <!-- <td>{{ strtoupper($transaction->payment_gateway ?? data_get($transaction->notes, 'gateway', '')) }}</td> -->
                  <!-- <td>{{ $transaction->status }}</td> -->
                  <td class="text-center">
                    @if($transaction->status == 'paid')
                      Paid
                    @elseif($transaction->status == 'created')
                      Created
                    @elseif($transaction->status == 'attempted')
                      Attempted
                    @elseif($transaction->status == 'pending')
                      Pending
                    @endif
                  </td>
                  <td>{{ optional($transaction->created_at)->timezone(config('app.timezone'))->format('d-m-Y h:i A') }}</td>
                  <td>
                    @if($transaction->status == 'paid')
                      <a class="btn btn-primary view" href="{{ route('user.transaction.downloadReceipt', ['id' => $transaction->id]) }}" class="receipt-preview-link" data-receipt-url="{{ route('user.transaction.downloadReceipt', ['id' => $transaction->id]) }}">View Receipt</a>
                    @endif
                  </td>
              </tr>
              @endforeach
              @else
              <tr style="text-align: center;">
                  <td colspan="10">No data found.</td>
              </tr>
              @endif
            </tbody>
          </table>
        </div>
      </div>
    </section>

    <div id="paymentHistoryReceiptModal" class="payment-history-receipt-modal" aria-hidden="true">
      <div class="payment-history-receipt-dialog">
        <div class="payment-history-receipt-toolbar">
          <h4>Payment Receipt</h4>
          <button type="button" id="closePaymentHistoryReceiptModalBtn" class="payment-history-receipt-close" aria-label="Close receipt preview">&times;</button>
        </div>
        <iframe id="paymentHistoryReceiptFrame" class="payment-history-receipt-frame" title="Payment receipt preview"></iframe>
      </div>
    </div>
@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const receiptModal = document.getElementById('paymentHistoryReceiptModal');
    const receiptFrame = document.getElementById('paymentHistoryReceiptFrame');
    const closeReceiptModalBtn = document.getElementById('closePaymentHistoryReceiptModalBtn');

    function openReceiptModal(url) {
      if (!url) {
        return;
      }

      receiptFrame.src = url;
      receiptModal.classList.add('is-visible');
      receiptModal.setAttribute('aria-hidden', 'false');
    }

    function closeReceiptModal() {
      receiptModal.classList.remove('is-visible');
      receiptModal.setAttribute('aria-hidden', 'true');
      receiptFrame.removeAttribute('src');
    }

    document.querySelectorAll('.receipt-preview-link').forEach((link) => {
      link.addEventListener('click', function (event) {
        event.preventDefault();
        openReceiptModal(this.dataset.receiptUrl);
      });
    });

    closeReceiptModalBtn.addEventListener('click', closeReceiptModal);

  });
</script>
@endpush