@extends("newDashboard.index")

@section("css")
    <link rel="stylesheet" href="{{asset('metronic/css/data-table.css')}}">
    <style>
        .child-table, .details-table {
            padding: 0 !important;
            margin: 0;
            width: 100%;
        }
        
        .level-header {
            background-color: #e9ecef;
            padding: 10px 15px;
            margin-bottom: 10px;
            font-weight: bold;
            border-radius: 4px;
        }
        
        .level-header, .inventories-table th, .item-categories-table th, .items-table th, .details-table th {
            color: black !important; 
        }

        .inventories-table th, .item-categories-table th, .items-table th, .details-table th {
            background-color: #f8f9fa !important; 
        }
        
        .level-header.level-2 {
            background-color: #e9ecef;
        }
        
        .level-header.level-3 {
            background-color: #e9ecef;
        }
        
        .level-header.level-4 {
            background-color: #e9ecef;
        }
        
        .level-header.level-5 {
            background-color: #e9ecef;
        }
        
        .view-details-btn, .view-category-btn, .view-inventory-btn, 
        .view-item-category-btn, .view-item-details-btn {
            cursor: pointer;
        }
        
        #categories-table,
        .inventories-table,
        .item-categories-table,
        .items-table,
        .details-table table {
            width: 100% !important;
            margin: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
        }
        
        .child-table > td,
        .details-table > td {
            padding: 0 !important;
            border: none !important;
            width: 100% !important;
        }
        
        .child-table > td > div,
        .details-table > td > div {
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        .table-responsive.customscroll,
        .child-table .table-responsive,
        .details-table .table-responsive {
            margin: 0 !important;
            width: 100% !important;
            overflow-x: auto !important;
        }
        
        .child-table .level-header,
        .details-table .level-header {
            margin: 10px 15px !important;
            width: calc(100% - 30px) !important;
        }

        .print-all-data-button {
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .select-checkbox {
            cursor: pointer;
            transform: scale(1.2);
        }
    </style>
@endsection

@section("main-content")
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-warehouse menu-icon"></i>
                </span> {{__('messages.Inventory Items Report')}}
            </h3>
        </div>
        
        <div class="row">
            <div id="success_message"></div>
            <input type="hidden" id="categories-route" value="{{ route('inventory-items-report.get-categories') }}" />
            <input type="hidden" id="inventories-route" value="{{ route('inventory-items-report.get-inventories-by-category') }}" />
            <input type="hidden" id="item-categories-route" value="{{ route('inventory-items-report.get-item-categories') }}" />
            <input type="hidden" id="items-route" value="{{ route('inventory-items-report.get-items') }}" />
            <input type="hidden" id="details-route" value="{{ route('inventory-items-report.get-details') }}" />
            <input type="hidden" id="print-all-route" value="{{ route('inventory-items-report.print-all') }}" />
            <input type="hidden" id="print-selected-route" value="{{ route('inventory-items-report.print-selected') }}" />
            
            <div class="table-responsive customscroll">
                <table class="table datatable text-center" id="categories-table">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="select-all-categories" class="select-checkbox"></th>
                            <th>{{__('messages.ID')}}</th>
                            <th>{{__('messages.Category Name')}}</th>
                            <th>{{__('messages.Inventories Count')}}</th>
                            <th>{{__('messages.View Details')}}</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <div class="col-12 text-center">
                <button class="btn btn-primary print-all-data-button" id="print-all-btn">
                    <i class="fa-solid fa-print"></i> {{__('messages.Print All Data')}}
                </button>
            </div>
        </div>
    </div>
@endsection

@section("scripts")
    <script>
        const authenticatedUserName = `{{ Auth::user()->name ?? __('Guest') }}`;
        var translations = {
            'Category Name': '{{ __("messages.Category Name") }}',
            'Inventories in': '{{ __("messages.Inventories in") }}',
            'Item Categories in': '{{ __("messages.Item Categories in") }}',
            'Items in': '{{ __("messages.Items in") }}',
            'Details for': '{{ __("messages.Details for") }}',
            'ID': '{{ __("messages.ID") }}',
            'Serial': '{{ __("messages.Serial") }}',
            'name': '{{ __("messages.name") }}',
            'Inventories Count': '{{ __("messages.Inventories Count") }}',
            'Item Categories Count': '{{ __("messages.Items Count") }}',
            'Items Count': '{{ __("messages.Items Count") }}',
            'Item Name': '{{ __("messages.Items") }}',
            'Quantity': '{{ __("messages.quantity") }}',
            'Avg Price': '{{ __("messages.Avarage Price") }}',
            'Total Price': '{{ __("messages.Total Price") }}',
            'Purchase Serial': '{{ __("messages.Serial number") }}',
            'Production Date': '{{ __("messages.Production Date") }}',
            'Expire Date': '{{ __("messages.Expire Date") }}',
            'Price': '{{ __("messages.Price") }}',
            'Total': '{{ __("messages.Total") }}',
            'User': '{{ __("messages.Users") }}',
            'Date': '{{ __("messages.date") }}',
            'No data available': '{{ __("messages.No data available") }}',
            'Inventory Items Report': '{{ __("messages.Inventory Items Report") }}',
            'Print': '{{ __("messages.Print") }}',
            'Print All Data': '{{ __("messages.Print All Data") }}',
            'Actions': '{{ __("messages.Actions") }}',
            'Item Category': '{{ __("messages.Item Category") }}'
        };
    </script>
    <script>
var categoriesTable;

function fetch() {
    jQuery(document).ready(function ($) {
        var categoriesRoute = $("#categories-route").val();
        var languageCode = categoriesRoute.includes("/en/") ? "en" : "ar";
        var languageURL = languageCode === "en" ? 
            "https://cdn.datatables.net/plug-ins/1.13.4/i18n/en.json" : 
            "https://cdn.datatables.net/plug-ins/1.13.4/i18n/ar.json";
        
        var InventoriesItems = translations['Inventory Items Report'] || 'Inventory Items Report';

        if ($.fn.DataTable.isDataTable(".datatable")) {
            $(".datatable").DataTable().destroy();
        }

        categoriesTable = $("#categories-table").DataTable({
            language: {
                url: languageURL,
            },
            pageLength: 10,
            order: [[1, "asc"]],
            dom: "<''<\"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr\"lfB>'" +
                "+\n" +
                "'t'+\n" +
                '\'<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"ip>>',
            buttons: [
                {
                    extend: 'csv',
                    text: 'CSV',
                    exportOptions: {
                        columns: ':visible:not(:first-child)',
                        modifier: {
                            order: 'index'
                        },
                    },
                    charset: 'UTF-8',
                    bom: true
                },
                {
                    extend: 'excel',
                    text: 'Excel',
                    exportOptions: {
                        columns: ':visible:not(:first-child)',
                        modifier: {
                            order: 'index'
                        },
                    },
                    charset: 'UTF-8',
                    bom: true
                },
                {
                    extend: 'pdf',
                    text: 'PDF',
                    exportOptions: {
                        columns: ':visible:not(:first-child)',
                        modifier: {
                            order: 'index'
                        },
                    },
                    customize: function (doc) {
                        doc.content.splice(0, 0, {
                            text: InventoriesItems,
                            style: 'header',
                            alignment: 'center',
                            margin: [0, 0, 0, 20]
                        });
                        
                        doc.content.splice(1, 0, {
                            text: 'User: ' + (authenticatedUserName || ''),
                            style: 'subheader',
                            alignment: 'left',
                            margin: [0, 0, 0, 10]
                        });
                        
                        doc.styles.header = {
                            fontSize: 18,
                            bold: true,
                            alignment: 'center'
                        };
                        doc.styles.subheader = {
                            fontSize: 12,
                            bold: true
                        };
                    },
                    orientation: 'landscape',
                    pageSize: 'A4'
                },
                {
                    extend: 'print',
                    text: languageCode === "ar" ? "طباعة" : "Print",
                    exportOptions: {
                        columns: ':visible:not(:first-child)',
                        modifier: {
                            order: 'index'
                        },
                    },
                    customize: function (win) {
                        $(win.document.head).append('<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">');
                        $(win.document.head).append('<style>@media print { .responsive-text { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; white-space: pre-wrap; } }</style>');

                        var customHeader = '<div style="text-align: center; font-size: 18px; margin-bottom: 20px;">' +
                            '<img src="/dashboard/images/logo/logo.png" alt="Your Image" style="max-width: 100px; max-height: 100px; margin-bottom: 20px;"><br>' +
                            InventoriesItems +
                            '</div>';

                        $(win.document.body).find('h1').html(customHeader);
                        $(win.document.body).find('table').addClass('table-bordered text-center');
                        $(win.document.body).find('thead th:first').append('<br>' + (authenticatedUserName || ''));
                        $(win.document.body).find('table').css('page-break-inside', 'auto');
                        $(win.document.body).find('tr').css('page-break-inside', 'avoid');
                    }
                }
            ],
            serverSide: true,
            responsive: true,
            ajax: {
                url: categoriesRoute,
                type: "GET",
            },
            
            columns: [
                {
                    data: 'id',
                    name: 'id',
                    orderable: false,
                    searchable: false,
                    render: function (data, type, row) {
                        return '<input type="checkbox" class="select-checkbox category-checkbox" data-category-id="' + data + '">';
                    }
                },
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'inventories_count', name: 'inventories_count' },
                {
                    data: 'id',
                    name: 'id',
                    render: function (data, type, row) {
                        return '<button class="btn btn-sm show-btn view-category-btn" data-category-id="' + data + '" data-category-name="' + row.name + '">' +
                               '<i class="fa-solid fa-eye"></i></button>';
                    }
                }
            ],
            drawCallback: function (settings) {
                initializeCategoryInteractions();
                initializeCheckboxHandlers();
            }
        });
        
        $('<style>')
        .prop('type', 'text/css')
        .html('@media print { .datatable td { white-space: normal !important; }  .datatable { direction: rtl; } }')
        .appendTo('head');
    });
}

function initializeCheckboxHandlers() {
    $('#select-all-categories').off('change').on('change', function() {
        var isChecked = $(this).is(':checked');
        $('.category-checkbox').prop('checked', isChecked);
        
        if (isChecked) {
            $('.category-checkbox').each(function() {
                selectAllChildrenForCategory($(this).data('category-id'));
            });
        } else {
            $('.inventory-checkbox, .item-category-checkbox, .item-checkbox').prop('checked', false);
        }
    });

    $(document).on('change', '.select-all-inventories', function() {
        var categoryId = $(this).data('category-id');
        var isChecked = $(this).is(':checked');
        
        $(`.inventory-checkbox[data-parent-category="${categoryId}"]`).prop('checked', isChecked);
        
        if (isChecked) {
            $(`.inventory-checkbox[data-parent-category="${categoryId}"]`).each(function() {
                var inventoryId = $(this).data('inventory-id');
                selectAllChildrenForInventory(inventoryId, categoryId);
            });
        } else {
            $(`.inventory-checkbox[data-parent-category="${categoryId}"]`).each(function() {
                var inventoryId = $(this).data('inventory-id');
                $(`.item-category-checkbox[data-parent-inventory="${inventoryId}"], .item-checkbox[data-parent-inventory="${inventoryId}"]`).prop('checked', false);
            });
        }
    });

    $(document).on('change', '.select-all-item-categories', function() {
        var inventoryId = $(this).data('inventory-id');
        var isChecked = $(this).is(':checked');
        
        $(`.item-category-checkbox[data-parent-inventory="${inventoryId}"]`).prop('checked', isChecked);
        
        if (isChecked) {
            $(`.item-category-checkbox[data-parent-inventory="${inventoryId}"]`).each(function() {
                var itemCategoryId = $(this).data('item-category-id');
                selectAllChildrenForItemCategory(itemCategoryId, inventoryId);
            });
        } else {
            $(`.item-category-checkbox[data-parent-inventory="${inventoryId}"]`).each(function() {
                var itemCategoryId = $(this).data('item-category-id');
                $(`.item-checkbox[data-parent-item-category="${itemCategoryId}"][data-parent-inventory="${inventoryId}"]`).prop('checked', false);
            });
        }
    });

    $(document).on('change', '.select-all-items', function() {
        var inventoryId = $(this).data('inventory-id');
        var itemCategoryId = $(this).data('item-category-id');
        var isChecked = $(this).is(':checked');
        
        $(`.item-checkbox[data-parent-item-category="${itemCategoryId}"][data-parent-inventory="${inventoryId}"]`).prop('checked', isChecked);
    });

    $(document).on('change', '.category-checkbox', function() {
        var categoryId = $(this).data('category-id');
        var isChecked = $(this).is(':checked');
        
        if (isChecked) {
            selectAllChildrenForCategory(categoryId);
        } else {
            $(`.inventory-checkbox[data-parent-category="${categoryId}"]`).prop('checked', false).trigger('change');
        }
        
        updateSelectAllCheckbox();
    });

    $(document).on('change', '.inventory-checkbox', function() {
        var inventoryId = $(this).data('inventory-id');
        var categoryId = $(this).data('parent-category');
        var isChecked = $(this).is(':checked');
        
        if (isChecked) {
            selectAllChildrenForInventory(inventoryId, categoryId);
        } else {
            $(`.item-category-checkbox[data-parent-inventory="${inventoryId}"]`).prop('checked', false).trigger('change');
        }
        
        updateCategoryCheckbox(categoryId);
    });

    $(document).on('change', '.item-category-checkbox', function() {
        var itemCategoryId = $(this).data('item-category-id');
        var inventoryId = $(this).data('parent-inventory');
        var categoryId = $(this).data('parent-category');
        var isChecked = $(this).is(':checked');
        
        if (isChecked) {
            selectAllChildrenForItemCategory(itemCategoryId, inventoryId);
        } else {
            $(`.item-checkbox[data-parent-item-category="${itemCategoryId}"][data-parent-inventory="${inventoryId}"]`).prop('checked', false);
        }
        
        updateInventoryCheckbox(inventoryId, categoryId);
    });

    $(document).on('change', '.item-checkbox', function() {
        var itemCategoryId = $(this).data('parent-item-category');
        var inventoryId = $(this).data('parent-inventory');
        var categoryId = $(this).data('parent-category');
        
        updateItemCategoryCheckbox(itemCategoryId, inventoryId, categoryId);
    });
}

function selectAllChildrenForCategory(categoryId) {
    $(`.inventory-checkbox[data-parent-category="${categoryId}"]`).prop('checked', true).each(function() {
        var inventoryId = $(this).data('inventory-id');
        selectAllChildrenForInventory(inventoryId, categoryId);
    });
}

function selectAllChildrenForInventory(inventoryId, categoryId) {
    $(`.item-category-checkbox[data-parent-inventory="${inventoryId}"]`).prop('checked', true).each(function() {
        var itemCategoryId = $(this).data('item-category-id');
        selectAllChildrenForItemCategory(itemCategoryId, inventoryId);
    });
}

function selectAllChildrenForItemCategory(itemCategoryId, inventoryId) {
    $(`.item-checkbox[data-parent-item-category="${itemCategoryId}"][data-parent-inventory="${inventoryId}"]`).prop('checked', true);
}

function updateSelectAllCheckbox() {
    var totalCategories = $('.category-checkbox').length;
    var checkedCategories = $('.category-checkbox:checked').length;
    $('#select-all-categories').prop('checked', totalCategories === checkedCategories && totalCategories > 0);
}

function updateCategoryCheckbox(categoryId) {
    var totalInventories = $(`.inventory-checkbox[data-parent-category="${categoryId}"]`).length;
    var checkedInventories = $(`.inventory-checkbox[data-parent-category="${categoryId}"]:checked`).length;
    $(`.category-checkbox[data-category-id="${categoryId}"]`).prop('checked', totalInventories === checkedInventories && totalInventories > 0);
    updateSelectAllCheckbox();
}

function updateInventoryCheckbox(inventoryId, categoryId) {
    var totalItemCategories = $(`.item-category-checkbox[data-parent-inventory="${inventoryId}"]`).length;
    var checkedItemCategories = $(`.item-category-checkbox[data-parent-inventory="${inventoryId}"]:checked`).length;
    $(`.inventory-checkbox[data-inventory-id="${inventoryId}"]`).prop('checked', totalItemCategories === checkedItemCategories && totalItemCategories > 0);
    updateCategoryCheckbox(categoryId);
}

function updateItemCategoryCheckbox(itemCategoryId, inventoryId, categoryId) {
    var totalItems = $(`.item-checkbox[data-parent-item-category="${itemCategoryId}"][data-parent-inventory="${inventoryId}"]`).length;
    var checkedItems = $(`.item-checkbox[data-parent-item-category="${itemCategoryId}"][data-parent-inventory="${inventoryId}"]:checked`).length;
    $(`.item-category-checkbox[data-item-category-id="${itemCategoryId}"][data-parent-inventory="${inventoryId}"]`).prop('checked', totalItems === checkedItems && totalItems > 0);
    updateInventoryCheckbox(inventoryId, categoryId);
}

function hasAnySelection() {
    return $('.category-checkbox:checked').length > 0 || 
           $('.inventory-checkbox:checked').length > 0 || 
           $('.item-category-checkbox:checked').length > 0 || 
           $('.item-checkbox:checked').length > 0;
}

$(document).on('click', '#print-all-btn', function(event) {
    event.preventDefault();
    
    if (hasAnySelection()) {
        printSelectedData();
    } else {
        printAllData();
    }
});

function initializeCategoryInteractions() {
    $(".view-category-btn").off("click").on("click", function (e) {
        e.stopPropagation();
        $('.view-category-btn').prop('disabled', true);

        var categoryId = $(this).data('category-id');
        var categoryName = $(this).data('category-name');
        var tr = $(this).closest("tr");
        var row = categoriesTable.row(tr);

        if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass("shown");
            $('.view-category-btn').prop('disabled', false);
        } else {
            $(".datatable tbody tr.shown").each(function () {
                var otherRow = categoriesTable.row(this);
                if (otherRow.child.isShown()) {
                    otherRow.child.hide();
                    $(this).removeClass("shown");
                }
            });

            $.ajax({
                url: $("#inventories-route").val(),
                type: "GET",
                data: {
                    category_id: categoryId,
                },
                success: function (response) {
                    $('.view-category-btn').prop('disabled', false);
                    
                    if (response.data && response.data.length > 0) {
                        row.child(buildInventoriesSection(response.data, categoryId, categoryName)).show();
                        tr.addClass("shown");
                        initializeInventoryInteractions(categoryId);
                        initializeCheckboxHandlers();
                    } else {
                        var noDataMessage = '<tr class="child-table"><td colspan="5"><p>' + translations['No data available'] + '</p></td></tr>';
                        row.child(noDataMessage).show();
                        tr.addClass("shown");
                    }
                },
                error: function (error) {
                    $('.view-category-btn').prop('disabled', false);
                    console.error('Error fetching inventories data:', error);
                }
            });
        }
    });
}

