@extends('layouts.app')

@section('title', 'Loan Payment Receipt')
@section('page-title', 'Loan Payment Receipt')

@section('content')
@php
    $tenant = auth()->user()->tenant;
    $currency = $tenant->settings['currency'] ?? 'NGN';
    $money = fn ($amount) => $currency.' '.number_format((float) $amount, 2);
    $paymentDate = app_datetime($payment->paid_at ?: now());
    $componentTotal = (float) $payment->principal_component + (float) $payment->interest_component + (float) $payment->penalty_component + (float) $payment->fee_component;
@endphp

<div class="receipt-actions no-print">
    <a href="{{ route('tenant.loans.show', $payment->loan) }}#repayment-schedule" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i> Loan schedule
    </a>
    <a href="{{ route('tenant.repayments.index') }}" class="btn btn-outline-primary">
        <i class="bi bi-cash-stack me-1"></i> Repayments
    </a>
    <button type="button" onclick="printStandardReceipt()" class="btn btn-primary">
        <i class="bi bi-printer me-1"></i> Print full receipt
    </button>
    <button type="button" onclick="printThermalReceipt()" class="btn btn-dark">
        <i class="bi bi-receipt-cutoff me-1"></i> Print thermal
    </button>
</div>

<section class="loan-receipt mx-auto">
    <div class="receipt-topbar"></div>

    <header class="receipt-header">
        <div class="receipt-brand">
            @if($tenant?->displayLogoUrl())
                <img src="{{ $tenant->displayLogoUrl() }}" alt="{{ $tenant->name }}">
            @else
                <div class="receipt-logo-fallback">{{ str($tenant?->name ?? 'MFI')->substr(0, 2)->upper() }}</div>
            @endif
            <div>
                <h2>{{ $tenant?->name }}</h2>
                <p>{{ $tenant?->address ?: 'Microfinance loan repayment receipt' }}</p>
                @if($tenant?->phone)
                    <small>{{ $tenant->phone }}</small>
                @endif
            </div>
        </div>

        <div class="receipt-ref">
            <span>Receipt No.</span>
            <strong>{{ $payment->reference }}</strong>
            <small>{{ $paymentDate }}</small>
        </div>
    </header>

    <div class="receipt-status-row">
        <span><i class="bi bi-check-circle-fill"></i> Payment posted</span>
        <span>{{ ucfirst($payment->method ?? 'cash') }}</span>
    </div>

    <section class="receipt-amount-panel">
        <div>
            <span>Amount received</span>
            <strong>{{ $money($payment->amount) }}</strong>
        </div>
        <div>
            <span>Balance after payment</span>
            <strong>{{ $money($payment->balance_after) }}</strong>
        </div>
    </section>

    <div class="receipt-grid">
        <section class="receipt-section">
            <h3>Member Details</h3>
            <div class="receipt-line"><span>Name</span><strong>{{ $payment->customer?->fullName() }}</strong></div>
            <div class="receipt-line"><span>Account no.</span><strong>{{ $payment->customer?->account_number ?? '-' }}</strong></div>
            <div class="receipt-line"><span>Phone</span><strong>{{ $payment->customer?->phone ?? '-' }}</strong></div>
        </section>

        <section class="receipt-section">
            <h3>Loan Details</h3>
            <div class="receipt-line"><span>Loan no.</span><strong>{{ $payment->loan?->loan_number }}</strong></div>
            <div class="receipt-line"><span>Schedule</span><strong>{{ $payment->schedule?->installment_no ? 'Installment '.$payment->schedule->installment_no : '-' }}</strong></div>
            <div class="receipt-line"><span>Due date</span><strong>{{ app_date($payment->schedule?->due_date) ?? '-' }}</strong></div>
        </section>
    </div>

    <section class="receipt-section receipt-components">
        <div class="receipt-section-head">
            <h3>Payment Breakdown</h3>
            <span>Total components: {{ $money($componentTotal) }}</span>
        </div>
        <div class="component-table">
            <div><span>Principal</span><strong>{{ $money($payment->principal_component) }}</strong></div>
            <div><span>Interest</span><strong>{{ $money($payment->interest_component) }}</strong></div>
            @if((float) $payment->penalty_component > 0)
                <div><span>Penalty</span><strong>{{ $money($payment->penalty_component) }}</strong></div>
            @endif
            @if((float) $payment->fee_component > 0)
                <div><span>Fee</span><strong>{{ $money($payment->fee_component) }}</strong></div>
            @endif
        </div>
    </section>

    <section class="receipt-section">
        <h3>Posting Details</h3>
        <div class="receipt-line"><span>Recorded by</span><strong>{{ $payment->receiver?->name ?? 'System / member' }}</strong></div>
        <div class="receipt-line"><span>Approved by</span><strong>Auto-posted</strong></div>
        @if(filled($payment->notes))
            <div class="receipt-note">{{ $payment->notes }}</div>
        @endif
    </section>

    <footer class="receipt-footer">
        <div>
            <strong>Thank you.</strong>
            <span>This receipt confirms that the repayment above has been posted to the member loan account.</span>
        </div>
        <div class="receipt-signature">
            <span></span>
            Authorized signature
        </div>
    </footer>
