@extends('layouts.app')

@section('title')
@lang('Payment Receipt')
@endsection

@section('content')
@component('components.breadcrumb')
@slot('li_1')
Application
@endslot
@slot('title')
Payment Receipt
@endslot
@endcomponent

<style>
    @media print {

        @page {
            margin: 0 !important;
            margin-bottom: 10mm !important;
            size: A4;
        }

        html,
        body {
            margin: 0 !important;
            padding: 0 !important;
        }

        body {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        .formdiv, .main-content, .page-content, .container-fluid .layout-wrapper {
            padding: 0 !important;
        }
    }

    .a4-page {
        width: 794px;
        min-height: 600px;
        margin: 0 auto;
        padding: 30px;
        background: white;
    }
</style>

<div class="row formdiv">
    <div class="col-lg-12">
        <div class="d-print-none">
            <div class="float-end">
                <a class="btn btn-success waves-effect waves-light me-1" onclick="printSection()">
                    <i class="fa fa-print"></i>
                </a>
            </div>
        </div>
        <div class="a4-page">
            <div class="row mb-4">
                <div class="col-sm-6 fw-bolder pt-2">
                    <h5 class="mb-0">EVERISE VALUE SDN BHD</h5>
                    <small>(Reg No. 200301012980)</small>
                </div>
                <div class="col-sm-6">
                    <img src="{{ URL::asset('build/images/logo_doc.png') }}" alt="logo" class="auth-logo-dark float-end" height="55" />
                </div>
            </div>

            <div class="bg-dark text-white text-center py-1 mb-3">PAYMENT RECEIPT</div>

            <div class="row mb-2">
                <div class="col-4 fw-bold">Receipt No.</div>
                <div class="col-8">: {{ $trx->trx_ref }}</div>
            </div>
            <div class="row mb-2">
                <div class="col-4 fw-bold">Date</div>
                <div class="col-8">: {{ optional($trx->trx_transaction_time)->format('d/m/Y H:i:s') ?? optional($trx->created_at)->format('d/m/Y H:i:s') ?? '-' }}</div>
            </div>
            <div class="row mb-2">
                <div class="col-4 fw-bold">Application No.</div>
                <div class="col-8">: {{ $trx->serial_no }}</div>
            </div>
            <div class="row mb-2">
                <div class="col-4 fw-bold">Paid By</div>
                <div class="col-8">: {{ $trx->user_name }}</div>
            </div>
            <div class="row mb-2">
                <div class="col-4 fw-bold">Description</div>
                <div class="col-8">: {{ $trx->trx_description }}</div>
            </div>
            <div class="row mb-2">
                <div class="col-4 fw-bold">Payment Method</div>
                <div class="col-8">: {{ strtoupper($trx->payment_method) }}</div>
            </div>
            @if ($trx->bankcode)
            <div class="row mb-2">
                <div class="col-4 fw-bold">Issuing Bank</div>
                <div class="col-8">: {{ $trx->bankcode }}</div>
            </div>
            @endif
            <div class="row mb-2">
                <div class="col-4 fw-bold">Status</div>
                <div class="col-8">:
                    @if (optional($leadPayment)->status === 'paid')
                    <span class="badge bg-success">PAID</span>
                    @else
                    <span class="badge bg-secondary">{{ $trx->transaction_status }}</span>
                    @endif
                </div>
            </div>
            <hr>
            <div class="row mb-2">
                <div class="col-4 fw-bold fs-5">Amount Paid</div>
                <div class="col-8 fs-5 fw-bold">: RM {{ number_format($trx->trx_amount, 2) }}</div>
            </div>
        </div>
    </div>
</div>
<!-- end row -->
@endsection

@section('script')
<script>
    function printSection() {
        window.print();
    }
</script>
@endsection