function buildInventoriesSection(inventories, categoryId, categoryName) {
    var isCategoryChecked = $(`.category-checkbox[data-category-id="${categoryId}"]`).is(':checked');
    
    var html = '<tr class="child-table">' +
        '<td colspan="5">' +
        '<div class="level-header level-2">' +
        '<i class="mdi mdi-warehouse"></i> ' + translations['Inventories in'] + ' ' + categoryName +
        '</div>' +
        '<div class="table-responsive">' +
        '<table class="table table-bordered inventories-table inventories-table-' + categoryId + '">' +
        '<thead style="background: linear-gradient(to right, #afd144, #8daf21);">' +
        '<tr>' +
        '<th><input type="checkbox" class="select-all-inventories" data-category-id="' + categoryId + '" ' + (isCategoryChecked ? 'checked' : '') + '></th>' +
        '<th>' + translations['ID'] + '</th>' +
        '<th>' + translations['Serial'] + '</th>' +
        '<th>' + translations['name'] + '</th>' +
        '<th>' + translations['Item Categories Count'] + '</th>' +
        '<th></th>' +
        '</tr>' +
        '</thead>' +
        '<tbody>';

    inventories.forEach(function (inventory) {
        html += '<tr>' +
            '<td><input type="checkbox" class="select-checkbox inventory-checkbox" data-inventory-id="' + inventory.id + '" data-parent-category="' + categoryId + '" ' + (isCategoryChecked ? 'checked' : '') + '></td>' +
            '<td>' + inventory.id + '</td>' +
            '<td>' + inventory.serial + '</td>' +
            '<td>' + inventory.name + '</td>' +
            '<td>' + inventory.item_categories_count + '</td>' +
            '<td>' +
            '<button class="btn btn-sm show-btn view-inventory-btn" data-inventory-id="' + inventory.id + '" data-inventory-name="' + inventory.name + '" data-category-id="' + categoryId + '">' +
            '<i class="fa-solid fa-eye"></i></button>' +
            '</td>' +
            '</tr>';
    });

    html += '</tbody></table></div></td></tr>';
    return html;
}

