@extends('layouts.app')

@section('title', 'Stock Report')

@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">
            <span class="text-gray-500">Stock Report</span>
        </nav>

        <div class="flex items-center space-x-2">
            <button id="filterBtn"
                    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>
                Filter
            </button>
            <button id="downloadBtn"
                    class="flex items-center text-xs font-medium text-white border border-blue-600 px-3 py-1.5 rounded-md bg-blue-600 hover:bg-blue-700 transition">
                <span class="mr-1.5">⬇️</span>
                Download
            </button>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-sm mt-4">
        <!-- Filter Section -->
        <div class="px-4 py-3 border-b border-gray-200 grid grid-cols-1 sm:grid-cols-4 gap-3">
            <div>
                <label for="productFilter" class="block text-xs font-medium text-gray-600 mb-1">Product</label>
                <select id="productFilter" class="border rounded px-3 py-1 w-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All Products</option>
                    @foreach($products as $product)
                        <option value="{{ $product->id }}">{{ $product->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label for="startDate" class="block text-xs font-medium text-gray-600 mb-1">Start Date</label>
                <input id="startDate" type="date" class="border rounded px-3 py-1 w-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <div>
                <label for="endDate" class="block text-xs font-medium text-gray-600 mb-1">End Date</label>
                <input id="endDate" type="date" class="border rounded px-3 py-1 w-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto">
            <table class="custom-datatable w-full" role="table" aria-label="Stock Report Table">
                <thead class="bg-gray-100 text-left text-sm text-gray-600">
                <tr>
                    <th class="px-6 py-3">Date</th>
                    <th class="px-6 py-3">Product</th>
                    <th class="px-6 py-3">Warehouse</th>
                    <th class="px-6 py-3">Opening Stock</th>
                    <th class="px-6 py-3">In</th>
                    <th class="px-6 py-3">Out</th>
                    <th class="px-6 py-3">Closing Stock</th>
                </tr>
                </thead>
                <tbody id="reportTableBody" class="text-sm text-gray-700 divide-y divide-gray-200">
                <!-- Filled via JS -->
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <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;

        async function fetchStockReport() {
            const productId = document.getElementById('productFilter').value;
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;

            const start = (currentPage - 1) * itemsPerPage;
            const url = new URL('/inventory/getstockreport', window.location.origin);
            url.searchParams.append('start', start);
            url.searchParams.append('length', itemsPerPage);
            url.searchParams.append('draw', currentPage);

            if (productId) url.searchParams.append('product_id', productId);
            if (startDate) url.searchParams.append('start_date', startDate);
            if (endDate) url.searchParams.append('end_date', endDate);

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

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

        function renderStockReportTable(rows) {
            const body = document.getElementById('reportTableBody');
            body.innerHTML = '';

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

            rows.forEach(row => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                <td class="px-6 py-3">${row.date || '-'}</td>
                <td class="px-6 py-3">${row.product_name || '-'}</td>
                <td class="px-6 py-3">${row.warehouse_name || '-'}</td>
                <td class="px-6 py-3">${row.opening_stock ?? '-'}</td>
                <td class="px-6 py-3">${row.stock_in ?? 0}</td>
                <td class="px-6 py-3">${row.stock_out ?? 0}</td>
                <td class="px-6 py-3">${row.closing_stock ?? '-'}</td>
            `;
                body.appendChild(tr);
            });
        }

        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;
        }

        document.getElementById('filterBtn').addEventListener('click', () => {
            currentPage = 1;
            fetchStockReport();
        });

        document.getElementById('downloadBtn').addEventListener('click', () => {
            const productId = document.getElementById('productFilter').value;
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;

            const url = new URL('/inventory/downloadstockreport', window.location.origin);
            if (productId) url.searchParams.append('product_id', productId);
            if (startDate) url.searchParams.append('start_date', startDate);
            if (endDate) url.searchParams.append('end_date', endDate);

            window.location.href = url; // triggers file download
        });

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

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

        window.onload = () => fetchStockReport();
    </script>
@endpush