</section>

<section class="thermal-loan-receipt">
    <div class="thermal-center">
        <strong>{{ $tenant?->name }}</strong>
        @if($tenant?->address)
            <span>{{ $tenant->address }}</span>
        @endif
        @if($tenant?->phone)
            <span>{{ $tenant->phone }}</span>
        @endif
    </div>

    <div class="thermal-rule"></div>
    <div class="thermal-title">LOAN PAYMENT RECEIPT</div>
    <div class="thermal-rule"></div>

    <div class="thermal-row"><span>Receipt:</span><strong>{{ $payment->reference }}</strong></div>
    <div class="thermal-row"><span>Date:</span><strong>{{ $paymentDate }}</strong></div>
    <div class="thermal-row"><span>Method:</span><strong>{{ ucfirst($payment->method ?? 'cash') }}</strong></div>

    <div class="thermal-rule"></div>
    <div class="thermal-row"><span>Member:</span><strong>{{ $payment->customer?->fullName() }}</strong></div>
    <div class="thermal-row"><span>Acct:</span><strong>{{ $payment->customer?->account_number ?? '-' }}</strong></div>
    <div class="thermal-row"><span>Loan:</span><strong>{{ $payment->loan?->loan_number }}</strong></div>
    @if($payment->schedule?->installment_no)
        <div class="thermal-row"><span>Instalment:</span><strong>{{ $payment->schedule->installment_no }}</strong></div>
    @endif

    <div class="thermal-rule"></div>
    <div class="thermal-row thermal-amount"><span>Amount Paid:</span><strong>{{ $money($payment->amount) }}</strong></div>
    <div class="thermal-row"><span>Principal:</span><strong>{{ $money($payment->principal_component) }}</strong></div>
    <div class="thermal-row"><span>Interest:</span><strong>{{ $money($payment->interest_component) }}</strong></div>
    @if((float) $payment->penalty_component > 0)
        <div class="thermal-row"><span>Penalty:</span><strong>{{ $money($payment->penalty_component) }}</strong></div>
    @endif
    @if((float) $payment->fee_component > 0)
        <div class="thermal-row"><span>Fee:</span><strong>{{ $money($payment->fee_component) }}</strong></div>
    @endif
    <div class="thermal-row thermal-amount"><span>Balance:</span><strong>{{ $money($payment->balance_after) }}</strong></div>

    <div class="thermal-rule"></div>
    <div class="thermal-row"><span>Recorded by:</span><strong>{{ $payment->receiver?->name ?? 'System' }}</strong></div>
    <div class="thermal-center thermal-footer-text">
        <span>Payment posted successfully.</span>
        <span>Thank you.</span>
    </div>
</section>

