@extends('layouts.app')
@section('title', 'Struk '.$sale->number)
@php
    $rupiah = fn ($value) => number_format((float) $value, 0, ',', '.');
    $struk = [
        'toko' => 'Warkop R/',
        'cabang' => $sale->branch->name,
        'waktu' => $sale->sold_at->format('d/m/Y H:i'),
        'kasir' => $sale->cashier->name,
        'nomor' => $sale->number,
        'items' => $sale->items->map(fn ($item) => [
            'nama' => $item->product_name,
            'catatan' => $item->notes,
            'qty' => rtrim(rtrim(number_format((float) $item->quantity, 2, ',', '.'), '0'), ','),
            'harga' => $rupiah($item->unit_price),
            'subtotal' => $rupiah($item->subtotal),
        ])->values(),
        'ringkasan' => collect([
            ['Subtotal', $rupiah($sale->subtotal)],
            ['Diskon', $rupiah($sale->discount_value)],
            ['TOTAL', $rupiah($sale->total)],
        ])->concat($sale->payments->flatMap(fn ($payment) => collect([[$payment->method->name, $rupiah($payment->amount)]])
            ->when($payment->received_amount !== null, fn ($rows) => $rows
                ->push(['Diterima', $rupiah($payment->received_amount)])
                ->push(['Kembalian', $rupiah($payment->change_amount)]))))->values(),
    ];
@endphp
@section('content')
<div class="page-head no-print"><div><h1>Struk transaksi</h1><p class="muted">{{ $sale->number }}</p></div><div><a class="button" href="{{ route('pos.index') }}">Kembali ke POS</a> <button class="button primary" onclick="printReceipt()">Cetak ulang</button></div></div>
<p class="no-print muted" id="print-status" role="status"></p>
<section class="panel receipt"><div class="receipt-head"><h1>Warkop R/</h1><p>{{ $sale->branch->name }}<br>{{ $sale->sold_at->format('d/m/Y H:i') }}<br>Kasir: {{ $sale->cashier->name }}</p><strong>{{ $sale->number }}</strong></div>
<div class="receipt-items">@foreach($sale->items as $item)<div class="receipt-item"><strong>{{ $item->product_name }}</strong>@if($item->notes)<small>{{ $item->notes }}</small>@endif<div><span>{{ number_format($item->quantity,2,',','.') }} × Rp{{ number_format($item->unit_price,0,',','.') }}</span><strong>Rp{{ number_format($item->subtotal,0,',','.') }}</strong></div></div>@endforeach</div>
<div class="receipt-totals"><div><span>Subtotal</span><strong>Rp{{ number_format($sale->subtotal,0,',','.') }}</strong></div><div><span>Diskon</span><strong>Rp{{ number_format($sale->discount_value,0,',','.') }}</strong></div><div><span>Total</span><strong>Rp{{ number_format($sale->total,0,',','.') }}</strong></div>@foreach($sale->payments as $payment)<div><span>{{ $payment->method->name }}</span><strong>Rp{{ number_format($payment->amount,0,',','.') }}</strong></div>@if($payment->received_amount!==null)<div><span>Diterima</span><strong>Rp{{ number_format($payment->received_amount,0,',','.') }}</strong></div><div><span>Kembalian</span><strong>Rp{{ number_format($payment->change_amount,0,',','.') }}</strong></div>@endif @endforeach</div>
<p class="receipt-thanks">Terima kasih</p></section>
@endsection
@push('scripts')<script src="{{ asset('js/qz-tray.js') }}"></script><script>
const strukData=@json($struk);
const LEBAR=32; // karakter per baris untuk kertas 58mm pada font A printer thermal
const status=teks=>{const el=document.getElementById('print-status');if(el)el.textContent=teks;};

const tengah=teks=>{const sisa=LEBAR-teks.length;return sisa>0?' '.repeat(Math.floor(sisa/2))+teks:teks;};
const kiriKanan=(kiri,kanan)=>{const sisa=LEBAR-kiri.length-kanan.length;return sisa>0?kiri+' '.repeat(sisa)+kanan:(kiri+' '+kanan);};
const bungkus=teks=>{const baris=[];let sisa=String(teks);while(sisa.length>LEBAR){let potong=sisa.lastIndexOf(' ',LEBAR);if(potong<=0)potong=LEBAR;baris.push(sisa.slice(0,potong));sisa=sisa.slice(potong).trimStart();}if(sisa)baris.push(sisa);return baris;};