function initializeInventoryInteractions(categoryId) {
    $(`.inventories-table-${categoryId}`).off('click', '.view-inventory-btn').on('click', '.view-inventory-btn', function(e) {
        e.stopPropagation();
        
        var inventoryId = $(this).data('inventory-id');
        var inventoryName = $(this).data('inventory-name');
        var tr = $(this).closest("tr");
        
        if (tr.next().hasClass('item-categories-row')) {
            tr.next().remove();
        } else {
            $(`.inventories-table-${categoryId} .item-categories-row`).remove();
            
            $.ajax({
                url: $("#item-categories-route").val(),
                type: "GET",
                data: {
                    inventory_id: inventoryId
                },
                success: function (response) {
                    if (response.data && response.data.length > 0) {
                        var html = buildItemCategoriesSection(response.data, inventoryId, inventoryName, categoryId);
                        tr.after(html);
                        initializeItemCategoryInteractions(inventoryId, categoryId);
                        initializeCheckboxHandlers();
                    } else {
                        var noDataMessage = '<tr class="item-categories-row"><td colspan="6"><p>' + translations['No data available'] + '</p></td></tr>';
                        tr.after(noDataMessage);
                    }
                },
                error: function (error) {
                    console.error('Error fetching item categories data:', error);
                }
            });
        }
    });
}

