<!DOCTYPE html>
<html>

<head>
    <title>Struk</title>

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            width: 58mm;
            margin: auto;
            font-size: 12px;
            color: #000;
        }

        .center {
            text-align: center;
        }

        .bold {
            font-weight: bold;
        }

        .small {
            font-size: 11px;
        }

        .line {
            border-top: 1px dashed #000;
            margin: 8px 0;
        }

        .row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .item {
            margin-bottom: 8px;
        }

        .item-name {
            font-weight: bold;
            font-size: 12px;
        }

        .total-section {
            font-size: 12px;
        }

        .grand-total {
            font-size: 15px;
            font-weight: bold;
        }

        .footer {
            margin-top: 10px;
            text-align: center;
            font-size: 11px;
        }

        .qr {
            margin-top: 10px;
            padding: 10px;
            border: 1px dashed #000;
            font-size: 10px;
        }
    </style>
</head>

<body onload="window.print()">

    <!-- HEADER -->
    <div class="center">

        <div style="font-size:18px;" class="bold">
            KATHAH TELUR
        </div>

        <div class="small">
            Jual Aneka Telur
        </div>

        <div class="small">
            Sriwedari, Muntilan, Magelang
        </div>

        <div class="small">
            WA 0856-4363-0864
        </div>

    </div>

    <div class="line"></div>

    <!-- INFO -->
    <div class="small">

        <div class="row">
            <span>No</span>
            <span>#{{ str_pad($sale->id,5,'0',STR_PAD_LEFT) }}</span>
        </div>

        <div class="row">
            <span>Tanggal</span>
            <span>
                {{ \Carbon\Carbon::parse($sale->created_at)->format('d/m/Y H:i') }}
            </span>
        </div>

        <div class="row">
            <span>Kasir</span>
            <span>ADMIN</span>
        </div>

    </div>

    <div class="line"></div>

    <!-- ITEM -->
    @foreach($sale->items as $item)

    <div class="item">

        <div class="item-name">
            {{ $item->product->name }}
        </div>

        <div class="row small">

            <span>
                {{ $item->qty }} x {{ number_format($item->price,0,',','.') }}
            </span>

            <span>
                {{ number_format($item->subtotal,0,',','.') }}
            </span>

        </div>

    </div>

    @endforeach

    <div class="line"></div>

    <!-- TOTAL -->
    <div class="total-section">

        <div class="row">
            <span>Subtotal</span>
            <span>
                Rp {{ number_format($sale->subtotal,0,',','.') }}
            </span>
        </div>

        <div class="row">
            <span>Diskon</span>
            <span>
                Rp {{ number_format($sale->discount,0,',','.') }}
            </span>
        </div>

        <div class="row grand-total">
            <span>TOTAL</span>
            <span>
                Rp {{ number_format($sale->total,0,',','.') }}
            </span>
        </div>

        <div class="row">
            <span>Bayar</span>
            <span>
                Rp {{ number_format($sale->pay,0,',','.') }}
            </span>
        </div>

        <div class="row">
            <span>Kembali</span>
            <span>
                Rp {{ number_format($sale->change,0,',','.') }}
            </span>
        </div>

    </div>

    <!-- <div class="line"></div> -->

    <!-- QR PLACEHOLDER -->
    <!-- <div class="qr center">

        SCAN QR UNTUK PROMO

    </div> -->

    <!-- FOOTER -->
    <div class="footer">

        Terima kasih 🙏 <br>

       "Fresh, Hemat & Bergizi"

        <!-- <div style="margin-top:5px;">
            www.kathles.com
        </div> -->

    </div>

</body>

</html>