@php
$configData = Helper::appClasses();
$inv = $payment->invoice;
$lease = $inv->lease;
$property = $lease->unit->property;
$tenant = $lease->tenant;
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Official Receipt - ' . $payment->transaction_reference)

@section('page-style')
<style>
@media print {
  body * {
    visibility: hidden;
  }
  #printableReceipt, #printableReceipt * {
    visibility: visible;
  }
  #printableReceipt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
  }
  .no-print {
    display: none !important;
  }
}
</style>
@endsection

@section('content')
<div class="container-fluid">
  <!-- Actions Bar -->
  <div class="d-flex justify-content-between align-items-center mb-4 no-print">
    <div>
      <h4 class="mb-0">Payment Receipt</h4>
      <p class="text-muted mb-0">Official receipt for transaction <code>{{ $payment->transaction_reference }}</code></p>
    </div>
    <div class="d-flex gap-2">
      <a href="{{ route('invoices.show', $inv->id) }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i> Back to Invoice
      </a>
      <button type="button" class="btn btn-primary" onclick="window.print()">
        <i class="bi bi-printer me-1"></i> Print Receipt
      </button>
    </div>
  </div>

  <!-- Receipt Container -->
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <div class="card p-5" id="printableReceipt">
        <!-- Top branding -->
        <div class="d-flex justify-content-between align-items-start border-bottom pb-4 mb-4">
          <div>
            <div class="d-flex align-items-center mb-2">
              <img src="{{ asset('assets/img/logo.png') }}" alt="South Front Technologies" style="max-height: 48px; width: auto; object-fit: contain;" class="me-3" />
              <div>
                <h4 class="mb-0 fw-bold text-primary">SOUTH FRONT TECHNOLOGIES</h4>
                <div class="text-muted small">Smarter Property Management &bull; Nairobi, Kenya</div>
              </div>
            </div>
          </div>
          <div class="text-end">
            <span class="badge bg-label-success fs-6 px-3 py-2 mb-2">
              <i class="bi bi-check-lg me-1"></i> PAYMENT CONFIRMED
            </span>
            <div class="text-muted small">Receipt No: <strong>RCP-{{ $payment->id }}</strong></div>
            <div class="text-muted small">Issued: <strong>{{ $payment->paid_at->format('d M Y, h:i A') }}</strong></div>
          </div>
        </div>

        <!-- Receipt Metadata -->
        <div class="row g-4 mb-4 pb-3 border-bottom">
          <div class="col-6">
            <span class="text-muted small d-block mb-1">RECEIVED FROM (TENANT):</span>
            <h5 class="mb-1 text-heading fw-bold">{{ $tenant->name }}</h5>
            <div class="text-muted small">Email: {{ $tenant->email }}</div>
            <div class="text-muted small">Phone: {{ $tenant->phone_number ?? 'N/A' }}</div>
          </div>
          <div class="col-6 text-end">
            <span class="text-muted small d-block mb-1">PROPERTY & UNIT:</span>
            <h5 class="mb-1 text-heading fw-bold">{{ $property->name }}</h5>
            <div class="text-muted small">Unit: <strong>{{ $lease->unit->unit_number }}</strong></div>
            <div class="text-muted small">Owner: {{ $property->owner->name ?? 'Landlord' }}</div>
          </div>
        </div>

        <!-- Payment Particulars -->
        <div class="table-responsive mb-4">
          <table class="table table-bordered">
            <thead class="table-light">
              <tr>
                <th>Payment Description</th>
                <th>Mode / Channel</th>
                <th>Transaction Code</th>
                <th class="text-end">Amount Cleared</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <strong>Payment for Invoice #{{ $inv->invoice_number }}</strong>
                  <div class="text-muted small">Billing period: {{ $inv->billing_period_start->format('d M') }} - {{ $inv->billing_period_end->format('d M Y') }}</div>
                </td>
                <td>
                  <span class="badge bg-label-info">{{ $payment->payment_method }}</span>
                </td>
                <td>
                  <code class="text-heading fw-bold fs-6">{{ $payment->transaction_reference }}</code>
                </td>
                <td class="text-end fw-bold fs-5 text-success">
                  Ksh {{ number_format($payment->amount, 2) }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- Account Balance Status Box -->
        <div class="p-3 bg-light rounded mb-4">
          <div class="row text-center">
            <div class="col-4 border-end">
              <span class="text-muted small d-block">Invoice Total</span>
              <strong>Ksh {{ number_format($inv->amount, 2) }}</strong>
            </div>
            <div class="col-4 border-end">
              <span class="text-muted small d-block">Total Paid</span>
              <strong class="text-success">Ksh {{ number_format($inv->paid_amount, 2) }}</strong>
            </div>
            <div class="col-4">
              <span class="text-muted small d-block">Residual Balance</span>
              <strong class="{{ $inv->balance_due > 0 ? 'text-danger' : 'text-success' }}">
                Ksh {{ number_format($inv->balance_due, 2) }}
              </strong>
            </div>
          </div>
        </div>

        <!-- Footer / Signature Sign-off -->
        <div class="row pt-4 mt-2 border-top align-items-end">
          <div class="col-7">
            <p class="text-muted small mb-0">
              Thank you for your timely payment. This receipt is an electronically verified confirmation generated by the Property Management Platform.
            </p>
          </div>
          <div class="col-5 text-end">
            <div class="border-bottom d-inline-block pb-1 mb-1" style="width: 180px;">
              <span class="text-muted small">Authorized Officer</span>
            </div>
            <div class="small fw-bold text-heading">South Front Technologies Accounts Bureau</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection