<div class="invoice-header">
    <div class="company-section">
        <div class="company-logo">
            <img src="{{logo_perusahaan}}" alt="{{perusahaan}}" style="max-height: 80px;">
        </div>
        <div class="company-info">
            <h2>{{perusahaan}}</h2>
            <p class="motto">{{moto_perusahaan}}</p>
            <div class="contact-info">
                <p><i class="fas fa-map-marker-alt"></i> {{alamat_perusahaan}}</p>
                <p><i class="fas fa-phone"></i> {{telepon_perusahaan}}</p>
                <p><i class="fas fa-envelope"></i> {{email_perusahaan}}</p>
                <p><i class="fas fa-globe"></i> {{web_perusahaan}}</p>
            </div>
        </div>
    </div>
    <div class="invoice-info">
        <h1 class="invoice-title">INVOICE</h1>
        <div class="invoice-details">
            <table>
                <tr><td><strong>No. Invoice:</strong></td><td>{{nomor_invoice}}</td></tr>
                <tr><td><strong>Tanggal:</strong></td><td>{{tanggal_invoice}}</td></tr>
                <tr><td><strong>Jatuh Tempo:</strong></td><td>{{tanggal_jatuh_tempo}}</td></tr>
                <tr><td><strong>Periode:</strong></td><td>{{periode_display}}</td></tr>
            </table>
        </div>
    </div>
</div>

<div class="invoice-body">
    <div class="customer-section">
        <h3>Tagihan Kepada:</h3>
        <div class="customer-info">
            <table>
                <tr><td><strong>Nama:</strong></td><td>{{nama_pelanggan}}</td></tr>
                <tr><td><strong>No. Layanan:</strong></td><td>{{nomer_layanan}}</td></tr>
                <tr><td><strong>Alamat:</strong></td><td>{{alamat_pelanggan}}</td></tr>
                <tr><td><strong>No. HP:</strong></td><td>{{nomor_hp}}</td></tr>
                <tr><td><strong>Email:</strong></td><td>{{email_pelanggan}}</td></tr>
            </table>
        </div>
    </div>

    <div class="service-section">
        <h3>Detail Layanan:</h3>
        <table class="service-table">
            <tr><td><strong>Paket Internet:</strong></td><td>{{paket}}</td></tr>
            <tr><td><strong>Kecepatan:</strong></td><td>{{kecepatan_download}} / {{kecepatan_upload}}</td></tr>
            <tr><td><strong>Jenis Layanan:</strong></td><td>{{layanan_type}}</td></tr>
            <tr><td><strong>Area Coverage:</strong></td><td>{{coverage_area}}</td></tr>
            <tr><td><strong>WiFi SSID:</strong></td><td>{{ssid}}</td></tr>
        </table>
    </div>

    <div class="billing-section">
        <table class="invoice-table">
            <thead>
                <tr>
                    <th>Deskripsi</th>
                    <th>Periode</th>
                    <th class="text-right">Harga</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{paket}}</td>
                    <td>{{periode_display}}</td>
                    <td class="text-right">{{subtotal}}</td>
                </tr>
                <tr>
                    <td>Biaya Instalasi</td>
                    <td>-</td>
                    <td class="text-right">{{biaya_instalasi}}</td>
                </tr>
                <tr>
                    <td>Diskon</td>
                    <td>-</td>
                    <td class="text-right">-{{diskon}}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr class="subtotal-row">
                    <td colspan="2"><strong>Subtotal</strong></td>
                    <td class="text-right"><strong>{{subtotal}}</strong></td>
                </tr>
                <tr>
                    <td colspan="2">PPN {{ppn_persen}}%</td>
                    <td class="text-right">{{ppn_amount}}</td>
                </tr>
                <tr class="total-row">
                    <td colspan="2"><strong>TOTAL TAGIHAN</strong></td>
                    <td class="text-right total-amount"><strong>{{total_amount}}</strong></td>
                </tr>
            </tfoot>
        </table>

        <div class="amount-words">
            <strong>Terbilang:</strong> {{total_terbilang}}
        </div>
    </div>
</div>

<div class="invoice-footer">
    <div class="payment-section">
        <h3>Informasi Pembayaran:</h3>
        <div class="payment-info">
            <p><strong>Transfer ke rekening:</strong></p>
            <div class="bank-accounts">
                {{{daftar_rekening}}}
            </div>
        </div>
    </div>

    <div class="terms-section">
        <h4>Ketentuan Pembayaran:</h4>
        <ul>
            <li>Pembayaran paling lambat pada tanggal <strong>{{tanggal_jatuh_tempo}}</strong></li>
            <li>Layanan akan dihentikan sementara jika melewati batas waktu pembayaran</li>
            <li>Konfirmasi pembayaran dapat dilakukan via WhatsApp {{wa_cs}}</li>
            <li>Invoice ini adalah dokumen resmi yang dihasilkan oleh sistem</li>
        </ul>
    </div>

    <div class="contact-section">
        <div class="contact-info">
            <div class="cs-info">
                <h4>Customer Service:</h4>
                <p><i class="fas fa-phone"></i> {{telepon_perusahaan}}</p>
                <p><i class="fas fa-whatsapp"></i> {{wa_cs}}</p>
                <p><i class="fas fa-envelope"></i> {{email_perusahaan}}</p>
            </div>
            <div class="web-info">
                <p><i class="fas fa-globe"></i> {{web_perusahaan}}</p>
            </div>
        </div>
    </div>

    <div class="footer-note">
        <p><em>Terima kasih atas kepercayaan Anda menggunakan layanan {{perusahaan}}</em></p>
        <p><small>Invoice ini digenerate otomatis pada {{tanggal_generate}} - {{perusahaan}}</small></p>
    </div>
</div>