<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />
        <title>Document</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Oswald&family=Roboto:wght@300;400&display=swap"
            rel="stylesheet">
    </head>

    <style>
        @page {
            margin: 0.2cm;
        }

        html {
            color: black;
        }

        body {
            font-family: 'Oswald';
            font-size: 8pt;
            /* transform: scaleY(1.5); */
        }

        .title {
            font-size: 11pt;
            font-weight: bold;
        }

        /* .literely-table td,
        th,
        tr {
            border-collapse: collapse;
            border: 0.1px solid rgb(85, 85, 85);
        } */

        .rotate90 {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p {
            margin: 0;
        }

        hr.style1 {
            border-top: 3px double #8c8b8b;
        }

        hr.style2 {
            border-top: 1px solid #8c8b8b;
        }
        .dashed-line {
            border: 1.5px dashed black;
        }
    </style>

    <body style="width: 80mm;">
        <h2 style="text-align: center">Sepiring Telur Keriting</h2>
        <p style="text-align: center">Jln. Jawa No. 28A, Jember</p>
        <hr class="style2">
        <span style="display: flex; justify-content: space-between">
            <span>
                <p>{{ tanggal_indonesia($pesanan->tanggal_pesanan) }}</p>
                <p>{{ date('H:i', strtotime($pesanan->tanggal_pesanan)) }}</p>
                <p>Meja: {{ $pesanan->nomor_meja }}</p>
            </span>
            <span style="text-align: right">
                <p>{{ $pesanan->kode_pesanan }}</p>
                <p>Kasir: {{ $pesanan->user->name }}</p>
                <p>Order: {{ $pesanan->nama_pemesan }}</p>
            </span>
        </span>
        <p></p>
        <hr class="style2">
        <table class="literely-table" style="width: 100%;">
            <tbody>
                @foreach ($pesanan->detailPesanan as $item)
                    {{-- @dd($item) --}}
                    <tr>
                        <td style="width: 2px;">{{ $loop->iteration }}</td>
                        <td style="width: 80px;" colspan="3">{{ $item->nama_produk }}</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td style="text-align: right">{{ $item->jumlah_produk }}</td>
                        <td style="text-align: right">{{ convert_to_rupiah($item->harga_produk) }}</td>
                        <td style="text-align: right">{{ convert_to_rupiah($item->total_harga_produk) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <hr class="style2">
        <table style="width: 100%;">
            <thead>
                <tr>
                    <th style="width: 20px;text-align: right">{{ $pesanan->total_pesanan }}</th>
                    <th style="text-align: right">Total :</th>
                    <th style="text-align: right">{{ convert_to_rupiah($pesanan->total_bayar) }}</th>
                </tr>
                <tr>
                    <th></th>
                    <th style="text-align: right">Diskon :</th>
                    <th style="text-align: right">{{ $pesanan->diskon_persen ?? 0 }} %</th>
                </tr>
                <tr>
                    <th></th>
                    <th style="text-align: right">Grand Total :</th>
                    <th style="text-align: right">{{ convert_to_rupiah($pesanan->grand_total) }}</th>
                </tr>
                <tr>
                    <th></th>
                    <th style="text-align: right">Bayar :</th>
                    <th style="text-align: right">{{ convert_to_rupiah($pesanan->nominal_bayar) }}</th>
                </tr>
                <tr>
                    <th></th>
                    <th style="text-align: right">Kembali :</th>
                    <th style="text-align: right">{{ convert_to_rupiah($pesanan->nominal_kembali) }}</th>
                </tr>
            </thead>
        </table>
        <hr class="style1">
        <p style="text-align: center">Terima Kasih, Selamat Datang Kembali</p>
        <p style="text-align: center;font-size: 7pt;">@sepiringtelurkeriting</p>
        <hr class="dashed-line" style="margin-top: 15px;">
        <hr class="style2" style="margin-top: 15px;">
        <span style="display: flex; justify-content: space-between">
            <span>
                <p>{{ tanggal_indonesia($pesanan->tanggal_pesanan) }}</p>
                <p>{{ date('H:i', strtotime($pesanan->tanggal_pesanan)) }}</p>
            </span>
            <span style="text-align: right">
                <p>{{ $pesanan->kode_pesanan }}</p>
                <p>{{ $pesanan->user->name }}</p>
            </span>
        </span>
        <p></p>
        <hr class="style2">
        <p style="text-align: left; margin-top:3px;">Menu</p>
        <table class="table" style="width: 100%;">
            <tbody>
                @foreach ($pesanan->detailPesanan as $item)
                    <tr>
                        <td style="width: 80px;" colspan="3">* {{ $item->nama_produk }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <p style="text-align: left; margin-top:3px;">Keterangan Pesanan</p>
        <table class="table" style="width: 100%;">
            <tbody>
                <tr>
                    <td style="width: 80px;" colspan="3">* {{ $pesanan->keterangan_pesanan }}</td>
                </tr>
            </tbody>
        </table>
        <hr class="style2">
    </body>
    <script>
        window.print();
    </script>

</html>