<style>
.receipt-actions {
    display: flex;
    justify-content: center;
    gap: .65rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.thermal-loan-receipt {
    display: none;
}
.loan-receipt {
    max-width: 880px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, .08);
}
.receipt-topbar {
    height: 10px;
    background: linear-gradient(90deg, #0f766e, #1d4ed8, #f59e0b);
}
.receipt-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem;
    border-bottom: 1px solid #e2e8f0;
}
.receipt-brand {
    display: flex;
    gap: .9rem;
    min-width: 0;
}
.receipt-brand img,
.receipt-logo-fallback {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
}
.receipt-logo-fallback {
    display: grid;
    place-items: center;
    color: #fff;
    background: #0f766e;
    font-weight: 800;
}
.receipt-brand h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.35rem;
}
.receipt-brand p,
.receipt-brand small {
    display: block;
    margin: .2rem 0 0;
    color: #64748b;
}
.receipt-ref {
    min-width: 210px;
    padding: .8rem;
    border-radius: 10px;
    text-align: right;
    background: #f8fafc;
}
.receipt-ref span,
.receipt-ref small {
    display: block;
    color: #64748b;
    font-size: .8rem;
}
.receipt-ref strong {
    display: block;
    margin: .15rem 0;
    color: #0f172a;
    font-size: 1rem;
}
.receipt-status-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.35rem;
    color: #166534;
    background: #f0fdf4;
    font-weight: 700;
}
.receipt-status-row span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.receipt-amount-panel {
    display: grid;
    grid-template-columns: 1.25fr .9fr;
    gap: .8rem;
    padding: 1.35rem;
}
.receipt-amount-panel > div {
    padding: 1rem;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #0f172a, #0f766e);
}
.receipt-amount-panel > div:last-child {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
}
.receipt-amount-panel span {
    display: block;
    color: rgba(255, 255, 255, .76);
    font-size: .82rem;
}
.receipt-amount-panel strong {
    display: block;
    margin-top: .25rem;
    font-size: 1.55rem;
}
.receipt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0 1.35rem 1.35rem;
}
.receipt-section {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}
.receipt-section + .receipt-section {
    margin: 0 1.35rem 1.35rem;
}
.receipt-section h3,
.receipt-section-head h3 {
    margin: 0 0 .75rem;
    color: #334155;
    font-size: .84rem;
    font-weight: 800;
    text-transform: uppercase;
}
.receipt-section-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.receipt-section-head span {
    color: #64748b;
    font-size: .82rem;
}
.receipt-line {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    padding: .5rem 0;
    border-bottom: 1px dashed #e2e8f0;
}
.receipt-line:last-child {
    border-bottom: 0;
}
.receipt-line span {
    color: #64748b;
}
.receipt-line strong {
    color: #0f172a;
    text-align: right;
    overflow-wrap: anywhere;
}
.receipt-components {
    margin: 0 1.35rem 1.35rem;
}
.component-table {
    display: grid;
    gap: .55rem;
}
.component-table div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem;
    border-radius: 8px;
    background: #f8fafc;
}
.component-table span {
    color: #64748b;
}
.component-table strong {
    color: #0f172a;
}
.receipt-note {
    margin-top: .75rem;
    padding: .75rem;
    border-radius: 8px;
    color: #475569;
    background: #f8fafc;
}
.receipt-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.35rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.receipt-footer strong,
.receipt-footer span {
    display: block;
}
.receipt-footer span {
    color: #64748b;
    font-size: .86rem;
}
.receipt-signature {
    min-width: 180px;
    color: #64748b;
    text-align: center;
    font-size: .82rem;
}
.receipt-signature span {
    display: block;
    height: 34px;
    border-bottom: 1px solid #94a3b8;
    margin-bottom: .35rem;
}
@media (max-width: 767.98px) {
    .receipt-header,
    .receipt-footer,
    .receipt-status-row {
        display: grid;
    }
    .receipt-ref {
        text-align: left;
    }
    .receipt-amount-panel,
    .receipt-grid {
        grid-template-columns: 1fr;
    }
}
@media print {
    .no-print,
    .sidebar,
    .navbar,
    nav {
        display: none !important;
    }
    body {
        background: #fff !important;
    }
    .loan-receipt {
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }
    body.thermal-printing .loan-receipt {
        display: none !important;
    }
    body.thermal-printing .thermal-loan-receipt {
        display: block !important;
        width: 76mm;
        max-width: 76mm;
        margin: 0 auto;
        padding: 0;
        color: #000;
        background: #fff;
        font-family: "Courier New", monospace;
        font-size: 11px;
        line-height: 1.25;
        box-shadow: none;
    }
    body.thermal-printing .main-content,
    body.thermal-printing .content,
    body.thermal-printing .container,
    body.thermal-printing .container-fluid {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }
}
.thermal-center {
    display: grid;
    gap: 2px;
    text-align: center;
}
.thermal-center strong {
    font-size: 13px;
    text-transform: uppercase;
}
.thermal-center span {
    display: block;
}
.thermal-title {
    text-align: center;
    font-weight: 800;
}
.thermal-rule {
    border-top: 1px dashed #000;
    margin: 6px 0;
}
.thermal-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
}
.thermal-row span {
    flex: 0 0 auto;
}
.thermal-row strong {
    text-align: right;
    overflow-wrap: anywhere;
}
.thermal-amount {
    font-size: 12px;
    font-weight: 800;
}
.thermal-footer-text {
    margin-top: 8px;
}
</style>

<script>
function printStandardReceipt() {
    document.body.classList.remove('thermal-printing');
    window.print();
}

function printThermalReceipt() {
    document.body.classList.add('thermal-printing');
    window.print();
    setTimeout(() => document.body.classList.remove('thermal-printing'), 1500);
}

window.addEventListener('afterprint', () => {
    document.body.classList.remove('thermal-printing');
});
</script>
@endsection
