@extends('layouts.app')

@section('content')
<style>
* { box-sizing: border-box; }

.kasir-container { max-width: 900px; margin: auto; }

.card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    padding: 20px;
    margin-bottom: 20px;
    overflow: hidden; /* cegah isi keluar */
}

.title { font-size: 22px; font-weight: 600; color: #1f7a4c; margin-bottom: 15px; }

.barcode-input {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    border-radius: 10px;
    border: 2px solid #1f7a4c;
    margin-bottom: 15px;
}

/* ===== FIX TABEL BIAR PRESISI ===== */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* kolom paten */
    border-radius: 10px;
    overflow: hidden;
}

thead { background: #1f7a4c; color: white; }

th, td {
    padding: 10px 6px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    word-wrap: break-word;
}

th:nth-child(1), td:nth-child(1) { text-align: left; width: 30%; }
th:nth-child(2), td:nth-child(2) { width: 18%; }
th:nth-child(3), td:nth-child(3) { width: 20%; }
th:nth-child(4), td:nth-child(4) { width: 20%; }
th:nth-child(5), td:nth-child(5) { width: 12%; }

tbody tr:nth-child(even) { background: #f8faf9; }

/* ===== TOMBOL QTY BIAR RAPI ===== */
td button {
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

td input[type="number"] {
    width: 48px !important;
    text-align: center;
    padding: 4px;
    border-radius: 6px;
    border: 1px solid #ccc;
    margin: 0 4px;
}

/* warna tombol + - */
td button[onclick*="changeQty"] {
    background: #1f7a4c;
    color: white;
}

/* tombol hapus */
.btn-hapus {
    background: #e74c3c;
    color: white;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 13px;
}

/* ===== PEMBAYARAN ===== */
.summary-box { text-align: center; }

.summary-total {
    font-size: 30px;
    font-weight: bold;
    color: #1f7a4c;
    margin: 10px 0 20px;
}

.input-bayar {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 16px;
    margin-bottom: 15px;
}

.btn-bayar {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    border: none;
    background: #1f7a4c;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.old-price { text-decoration: line-through; color: gray; font-size: 12px; }
.discount-label { color: red; font-size: 12px; font-weight: bold; }
</style>


<div class="kasir-container">
    <div class="card">
        <div class="title">🛒 Transaksi Kasir</div>
        <input type="text" id="barcode" class="barcode-input"
               placeholder="Scan barcode lalu tekan ENTER" autofocus>
    </div>

    <div class="card">
        <table>
            <thead>
                <tr>
                    <th style="text-align:left">Produk</th>
                    <th>Harga</th>
                    <th>Qty</th>
                    <th>Subtotal</th>
                    <th>Hapus</th>
                </tr>
            </thead>
            <tbody id="cart-body"></tbody>
        </table>
    </div>

    <div class="card summary-box">
        <div class="title">💳 Pembayaran</div>
        <div>Total Belanja</div>
        <div class="summary-total">Rp <span id="total">0</span></div>

        <select id="payment_method" class="input-bayar">
            <option value="cash">Cash</option>
            <option value="qris">Qris</option>
        </select>

        <input type="number" id="paid" class="input-bayar"
               placeholder="Masukkan uang yang bayar">

        <button onclick="checkout()" class="btn-bayar">
            💵 Proses Pembayaran
        </button>
    </div>
</div>

<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://cdn.jsdelivr.net/npm/qz-tray@2.2.4/qz-tray.js"></script>

<script>
let cart = [];
const csrf = document.querySelector('meta[name="csrf-token"]').content;

document.getElementById('barcode').addEventListener('keypress', async function(e){
    if(e.key === 'Enter'){
        let barcode = this.value.trim();
        this.value = '';
        if(!barcode) return;

        let res = await fetch('/kasir/search-product', {
            method:'POST',
            headers:{ 'Content-Type':'application/json','X-CSRF-TOKEN':csrf },
            body: JSON.stringify({ barcode })
        });

        let data = await res.json();
        if(data.error){ alert(data.error); return; }

        let existing = cart.find(i => i.id === data.id);
        if(existing){ existing.qty++; }
        else { cart.push({...data, qty:1}); }

        renderCart();
    }
});

function renderCart(){
    let body = document.getElementById('cart-body');
    body.innerHTML = '';
    let total = 0;

    cart.forEach((item, index) => {
        let priceUsed = item.price;
        let isDiscount = false;

        if(item.discount_qty && item.qty >= item.discount_qty){
            priceUsed = item.discount_price;
            isDiscount = true;
        }

        let subtotal = priceUsed * item.qty;
        total += subtotal;

        body.innerHTML += `
            <tr>
                <td style="text-align:left">
                    ${item.name}
                    ${isDiscount ? `<div class="discount-label">DISKON AKTIF 🎉</div>` : ''}
                </td>
                <td>
                    ${isDiscount 
                        ? `<div class="old-price">Rp ${format(item.price)}</div>
                           <div style="color:red;font-weight:bold;">Rp ${format(priceUsed)}</div>`
                        : `Rp ${format(item.price)}`
                    }
                </td>
                <td>
                    <button onclick="changeQty(${index}, -1)">➖</button>
                    <input type="number" value="${item.qty}" min="1"
                        onchange="setQty(${index}, this.value)"
                        style="width:55px;text-align:center">
                    <button onclick="changeQty(${index}, 1)">➕</button>
                </td>
                <td>Rp ${format(subtotal)}</td>
                <td><button class="btn-hapus" onclick="removeItem(${index})">X</button></td>
            </tr>
        `;
    });

    document.getElementById('total').innerText = format(total);
}

function changeQty(i,a){ cart[i].qty+=a; if(cart[i].qty<1)cart[i].qty=1; renderCart(); }
function setQty(i,v){ cart[i].qty=Math.max(1,parseInt(v)||1); renderCart(); }
function removeItem(i){ cart.splice(i,1); renderCart(); }
function format(n){ return Number(n).toLocaleString('id-ID'); }

payment_method.addEventListener('change', function(){
    paid.style.display = this.value==='qris'?'none':'block';
});

async function checkout(){
    if(cart.length===0) return alert("Keranjang kosong");

    let res = await fetch('/kasir/checkout',{
        method:'POST',
        headers:{ 'Content-Type':'application/json','X-CSRF-TOKEN':csrf },
        body: JSON.stringify({
            items: cart,
            paid_amount: paid.value || 0,
            payment_method: payment_method.value
        })
    });

    let data = await res.json();
    if(data.error){ alert(data.error); return; }

    await printStruk(data.sale);

    alert("Transaksi berhasil!");
    cart=[]; renderCart(); paid.value='';
}

async function printStruk(sale){
    try{
        if(!qz.websocket.isActive()) await qz.websocket.connect();
        const printer = await qz.printers.find("POS-58-Series");
        const config = qz.configs.create(printer);

     let struk = [
    '\x1B\x40',          // INIT PRINTER
    '\x1B\x70\x01\x19\xFA' // PULSE OPEN CASH DRAWER (PIN 2) ✅ ODP-P58
];
        struk.push("TOKO ANDA\n");
        struk.push(sale.date+"\n");
        struk.push(sale.invoice+"\n");
        struk.push("-----------------------------\n");

        sale.items.forEach(i=>{
            struk.push(i.name+"\n");
            struk.push(`${i.qty} x ${i.price} = ${i.subtotal}\n`);
        });

        struk.push("-----------------------------\n");
        struk.push("TOTAL   : "+sale.total+"\n");
        struk.push("BAYAR   : "+sale.paid+"\n");
        struk.push("KEMBALI : "+sale.change+"\n");
        struk.push("METODE  : "+sale.payment_method+"\n");
        struk.push("\nTerima kasih 🙏\n\n\n");

      await qz.print(config, [{
    type: 'raw',
    format: 'plain',
    data: struk.join('')
}]);


        // 💰 BUKA LACI KASIR
        bukaLaci(printer);

    }catch(e){ alert("Printer tidak terhubung!"); }
}
function bukaLaci(printer){
    let config = qz.configs.create(printer);

    let data = [{
        type: 'raw',
      data: '\x10\x14\x01\x00\x05'

    }];

    qz.print(config, data).catch(err => console.error(err));
}

</script>
@endsection