@extends('Branch.layout')

@section('content')

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Out Of Stock</h5>
        </div>
        <div class="col-auto d-flex gap-2">
            <button class="btn btn-label-secondary" id="printBtn">Print</button>
            <button class="btn btn-label-secondary" id="exportBtn">Export</button>
        </div>
    </div>

    <div class="card p-0 m-2">

        <div class="row mb-3 align-items-center p-3 g-2">

            <div class="col-md-2 col-sm-4">
                <select id="pageLength" class="form-select">
                    <option value="10" selected>10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>

            <div class="col-md-3 ms-auto">
                <input type="text" id="customSearch" class="form-control" placeholder="Search product">
            </div>

        </div>

        <div class="table-responsive p-3">

            <table class="table table-bordered table-striped align-middle w-100" id="usersTable">

                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Product ID</th>
                        <th>Item Name</th>
                        <th>Quantity</th>
                    </tr>
                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function () {

            console.log('Out of stock page loaded');

            const ajaxUrl = @json(route('branch.out_of_stock_data'));

            console.log('DataTable AJAX URL:', ajaxUrl);

            let table = $('#usersTable').DataTable({

                processing: true,
                serverSide: true,
                responsive: true,
                searching: true,
                lengthChange: false,

                pageLength: 10,

                ajax: {
                    url: ajaxUrl,
                    type: 'GET',

                    beforeSend: function (xhr, settings) {
                        console.log('Sending DataTable request');
                        console.log('Request URL:', settings.url);
                        console.log('Request method:', settings.type);
                    },

                    dataSrc: function (response) {
                        console.log('DataTable response:', response);

                        if (!response || !Array.isArray(response.data)) {
                            console.error('Invalid DataTable response:', response);
                            return [];
                        }

                        return response.data;
                    },

                    error: function (xhr, textStatus, errorThrown) {
                        console.error('DataTable AJAX error');
                        console.error('HTTP status:', xhr.status);
                        console.error('Text status:', textStatus);
                        console.error('Error:', errorThrown);
                        console.error('Response text:', xhr.responseText);
                        console.error('Response JSON:', xhr.responseJSON);

                        let message = 'Failed to load out of stock products.';

                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }

                        alert(
                            message +
                            '\nHTTP Status: ' + xhr.status +
                            '\nCheck browser console for full error.'
                        );
                    }
                },

                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false,
                        defaultContent: ''
                    },
                    {
                        data: 'product_id',
                        name: 'product_id',
                        defaultContent: '-'
                    },
                    {
                        data: 'item_name',
                        name: 'product_name',
                        defaultContent: '-'
                    },
                    {
                        data: 'quantity',
                        name: 'stock',
                        orderable: false,
                        searchable: false,
                        defaultContent: '<span class="badge bg-danger">0</span>'
                    }
                ],

                order: [],

                language: {
                    processing: 'Loading...',
                    emptyTable: 'No out of stock products found',
                    zeroRecords: 'No matching products found'
                }
            });

            $('#customSearch').on('keyup input', function () {
                console.log('Search value:', this.value);
                table.search(this.value).draw();
            });

            $('#pageLength').on('change', function () {
                const pageLength = parseInt(this.value, 10);

                console.log('Page length changed:', pageLength);

                table.page.len(pageLength).draw();
            });

            $('#exportBtn').on('click', function () {
                let searchTerm = $('#customSearch').val() || '';
                let url = "{{ route('branch.out_of_stock_export') }}";
                if (searchTerm) url += "?search=" + encodeURIComponent(searchTerm);
                window.location.href = url;
            });

            $('#printBtn').on('click', function () {
                let searchTerm = $('#customSearch').val() || '';
                let url = "{{ route('branch.out_of_stock_print') }}";
                if (searchTerm) url += "?search=" + encodeURIComponent(searchTerm);
                window.open(url, '_blank');
            });

        });
    </script>

@endsection