function buildItemCategoriesSection(itemCategories, inventoryId, inventoryName, categoryId) {
    var isInventoryChecked = $(`.inventory-checkbox[data-inventory-id="${inventoryId}"]`).is(':checked');
    
    var html = '<tr class="item-categories-row child-table">' +
        '<td colspan="6">' +
        '<div class="level-header level-3">' +
        '<i class="mdi mdi-tag-multiple"></i> ' + translations['Item Categories in'] + ' ' + inventoryName +
        '</div>' +
        '<div class="table-responsive">' +
        '<table class="table table-bordered item-categories-table item-categories-table-' + inventoryId + '">' +
        '<thead style="background: linear-gradient(to right, #afd144, #8daf21);">' +
        '<tr>' +
        '<th><input type="checkbox" class="select-all-item-categories" data-inventory-id="' + inventoryId + '" data-parent-category="' + categoryId + '" ' + (isInventoryChecked ? 'checked' : '') + '></th>' +
        '<th>' + translations['ID'] + '</th>' +
        '<th>' + translations['name'] + '</th>' +
        '<th>' + translations['Items Count'] + '</th>' +
        '<th>' + translations['Quantity'] + '</th>' +
        '<th></th>' +
        '</tr>' +
        '</thead>' +
        '<tbody>';

    itemCategories.forEach(function (category) {
        html += '<tr>' +
            '<td><input type="checkbox" class="select-checkbox item-category-checkbox" data-item-category-id="' + category.id + '" data-parent-inventory="' + inventoryId + '" data-parent-category="' + categoryId + '" ' + (isInventoryChecked ? 'checked' : '') + '></td>' +
            '<td>' + category.id + '</td>' +
            '<td>' + category.name + '</td>' +
            '<td>' + category.items_count + '</td>' +
            '<td>' + category.total_quantity_formatted + '</td>' +
            '<td>' +
            '<button class="btn btn-sm show-btn view-item-category-btn" data-item-category-id="' + category.id + '" data-item-category-name="' + category.name + '" data-inventory-id="' + inventoryId + '" data-category-id="' + categoryId + '">' +
            '<i class="fa-solid fa-eye"></i></button>' +
            '</td>' +
            '</tr>';
    });

    html += '</tbody></table></div></td></tr>';
    return html;
}

