@extends('user.layouts.app')

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  .receipt-page-wrapper {
    font-family: 'Inter', sans-serif;
    padding: 48px 0 64px;
    background: #f4f7f4;
    min-height: 80vh;
  }

  /* ── Success Banner ── */
  .receipt-success-banner {
    background: linear-gradient(135deg, #003815 0%, #006630 60%, #00882a 100%);
    border-radius: 20px;
    padding: 40px 32px;
    text-align: center;
    color: #fff;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
  }

  .receipt-success-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
  }

  .receipt-success-icon {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border: 2px solid rgba(255,255,255,0.3);
  }

  .receipt-success-icon svg {
    width: 36px;
    height: 36px;
    stroke: #fff;
    fill: none;
  }

  .receipt-success-banner h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: -0.5px;
  }

  .receipt-success-banner p {
    font-size: 15px;
    margin: 0;
    opacity: 0.85;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* ── Receipt Card ── */
  .receipt-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 56, 21, 0.08);
    overflow: hidden;
    margin-bottom: 28px;
  }

  .receipt-card-header {
    background: #f8fbf8;
    border-bottom: 1px solid #e5ede5;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }

  .receipt-card-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .receipt-card-header-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #003815, #00882a);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .receipt-card-header-icon svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    fill: none;
  }

  .receipt-card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #002b10;
  }

  .receipt-card-header span {
    display: block;
    font-size: 12px;
    color: #6b826b;
    margin-top: 2px;
    font-weight: 400;
  }

  /* ── Receipt Details Table ── */
  .receipt-details {
    padding: 28px;
  }

  .receipt-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .receipt-detail-row {
    display: contents;
  }

  .receipt-detail-row .label,
  .receipt-detail-row .value {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f5f0;
    font-size: 14px;
  }

  .receipt-detail-row:last-child .label,
  .receipt-detail-row:last-child .value {
    border-bottom: none;
  }

  .receipt-detail-row .label {
    color: #6b826b;
    font-weight: 500;
    background: #fafcfa;
    border-right: 1px solid #f0f5f0;
  }

  .receipt-detail-row .value {
    color: #1a2e1a;
    font-weight: 600;
  }

  .receipt-amount-highlight {
    font-size: 22px !important;
    color: #003815 !important;
    font-weight: 700 !important;
  }

  .receipt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e6f4eb;
    color: #006630;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
  }

  .receipt-status-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    background: #00882a;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ── Action Buttons ── */
  .receipt-actions-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 56, 21, 0.08);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }

  .receipt-actions-left {
    font-size: 14px;
    color: #6b826b;
    line-height: 1.5;
  }

  .receipt-actions-left strong {
    display: block;
    font-size: 15px;
    color: #1a2e1a;
    font-weight: 600;
    margin-bottom: 3px;
  }

  .receipt-btn-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }

  .receipt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: all 0.2s ease;
    white-space: nowrap;
  }

  .receipt-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .receipt-btn-primary {
    background: linear-gradient(135deg, #003815, #006630);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 56, 21, 0.25);
  }

  .receipt-btn-primary:hover {
    background: linear-gradient(135deg, #002b10, #004a22);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 56, 21, 0.35);
    transform: translateY(-1px);
  }

  .receipt-btn-secondary {
    background: #fff;
    color: #003815;
    border: 2px solid #c8dbc8;
  }

  .receipt-btn-secondary:hover {
    background: #f0f7f0;
    color: #003815;
    border-color: #a0c0a0;
    transform: translateY(-1px);
  }

  .receipt-btn-outline {
    background: transparent;
    color: #6b826b;
    border: 1.5px solid #d8e8d8;
  }

  .receipt-btn-outline:hover {
    background: #f8fbf8;
    color: #003815;
    border-color: #a0c0a0;
  }

  /* ── Receipt PDF Preview ── */
  .receipt-pdf-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 56, 21, 0.08);
    overflow: hidden;
    margin-top: 28px;
  }

  .receipt-pdf-header {
    background: #f8fbf8;
    border-bottom: 1px solid #e5ede5;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .receipt-pdf-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #002b10;
  }

  .receipt-pdf-frame {
    width: 100%;
    min-height: 75vh;
    border: 0;
    background: #f4f7f4;
    display: block;
  }

  /* ── Back link ── */
  .receipt-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b826b;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 24px;
    transition: color 0.2s;
  }

  .receipt-back-link:hover {
    color: #003815;
  }

  .receipt-back-link svg {
    width: 16px;
    height: 16px;
  }

  @media (max-width: 767px) {
    .receipt-page-wrapper {
      padding: 28px 0 48px;
    }

    .receipt-success-banner {
      padding: 28px 20px;
      border-radius: 14px;
    }

    .receipt-success-banner h2 {
      font-size: 22px;
    }

    .receipt-details-grid {
      grid-template-columns: 1fr;
    }

    .receipt-detail-row .label {
      border-right: none;
      border-bottom: none;
      padding-bottom: 4px;
    }

    .receipt-detail-row .value {
      padding-top: 4px;
    }

    .receipt-actions-card {
      flex-direction: column;
      align-items: flex-start;
    }

    .receipt-btn-group {
      width: 100%;
    }

    .receipt-btn {
      flex: 1;
      justify-content: center;
    }

    .receipt-details {
      padding: 20px;
    }

    .receipt-card-header {
      padding: 16px 20px;
    }
  }

  /* ── Print Styles ── */
  @media print {
    /* 1. Make everything invisible */
    body * {
      visibility: hidden;
    }

    /* 2. Make the receipt card and all its children visible */
    .receipt-card,
    .receipt-card *,
    .receipt-success-banner,
    .receipt-success-banner * {
      visibility: visible;
    }

    /* 3. Position the receipt card to fill the printed page */
    .receipt-card {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      box-shadow: none !important;
      border: none !important;
      border-radius: 0 !important;
    }

    .receipt-card-header {
      background: #f5f5f5 !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    .receipt-card-header-icon {
      background: #333 !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    .receipt-status-badge {
      background: #e8f5e8 !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    .receipt-detail-row .label {
      background: #f9f9f9 !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
</style>
@endpush

@section('body_class', 'payment-receipt-page')

@section('content')
<section class="receipt-page-wrapper">
  <div class="container">

    {{-- Back Link --}}
    <a href="{{ $backUrl }}" class="receipt-back-link">
      <svg viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
      </svg>
      Back
    </a>

    {{-- ── Success Banner (only shown when redirected from payment) ── --}}
    @if($showSuccess)
    <div class="receipt-success-banner">
      <div class="receipt-success-icon">
        <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
      </div>
      <h2>Payment Successful!</h2>
      <p>Your payment has been processed successfully. Your official receipt is ready below. A copy has also been sent to your registered email address.</p>
    </div>
    @else
    <div style="margin-bottom:24px;">
      <h2 style="font-size:24px;font-weight:700;color:#002b10;margin:0 0 4px;">Payment Receipt</h2>
      <p style="margin:0;color:#6b826b;font-size:14px;">View and download your payment receipt below.</p>
    </div>
    @endif

    {{-- ── Receipt Details Card ── --}}
    <div class="receipt-card">
      <div class="receipt-card-header">
        <div class="receipt-card-header-left">
          <div class="receipt-card-header-icon">
            <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
          </div>
          <div>
            <h3>Receipt Details</h3>
            <span>Tollygunge Club — Online Payment</span>
          </div>
        </div>
        <span class="receipt-status-badge">Payment Successful</span>
      </div>

      <div class="receipt-details">
        <div class="receipt-details-grid">

          @php
            $receiptUser = $order->user;
            $memberName = trim(implode(' ', array_filter([
              $receiptUser?->first_name,
              $receiptUser?->middle_name,
              $receiptUser?->last_name,
            ])));
            if ($memberName === '') {
              $memberName = (string) ($receiptUser?->name ?? '—');
            } else {
              $memberName = ucwords(strtolower($memberName));
            }
          @endphp

          <div class="receipt-detail-row">
            <div class="label">Member Name</div>
            <div class="value">{{ $memberName }}</div>
          </div>

          <div class="receipt-detail-row">
            <div class="label">Membership No.</div>
            <div class="value">{{ $receiptUser?->member_id ?? '—' }}</div>
          </div>

          <div class="receipt-detail-row">
            <div class="label">Receipt / Order No.</div>
            <div class="value">{{ $order->receipt_id ?? $order->order_id ?? '—' }}</div>
          </div>

          <div class="receipt-detail-row">
            <div class="label">Payment ID</div>
            <div class="value">{{ $order->payment_id ?? '—' }}</div>
          </div>

          <div class="receipt-detail-row">
            <div class="label">Amount Paid</div>
            <div class="value receipt-amount-highlight">
              ₹ {{ number_format((float) $order->amount, 2) }}
            </div>
          </div>

          <div class="receipt-detail-row">
            <div class="label">Currency</div>
            <div class="value">{{ $order->currency ?? 'INR' }}</div>
          </div>

          <div class="receipt-detail-row">
            <div class="label">Payment Gateway</div>
            <div class="value">{{ ucfirst($order->payment_gateway ?? '—') }}</div>
          </div>

          <div class="receipt-detail-row">
            <div class="label">Payment Method</div>
            <div class="value">{{ ucfirst($order->method ?? '—') }}</div>
          </div>

          <div class="receipt-detail-row">
            <div class="label">Transaction Date &amp; Time</div>
            <div class="value">
              {{ $order->created_at ? $order->created_at->format('d M Y, h:i A') : '—' }}
            </div>
          </div>

          <div class="receipt-detail-row">
            <div class="label">Payment Status</div>
            <div class="value">
              <span class="receipt-status-badge">{{ ucfirst($order->payment_status ?? 'Successful') }}</span>
            </div>
          </div>

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

    {{-- ── Action Buttons Card ── --}}
    <div class="receipt-actions-card">
      <div class="receipt-actions-left">
        <strong>Download or Print your Receipt</strong>
        Your official payment receipt is available as a PDF document.
      </div>
      <div class="receipt-btn-group">
        <a href="{{ $backUrl }}" class="receipt-btn receipt-btn-outline">
          <svg viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path d="M15 19l-7-7 7-7"/>
          </svg>
          Back
        </a>
        <button type="button" id="printReceiptBtn" class="receipt-btn receipt-btn-secondary">
          <svg viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path d="M6 9V2h12v7M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2M6 14h12v8H6v-8z"/>
          </svg>
          Print Receipt
        </button>
        <a href="{{ $receiptDownloadUrl }}" target="_blank" class="receipt-btn receipt-btn-primary" id="downloadReceiptBtn">
          <svg viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
          </svg>
          Download Receipt
        </a>
      </div>
    </div>

    {{-- ── PDF Preview Card ── --}}
    <!-- <div class="receipt-pdf-card">
      <div class="receipt-pdf-header">
        <h4>Receipt Preview</h4>
        <a href="{{ $receiptDownloadUrl }}" target="_blank" class="receipt-btn receipt-btn-primary" style="padding:8px 16px;font-size:13px;">
          <svg viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
          </svg>
          Download PDF
        </a>
      </div>
      <iframe
        id="paymentReceiptFrame"
        class="receipt-pdf-frame"
        src="{{ $receiptDownloadUrl }}"
        title="Payment Receipt PDF Preview">
      </iframe>
    </div> -->

  </div>
</section>
@endsection

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

@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const printButton = document.getElementById('printReceiptBtn');

    // Print: trigger browser native print dialog on the current page
    printButton?.addEventListener('click', function() {
      window.print();
    });
  });
</script>
@endpush