@extends('layouts.app')

@section('title', 'Purchase')

@section('content')
    <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-white">
        <nav class="flex items-center text-xs font-medium text-gray-600" aria-label="Breadcrumb">
            <!-- Breadcrumb omitted for brevity -->
            <span class="text-gray-500">Purchase</span>
        </nav>

        <a href="{{ route('purchase.create') }}">
            <button class="flex items-center text-xs font-medium text-gray-700 hover:text-gray-900 border border-gray-300 px-3 py-1.5 rounded-md bg-gray-50 hover:bg-gray-100 transition">
                <span class="mr-1.5">➕</span>
                Add
            </button>
        </a>
    </div>

    <div class="bg-white rounded-lg shadow-sm mt-4">
        <div class="px-4 py-3 border-b border-gray-200 flex justify-between items-center">
            <h2 class="text-sm font-semibold text-gray-800">Purchase Table</h2>
            <input id="searchInput" type="text" placeholder="Search by name"
                   class="border rounded px-3 py-1 w-full sm:w-64 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
        </div>

        <div class="overflow-x-auto">
            <table class="custom-datatable w-full" role="table" aria-label="Purchase Order list table">
                <thead class="bg-gray-100 text-left text-sm text-gray-600">
                <tr>
                    <th class="px-6 py-3">ID</th>
                    <th class="px-6 py-3">Supplier</th>
                    <th class="px-6 py-3">Warehouse</th>
                    <th class="px-6 py-3">Order Date</th>
                    <th class="px-6 py-3">Received Date</th>
                    <th class="px-6 py-3">Total Amount</th>
                    <th class="px-6 py-3">Status</th>
                    <th class="px-6 py-3">Payment Status</th>
                    <th class="px-6 py-3">Actions</th>
                </tr>
                </thead>
                <tbody id="dataTableBody" class="text-sm text-gray-700 divide-y divide-gray-200">
                <!-- Filled via JS -->
                </tbody>
            </table>
        </div>

        <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
            <div class="text-sm text-gray-600">Showing <span id="currentItemsShowing">1</span> to <span id="totalItemsShowing">10</span> of <span id="totalItems">0</span> entries</div>
            <div class="flex space-x-2">
                <button id="prevPageBtn" class="px-3 py-1 border border-gray-300 rounded text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" disabled>Previous</button>
                <button id="nextPageBtn" class="px-3 py-1 border border-gray-300 rounded text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">Next</button>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let currentPage = 1;
        const itemsPerPage = 10;
        let searchQuery = '';

        async function fetchPurchaseOrders() {
            const start = (currentPage - 1) * itemsPerPage;

            const url = new URL('/purchases/get-data', window.location.origin);
            url.searchParams.append('start', start);
            url.searchParams.append('length', itemsPerPage);
            url.searchParams.append('draw', currentPage);

            if (searchQuery) {
                url.searchParams.append('supplier_name', searchQuery); // optional filter
            }

            const response = await fetch(url);
            const result = await response.json();

            renderPurchaseOrderTable(result.data);
            updatePagination(result.recordsTotal, result.data.length);
        }

        function renderPurchaseOrderTable(orders) {
            const tableBody = document.getElementById('dataTableBody');
            tableBody.innerHTML = '';

            if (orders.length === 0) {
                tableBody.innerHTML = `<tr><td colspan="9" class="px-6 py-3 text-center text-gray-500">No data found.</td></tr>`;
                return;
            }

            orders.forEach(order => {
                const row = document.createElement('tr');

                row.innerHTML = `
                    <td class="px-6 py-3">${order.po_number}</td>
                    <td class="px-6 py-3">${escapeHTML(order.supplier?.company_name || '')}</td>
                    <td class="px-6 py-3">${escapeHTML(order.warehouse?.name || '')}</td>
                    <td class="px-6 py-3">${order.order_date}</td>
                    <td class="px-6 py-3">${order.received_date || '-'}</td>
                    <td class="px-6 py-3">${order.total_amount}</td>
                    <td class="px-6 py-3">${order.status}</td>
                    <td class="px-6 py-3">${order.payment_status}</td>
                    <td class="px-6 py-3 flex space-x-2">
                        <!-- <button onclick="viewPurchaseOrder(${order.id})" class="text-green-600 hover:text-green-800 p-1" title="View">
                            👁
                        </button>-->
                        <button onclick="editPurchase(${order.id})" class="text-blue-600 hover:text-blue-800 p-1" title="Edit">
                            ✏️
                        </button>
                        <button onclick="deletePurchaseOrder(${order.id})" class="text-red-600 hover:text-red-800 p-1" title="Delete">
                            🗑
                        </button>
                    </td>`;
                tableBody.appendChild(row);
            });
        }

        function updatePagination(totalItems, currentShown) {
            const start = (currentPage - 1) * itemsPerPage + 1;
            const end = Math.min(start + currentShown - 1, totalItems);

            document.getElementById('currentItemsShowing').textContent = totalItems === 0 ? 0 : start;
            document.getElementById('totalItemsShowing').textContent = end;
            document.getElementById('totalItems').textContent = totalItems;

            document.getElementById('prevPageBtn').disabled = currentPage === 1;
            document.getElementById('nextPageBtn').disabled = end >= totalItems;
        }

        function escapeHTML(str) {
            return str.replace(/</g, "&lt;").replace(/>/g, "&gt;");
        }

        document.getElementById('prevPageBtn').addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                fetchPurchaseOrders();
            }
        });

        document.getElementById('nextPageBtn').addEventListener('click', () => {
            currentPage++;
            fetchPurchaseOrders();
        });

        document.getElementById('searchInput').addEventListener('input', function () {
            searchQuery = this.value.trim();
            currentPage = 1;
            fetchPurchaseOrders();
        });

        window.onload = () => {
            fetchPurchaseOrders();
        };

        function showProduct(id) {
            alert('Show purchase ID: ' + id);
        }

        function editPurchase(id) {
            window.location.href = `/purchase/${id}/edit`;
        }

        function deletePurchaseOrder(id) {
            Swal.fire({
                title: 'Are you sure?',
                text: "This will permanently delete the product.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!',
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(`/purchase/${id}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        }
                    })
                        .then(res => res.json())
                        .then(data => {
                            Swal.fire('Deleted!', data.message, 'success');
                            fetchPurchaseOrders(); // Refresh table
                        });
                }
            });
        }

    </script>
@endpush