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

<head>
    <meta charset="utf-8">
    <title>Contoh Export</title>
    <style>
        @page {
            margin-top: 70px;
            margin-bottom: 70px;
            margin-left: 0;
            margin-right: 0;
        }

        .float-left {
            float: left !important
        }

        .w-50 {
            width: 50% !important
        }

        .text-left {
            text-align: left !important
        }

        .float-right {
            float: right !important
        }

        .text-right {
            text-align: right !important
        }

        body {
            font-family: "times-roman", sans-serif, "Arial";
            font-size: 16px;
        }

        main {
            margin: 10px 2cm;
        }

        h1 {
            font-size: 16px;
        }

        .w-100 {
            width: 100% !important
        }

        div.pagebreak {
            page-break-after: always;
        }

        header {
            position: fixed;
            top: -55px;
            left: 0px;
            right: 0px;
            height: 130px;
            text-align: center;
            margin: 0 2cm;
        }

        footer {
            position: fixed;
            bottom: -10px;
            left: 0px;
            right: 0px;
            width: 100%;
            height: auto;
            text-align: center;
        }

        .w-100 {
            width: 100%;
        }

        .text-success {
            color: #28a745 !important
        }

        a.text-success:focus,
        a.text-success:hover {
            color: #19692c !important
        }

        .text-center {
            text-align: center !important
        }

        .w-50 {
            width: 50%;
        }

        .text-light {
            color: #f8f9fa !important
        }

        a.text-light:focus,
        a.text-light:hover {
            color: #cbd3da !important
        }

        .table {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529
        }
    </style>
</head>