function initializeItemCategoryInteractions(inventoryId, categoryId) {
    $(`.item-categories-table-${inventoryId}`).off('click', '.view-item-category-btn').on('click', '.view-item-category-btn', function(e) {
        e.stopPropagation();
        
        var itemCategoryId = $(this).data('item-category-id');
        var itemCategoryName = $(this).data('item-category-name');
        var tr = $(this).closest("tr");
        
        if (tr.next().hasClass('items-row')) {
            tr.next().remove();
        } else {
            $(`.item-categories-table-${inventoryId} .items-row`).remove();
            
            $.ajax({
                url: $("#items-route").val(),
                type: "GET",
                data: {
                    inventory_id: inventoryId,
                    item_category_id: itemCategoryId
                },
                success: function (response) {
                    if (response.data && response.data.length > 0) {
                        var html = buildItemsSection(response.data, inventoryId, itemCategoryName, itemCategoryId, categoryId);
                        tr.after(html);
                        initializeItemDetailsInteractions(inventoryId, itemCategoryId);
                        initializeCheckboxHandlers();
                    } else {
                        var noDataMessage = '<tr class="items-row"><td colspan="7"><p>' + translations['No data available'] + '</p></td></tr>';
                        tr.after(noDataMessage);
                    }
                },
                error: function (error) {
                    console.error('Error fetching items data:', error);
                }
            });
        }
    });
}

