@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, .assets-table th, .details-table th {
            color: black !important; 
        }

        .assets-table th, .details-table th {
            background-color: #f8f9fa !important; 
        }
        
        .level-header.level-2 {
            background-color: #e9ecef;
        }
        
        .level-header.level-3 {
            background-color: #e9ecef;
        }
        
        .view-details-btn, .view-class-btn, .view-asset-details-btn {
            cursor: pointer;
        }
        
        #classes-table,
        .assets-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;
        }
    </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-sitemap menu-icon"></i>
                </span> {{__('messages.Fixed Assets Report')}}
            </h3>
        </div>
        
        <div class="row">
            <div id="success_message"></div>
            <input type="hidden" id="classes-route" value="{{ route('fixed-assets-report.get-classes') }}" />
            <input type="hidden" id="assets-route" value="{{ route('fixed-assets-report.get-assets-by-class') }}" />
            <input type="hidden" id="details-route" value="{{ route('fixed-assets-report.get-asset-details') }}" />
            <input type="hidden" id="print-all-route" value="{{ route('fixed-assets-report.print-all') }}" />
            
            <div class="table-responsive customscroll">
                <table class="table datatable text-center" id="classes-table">
                    <thead>
                        <tr>
                            <th>{{__('messages.ID')}}</th>
                            <th>{{__('messages.Class Name')}}</th>
                            <th>{{__('messages.Assets 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 = {
            'Class Name': '{{ __("messages.Class Name") }}',
            'Assets in': '{{ __("messages.Assets in") }}',
            'Details for': '{{ __("messages.Details for") }}',
            'ID': '{{ __("messages.ID") }}',
            'Asset Name': '{{ __("messages.Asset Name") }}',
            'Purchase Date': '{{ __("messages.Purchase Date") }}',
            'Cost': '{{ __("messages.Cost") }}',
            'Accumulated Depreciation': '{{ __("messages.Accumulated Depreciation") }}',
            'Net Book Value': '{{ __("messages.Net Book Value") }}',
            'Depreciation Rate': '{{ __("messages.Depreciation Rate") }}',
            'Location': '{{ __("messages.Location") }}',
            'Supplier': '{{ __("messages.Supplier") }}',
            'Description': '{{ __("messages.description") }}',
            'Account': '{{ __("messages.Account") }}',
            'Depreciation Account': '{{ __("messages.Depreciation Account") }}',
            'Status': '{{ __("messages.Status") }}',
            'No data available': '{{ __("messages.No data available") }}',
            'Fixed Assets Report': '{{ __("messages.Fixed Assets Report") }}',
            'Print': '{{ __("messages.Print") }}',
            'Print All Data': '{{ __("messages.Print All Data") }}',
            'Assets Count': '{{ __("messages.Assets Count") }}'
        };
    </script>
    <script>
var classesTable;

function fetch() {
    jQuery(document).ready(function ($) {
        var classesRoute = $("#classes-route").val();
        var languageCode = classesRoute.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 FixedAssetsReport = translations['Fixed Assets Report'] || 'Fixed Assets Report';

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

        classesTable = $("#classes-table").DataTable({
            language: {
                url: languageURL,
            },
            pageLength: 10,
            order: [[0, "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',
                        modifier: {
                            order: 'index'
                        },
                    },
                    charset: 'UTF-8',
                    bom: true
                },
                {
                    extend: 'excel',
                    text: 'Excel',
                    exportOptions: {
                        columns: ':visible',
                        modifier: {
                            order: 'index'
                        },
                    },
                    charset: 'UTF-8',
                    bom: true
                },
                {
                    extend: 'pdf',
                    text: 'PDF',
                    exportOptions: {
                        columns: ':visible',
                        modifier: {
                            order: 'index'
                        },
                    },
                    customize: function (doc) {
                        doc.content.splice(0, 0, {
                            text: FixedAssetsReport,
                            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',
                        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>' +
                            FixedAssetsReport +
                            '</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: classesRoute,
                type: "GET",
            },
            
            columns: [
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'assets_count', name: 'assets_count' },
                {
                    data: 'id',
                    name: 'id',
                    render: function (data, type, row) {
                        return '<button class="btn btn-sm show-btn view-class-btn" data-class-id="' + data + '" data-class-name="' + row.name + '">' +
                               '<i class="fa-solid fa-eye"></i></button>';
                    }
                }
            ],
            drawCallback: function (settings) {
                initializeClassInteractions();
            }
        });
    });
}

// Level 1: Asset Classes
function initializeClassInteractions() {
    $(".view-class-btn").off("click").on("click", function (e) {
        e.stopPropagation();
        $('.view-class-btn').prop('disabled', true);

        var classId = $(this).data('class-id');
        var className = $(this).data('class-name');
        var tr = $(this).closest("tr");
        var row = classesTable.row(tr);

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

            $.ajax({
                url: $("#assets-route").val(),
                type: "GET",
                data: {
                    class_id: classId,
                },
                success: function (response) {
                    $('.view-class-btn').prop('disabled', false);
                    
                    if (response.data && response.data.length > 0) {
                        row.child(buildAssetsSection(response.data, classId, className)).show();
                        tr.addClass("shown");
                        initializeAssetInteractions(classId);
                    } else {
                        var noDataMessage = '<tr class="child-table"><td colspan="4"><p>' + translations['No data available'] + '</p></td></tr>';
                        row.child(noDataMessage).show();
                        tr.addClass("shown");
                    }
                },
                error: function (error) {
                    $('.view-class-btn').prop('disabled', false);
                    console.error('Error fetching assets data:', error);
                }
            });
        }
    });
}

// Level 2: Assets
function buildAssetsSection(assets, classId, className) {
    var html = '<tr class="child-table">' +
        '<td colspan="4">' +
        '<div class="level-header level-2">' +
        '<i class="mdi mdi-sitemap"></i> ' + translations['Assets in'] + ' ' + className +
        '</div>' +
        '<div class="table-responsive">' +
        '<table class="table table-bordered assets-table assets-table-' + classId + '">' +
        '<thead style="background: linear-gradient(to right, #afd144, #8daf21);">' +
        '<tr>' +
        '<th>' + translations['ID'] + '</th>' +
        '<th>' + translations['Asset Name'] + '</th>' +
        '<th>' + translations['Purchase Date'] + '</th>' +
        '<th>' + translations['Cost'] + '</th>' +
        '<th>' + translations['Accumulated Depreciation'] + '</th>' +
        '<th>' + translations['Net Book Value'] + '</th>' +
        '<th>' + translations['Depreciation Rate'] + '</th>' +
        '<th>' + translations['Location'] + '</th>' +
        
        '</tr>' +
        '</thead>' +
        '<tbody>';

    assets.forEach(function (asset) {
        html += '<tr>' +
            '<td>' + asset.id + '</td>' +
            '<td>' + asset.name + '</td>' +
            '<td>' + asset.date_of_purchase + '</td>' +
            '<td>' + asset.cost_formatted + '</td>' +
            '<td>' + asset.accumulated_depreciation_formatted + '</td>' +
            '<td>' + asset.net_book_value_formatted + '</td>' +
            '<td>' + asset.depreciation_rate_formatted + '</td>' +
            '<td>' + (asset.location_name || '-') + '</td>' +
         
            '</tr>';
    });

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

function initializeAssetInteractions(classId) {
    $(`.assets-table-${classId}`).off('click', '.view-asset-details-btn').on('click', '.view-asset-details-btn', function(e) {
        e.stopPropagation();
        
        var assetId = $(this).data('asset-id');
        var assetName = $(this).data('asset-name');
        var tr = $(this).closest("tr");
        
        if (tr.next().hasClass('details-row')) {
            tr.next().remove();
        } else {
            $(`.assets-table-${classId} .details-row`).remove();
            
            $.ajax({
                url: $("#details-route").val(),
                type: "GET",
                data: {
                    asset_id: assetId
                },
                success: function (response) {
                    if (response.status === 200) {
                        var html = buildDetailsSection(response.asset, assetName);
                        tr.after(html);
                    } else {
                        var noDataMessage = '<tr class="details-row"><td colspan="9"><p>' + translations['No data available'] + '</p></td></tr>';
                        tr.after(noDataMessage);
                    }
                },
                error: function (error) {
                    console.error('Error fetching asset details:', error);
                }
            });
        }
    });
}

// Level 3: Details
function buildDetailsSection(asset, assetName) {
    var html = '<tr class="details-row details-table">' +
        '<td colspan="9">' +
        '<div class="level-header level-3">' +
        '<i class="mdi mdi-information"></i> ' + translations['Details for'] + ' ' + assetName +
        '</div>' +
        '<div class="table-responsive">' +
        '<table class="table table-bordered">' +
        '<thead style="background: linear-gradient(to right, #afd144, #8daf21);">' +
        '<tr>' +
        '<th>' + translations['Description'] + '</th>' +
        '<th>' + translations['Supplier'] + '</th>' +
        '<th>' + translations['Account'] + '</th>' +
        '<th>' + translations['Depreciation Account'] + '</th>' +
        '<th>' + translations['Status'] + '</th>' +
        '</tr>' +
        '</thead>' +
        '<tbody>';

    html += '<tr>' +
        '<td>' + (asset.description || '-') + '</td>' +
        '<td>' + (asset.supplier_name || '-') + '</td>' +
        '<td>' + (asset.account_name || '-') + '</td>' +
        '<td>' + (asset.depreciation_account_name || '-') + '</td>' +
        '<td>' + (asset.asset_status || '-') + '</td>' +
        '</tr>';

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

// ============== PRINT FUNCTION ==============

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

function printAllData() {
    $.ajax({
        url: $("#print-all-route").val(),
        method: "GET",
        success: function (response) {
            if (response.status === 200) {
                openPrintWindowForAll(response.data);
            }
        },
        error: function (error) {
            console.error('Error fetching all print data:', 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>@media print { .responsive-text { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; white-space: pre-wrap; } table { page-break-inside: auto; } tr { page-break-inside: avoid; page-break-after: auto; } thead { display: table-header-group; } }</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['Fixed Assets Report'] +
        '</div>';

    printWindow.document.write(customHeader);

    // طباعة جدول موحد لكل فئة
    data.forEach(function(classGroup) {
        // Header للفئة
        printWindow.document.write('<h4 style="text-align: center; margin-top: 30px; background-color: #e9ecef; padding: 10px;">' + 
            classGroup.class.name +
            '</h4>');
        
        // جدول موحد لكل الفئة
        printWindow.document.write('<table class="table table-bordered text-center" style="margin-bottom: 40px;">');
        
        // Table Header
        printWindow.document.write('<thead style="background: linear-gradient(to right, #afd144, #8daf21);">');
        printWindow.document.write('<tr>');
        printWindow.document.write('<th>' + translations['ID'] + ' ' + authenticatedUserName + '</th>');
        printWindow.document.write('<th>' + translations['Asset Name'] + '</th>');
        printWindow.document.write('<th>' + translations['Purchase Date'] + '</th>');
        printWindow.document.write('<th>' + translations['Cost'] + '</th>');
        printWindow.document.write('<th>' + translations['Accumulated Depreciation'] + '</th>');
        printWindow.document.write('<th>' + translations['Net Book Value'] + '</th>');
        printWindow.document.write('<th>' + translations['Depreciation Rate'] + '</th>');
        printWindow.document.write('<th>' + translations['Location'] + '</th>');
        printWindow.document.write('</tr>');
        printWindow.document.write('</thead>');
        printWindow.document.write('<tbody>');
        
        // Assets Data
        classGroup.assets.forEach(function(asset) {
            printWindow.document.write('<tr>');
            printWindow.document.write('<td>' + asset.id + '</td>');
            printWindow.document.write('<td>' + asset.name + '</td>');
            printWindow.document.write('<td>' + asset.date_of_purchase + '</td>');
            printWindow.document.write('<td>' + asset.cost + '</td>');
            printWindow.document.write('<td>' + asset.accumulated_depreciation + '</td>');
            printWindow.document.write('<td>' + asset.net_book_value + '</td>');
            printWindow.document.write('<td>' + asset.depreciation_rate + '</td>');
            printWindow.document.write('<td>' + asset.location_name + '</td>');
            printWindow.document.write('</tr>');
        });
        
        printWindow.document.write('</tbody>');
        printWindow.document.write('</table>');
    });

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

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

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

fetch();
    </script>
@endsection