<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Deposit Invoice</title>
    <style>
        /* Fixed page margins */
        @page {
            margin: 2cm 1.5cm;
        }

        /* Document body */
        body {
            font-family: DejaVu Sans, sans-serif;
            line-height: 1.5;
            color: #333;
            font-size: 12px;
            margin: 0;
            padding: 0;
        }

        /* Force margin around entire content */
        .invoice-container {
            padding: 10px;
        }

        /* Header styling */
        .header {
            text-align: center;
            margin-bottom: 30px;
            bdeposit-bottom: 1px solid #ddd;
            padding-bottom: 15px;
        }

        .logo-placeholder {
            text-align: center;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .invoice-title {
            font-size: 18px;
            font-weight: bold;
            color: #2c5282;
            margin-bottom: 5px;
        }

        /* Information sections */
        .info-section {
            width: 100%;
            margin-bottom: 20px;
        }

        /* Two column layout */
        .info-columns {
            width: 100%;
        }

        .info-column {
            width: 48%;
            display: inline-block;
            vertical-align: top;
        }

        .info-column+.info-column {
            margin-left: 3%;
        }

        /* Section headers */
        .section-header {
            font-size: 14px;
            font-weight: bold;
            color: #2c5282;
            margin-bottom: 10px;
            padding-bottom: 5px;
            bdeposit-bottom: 1px solid #ddd;
        }

        /* Detail tables */
        .detail-table {
            width: 100%;
            bdeposit-collapse: collapse;
        }

        .detail-table tr {
            bdeposit-bottom: 1px dotted #eee;
        }

        .detail-table td {
            padding: 6px 4px;
            vertical-align: top;
        }

        .detail-table .label {
            color: #666;
            width: 40%;
        }

        .detail-table .value {
            text-align: right;
            font-weight: 500;
        }

        /* Status badge */
        .status-badge {
            padding: 5px;
            bdeposit-radius: 20px;
            color: white;
            font-weight: bold;
            font-size: 11px;
            text-align: center;
        }

        .success {
            background-color: #2ec747;
        }

        .warning {
            background-color: #ffbf00;
        }

        .danger {
            background-color: #e53e3e;
        }

        /* Cost breakdown special styling */
        .subtotal-row td {
            background-color: #f5f5f5;
            padding: 8px 4px;
        }

        .total-row td {
            background-color: #e6f0f9;
            padding: 10px 4px;
            font-weight: bold;
            font-size: 13px;
        }

        .negative {
            color: #e53e3e;
        }

        /* Terms section */
        .terms {
            margin: 25px 0;
            font-size: 11px;
        }

        /* Footer section */
        .footer {
            margin-top: 30px;
            text-align: center;
            font-size: 11px;
            color: #666;
            bdeposit-top: 1px solid #ddd;
            padding-top: 15px;
        }
    </style>
</head>

<body>
    <div class="invoice-container">
        <div class="header">
            <div class="logo-placeholder">
                <img src="{{ public_path(config('application_info.logo_favicon.logo_light')) }}" alt="Company Logo"
                    class="h-20 mx-auto mb-3" />
            </div>
            <div class="invoice-title">DEPOSIT INVOICE</div>
            <div>Invoice Date: {{ date('F d, Y') }}</div>
        </div>

        <div class="info-columns">
            <div class="info-column">
                <div class="section-header">Deposit Information</div>
                <table class="detail-table">
                    <tr>
                        <td class="label">Deposit Number:</td>
                        <td class="value">{{ $deposit->track }}</td>
                    </tr>
                    <tr>
                        <td class="label">Deposit Date:</td>
                        <td class="value">{{ $deposit->created_at->format('M d, Y') }}</td>
                    </tr>
                    <tr>
                        <td class="label">Status:</td>
                        <td class="value">
                            <span class="status-badge {{ $deposit->status->color() }}">
                                {{ __($deposit->status->label()) }}
                            </span>
                        </td>
                    </tr>
                </table>
            </div>

            <div class="info-column">
                <div class="section-header">Customer Information</div>
                <table class="detail-table">
                    <tr>
                        <td class="label">Name:</td>
                        <td class="value">{{ $deposit->user->full_name }}</td>
                    </tr>
                    <tr>
                        <td class="label">Email:</td>
                        <td class="value">{{ $deposit->user->email }}</td>
                    </tr>
                    <tr>
                        <td class="label">Phone:</td>
                        <td class="value">{{ $deposit->user->phone ?? 'N/A' }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="info-section">
            <div class="section-header">Details</div>
            <table class="detail-table">
                <tr>
                    <td class="label">Amount:</td>
                    <td class="value">{{ $deposit->amount }}</td>
                </tr>
                <tr>
                    <td class="label">Base Conversion:</td>
                    <td class="value">{{ config('application_info.coins.usd_ratio.coin') }} Coins =
                        {{ config('application_info.coins.usd_ratio.usd') }} USD</td>
                </tr>
                <tr>
                    <td class="label">Get Coin:</td>
                    <td class="value">{{ \App\Services\Coin\CoinService::calculateCoinsFromUSD($deposit->amount) }}
                    </td>
                </tr>
            </table>
        </div>

        <div class="info-section">
            <div class="section-header">Cost Breakdown</div>
            <table class="detail-table">
                <tr>
                    <td class="label">Base Price:</td>
                    <td class="value">{{ amountWithSymbol(Number::format($deposit->amount)) }}</td>
                </tr>
                <tr>
                    <td class="label">Charge:</td>
                    <td class="value negative">-{{ amountWithSymbol(Number::format($deposit->charge)) }}</td>
                </tr>
                <tr class="total-row">
                    <td class="label">Total Amount:</td>
                    <td class="value">{{ amountWithSymbol(Number::format($deposit->amount + $deposit->charge)) }}
                    </td>
                </tr>
                <tr>
                    <td class="label">
                        Conversion
                    </td>
                    <td class="value">
                        <span>{{ defaultCurrency()->rate }}</span> →
                        <span>{{ currencyRate($deposit->currency) }}</span>
                    </td>
                </tr>
                <tr>
                    <td class="label">
                        Converted Amount
                    </td>
                    <td class="value">
                        {{ amountWithSymbol(Number::format(convertCurrency($deposit->amount + $deposit->charge, $deposit->currency))) }}
                    </td>
                </tr>
            </table>
        </div>

        <div class="info-section">
            <div class="section-header">Payment Information</div>
            <table class="detail-table">
                <tr>
                    <td class="label">Payment Method:</td>
                    <td class="value">{{ $deposit->payment->medium ?? 'N/A' }}</td>
                </tr>
                <tr>
                    <td class="label">Transaction ID:</td>
                    <td class="value">{{ $deposit->payment->payment_identifier ?? 'N/A' }}</td>
                </tr>
                <tr>
                    <td class="label">Payment Date:</td>
                    <td class="value">
                        {{ $deposit->payment->updated_at ? $deposit->payment->updated_at->format('M d, Y') : 'N/A' }}
                    </td>
                </tr>
            </table>
        </div>

        <div class="terms">
            <div class="section-header">Terms & Conditions</div>
            <p>All deposits are subject to our standard terms and conditions. Cancellation policy applies as per our
                website. For any inquiries regarding this deposit, please contact our customer support.</p>
        </div>

        <div class="footer">
            <p>Thank you for choosing our Quizix application.</p>
            <p>This is a computer-generated invoice and doesn't require a signature.</p>
        </div>
    </div>
</body>

</html>