function buildItemsSection(items, inventoryId, categoryName, itemCategoryId, categoryId) {
    var isItemCategoryChecked = $(`.item-category-checkbox[data-item-category-id="${itemCategoryId}"][data-parent-inventory="${inventoryId}"]`).is(':checked');
    
    var html = '<tr class="items-row child-table">' +
        '<td colspan="6">' +
        '<div class="level-header level-4">' +
        '<i class="mdi mdi-package-variant"></i> ' + translations['Items in'] + ' ' + categoryName +
        '</div>' +
        '<div class="table-responsive">' +
        '<table class="table table-bordered items-table items-table-' + inventoryId + '">' +
        '<thead style="background: linear-gradient(to right, #afd144, #8daf21);">' +
        '<tr>' +
        '<th><input type="checkbox" class="select-all-items" data-inventory-id="' + inventoryId + '" data-item-category-id="' + itemCategoryId + '" data-parent-category="' + categoryId + '" ' + (isItemCategoryChecked ? 'checked' : '') + '></th>' +
        '<th>' + translations['ID'] + '</th>' +
        '<th>' + translations['Item Name'] + '</th>' +
        '<th>' + translations['Quantity'] + '</th>' +
        '<th>' + translations['Avg Price'] + '</th>' +
        '<th>' + translations['Total Price'] + '</th>' +
        '<th></th>' +
        '</tr>' +
        '</thead>' +
        '<tbody>';

    items.forEach(function (item) {
        html += '<tr>' +
            '<td><input type="checkbox" class="select-checkbox item-checkbox" data-item-id="' + item.item_id + '" data-parent-item-category="' + itemCategoryId + '" data-parent-inventory="' + inventoryId + '" data-parent-category="' + categoryId + '" ' + (isItemCategoryChecked ? 'checked' : '') + '></td>' +
            '<td>' + item.item_id + '</td>' +
            '<td>' + item.item_name + '</td>' +
            '<td>' + item.total_received_quantity_formatted + '</td>' +
            '<td>' + item.avg + '</td>' +
            '<td>' + item.total_price + '</td>' +
            '<td>' +
            '<button class="btn btn-sm show-btn view-item-details-btn" data-inventory-id="' + inventoryId + '" data-item-id="' + item.item_id + '" data-item-name="' + item.item_name + '">' +
            '<i class="fa-solid fa-eye"></i></button>' +
            '</td>' +
            '</tr>';
    });

    html += '</tbody></table></div></td></tr>';
    return html;
}

function initializeItemDetailsInteractions(inventoryId, itemCategoryId) {
    $(`.items-table-${inventoryId}`).off('click', '.view-item-details-btn').on('click', '.view-item-details-btn', function(e) {
        e.stopPropagation();
        
        var itemId = $(this).data('item-id');
        var itemName = $(this).data('item-name');
        var tr = $(this).closest("tr");
        
        if (tr.next().hasClass('details-row')) {
            tr.next().remove();
        } else {
            $(`.items-table-${inventoryId} .details-row`).remove();
            
            $.ajax({
                url: $("#details-route").val(),
                type: "GET",
                data: {
                    inventory_id: inventoryId,
                    item_id: itemId
                },
                success: function (response) {
                    if (response.data && response.data.length > 0) {
                        var html = buildDetailsSection(response.data, itemName);
                        tr.after(html);
                    } else {
                        var noDataMessage = '<tr class="details-row"><td colspan="7"><p>' + translations['No data available'] + '</p></td></tr>';
                        tr.after(noDataMessage);
                    }
                },
                error: function (error) {
                    console.error('Error fetching details data:', error);
                }
            });
        }
    });
}

