@extends('layout.app')

@section('content')

<style>
    .win-card {
        background: #ffffff;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        max-width: 1300px;
        margin: auto;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        border: 2px solid #0d6efd;
        border-radius: 8px;
    }

    table {
        width: 100%;
        min-width: 900px;
        border-collapse: collapse;
        background: white;
    }

    thead {
        background: #e5f0ff;
        border-bottom: 2px solid #0d6efd;
    }

    thead th {
        padding: 10px;
        font-size: 18px;
        color: #d8134bff;
        font-weight: 800;
        text-align: center;
        border: 1px solid #0d6efd;
        letter-spacing: 0.3px;
    }

    tbody td {
        padding: 9px;
        font-size: 15px;
        border: 1px solid #0d6efd;
    }

    .supplier-row {
        background: #eaf2ff;
        font-weight: 700;
        border-top: 2px solid #004fc5 !important;
        border-bottom: 2px solid #004fc5 !important;
    }

    .item-row:hover {
        background: #eef6ff;
    }

    .no-data {
        padding: 35px;
        text-align: center;
        color: #888;
        font-size: 18px;
        font-weight: 600;
    }

    #searchInput {
        width: 260px;
        padding: 9px 12px;
        margin-bottom: 15px;
        border: 2px solid #0d6efd;
        border-radius: 6px;
        font-size: 16px;
    }
</style>

<div class="container mt-4">
    <div class="win-card">
        <h3 class="mb-3">
            <i class="fa fa-cart-plus text-success"></i> Today Purchase Report
        </h3>

        <input type="text" id="searchInput" placeholder="Search supplier, product, contact..." />

        <div id="results"></div>
    </div>
</div>


<script>
loadData();

function loadData(search = "") {
    fetch(`{{ route('user.reports.dailypurchase.search') }}?search=${search}`)
    
        .then(res => res.json())
        .then(res => {

            const div = document.getElementById("results");
            div.innerHTML = "";

            if (!res.data.length) {
                div.innerHTML = `<div class="no-data">No purchases today</div>`;
                return;
            }

            let html = `
                <div class="table-responsive">
                <table id="purchaseTable">
                    <thead>
                        <tr>
                            <th>Supplier</th>
                            <th>Contact</th>
                            <th>Product</th>
                            <th>Qty</th>
                            <th>Rate</th>
                            <th>Amount</th>
                            <th>Total Bill</th>
                            <th>Paid</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody>
            `;

            res.data.forEach((p) => {

                // Supplier header row
                html += `
                <tr class="supplier-row">
                    <td>${p.supplier_name}</td>
                    <td>${p.supplier_contact}</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>₹ ${p.total_bill}</td>
                    <td>₹ ${p.paid}</td>
                    <td>${p.time}</td>
                </tr>
                `;

                // Product rows
                p.items.forEach((item) => {
                    html += `
                    <tr class="item-row">
                        <td>-</td>
                        <td>-</td>
                        <td>${item.product_name}</td>
                        <td>${item.quantity}</td>
                        <td>₹ ${item.rate}</td>
                        <td>₹ ${item.amount}</td>
                        <td>-</td>
                        <td>-</td>
                        <td>${item.time}</td>
                    </tr>
                    `;
                });

            });

            html += "</tbody></table></div>";
            div.innerHTML = html;
        });
}

// Search live
document.getElementById("searchInput").addEventListener("keyup", function () {
    loadData(this.value);
});
</script>
<script>
document.addEventListener("keydown", function(e) {

    // If user is typing inside input, textarea — ignore backspace
    const active = document.activeElement;
    const typingTags = ["INPUT", "TEXTAREA"];

    if (typingTags.includes(active.tagName)) return;

    // Backspace = go back
    if (e.key === "Backspace") {
        e.preventDefault();
        window.location.href = "{{ route('user.reports.index') }}";
    }
});
</script>
@endsection