<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice {{ $invoice->invoice_number }}</title>
    <style>
        /* BASE STYLES */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; font-size: 11px; color: #1a1a1a; background: #fff; line-height: 1.4; }
        .page { width: 210mm; min-height: 297mm; padding: 15mm; margin: 0 auto; background: white; position: relative; }

        /* HEADER */
        header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
        .company-logo { max-height: 80px; max-width: 250px; margin-bottom: 10px; }
        .company-info { flex: 1; }
        .company-info h1 { font-size: 18px; font-weight: 800; margin-bottom: 4px; color: #000; text-transform: uppercase; }
        .company-info p { color: #444; margin-bottom: 2px; }
        .company-contact { margin-top: 8px; font-size: 10px; color: #666; }
        .company-contact span { margin-right: 15px; }

        .invoice-title { text-align: right; }
        .invoice-title h2 { font-size: 24px; font-weight: 900; color: #000; letter-spacing: 1px; line-height: 1; }
        .invoice-title p { font-size: 12px; color: #666; font-weight: 600; margin-top: 2px; }

        /* INFO BOXES */
        .info-container { display: flex; gap: 20px; margin-bottom: 20px; }
        .info-box { flex: 1; border: 1px solid #000; padding: 10px; border-radius: 4px; min-height: 100px; }
        .info-box h4 { font-size: 10px; text-transform: uppercase; color: #555; border-bottom: 1px solid #eee; padding-bottom: 4px; margin-bottom: 8px; }
        .info-box .label-bilingual { font-size: 9px; color: #888; font-style: italic; display: block; margin-top: -2px; }
        .info-box p { font-size: 11px; font-weight: 600; margin-bottom: 2px; }
        .info-box .sub-text { font-weight: normal; font-size: 10px; color: #555; }

        .meta-table { width: 100%; border-collapse: collapse; }
        .meta-table td { padding: 3px 0; vertical-align: top; }
        .meta-table td:first-child { color: #666; width: 45%; }
        .meta-table td:last-child { font-weight: 700; text-align: right; }

        /* TABLE */
        .items-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; border: 1px solid #000; }
        .items-table thead th { 
            background: #f0f0f0; border: 1px solid #000; padding: 8px 10px; 
            font-size: 10px; font-weight: 700; text-align: left; text-transform: uppercase;
        }
        .items-table thead th .eng { font-size: 8px; color: #666; font-weight: normal; display: block; text-transform: none; }
        .items-table tbody td { border: 1px solid #000; padding: 8px 10px; vertical-align: top; font-size: 11px; }
        .items-table .right { text-align: right; }
        .items-table .center { text-align: center; }
        .items-table tr:nth-child(even) { background: #fafafa; }

        /* TOTALS & FOOTER */
        .notes-box { border: 1px solid #000; padding: 10px; border-radius: 4px; margin-bottom: 15px; }
        .notes-box h4 { font-size: 10px; font-weight: 700; margin-bottom: 5px; }
        .notes-box p { font-size: 10px; color: #444; }

        .bottom-section { display: flex; justify-content: space-between; gap: 20px; }
        .payment-info { flex: 1; border: 1px solid #000; padding: 10px; border-radius: 4px; background: #fff; }
        .payment-info h4 { font-size: 10px; margin-bottom: 5px; font-weight: 700; }
        .payment-info p { font-size: 10px; color: #333; line-height: 1.5; }

        .total-container { width: 300px; }
        .total-highlight { 
            background: #f2f2f2; border: 2px solid #333; padding: 12px; border-radius: 5px; 
            display: flex; justify-content: space-between; align-items: center;
        }
        .total-label { font-size: 12px; font-weight: 800; }
        .total-value { font-size: 16px; font-weight: 900; }

        .summary-table { width: 100%; margin-bottom: 10px; }
        .summary-table td { padding: 4px 0; font-size: 11px; }
        .summary-table td:last-child { text-align: right; font-weight: 700; }

        /* SIGNATURE */
        .signature-section { margin-top: 40px; display: flex; justify-content: flex-end; }
        .sig-box { text-align: center; width: 180px; }
        .sig-box p { margin-bottom: 60px; font-weight: 700; }
        .sig-wrap { position: relative; }
        .sig-wrap img { max-height: 60px; max-width: 150px; }
        .sig-wrap .stamp { position: absolute; top: -10px; left: 20px; opacity: 0.7; }
        .sig-wrap .stamp img { max-height: 70px; }
        .sig-name { border-top: 1px solid #000; padding-top: 5px; font-weight: 800; font-size: 12px; }

        /* NO PRINT */
        .no-print { text-align: right; margin-bottom: 15px; padding: 10px; background: #f8f9fa; border-bottom: 1px solid #ddd; }
        .btn-print { padding: 8px 16px; background: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; }

        @media print {
            .no-print { display: none !important; }
            body { background: none; }
            .page { width: 100%; margin: 0; padding: 0mm; border: none; }
        }
    </style>
</head>
<body>

    <div class="no-print">
        <button onclick="window.print()" class="btn-print">Cetak Invoice</button>
    </div>

    <div class="page">
        <header>
            <div class="company-info">
                @if(!empty($settings['business_logo_path']))
                    <img src="{{ asset('storage/'.$settings['business_logo_path']) }}" class="company-logo" alt="Logo">
                @endif
                <h1>{{ $settings['business_name'] }}</h1>
                <p>{{ $settings['business_address'] }}</p>
                <div class="company-contact">
                    @if($settings['business_phone'])
                        <span><strong style="color:#000">T:</strong> {{ $settings['business_phone'] }}</span>
                    @endif
                    @if($settings['business_email'])
                        <span><strong style="color:#000">E:</strong> {{ $settings['business_email'] }}</span>
                    @endif
                    @if($settings['business_website'])
                        <span><strong style="color:#000">W:</strong> {{ $settings['business_website'] }}</span>
                    @endif
                </div>
            </div>
            <div class="invoice-title">
                <h2>INVOICE / RECEIPT</h2>
                <p>Tagihan / Kwitansi</p>
            </div>
        </header>

        <div class="info-container">
            <div class="info-box">
                <h4>Ditunjukan / Ditagihkan <span class="label-bilingual">Account To / Charge To / Delivered To</span></h4>
                <p>{{ $invoice->customer->name }}</p>
                <div class="sub-text">
                    {{ $invoice->customer->address }}<br>
                    @if($invoice->customer->phone)
                        T: {{ $invoice->customer->phone }}
                    @endif
                </div>
            </div>
            <div class="info-box" style="flex: 0 0 280px;">
                <table class="meta-table">
                    <tr>
                        <td>Nomor Invoice<br><span class="label-bilingual">Invoice Number</span></td>
                        <td>{{ $invoice->invoice_number }}</td>
                    </tr>
                    <tr>
                        <td>Tanggal<br><span class="label-bilingual">Date</span></td>
                        <td>{{ $invoice->invoice_date->format('d/m/Y') }}</td>
                    </tr>
                    @if($invoice->due_date)
                    <tr>
                        <td>Jatuh Tempo<br><span class="label-bilingual">Due Date</span></td>
                        <td>{{ $invoice->due_date->format('d/m/Y') }}</td>
                    </tr>
                    @endif
                </table>
            </div>
        </div>

        <table class="items-table">
            <thead>
                <tr>
                    <th style="width: 150px;">Jenis Jasa<span class="eng">Service Type</span></th>
                    <th>Deskripsi Jasa / Produk<span class="eng">Product / Service Description</span></th>
                    <th class="center" style="width: 80px;">Qty<span class="eng">Jmlh / Lbr</span></th>
                    <th class="right" style="width: 120px;">Unit Price<span class="eng">Harga</span></th>
                    <th class="right" style="width: 130px;">Total Price<span class="eng">Jumlah Harga</span></th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoice->items as $item)
                <tr>
                    <td>{{ $item->service_type ?? '-' }}</td>
                    <td>{{ $item->description }}</td>
                    <td class="center">{{ number_format($item->quantity, 1, ',', '.') }} {{ $item->unit }}</td>
                    <td class="right">Rp {{ number_format($item->unit_price, 0, ',', '.') }}</td>
                    <td class="right">Rp {{ number_format($item->total_price, 0, ',', '.') }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <div class="notes-box">
            <h4>Note / Catatan:</h4>
            <p>{{ $invoice->notes ?: '-' }}</p>
        </div>

        <div class="bottom-section">
            <div class="payment-info">
                <h4>Payment / Pembayaran:</h4>
                <p>
                    Silahkan lakukan pembayaran melalui transfer ke rekening berikut:<br>
                    <strong>[Nama Bank / Bank Name]</strong><br>
                    No. Rekening: <strong>XXXX-XXXX-XXXX</strong><br>
                    Atas Nama: <strong>{{ $settings['business_name'] }}</strong>
                </p>
            </div>
            <div class="total-container">
                <table class="summary-table">
                    <tr>
                        <td>Subtotal</td>
                        <td>Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</td>
                    </tr>
                    @if($invoice->tax > 0)
                    <tr>
                        <td>Pajak (Tax)</td>
                        <td>Rp {{ number_format($invoice->tax, 0, ',', '.') }}</td>
                    </tr>
                    @endif
                    @if($invoice->discount > 0)
                    <tr>
                        <td>Potongan (Discount)</td>
                        <td>Rp -{{ number_format($invoice->discount, 0, ',', '.') }}</td>
                    </tr>
                    @endif
                </table>
                <div class="total-highlight">
                    <div class="total-label">JUMLAH Rp.</div>
                    <div class="total-value">{{ number_format($invoice->total, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>

        <div class="signature-section">
            <div class="sig-box">
                <p>Finance</p>
                <div class="sig-wrap">
                    @if($settings['signature_path'])
                        <img src="{{ asset('storage/'.$settings['signature_path']) }}" alt="TTD">
                    @endif
                    @if($settings['stamp_path'])
                        <div class="stamp">
                            <img src="{{ asset('storage/'.$settings['stamp_path']) }}" alt="Stempel">
                        </div>
                    @endif
                </div>
                <div class="sig-name">{{ $settings['business_name'] }}</div>
            </div>
        </div>
    </div>

</body>
</html>
