@extends('layouts.app')
@section('title', 'Transaksi')
@section('content')
<div class="page-head"><div><h1>Transaksi</h1><p class="muted">Transaksi paid tidak dapat dihapus permanen.</p></div><a class="button primary" href="{{ route('pos.index') }}">Buka POS</a></div>
<section class="panel"><div class="section-heading"><div><h2>Filter transaksi</h2><p>Pilih tanggal dan/atau produk. Kosongkan untuk menampilkan seluruh transaksi.</p></div></div><form method="get" class="form-grid three"><label>Hari / tanggal<input type="date" name="date" value="{{ request('date') }}"></label><label>Produk<select class="report-select" name="product_id"><option value=""></option>@foreach($products as $product)<option value="{{ $product->id }}" @selected(request('product_id') == $product->id)>{{ $product->name }}</option>@endforeach</select></label><div class="form-actions"><button class="button primary">Tampilkan</button><a class="button" href="{{ route('pos.transactions') }}">Hapus filter</a></div></form></section>
<section class="panel"><div class="table-wrap"><table><thead><tr><th>Waktu</th><th>Nomor</th><th>Kasir</th><th>Metode</th><th>Total</th><th>Status</th><th>Aksi</th></tr></thead><tbody>@forelse($sales as $sale)<tr><td>{{ $sale->sold_at->format('d/m/Y H:i') }}</td><td><a href="{{ route('pos.receipt',$sale) }}">{{ $sale->number }}</a></td><td>{{ $sale->cashier->name }}</td><td>{{ $sale->payments->first()?->method?->name }}</td><td>Rp{{ number_format($sale->total,0,',','.') }}</td><td><span class="badge {{ $sale->status }}">{{ $sale->status }}</span>@if($sale->status==='paid' && $sale->items->contains(fn($item)=>(float)$item->returned_quantity>0))<br><small class="danger">sebagian diretur</small>@endif</td><td>@if($sale->status==='paid' && auth()->user()->hasPermission('cancel_sales'))<button type="button" class="button small danger" data-open-return="{{ $sale->id }}">Retur / batal</button>@endif</td></tr>@empty<tr><td colspan="7" class="empty">Belum ada transaksi.</td></tr>@endforelse</tbody></table></div>{{ $sales->links() }}</section>

@foreach($sales as $sale)
    @if($sale->status==='paid' && auth()->user()->hasPermission('cancel_sales'))
        <dialog id="return-dialog-{{ $sale->id }}" class="recipe-dialog">
            <form method="dialog"><button class="dialog-close" aria-label="Tutup">&times;</button></form>
            <div class="recipe-dialog-body">
            <div class="recipe-dialog-head"><div><span class="eyebrow">Retur / pembatalan</span><h2>{{ $sale->number }}</h2><p class="muted">Pilih seluruh transaksi, atau isi jumlah per item untuk retur sebagian.</p></div></div>
            <form method="post" action="{{ route('pos.reverse',$sale) }}" class="stack" onsubmit="return confirm('Proses retur dan kembalikan stok?')">@csrf
                <label>Jenis<select name="status"><option value="refunded">Retur — barang dikembalikan</option><option value="cancelled">Batalkan — transaksi salah input</option></select></label>
                <label>Cakupan<select name="scope" class="return-scope"><option value="full">Seluruh sisa transaksi</option><option value="partial">Sebagian item</option></select></label>
                <div class="table-wrap return-items" hidden>
                    <table><thead><tr><th>Produk</th><th>Dibeli</th><th>Sudah diretur</th><th>Retur sekarang</th></tr></thead><tbody>
                        @foreach($sale->items as $item)
                            @php($remaining = (float) $item->quantity - (float) $item->returned_quantity)
                            <tr>
                                <td>{{ $item->product_name }}</td>
                                <td>{{ rtrim(rtrim(number_format((float) $item->quantity, 2, ',', '.'), '0'), ',') }}</td>
                                <td>{{ rtrim(rtrim(number_format((float) $item->returned_quantity, 2, ',', '.'), '0'), ',') }}</td>
                                <td><input type="number" step="0.01" min="0" max="{{ $remaining }}" name="items[{{ $item->id }}]" value="0" @disabled($remaining <= 0)></td>
                            </tr>
                        @endforeach
                    </tbody></table>
                </div>
                <label>Alasan<input name="reason" minlength="5" maxlength="500" placeholder="Alasan retur atau pembatalan" required></label>
                <div class="form-actions"><button class="button primary danger">Proses retur</button><button type="button" class="button" data-close-return="{{ $sale->id }}">Batal</button></div>
            </form>
            </div>
        </dialog>
    @endif
@endforeach
@push('scripts')<script>document.addEventListener('DOMContentLoaded',()=>{
document.querySelectorAll('[data-open-return]').forEach(button=>button.addEventListener('click',()=>document.getElementById('return-dialog-'+button.dataset.openReturn)?.showModal()));
document.querySelectorAll('[data-close-return]').forEach(button=>button.addEventListener('click',()=>document.getElementById('return-dialog-'+button.dataset.closeReturn)?.close()));
document.querySelectorAll('.return-scope').forEach(select=>{const table=select.closest('form').querySelector('.return-items');const sync=()=>{table.hidden=select.value!=='partial';};select.addEventListener('change',sync);sync();});
});</script>@endpush
@endsection