// Perintah ESC/POS: printer memakai font internalnya sendiri, bukan gambar hasil render browser,
// sehingga huruf selalu tajam dan panjang kertas mengikuti isi struk.
function bangunEscPos(){
    const ESC='\x1B',GS='\x1D';
    const init=ESC+'@',tengahOn=ESC+'a'+'\x01',kiriOn=ESC+'a'+'\x00';
    const tebalOn=ESC+'E'+'\x01',tebalOff=ESC+'E'+'\x00';
    const besarOn=GS+'!'+'\x11',besarOff=GS+'!'+'\x00';
    const garis='-'.repeat(LEBAR)+'\n';
    let out=init+tengahOn+besarOn+tebalOn+strukData.toko+'\n'+besarOff+tebalOff;
    out+=strukData.cabang+'\n'+strukData.waktu+'\n'+'Kasir: '+strukData.kasir+'\n'+strukData.nomor+'\n';
    out+=kiriOn+garis;
    strukData.items.forEach(item=>{
        bungkus(item.nama).forEach(baris=>{out+=baris+'\n';});
        if(item.catatan)bungkus('  '+item.catatan).forEach(baris=>{out+=baris+'\n';});
        out+=kiriKanan(' '+item.qty+' x '+item.harga,item.subtotal)+'\n';
    });
    out+=garis;
    strukData.ringkasan.forEach(([label,nilai])=>{
        const tebal=label==='TOTAL';
        out+=(tebal?tebalOn:'')+kiriKanan(label,nilai)+(tebal?tebalOff:'')+'\n';
    });
    out+=garis+tengahOn+'Terima kasih\n'+kiriOn;
    out+='\n\n\n'+GS+'V'+'\x01'; // sisakan kertas lalu potong bila printer punya pemotong
    return [out];
}

async function cariPrinter(){
    try{const cocok=await qz.printers.find('POS-58');return Array.isArray(cocok)?cocok[0]:cocok;}
    catch(e){return await qz.printers.getDefault();}
}

// Sertifikat dan tanda tangan membuat QZ Tray mempercayai permintaan cetak, sehingga dialog izin
// tidak muncul lagi. Sertifikat publiknya dipasang sekali di tiap komputer kasir.
function pasangKeamananQz(){
    qz.security.setCertificatePromise((resolve,reject)=>{
        fetch('{{ route('pos.qz.certificate') }}',{cache:'no-store'})
            .then(res=>res.ok?res.text():Promise.reject(new Error('Sertifikat tidak terbaca')))
            .then(resolve).catch(reject);
    });
    qz.security.setSignatureAlgorithm('SHA512');
    qz.security.setSignaturePromise(pesan=>(resolve,reject)=>{
        fetch('{{ route('pos.qz.sign') }}',{
            method:'POST',
            headers:{'Content-Type':'application/x-www-form-urlencoded','X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').content},
            body:'request='+encodeURIComponent(pesan),
        }).then(res=>res.ok?res.text():Promise.reject(new Error('Gagal menandatangani')))
          .then(resolve).catch(reject);
    });
}

async function cetakQz(){
    if(typeof qz==='undefined')throw new Error('Pustaka QZ Tray tidak termuat.');
    if(!qz.websocket.isActive()){
        qz.api.setPromiseType(resolver=>new Promise(resolver));
        pasangKeamananQz();
        await qz.websocket.connect();
    }
    const printer=await cariPrinter();
    if(!printer)throw new Error('Printer POS-58 tidak ditemukan.');
    await qz.print(qz.configs.create(printer,{encoding:'CP437'}),bangunEscPos());
    status('Struk terkirim ke '+printer+'.');
}

function cetakBrowser(){
    const receipt=document.querySelector('.receipt'),style=document.getElementById('receipt-page-size')||document.head.appendChild(Object.assign(document.createElement('style'),{id:'receipt-page-size'}));
    receipt.classList.add('print-measure');
    const tinggi=Math.ceil(receipt.scrollHeight*25.4/96)+6;
    receipt.classList.remove('print-measure');
    style.textContent=`@page{size:58mm ${tinggi}mm;margin:0}`;
    requestAnimationFrame(()=>window.print());
}

// QZ Tray dipakai kalau tersedia; kalau tidak, jatuh ke dialog cetak browser seperti sebelumnya.
async function printReceipt(){
    status('Menghubungkan ke printer...');
    try{await cetakQz();}
    catch(e){status('QZ Tray tidak tersedia ('+e.message+'), memakai dialog cetak browser.');cetakBrowser();}
}
@if(request()->boolean('print')) window.addEventListener('load',()=>setTimeout(printReceipt,300)); @endif
</script>@endpush