<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Receipt - {{ $receipt->receipt_number }}</title>
    <style>
        @page { size: A4; margin: 15px; }

        html, body {
            font-family: 'DejaVu Sans', sans-serif;
            font-size: 9pt;
            margin: 0;
            padding: 0;
            color: #333;
        }

        body { padding: 15px; box-sizing: border-box; }

        /* Title */
        .document-title {
            text-align: center;
            font-size: 15pt;
            font-weight: bold;
            color: #6f42c1;
            margin-bottom: 15px;
            text-transform: uppercase;
        }

        /* Header layout */
        .header-container {
            border-bottom: 1px solid #e2e8f0;
            padding-bottom: 15px;
            margin-bottom: 15px;
        }

        .info-row {
            width: 100%;
            border-collapse: collapse;
        }

        .info-row td {
            padding: 8px;
            vertical-align: top;
        }

        .info-left, .info-right {
            width: 50%;
            vertical-align: top;
        }

        .info-left { text-align: left; padding-right: 20px; }
        .info-right { text-align: left; }

        .logo-full {
            text-align: left;
            margin-bottom: 8px;
        }

        .logo-full img {
            max-width: 100px;
            height: auto;
        }

        .section-title {
            font-size: 10pt;
            font-weight: bold;
            color: #6f42c1;
            text-transform: uppercase;
            margin-bottom: 6px;
            border-bottom: 1px solid #6f42c1;
            padding-bottom: 3px;
            display: block;
        }

        .label {
            font-size: 9pt;
            color: #6f42c1;
            font-weight: normal;
            margin-right: 3px;
            display: inline-block;
            min-width: 90px;
        }

        .value {
            font-size: 9pt;
            color: #000;
        }

        /* Document info */
        .doc-info {
            display: flex;
            justify-content: space-between;
            font-size: 9pt;
            padding: 10px;
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            margin-bottom: 15px;
        }

        /* Payment table */
        .items-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 9pt;
            margin-bottom: 15px;
        }

        .items-table th {
            background-color: #6f42c1;
            color: #fff;
            padding: 8px;
            text-align: left;
        }

        .items-table td {
            border: 1px solid #e2e8f0;
            padding: 8px;
            text-align: left;
        }

        .items-table td:nth-child(3),
        .items-table th:nth-child(3) {
            text-align: right;
        }

        .items-table tr:nth-child(even) {
            background-color: #f8fafc;
        }

        /* Totals */
        .totals-panel table {
            width: 100%;
            font-size: 9pt;
            margin-top: 10px;
        }

        .totals-panel td {
            padding: 4px 0;
            vertical-align: top;
        }

        .signature-block {
            font-size: 9pt;
            margin-top: 10px;
        }

        .total-amount {
            font-weight: bold;
            text-align: right;
            font-size: 10pt;
        }

        /* Banking details */
        .banking-details {
            width: 49%;
            padding: 10px;
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            font-size: 9pt;
            margin-top: 20px;
        }

        /* Footer */
        .bottom-footer {
            width: 100%;
            font-size: 9pt;
            position: fixed;
            bottom: 15px;
            left: 15px;
            right: 15px;
        }

        .bottom-footer table {
            width: 100%;
            border-collapse: collapse;
        }

        .bottom-footer td {
            width: 50%;
            padding-right: 20px;
        }

        .text-right { text-align: right; }

        @media print {
            .back-button { display: none; }
        }
    </style>
