@extends('layouts.admin')
@section('title', 'Stock Report | Mintavia Admin')


@section('content')
    <div class="row">
        <div class="col-12">
            @if (isset($message) && $message)
                @switch($message['status'])
                    @case('success')
                        <script>
                            window.onload = function() {
                                toastr.success("{{ $message['message'] }}")
                            }
                        </script>
                    @break

                    @case('error')
                        <script>
                            window.onload = function() {
                                toastr.error("{{ $message['message'] }}")
                            }
                        </script>
                    @break
                @endswitch
            @endif
            <div class="card card-primary" wire:init="loadPosts">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Stock Report List</h3>

                </div>
                <div class="card-body">
                    <form class="" id="filter" method="post" action="{{ route('admin.reports.stockreport') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-1">
                                <x-admin-input type="date" name="fromDate" id="from-date"
                                    value="{{ old('fromDate', $first_date) }}"></x-admin-input>
                            </div>
                            <div class="col-md-1">
                                <x-admin-input type="date" name="toDate" id="to-date"
                                    value="{{ old('toDate', $end_date) }}"></x-admin-input>
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-success">OK</button>
                                <button type="button" class="btn btn-primary"
                                    onclick="window.open('{{ route('admin.reports.stockreport.print') }}?fromDate={{ $first_date }}&toDate={{ $end_date }}&item={{ $item ?? '' }}&part_no={{ $part_no ?? '' }}&brand={{ $brand ?? '' }}', '_blank')">
                                    Print
                                </button>

                                <button type="button" class="btn btn-secondary">Excel</button>
                            </div>
                            <div class="col-2">
                                <input type="text" name="item" class="search-query form-control" placeholder="Item"
                                    value="{{ old('item', $item ?? '') }}" />
                            </div>
                            <div class="col-2">
                                <input type="text" name="part_no" class="search-query form-control" placeholder="Part No"
                                    value="{{ old('part_no', $part_no ?? '') }}" />
                            </div>
                            <div class="col-2">
                                <input type="text" name="brand" class="search-query form-control" placeholder="Brand"
                                    value="{{ old('brand', $brand ?? '') }}" />
                            </div>
                            <div class="col-md-1">
                                <button id="toggle-all" class="btn btn-info">Expand</button>
                            </div>
                        </div>
                    </form>
                    <div class="table-responsive mt-1" style="max-height: 400px; overflow-y: auto;">
                        <table class="table table-sm table-striped table-bordered"
                            style="border-collapse: collapse; width: 100%;">
                            <thead style="position: sticky; top: 0; z-index: 1; background-color: white;">
                                <tr>
                                    <th style="white-space: nowrap;">Description</th>
                                    <th style="white-space: nowrap;">Part No</th>
                                    <th style="white-space: nowrap;">Op. Qty</th>
                                    <th style="white-space: nowrap;">Op. Alt Qty</th>
                                    <th style="white-space: nowrap;">Op. Val</th>
                                    <th style="white-space: nowrap;">Pr. Qty</th>
                                    <th style="white-space: nowrap;">Pr. Alt Qty</th>
                                    <th style="white-space: nowrap;">Pr. Val</th>
                                    <th style="white-space: nowrap;">Sale Qty</th>
                                    <th style="white-space: nowrap;">Sale Alt Qty</th>
                                    <th style="white-space: nowrap;">Sale Val</th>
                                    <th style="white-space: nowrap;">Cl. Qty</th>
                                    <th style="white-space: nowrap;">Cl. Alt</th>
                                    <th style="white-space: nowrap;">Cl. Val</th>

                                </tr>
                            </thead>
                            <tbody id="table-list">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script>
        document.querySelector(".btn-secondary").addEventListener("click", function() {
            // Get table HTML
            let table = document.querySelector("#table-list").parentElement; // The parent div contains the table
            let tableHTML = table.outerHTML.replace(/ /g, '%20');

            // Specify file name
            let filename = "stock_report.xls";

            // Create a download link
            let downloadLink = document.createElement("a");
            document.body.appendChild(downloadLink);

            downloadLink.href = 'data:application/vnd.ms-excel,' + tableHTML;
            downloadLink.download = filename;
            downloadLink.click();
            document.body.removeChild(downloadLink);
        });
    </script>
    <script>
        let stockData = [];
        let allExpanded = false;

        function renderTable() {
            const table = document.getElementById("table-list");
            table.innerHTML = "";

            let total = {
                opQty: 0,
                opAltQty: 0,
                opVal: 0,
                purQty: 0,
                purAltQty: 0,
                purVal: 0,
                salQty: 0,
                salAltQty: 0,
                salVal: 0,
                clQty: 0,
                clVal: 0,
                clAltQty: 0,
            };

            stockData.forEach((row, index) => {
                // Add to totals
                total.opQty += parseFloat(row.opQty) || 0;
                total.opAltQty += parseFloat(row.opAltQty) || 0;
                total.opVal += parseFloat(row.opVal) || 0;
                total.purQty += parseFloat(row.purQty) || 0;
                total.purAltQty += parseFloat(row.purAltQty) || 0;
                total.purVal += parseFloat(row.purVal) || 0;
                total.salQty += parseFloat(row.salQty) || 0;
                total.salAltQty += parseFloat(row.salAltQty) || 0;
                total.salVal += parseFloat(row.salVal) || 0;
                total.clQty += parseFloat(row.clQty) || 0;
                total.clAltQty += parseFloat(row.clAltQty) || 0;
                total.clVal += parseFloat(row.clVal) || 0;


                // Main Row
                const mainRow = document.createElement("tr");
                mainRow.innerHTML = `
            <td>${row.item_name}</td>
            <td>${row.product_part_no}</td>
            <td>${row.opQty}</td>
            <td>${row.opAltQty}</td>
            <td>${row.opVal}</td>
            <td>${row.purQty}</td>
            <td>${row.purAltQty}</td>
            <td>${row.purVal}</td>
            <td>${row.salQty}</td>
            <td>${row.salAltQty}</td>
            <td>${row.salVal}</td>
            <td>${row.clQty}</td>
             <td>${row.clAltQty}</td>
            <td>${row.clVal}</td>
           
        `;
                table.appendChild(mainRow);

                // Detail Rows
                if (allExpanded) {
                    row.items.forEach(item => {
                        const detailRow = document.createElement("tr");
                        detailRow.classList.add("table-info");
                        detailRow.innerHTML = `
                    <td>${item.product_name}</td>
                    <td>${item.barcode}</td>
                    <td>${item.opQty ?? '-'}</td>
                    <td>${item.opAltQty ?? '-'}</td>
                    <td>${item.opVal ?? '-'}</td>
                    <td>${item.purQty ?? '-'}</td>
                    <td>${item.purAltQty ?? '-'}</td>
                    <td>${item.purVal ?? '-'}</td>
                    <td>${item.salQty ?? '-'}</td>
                    <td>${item.salAltQty ?? '-'}</td>
                    <td>${item.salVal ?? '-'}</td>
                    <td>${item.clQty ?? '-'}</td>
                    <td>${item.clAltQty ?? '-'}</td>
                    <td>${item.clVal ?? '-'}</td>
                    
                `;
                        table.appendChild(detailRow);
                    });
                }
            });

            // Totals Row
            const totalRow = document.createElement("tr");
            totalRow.classList.add("table-success"); // Optional: green background for total
            totalRow.innerHTML = `
                        <td colspan="2"><strong>Total</strong></td>
                        <td><strong>${total.opQty}</strong></td>
                        <td><strong>${total.opAltQty}</strong></td>
                        <td><strong>${total.opVal.toFixed(2)}</strong></td>
                        <td><strong>${total.purQty}</strong></td>
                        <td><strong>${total.purAltQty}</strong></td>
                        <td><strong>${total.purVal.toFixed(2)}</strong></td>
                        <td><strong>${total.salQty}</strong></td>
                        <td><strong>${total.salAltQty}</strong></td>
                        <td><strong>${total.salVal.toFixed(2)}</strong></td>
                        <td><strong>${total.clQty}</strong></td>
                        <td><strong>${total.clAltQty}</strong></td>
                        <td><strong>${total.clVal.toFixed(2)}</strong></td>
                        
                    `;
            table.appendChild(totalRow);

            // Update button label
            document.getElementById("toggle-all").innerText = allExpanded ? "Collapse All" : "Expand All";
        }


        // Button click toggle
        document.getElementById("toggle-all").addEventListener("click", function() {
            allExpanded = !allExpanded;
            renderTable();
        });

        // Fetch table data
        async function fetchStockData() {
            const formData = new FormData(document.getElementById("filter"));
            const response = await fetch("{{ route('admin.reports.stockreport') }}", {
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                body: formData
            });

            stockData = await response.json();
            renderTable();
        }

        // Submit filter form
        document.getElementById("filter").addEventListener("submit", function(e) {
            e.preventDefault();
            fetchStockData();
        });

        // Load on page load
        window.onload = fetchStockData;
    </script>

@endsection