@extends('layouts.main')
@section('title', $data['title'])
@section('content')

    <style type="text/css">
        @media print {

            thead,
            tfoot {
                display: none !important
            }

            @page {
                size: 'a4';
                margin: 0mm;
            }
        }

        li.list-inline-item.px-2 {
            padding-left: 0 !important;
        }

        #div_start_end_datepicker .form-group.col-6:first-child {
            padding-right: 30px;
        }

        .order-detail {
            text-align: center;
            vertical-align: middle;
        }

        .order-detail .mb-0.mt-1.fw-bold {
            line-height: 1;
        }

        .input-group.date .input-group-text {
            height: 100%;
            /* Match the height of the input box */
            display: flex;
            align-items: center;
            /* Center the icon vertically */
            padding: 0 10px;
            /* Add padding to make it look consistent */
            border-radius: 0 0.25rem 0.25rem 0;
            /* Optional: Make sure it matches input's border-radius */
            cursor: pointer;
            /* Indicate the icon is clickable */
        }

        .input-group.date .form-control {
            border-radius: 0.25rem 0 0 0.25rem;
            /* Adjust input's border-radius for consistency */
        }

        #datePickerModal {
            align-content: center;
        }

        /* .page-content {
                                                                                                                                                                                                     padding: calc(50px + 24px) calc(24px / 2) 60px calc(24px / 2)
                                                                                                                                                                                                            } */

        .datepicker table {
            /* font-family: Arial, Helvetica, sans-serif; */
            font-family: 'Montserrat', sans-serif !important;
            width: 100%;
            color: #495057;
            border-spacing: 0;
            border-collapse: collapse;
            font-size: 14px;
        }



        #datatable thead th:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        #datatable thead th:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;

        }

        #datatable thead th {
            color: #000;
            font-size: 13px;
            text-align: center;
            padding: 12px;
            font-weight: 600;
            /* font-family: 'Almarose Semibold', sans-serif; */
            font-family: 'Montserrat', sans-serif !important;
            /* background-color: rgb(225 232 242) !important; */
            background-color: #F1F4F9;
            border-bottom: none;
        }

        #datatable tbody td {
            font-size: 14px;
            font-family: 'Montserrat', sans-serif !important;
            text-align: center;
            background-color: #fff !important;
            color: #000;
            /* border-top: 1px solid #e5e9f2; */
        }

        #datatable_filter input {
            height: 36px;
            font-size: 12px;
        }

        .title-row {
            font-size: 22px;
            font-weight: bold;
            color: #333;
        }

        .form-control-sm {
            padding: 0px 11px !important;

        }

        @media (max-width:1743px) {
            #datatable_filter input {
                width: 360px;
            }


        }

        @media (max-width:1643px) {
            #datatable_filter input {
                width: 400px;
            }


        }

        @media (max-width:1543px) {
            #datatable_filter input {
                width: 340px;
            }


        }

        @media (max-width:1384px) {
            #datatable_filter input {
                width: 270px;
            }


        }

        @media (max-width:1343px) {
            #datatable_filter input {
                width: 254px;
            }


        }

        @media (max-width:1283px) {
            #datatable_filter input {
                width: 240px;
            }


        }

        @media (max-width:1264px) {
            #datatable_filter input {
                width: 200px;
            }


        }

        @media (max-width:1223px) {
            #datatable_filter input {
                width: 200px;
            }


        }

        @media (max-width:1184px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: 16px !important; */

            }

        }

        @media (max-width:1156px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: 5px !important; */

            }

        }

        @media (max-width:1134px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: -10px !important; */

            }

        }


        @media (max-width:1106px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: -20px !important; */

            }

        }

        @media (max-width:1084px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: -30px !important; */

            }

        }


        @media (max-width:1063px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: -40px !important; */

            }

        }

        @media (max-width:1043px) {
            #datatable_filter input {
                width: 200px;
                /* margin-left: 2px !important; */

            }

        }



        @media (max-width: 992px) {
            .vertical-menu {
                transform: translateX(-100%);
            }

            .vertical-menu.open {
                transform: translateX(0);
            }
        }

        .btn-primary {
            background-color: #408dfb;
            border: none;
            border-radius: 10px;
        }

        .clicked-border {
            animation: pulse 0.5s ease-in-out;
        }

        .clicked-border {
            border: 3px solid #dadada !important;
            border-radius: 5px;
            transform: scale(0.98);
            transition: transform 0.2s ease, border-color 0.2s ease;
        }

        .modal-header {
            padding: 0px 7px;
        }

        #modal-title {
            color: #3751A1;
            font-weight: bold;
        }

        #calendar-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            color: #3751A1;
            pointer-events: none;
            /* Prevents icon from being clickable */
        }

        #datatable_wrapper .row {
            align-items: center;
        }
    </style>

    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <!-- Filter Section -->
                            <div class="row g-3 pb-3 align-items-end border-bottom" id="filter_div">
                                <div class="col-12 col-md-6 col-lg-3">
                                    <div class="ajax-select">
                                        <label for="group_id" class="form-label">Group</label>
                                        <select class="form-select" id="group_id" name="group_id" required></select>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-3">
                                    <div class="ajax-select">
                                        <label for="category_id" class="form-label">Category</label>
                                        <select class="form-select" id="category_id" name="category_id" required></select>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-3">
                                    <label class="form-label invisible">Action</label>
                                    <div class="d-flex gap-2">
                                        <a href="javascript:void(0)" class="btn btn-primary flex-fill text-nowrap"
                                            onclick="createPurchaseOrder()">Purchase Order</a>
                                        <a href="javascript:void(0)" class="btn btn-primary flex-fill text-nowrap"
                                            onclick="createSalesOrder()">Sales Order</a>
                                    </div>
                                </div>
                            </div>


                            <!-- Tables Section -->
                            <div class="row pt-4">
                                <!-- Main DataTable -->
                                <div class="col-12 col-xl-7">

                                    <div id="Grid" class="ag-theme-quartz" style="height: 580px;"></div>
                                </div>

                                <!-- Reports Section -->
                                <div class="col-12 col-xl-5">
                                    <!-- Group Wise Report -->
                                    <div class="text-center bg-light">
                                        <h5 class="mb-0 p-2">Group Wise Report</h5>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-hover border border-dark rounded" id="datatable2"
                                            style="width: 100%; !important;">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Group</th>
                                                    <th class="text-center">Weight</th>
                                                    <th class="text-center">Amount</th>
                                                    <th class="text-center">Qty</th>
                                                    <th class="text-center">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>

                                    <!-- Category Wise Report -->
                                    <div class="text-center bg-light mt-4">
                                        <h5 class="mb-0 p-2">Category Wise Report</h5>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-hover border border-dark rounded" id="datatable1"
                                            style="width: 100%; !important;">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Category</th>
                                                    <th class="text-center">Weight</th>
                                                    <th class="text-center">Amount</th>
                                                    <th class="text-center">Qty</th>
                                                    <th class="text-center">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- end row -->
        </div> <!-- container-fluid -->
    </div> <!-- page-content -->

    <!-- End Page-content -->