function buildDetailsSection(details, itemName) {
    var html = '<tr class="details-row details-table">' +
        '<td colspan="7">' +
        '<div class="level-header level-5">' +
        '<i class="mdi mdi-information"></i> ' + translations['Details for'] + ' ' + itemName +
        '</div>' +
        '<div class="table-responsive">' +
        '<table class="table table-bordered">' +
        '<thead style="background: linear-gradient(to right, #afd144, #8daf21);">' +
        '<tr>' +
        '<th>' + translations['Purchase Serial'] + '</th>' +
        '<th>' + translations['Production Date'] + '</th>' +
        '<th>' + translations['Expire Date'] + '</th>' +
        '<th>' + translations['Quantity'] + '</th>' +
        '<th>' + translations['Price'] + '</th>' +
        '<th>' + translations['Total'] + '</th>' +
        '<th>' + translations['User'] + '</th>' +
        '<th>' + translations['Date'] + '</th>' +
        '</tr>' +
        '</thead>' +
        '<tbody>';

    details.forEach(function (detail) {
        html += '<tr>' +
            '<td>' + (detail.serial_number || '-') + '</td>' +
            '<td>' + (detail.production_date || '-') + '</td>' +
            '<td>' + (detail.expire_date || '-') + '</td>' +
            '<td>' + detail.quantity_formatted + '</td>' +
            '<td>' + detail.price + '</td>' +
            '<td>' + detail.total + '</td>' +
            '<td>' + (detail.user_name || '-') + '</td>' +
            '<td>' + (detail.created_at ? new Date(detail.created_at).toLocaleDateString('ar-SA') : '-') + '</td>' +
            '</tr>';
    });

    html += '</tbody></table></div></td></tr>';
    return html;
}

function printSelectedData() {
    var selection = {
        categories: [],
        inventories: [],
        item_categories: [],
        items: []
    };
    
    $('.category-checkbox:checked').each(function() {
        selection.categories.push($(this).data('category-id'));
    });
    
    $('.inventory-checkbox:checked').each(function() {
        selection.inventories.push({
            inventory_id: $(this).data('inventory-id'),
            category_id: $(this).data('parent-category')
        });
    });
    
    $('.item-category-checkbox:checked').each(function() {
        selection.item_categories.push({
            item_category_id: $(this).data('item-category-id'),
            inventory_id: $(this).data('parent-inventory'),
            category_id: $(this).data('parent-category')
        });
    });
    
    $('.item-checkbox:checked').each(function() {
        selection.items.push({
            item_id: $(this).data('item-id'),
            item_category_id: $(this).data('parent-item-category'),
            inventory_id: $(this).data('parent-inventory'),
            category_id: $(this).data('parent-category')
        });
    });
    
    $.ajax({
        url: $("#print-selected-route").val(),
        method: "POST",
        data: {
            _token: '{{ csrf_token() }}',
            selection: selection
        },
        beforeSend: function() {
            $('#print-all-btn').prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin"></i> Loading...');
        },
        success: function (response) {
            $('#print-all-btn').prop('disabled', false).html('<i class="fa-solid fa-print"></i> {{__("messages.Print All Data")}}');
            
            if (response.status === 200) {
                openPrintWindowForAll(response.data);
            } else {
                alert('Error loading data');
            }
        },
        error: function (error) {
            $('#print-all-btn').prop('disabled', false).html('<i class="fa-solid fa-print"></i> {{__("messages.Print All Data")}}');
            console.error('Error fetching selected print data:', error);
            alert('Connection error');
        }
    });
}

function printAllData() {
    $.ajax({
        url: $("#print-all-route").val(),
        method: "GET",
        beforeSend: function() {
            $('#print-all-btn').prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin"></i> Loading...');
        },
        success: function (response) {
            $('#print-all-btn').prop('disabled', false).html('<i class="fa-solid fa-print"></i> {{__("messages.Print All Data")}}');
            
            if (response.status === 200) {
                openPrintWindowForAll(response.data);
            } else {
                alert('Error loading data');
            }
        },
        error: function (error) {
            $('#print-all-btn').prop('disabled', false).html('<i class="fa-solid fa-print"></i> {{__("messages.Print All Data")}}');
            console.error('Error fetching all print data:', error);
            alert('Connection error');
        }
    });
}