<body>
    <header style="border-bottom:1px solid #DDD" style="padding-bottom:50px;">
        <!-- <img src="PT DAPUR INSPIRASI NUSANTARA" alt="PT DAPUR INSPIRASI NUSANTARA" width="180px"> -->
        <h2>PT DAPUR INSPIRASI NUSANTARA</h2>
        <h3>Dintara Kitchen Bali</h3>
        <p style="font-size:11px">Jl. Mertasari Jl. Suwung Batan Kendal No.68 F, Sidakarya, <br /> Denpasar Selatan, Kota Denpasar, Bali</p>
        <p style="font-size:11px">Telp.(0361) 710984 | Email: <a href="mailto:dintara.kitchen@gmail.com">dintara.kitchen@gmail.com</a> | Website: <a href="https://www.dintarakitchen.com/">https://www.dintarakitchen.com/</a></p>
        <p style="font-size:9px;padding-bottom:20px;">====================================================================================================================</p>
    </header>
    <footer>
        <p style="font-size:9px;padding-bottom:20px">===============================================================================================================</p>
        <p style="font-size:9px"><i>Invoice Sah Dicetak dan Dikeluarkan Oleh PT DAPUR INSPIRASI NUSANTARA</i></p>
        <p style="font-size:9px"><i>Silahkan Simpan Bukti Invoice Ini Sebagai Syarat Garansi Produk</i></p>
        <p style="font-size:9px"><i>Tanggal Cetak : 21-08-2022 15:00 WITA | Kasir Finance</i></p>
    </footer>
    <main>
        <table class="w-100" style="padding-top:50px;margin-top:50px">
            <tr>
                <td class="w-50 text-left">
                    <h5 style="font-size:12px">Informasi Klien</h5>
                    <table class="w-100" style="padding-top:20 ;">
                        <tr>
                            <td width="120px">
                                <p style="font-size:12px">Nama</p>
                            </td>
                            <td>
                                <p style="font-size:12px">: Deyan Ardi</p>
                            </td>
                        </tr>
                        <tr>
                            <td width="120px">
                                <p style="font-size:12px">Nama</p>
                            </td>
                            <td>
                                <p style="font-size:12px">: Deyan Ardi</p>
                            </td>
                        </tr>
                        <tr>
                            <td width="120px">
                                <p style="font-size:12px">Nama</p>
                            </td>
                            <td>
                                <p style="font-size:12px">: Deyan Ardi</p>
                            </td>
                        </tr>
                        <tr>
                            <td width="120px">
                                <p style="font-size:12px">Nama</p>
                            </td>
                            <td>
                                <p style="font-size:12px">: Deyan Ardi</p>
                            </td>
                        </tr>
                        <tr>
                            <td width="120px">
                                <p style="font-size:13px">Nama</p>
                            </td>
                            <td>
                                <p style="font-size:13px">: Deyan Ardi</p>
                            </td>
                        </tr>
                    </table>
                </td>
                <td class="w-50 text-right">
                    <h5 style="font-size:12px">Informasi Transaksi</h5>
                    <table class="w-100" style="padding-top:20 ;">
                        <tr>
                            <td></td>
                            <td width="120px" class="text-right">
                                <h4 style="font-size:18px;padding:3px;color:#28a745">Sukses</h4>
                            </td>
                        </tr>
                        <tr>
                            <td width="120px">
                                <p style="font-size:12px">Kode PO</p>
                            </td>
                            <td>
                                <p style="font-size:12px">: Deyan Ardi</p>
                            </td>
                        </tr>
                        <tr>
                            <td width="120px">
                                <p style="font-size:12px">Nama</p>
                            </td>
                            <td>
                                <p style="font-size:12px">: Deyan Ardi</p>
                            </td>
                        </tr>
                        <tr>
                            <td width="120px">
                                <p style="font-size:12px">Nama</p>
                            </td>
                            <td>
                                <p style="font-size:12px">: Deyan Ardi</p>
                            </td>
                        </tr>
                        <tr>
                            <td width="120px">
                                <p style="font-size:12px">Nama</p>
                            </td>
                            <td>
                                <p style="font-size:12px">: Deyan Ardi</p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <div style="padding-top: 50px ;">
            <table class="table table-sm table-striped" style="width: 100%;">
                <thead>
                    <tr>
                        <td style="background-color:#7460ee; width:25px; vertical-align:middle;text-align: center;">
                            <h5 style="color:#ffffff;font-size:12px">No.</h5>
                        </td>
                        <td style="background-color:#7460ee; vertical-align:middle;">
                            <h5 style="color:#ffffff;font-size:12px">Item</h5>
                        </td>
                        <td style="background-color:#7460ee;vertical-align: middle;" width="160px" class="text-right">
                            <h5 style="color:#ffffff;font-size:12px">Total</h5>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="width:25px; vertical-align:middle;text-align: center;">
                            <p style="font-size:11px">1</p>
                        </td>
                        <td>
                            <p style="font-size:11px">Penarikan Tabungan Sampah</p>
                        </td>
                        <td class="text-right">
                            <p style="font-size:11px">Rp.15.000</p>
                        </td>
                    </tr>
                    <tr style="background-color:whitesmoke">
                        <td class="text-right" colspan="2">
                            <p style="font-size:11px"> Saldo Awal</p>
                        </td>
                        <td class="text-right">
                            <p style="font-size:11px"> Rp. 15.000</p>
                        </td>
                    </tr>
                    <tr style="background-color:whitesmoke">

                        <td class="text-right" colspan="2">
                            <p style="font-size:11px"> Total Penarikan</p>
                        </td>
                        <td class="text-right">
                            <p style="font-size:11px"> Rp. 15.000</p>
                        </td>
                    </tr>
                    <tr style="background-color:whitesmoke">
                        <td class="text-right" colspan="2">
                            <p style="font-size:11px"> Sisa Saldo</p>
                        </td>
                        <td class="text-right text-success">
                            <p style="font-size:11px"> Rp. 15.000</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <table class="w-100" style="padding-top:50px">
            <tr>
                <td>
                    <h5 style="font-size:12px">Remark:</h5>
                </td>
            </tr>
            <tr>
                <td>
                    <p style="font-size:11px;text-align:justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, quam esse, voluptatibus minus vero consequatur aliquid quaerat recusandae repellendus facilis repellat harum deleniti ipsum iste perferendis laborum laudantium beatae repudiandae nobis neque. Unde sapiente sunt eligendi officia, eius magnam quos quae sequi nobis nisi ab repudiandae. Culpa, exercitationem quia. Tenetur libero nostrum tempora odit error laboriosam? Excepturi odit minima autem, laboriosam debitis tenetur ipsum aut placeat repellendus blanditiis recusandae illo magnam quam voluptate esse cupiditate dolorum aliquam quisquam dignissimos hic consequatur molestias corporis. Accusamus velit maxime dignissimos ipsam? Repellendus laudantium velit, alias sit dolore nobis et accusamus ab reprehenderit consequatur?</p>
                </td>
            </tr>
        </table>
        <div id="ttd" style="margin-top:45px">
            <table style="width: 100%;">
                <tr>
                    <td>
                        <p style="text-align: right;font-size:12px">Denpasar, 13 Januari 2022</p>
                    </td>
                </tr>
            </table>
            <table style="width: 100%; padding-top:20px">
                <tr>
                    <td>
                        <h5 style="font-size:12px"><?= !empty($ttd_kiri->header) ? $ttd_kiri->header : 'Customer'; ?></h5>
                    </td>
                    <td>
                        <h5 style="font-size:12px"><?= !empty($ttd_tengah->header) ? $ttd_tengah->header : 'Mengetahui'; ?></h5>
                    </td>
                    <td>
                        <h5 style="font-size:12px"><?= !empty($ttd_kanan->header) ? $ttd_kanan->header : 'Mengetahui'; ?></h5>
                    </td>
                    <td>
                        <h5 style="font-size:12px"><?= !empty($ttd_bawah->header) ? $ttd_bawah->header : 'Mengetahui'; ?></h5>
                    </td>
                </tr>
                <tr>
                    <td style=" padding-top: 4em;">
                        <h5 style="font-size:12px"><u><?= !empty($ttd_kiri->value) ? $ttd_kiri->value : 'Deyan Ardi'; ?></u></h5>
                        <p style="font-size:11px"><?= !empty($ttd_kiri->position) ? '(' . $ttd_kiri->position . ')' : 'Customer'; ?></p>
                    </td>

                    <td style="padding-top: 4em;">
                        <h5 style="font-size:12px"><u><?= !empty($ttd_tengah->value) ? $ttd_tengah->value : 'Deyan Ardi'; ?></u></h5>
                        <p style="font-size:11px"><?= !empty($ttd_tengah->position) ? '(' . $ttd_tengah->position . ')' : 'Marketing'; ?></p>
                    </td>
                    <td style="padding-top: 4em;">
                        <h5 style="font-size:12px"><u><?= !empty($ttd_kanan->value) ? $ttd_kanan->value : 'Deyan Ardi'; ?></u></h5>
                        <p style="font-size:11px"><?= !empty($ttd_kanan->position) ? '(' . $ttd_kanan->position . ')' : 'Finance'; ?></p>
                    </td>
                    <td style=" padding-top: 4em;">
                        <h5 style="font-size:12px"><u><?= !empty($ttd_bawah->value) ? $ttd_bawah->value : 'Deyan Ardi'; ?></u></h5>
                        <p style="font-size:11px"><?= !empty($ttd_bawah->position) ? '(' . $ttd_bawah->position . ')' : 'CEO'; ?></p>
                    </td>
                </tr>
            </table>
        </div>
    </main>
</body>

</html>