@extends('Cashier.layout')

@section('content')
<h6>Bills</h6>

<div class="card p-0 m-2">
    <div class="table-responsive pt-0 pb-2">
    <table class="table">
    <thead>
        <tr>
            <th>Sno</th>
            <th>Staff Name</th>
            <th>Bill No</th>
            <th>Amount</th>
            <th>Date</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody id="billsTableBody">
    </tbody>
</table>

<script>
const toggleUrlBase = "{{ route('cashier.bills.toggle_payment', ['id' => 'ID_PLACEHOLDER']) }}";
const billsDataUrl = "{{ route('cashier.bills.data') }}";

function renderBills(bills) {
    const tbody = document.getElementById('billsTableBody');

    if (bills.length === 0) {
        tbody.innerHTML = `<tr><td colspan="6" class="text-center py-4 text-muted">No bills found.</td></tr>`;
        return;
    }

    let html = '';
    bills.forEach((bill, index) => {
        const isPaid = bill.payment_status === 'Paid';
        html += `
        <tr id="bill-row-${bill.id}">
            <td>${index + 1}</td>
            <td>${bill.staff_name}</td>
            <td>${bill.order_id}</td>
            <td>₹${bill.total}</td>
            <td>${bill.created_at}</td>
            <td>
                <button
                    class="btn btn-sm payment-toggle-btn ${isPaid ? 'btn-success' : 'btn-outline-danger'}"
                    data-bill-id="${bill.id}"
                    data-status="${bill.payment_status}"
                    ${isPaid ? 'disabled' : ''}
                    style="min-width:100px; transition: all 0.2s ease; ${isPaid ? 'cursor:not-allowed; opacity:0.85;' : ''}">
                    ${isPaid ? 'Paid' : 'Unpaid'}
                </button>
            </td>
        </tr>`;
    });

    tbody.innerHTML = html;
}
function loadBills() {
    fetch(billsDataUrl)
        .then(res => res.json())
        .then(data => renderBills(data))
        .catch(err => console.error("Failed to load bills:", err));
}

// Initial load
loadBills();

// Poll every 8 seconds for new/updated bills
setInterval(loadBills, 8000);

// Toggle payment status (event delegation handles freshly-rendered rows too)
document.addEventListener('click', function(e) {
    const btn = e.target.closest('.payment-toggle-btn');
    if (!btn) return;
    if (btn.disabled || btn.dataset.status === 'Paid') return; // guard

    const billId = btn.dataset.billId;
    btn.disabled = true;

    fetch(toggleUrlBase.replace('ID_PLACEHOLDER', billId), {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.status) {
            btn.classList.remove('btn-outline-danger');
            btn.classList.add('btn-success');
            btn.innerHTML = 'Paid';
            btn.dataset.status = 'Paid';
            btn.disabled = true; // lock it permanently
        } else {
            btn.disabled = false;
            toast_or_alert(data.message); // optional: show why it failed
        }
    })
    .catch(() => {
        btn.disabled = false;
    });
});
   
</script>
{{-- <script>
const toggleUrlBase = "{{ route('cashier.bills.toggle_payment', ['id' => 'ID_PLACEHOLDER']) }}";

document.addEventListener('click', function(e) {
    const btn = e.target.closest('.payment-toggle-btn');
    if (!btn) return;

    const billId = btn.dataset.billId;
    btn.disabled = true;

    fetch(toggleUrlBase.replace('ID_PLACEHOLDER', billId), {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(data => {
        btn.disabled = false;
        if (data.status) {
            if (data.payment_status === 'Paid') {
                btn.classList.remove('btn-outline-danger');
                btn.classList.add('btn-success');
                btn.innerHTML = '<i class="ti ti-check"></i> Paid';
            } else {
                btn.classList.remove('btn-success');
                btn.classList.add('btn-outline-danger');
                btn.innerHTML = 'Unpaid';
            }
            btn.dataset.status = data.payment_status;
        }
    })
    .catch(() => {
        btn.disabled = false;
    });
});
</script> --}}
@endsection