function openPrintWindowForAll(data) {
    var printWindow = window.open('', '_blank');
    printWindow.document.write('<html><head><title>' + translations['Print'] + '</title>');
    printWindow.document.write('<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">');
    printWindow.document.write('<style>');
    printWindow.document.write('* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }');
    printWindow.document.write('@media print {');
    printWindow.document.write('.responsive-text { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; white-space: pre-wrap; }');
    printWindow.document.write('table { page-break-inside: auto; }');
    printWindow.document.write('tr { page-break-inside: avoid; page-break-after: auto; }');
    printWindow.document.write('thead { display: table-header-group; }');
    printWindow.document.write('}');
    printWindow.document.write('</style>');
    printWindow.document.write('</head><body>');

    var customHeader = '<div style="text-align: center; font-size: 18px; padding: 10px;">' +
        '<img src="/dashboard/images/logo/logo.png" alt="Logo" style="max-width: 100px; max-height: 100px; margin-bottom: 20px;"><br>' +
        translations['Inventory Items Report'] +
        '</div>';

    printWindow.document.write(customHeader);

    var colors = [
        '#48bb78',
        '#4299e1',
        '#f6e05e'
    ];
    
    var tableCounter = 0;

    data.forEach(function(categoryGroup) {
        categoryGroup.inventories.forEach(function(inventoryData) {
            
            var currentColor = 'rgb(141, 175, 33)';
            
            printWindow.document.write('<h4 style="text-align: center; margin-top: 30px; background-color: #e9ecef; padding: 10px;">' + 
                categoryGroup.category.name + ' - ' + inventoryData.inventory.name + ' (' + inventoryData.inventory.serial + ')' +
                '</h4>');
            
            printWindow.document.write('<table class="table table-bordered text-center" style="margin-bottom: 40px;">');
            printWindow.document.write('<thead>');
            printWindow.document.write('<tr>');
            printWindow.document.write('<th style="background-color: ' + currentColor + ' !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">' + translations['ID'] + ' ' + authenticatedUserName + '</th>');
            printWindow.document.write('<th style="background-color: ' + currentColor + ' !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">' + translations['Item Category'] + '</th>');
            printWindow.document.write('<th style="background-color: ' + currentColor + ' !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">' + translations['Item Name'] + '</th>');
            printWindow.document.write('<th style="background-color: ' + currentColor + ' !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">' + translations['Quantity'] + '</th>');
            printWindow.document.write('<th style="background-color: ' + currentColor + ' !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">' + translations['Avg Price'] + '</th>');
            printWindow.document.write('<th style="background-color: ' + currentColor + ' !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">' + translations['Total Price'] + '</th>');
            printWindow.document.write('</tr>');
            printWindow.document.write('</thead>');
            printWindow.document.write('<tbody>');
            
            inventoryData.data.forEach(function(categoryData) {
                categoryData.items.forEach(function(item, itemIndex) {
                    printWindow.document.write('<tr>');
                    printWindow.document.write('<td style="text-align: center; background-color: rgb(0, 26, 118) !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">' + item.item_id + '</td>');
                    printWindow.document.write('<td style="text-align: center; background-color: rgb(0, 26, 118) !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">' + categoryData.category.name + '</td>');
                    printWindow.document.write('<td style="text-align: center; background-color: rgb(0, 26, 118) !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">' + item.item_name + '</td>');
                    printWindow.document.write('<td style="text-align: center; background-color: rgb(0, 26, 118) !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">' + item.total_quantity + '</td>');
                    printWindow.document.write('<td style="text-align: center; background-color: rgb(0, 26, 118) !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">' + item.avg_price + '</td>');
                    printWindow.document.write('<td style="text-align: center; background-color: rgb(0, 26, 118) !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">' + item.total_price + '</td>');
                    printWindow.document.write('</tr>');
                    
                    if (item.details && item.details.length > 0) {
                        printWindow.document.write('<tr class="thead-light">');
                        printWindow.document.write('<th scope="col" style="text-align: center; background-color: rgba(101, 140, 210, 0.76) !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;"></th>');
                        printWindow.document.write('<th scope="col" style="text-align: center; background-color: rgba(101, 140, 210, 0.76) !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;"></th>');
                        printWindow.document.write('<th scope="col" style="text-align: center; background-color: rgba(101, 140, 210, 0.76) !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust !important; print-color-adjust: exact !important;" colspan="2">' + translations['Production Date'] + ' / ' + translations['Expire Date'] + '</th>');
                        printWindow.document.write('<th scope="col" style="text-align: center; background-color: rgba(101, 140, 210, 0.76) !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">' + translations['Quantity'] + '</th>');
                        printWindow.document.write('<th scope="col" style="text-align: center; background-color: rgba(101, 140, 210, 0.76) !important; color: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;"></th>');
                        printWindow.document.write('</tr>');

                        item.details.forEach(function(detail) {
                            printWindow.document.write('<tr style="background-color: #f8f9fa; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;">');
                            printWindow.document.write('<td style="text-align: center;"></td>');
                            printWindow.document.write('<td style="text-align: center;"></td>');
                            printWindow.document.write('<td style="text-align: center;" colspan="2">' + detail.production_date + ' / ' + detail.expire_date + '</td>');
                            printWindow.document.write('<td style="text-align: center;">' + detail.quantity + '</td>');
                            printWindow.document.write('<td style="text-align: center;"></td>');
                            printWindow.document.write('</tr>');
                        });
                    }
                });
            });
            
            printWindow.document.write('</tbody>');
            printWindow.document.write('</table>');
            
            tableCounter++;
        });
    });

    printWindow.document.write('</body></html>');
    printWindow.document.close();

    printWindow.onafterprint = function () {
        printWindow.close();
    };

    printWindow.onload = function () {
        printWindow.print();
    };
}

fetch();
    </script>
@endsection