</head>
<body>
    <!-- Document title -->
    <div class="document-title">Receipt</div>

    <!-- Header -->
    <div class="header-container">
        <table class="info-row">
            <tr>
                <!-- Company Info -->
                <td class="info-left">
                    <span class="section-title">Company Information</span>
                    <div class="logo-full">
                        @if($company && $company->logo_path && file_exists(public_path($company->logo_path)))
                            @php
                                $logo = base64_encode(file_get_contents(public_path($company->logo_path)));
                                $ext = pathinfo(public_path($company->logo_path), PATHINFO_EXTENSION);
                            @endphp
                            <img src="data:image/{{ $ext }};base64,{{ $logo }}" alt="Company Logo">
                        @else
                            <span>No Logo</span>
                        @endif
                    </div>
                    <div><span class="label">Name:</span> <span class="value">{{ $company->company_name ?? 'N/A' }}</span></div>
                    <div><span class="label">Address:</span> <span class="value">{{ $company->address ?? 'N/A' }}</span></div>
                    <div><span class="label">Tel No:</span> <span class="value">{{ $company->phone ?? 'N/A' }}</span></div>
                    <div><span class="label">Email:</span> <span class="value">{{ $company->email ?? 'N/A' }}</span></div>
                    <div><span class="label">Website:</span> <span class="value">{{ $company->website ?? 'N/A' }}</span></div>
                    <div><span class="label">VAT No:</span> <span class="value">{{ $company->vat_no ?? 'N/A' }}</span></div>
                    <div><span class="label">TIN No:</span> <span class="value">{{ $company->tax_id ?? 'N/A' }}</span></div>
                    <div><span class="label">Currency:</span> <span class="value">{{ $receipt->currency->code ?? 'N/A' }}</span></div>
                </td>

                <!-- Customer Info -->
                <td class="info-right">
                    <span class="section-title">Customer Information</span>
                    <div><span class="label">Customer Name:</span> <span class="value">{{ $receipt->customer->customer_account ?? '—' }}</span></div>
                    <div><span class="label">Address:</span> <span class="value">{{ $receipt->customer->address ?? '—' }}</span></div>
                    <div><span class="label">Email:</span> <span class="value">{{ $receipt->customer->email ?? '—' }}</span></div>
                    <div><span class="label">Phone:</span> <span class="value">{{ $receipt->customer->contact_1 ?? '—' }}</span></div>
                    <div><span class="label">Contact Person:</span> <span class="value">{{ $receipt->contact_person ?? '—' }}</span></div>
                    <div><span class="label">City:</span> <span class="value">{{ $receipt->customer->city ?? '—' }}</span></div>
                    <div><span class="label">Province:</span> <span class="value">{{ $receipt->customer->province ?? '—' }}</span></div>
                    <div><span class="label">VAT No:</span> <span class="value">{{ $receipt->customer->vat ?? '—' }}</span></div>
                    <div><span class="label">TIN No:</span> <span class="value">{{ $receipt->customer->tin ?? '—' }}</span></div>
                </td>
            </tr>
        </table>
    </div>

    <!-- Document Info -->
    <div class="doc-info">
        <div>
            <div>Receipt #: <strong>{{ $receipt->receipt_number }}</strong></div>
            <div>Date: <strong>{{ $receipt->formatted_date }}</strong></div>
        </div>
        <div>
            <div>Payment Method: <strong>{{ $receipt->paymentType->description ?? 'N/A' }}</strong></div>
            <div>Invoice #: <strong>{{ $receipt->invoice->document_number ?? '—' }}</strong></div>
        </div>
    </div>

    <!-- Payment Table -->
    <table class="items-table">
        <thead>
            <tr>
                <th>Description</th>
                <th>Invoice #</th>
                <th>Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Payment received</td>
                <td>{{ $receipt->invoice->document_number ?? '—' }}</td>
                <td>
                    {{ optional($receipt->currency)->symbol ?? '$' }}
                    {{ number_format($receipt->total_amount, 2) }}
                </td>
            </tr>
        </tbody>
    </table>

    <!-- Totals -->
    <div class="totals-panel">
        <table>
            <tr>
                <td style="width:70%;">
                    <div class="signature-block"><strong>Received by: ______________________________</strong></div>
                    <div class="signature-block"><strong>Date: ______________________________</strong></div>
                    <div class="signature-block"><strong>Signed: ______________________________</strong></div>
                </td>
                <td style="width:30%;" class="total-amount">
                    Total Amount:
                    {{ optional($receipt->currency)->symbol ?? '$' }}
                    {{ number_format($receipt->total_amount, 2) }}
                </td>
            </tr>
        </table>
    </div>

    <!-- Banking Details -->
    <div class="banking-details">
        <div class="section-title">Banking Details</div>
        @php $bankDetails = $company->bank_details ?? []; @endphp
        @forelse($bankDetails as $bank)
            <div><span class="label">Bank Name:</span> {{ $bank['bank_name'] ?? '' }}</div>
            <div><span class="label">Account Name:</span> {{ $bank['account_name'] ?? '' }}</div>
            <div><span class="label">Account Number:</span> {{ $bank['account_number'] ?? '' }}</div>
            <div><span class="label">Branch:</span> {{ $bank['branch'] ?? '' }}</div>
            <br>
        @empty
            <div>No banking details available</div>
        @endforelse
    </div>

    <!-- Footer -->
    <div class="bottom-footer">
        <table>
            <tr>
                <td>&copy; {{ date('Y') }} Melsoft Pvt Ltd. All rights reserved.</td>
                <td class="text-right">Printed: {{ now()->setTimezone('Africa/Harare')->format('d M Y H:i') }}</td>
            </tr>
        </table>
    </div>
</body>
</html>