@endsection('content')
@section('custom-scripts')


    <script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
    <script src="{{ asset('assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
    {{-- <script src="{{ asset('assets/css/font.css') }}"></script> --}}
    <script src="{{ asset('assets/libs/kendo/kendo.all.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise@33.2.1/dist/ag-grid-enterprise.min.js"></script>

    <script type="text/javascript">
        var order_id = 0;
        var ajaxURLSearchGroup = "{{ route('search.group') }}";
        var ajaxURLSearchCategory = "{{ route('search.category') }}";
        var ajaxLiveStockData = @json(route('live.stock.report.data'));
        var ajaxCategoryWiseLiveStockData = "{{ route('category.wise.live.stock.report') }}";
        var ajaxGroupWiseLiveStockData = "{{ route('group.wise.live.stock.report') }}";
        var ajaxDataStoreInSession = "{{ route('data.store.in.session') }}";
        var csrfToken = $("[name=_token").val();
        var usersPageLength = getCookie('usersPageLength') !== undefined ? getCookie('usersPageLength') : 10;
        var selectedRows = [];
        $(document).ready(function() {


            $('#select_all').on('click', function() {
                var isChecked = $(this).is(':checked');
                $('.row-checkbox').each(function() {
                    var rowId = $(this).val();
                    if (isChecked) {
                        $(this).prop('checked', true);
                        if (!selectedRows.includes(rowId)) {
                            selectedRows.push(rowId);
                        }
                    } else {
                        $(this).prop('checked', false);
                        selectedRows = selectedRows.filter(id => id !== rowId);
                    }
                });
            });

            $('#Gris').on('change', '.row-checkbox', function() {
                var rowId = $(this).val();
                if ($(this).is(':checked')) {
                    if (!selectedRows.includes(rowId)) {
                        selectedRows.push(rowId);
                    }
                } else {
                    selectedRows = selectedRows.filter(id => id !== rowId);
                    $('#select_all').prop('checked', false);
                }

                if ($('.row-checkbox:checked').length === $('.row-checkbox').length) {
                    $('#select_all').prop('checked', true);
                }
            });
        });

        const filterParams = {
            comparator: (a, b) => {
                const valA = a == null ? 0 : parseFloat(a);
                const valB = b == null ? 0 : parseFloat(b);
                return valA - valB;
            }
        };

        function getColumnDefs() {
            return [{
                    headerName: '',
                    field: "checkbox",
                    width: 30,
                    headerComponent: function() {
                        function CustomHeaderCheckbox() {}

                        CustomHeaderCheckbox.prototype.init = function(params) {
                            this.params = params;
                            this.eGui = document.createElement('div');
                            this.eGui.innerHTML = `
                            <input type="checkbox" id="select_all" class="form-check-input" />`;

                            const checkbox = this.eGui.querySelector('#select_all');

                            checkbox.addEventListener('click', function() {
                                const isChecked = checkbox.checked;
                                $('.row-checkbox').each(function() {
                                    $(this).prop('checked', isChecked).trigger('change');
                                });
                            });
                        };

                        CustomHeaderCheckbox.prototype.getGui = function() {
                            return this.eGui;
                        };

                        return new CustomHeaderCheckbox();
                    },
                    cellRenderer: (params) => {
                        const row = params.data;
                        if (!row || !row.item_id) return '';

                        const isChecked = selectedRows.includes(row.label_no) ? 'checked' : '';
                        return `
                           <input type="checkbox"
                            class="form-check-input row-checkbox"
                            data-id="${row.label}"
                            data-item-name="${row.item_name}"
                            id="checkbox_${row.label}"
                            value="${row.item_id}"
                            ${isChecked} />`;
                    },
                    minWidth: 50,
                    maxWidth: 50,
                    suppressSizeToFit: true,
                    sortable: false,
                    filter: false,
                    resizable: true
                },
                {
                    headerName: "Label",
                    field: "label_no",
                    filter: "agNumberColumnFilter",
                    filterParams
                },
                {
                    headerName: "Group",
                    field: "group_name",
                    filter: "agSetColumnFilter",
                    filterParams
                },
                {
                    headerName: "Category",
                    field: "category_name",
                    filter: "agSetColumnFilter",
                    filterParams
                },
                {
                    headerName: "Item Name",
                    field: "item_name",
                    filter: "agSetColumnFilter",
                    filterParams
                },
                {
                    headerName: "Status",
                    field: "status",
                    filter: "agSetColumnFilter",

                    cellRenderer: (params) => {
                        return params.value || '';
                    },
                },
                {
                    headerName: "Weight",
                    field: "gross_weight",
                    filter: "agNumberColumnFilter",
                    filterParams
                },
                {
                    headerName: "Amount",
                    field: "net_amount",
                    filter: "agNumberColumnFilter",
                    filterParams,
                    cellRenderer: (params) => {
                        return params.value || '';
                    },
                    cellRendererParams: {
                        suppressHtmlEscaping: true
                    }
                },
            ];
        }


        const gridOptions = {
            columnDefs: getColumnDefs(),
            defaultColDef: {
                flex: 1,
                floatingFilter: true,
                minWidth: 200,
                filter: true,
                resizable: true,
                sortable: true
            },
            rowData: null,
            sideBar: "filters",
            onGridReady: (params) => {
                gridApi = params.api;
                params.api.closeToolPanel();
                loadData();
            },
            getRowStyle: params => {
                if (params.node.rowPinned || params.data?.isTotal) {
                    return {
                        fontWeight: 'bold',
                        backgroundColor: '#f8f9fa',
                        borderTop: '2px solid #dee2e6',
                        position: fixed,
                    };
                }
                return null;
            },
            getRowStyle: params => {
                if (
                    params.data?.group_name === "Total" ||
                    params.data?.category_name === "Total" ||
                    params.data?.item_name === "Total"
                ) {
                    return {
                        fontWeight: 'bold',
                        backgroundColor: '#f8f9fa',
                        borderTop: '2px solid #dee2e6',
                    };
                }
                return null;
            },
        };

        function loadData() {
            const postData = {
                group_id: $('#group_id').val(),
                category_id: $('#category_id').val(),
            };

            fetch(ajaxLiveStockData, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify(postData)
                })
                .then(res => res.json())
                .then(res => {
                    const rowData = res.data;
                    const numericFields = ["gross_weight", "net_amount"];
                    const totalRow = {
                        isTotal: true,
                        group_name: "Total"
                    };
                    numericFields.forEach(field => {
                        const total = rowData.reduce((sum, row) => {
                            let value = row[field];

                            // Remove commas and parse
                            if (typeof value === 'string') {
                                value = value.replace(/,/g, '');
                            }

                            const num = parseFloat(value);
                            return sum + (isNaN(num) ? 0 : num);
                        }, 0);

                        totalRow[field] = total.toFixed(2);
                    });

                    const combinedData = [...rowData, totalRow];
                    gridApi.setGridOption('rowData', combinedData);
                })
                .catch(error => console.error("Data load failed", error));
        }

        $(document).ready(function() {
            const gridDiv = document.querySelector("#Grid");
            agGrid.createGrid(gridDiv, gridOptions);
        });

        $("#datatable1").DataTable({
            processing: true,
            serverSide: true,
            paging: false,
            searching: false,
            info: false,
            ajax: {
                url: ajaxCategoryWiseLiveStockData,
                type: "POST",
                data: function(d) {
                    d._token = csrfToken;
                },
                dataSrc: function(json) {
                    return json.data || [];
                }
            },
            columns: [{
                    data: 'category_name',
                },
                {
                    data: 'gross_weight',
                },
                {
                    data: 'net_amount',
                },
                {
                    data: 'total_available',
                },
                {
                    data: 'status',
                }
            ],
            order: [
                [0, 'desc']
            ],
        });

        $("#datatable2").DataTable({
            processing: true,
            serverSide: true,
            paging: false,
            searching: false,
            info: false,
            ajax: {
                url: ajaxGroupWiseLiveStockData,
                type: "POST",
                data: function(d) {
                    d._token = csrfToken;
                },
                dataSrc: function(json) {
                    return json.data || [];
                }
            },
            columns: [{
                    data: 'group_name',
                },
                {
                    data: 'gross_weight',
                },
                {
                    data: 'net_amount',
                },
                {
                    data: 'total_available',
                },
                {
                    data: 'status',
                }
            ],
            order: [
                [0, 'desc']
            ],
        });

        $("#category_id").select2({
            allowClear: true,ajax: {
                url: ajaxURLSearchCategory,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        q: params.term,
                        page: params.page,
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    var results = data.results.map(function(company) {
                        return {
                            id: company.id,
                            text: company.text
                        };
                    });
                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Select Category',
        }).on('change', function(e) {
            loadData();
        });

        $("#group_id").select2({
            allowClear: true,ajax: {
                url: ajaxURLSearchGroup,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        q: params.term,
                        page: params.page,
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    var results = data.results.map(function(company) {
                        return {
                            id: company.id,
                            text: company.text
                        };
                    });
                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Select Group',
        }).on('change', function(e) {
            loadData();
        });

        function createPurchaseOrder() {
            var selectedItems = [];

            $('.row-checkbox:checked').each(function() {
                var row = $(this).closest('tr');
                var labelNo = row.find('td:nth-child(2)').text().trim();
                var itemId = $(this).val();
                var itemName = $(this).data('item-name');
                var qty = 1

                if (!isNaN(qty)) {
                    var existingItem = selectedItems.find(item => item.item_id === itemId);
                    if (existingItem) {
                        existingItem.qty += qty;
                    } else {
                        selectedItems.push({
                            item_id: itemId,
                            item_name: itemName,
                            qty: qty
                        });
                    }
                }
            });

            if (selectedItems.length === 0) {
                toastr["error"]('Please select at least one item to create a purchase order.');
            } else {
                localStorage.clear();
                localStorage.setItem("selectedItems", JSON.stringify(selectedItems));
                window.location.href = "{{ route('purchase.add') }}";
            }
        }

        function createSalesOrder() {
            var selectedRows = [];
            var hasUnavailableItems = false;

            $('.row-checkbox:checked').each(function() {
                const $checkbox = $(this);
                const itemId = $checkbox.val();
                const itemName = $checkbox.data('item-name');
                const labelNo = $checkbox.data('id');

                // Use ag-Grid API to get the actual row data by label or item ID
                const rowNode = gridApi.getDisplayedRowAtIndex(
                    $checkbox.closest('.ag-row').index()
                );
                const rowData = rowNode?.data;

                if (!rowData) return;

                // Convert HTML status to plain text safely
                const statusText = $('<div>').html(rowData.status).text().trim().toLowerCase();

                if (statusText === 'available') {
                    selectedRows.push({
                        item_id: itemId,
                        item_name: itemName,
                        label_no: labelNo,
                        qty: 1
                    });
                } else {
                    hasUnavailableItems = true;
                }
            });

            if (hasUnavailableItems) {
                toastr["error"](
                    'Some selected items have a status of "sold". Please select only items with "available" status.');
                return;
            }

            if (selectedRows.length === 0) {
                toastr["error"]('Please select at least one item with "available" status to create a sales order.');
            } else {
                localStorage.clear();
                localStorage.setItem("salesItem", JSON.stringify(selectedRows));
                console.log(JSON.parse(localStorage.getItem("salesItem")));
                window.location.href = "{{ route('sales.order.add') }}";
            }
        }
    </script>
@endsection