{literal}
<style>
@media print {
    /* 1) إخفاء الهيدر الداخلي المكرر تماماً والمسؤول عن الصف الفاضي */
    div.dataTables_scrollBody table thead {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
    }
    
    /* 2) تثبيت وإظهار الهيدر الرئيسي الأصلي للجدول بالكامل */
    div.dataTables_scrollHead {
        overflow: visible !important;
    }
    div.dataTables_scrollHead table thead {
        display: table-header-group !important;
        visibility: visible !important;
    }
    
    .table th,.table-transparent th {
        background-color: #d1e7dd !important;
        color: black !important;
    }
}

</style>
{/literal}

<div class="row">
    <div class="container">

        <ol class="breadcrumb">
            <li><a href="#">تقارير مجمعة </a></li>
            <li><a href="categoryStoresSalesReport.php">  مبيعات التصنيفات بالمخازن</a></li>
            <li class="active">عرض</li>
        </ol>
        <div class="panel panel-default panel-m">

            <div class="panel-heading">{$message}</div>

            <form class="form-inline hidden-print" method="post" action="categoryStoresSalesReport.php?do=show">
                    <div class="form-group">
                        <label class="sr-only">اليوم</label>
                        <input type="text" class="form-control awdatepicker" autocomplete="off"   data-date-format="yyyy-mm-dd"  name="search_date" value="{$date}">
                    </div>

                    <div class="form-group">
                        <label class="sr-only">نوع العرض</label>
                        <div class="radio-inline">
                            <label>
                                <input value="price" class="radioR showTypeCls" name="showType" type="radio" checked="checked">
                                قيمة </label>
                        </div>
                        <div class="radio-inline">
                            <label>
                                <input value="quantity" class="radioR showTypeCls" name="showType" type="radio">
                                كمية </label>
                        </div>
                    </div>

                    <div class="form-group" id="priceTypeDiv">
                        <label class="sr-only">نوع السعر </label>
                        <div class="radio-inline">
                            <label>
                                <input value="sell" class="radioR" name="priceType" type="radio" checked="checked">
                                سعر البيع </label>
                        </div>
                        <div class="radio-inline">
                            <label>
                                <input value="cost" class="radioR" name="priceType" type="radio">
                                سعر التكلفة </label>
                        </div>
                    </div>
                    <br/>

                    <div class="form-group">
                        <label class="sr-only">عرض المخزن الرئيسي</label>
                        <input type="checkbox" name="showMAinStore" value="1" checked/>
                    </div>
                     
                    <button type="submit" class="btn btn-primary">بحث</button>
                   
            </form>
            <hr/>

            {if $warehouses}
            <div class="container">                
                <table class="table table-bordered table-striped text-center" id="example">
                    <thead>
                        <tr>
                            <th style="text-align: center;">المخازن</th>
                            {foreach from=$categories item=cat}
                                <th class="table-info" style="text-align: center;">{$cat.productCatName} </th>
                                <th class="table-warning" style="text-align: center;">المباع</th>
                            {/foreach}
                        </tr>
                    </thead>
                    <tbody>
                        <!-- عرض بيانات المخازن -->
                        {foreach from=$warehouses item=w}
                            <tr>
                                <td class="font-weight-bold">{$w.storeName}</td>
                                {foreach from=$categories item=cat}
                                    {$sid = $w.storeId}
                                    {$cid = $cat.productCatId}
                                    <td>{$dataMap[$sid][$cid]['start']|number_format:3}</td>
                                    <td>{$dataMap[$sid][$cid]['sold']|number_format:3}</td>
                                {/foreach}
                            </tr>
                        {/foreach}
                        
                        <!-- صف إجمالي التصنيفات في آخر الجدول -->
                        <tr class="table-dark" style="font-weight: bold; color: black;">
                            <td>الإجمالي</td>
                            {foreach from=$categories item=cat}
                                {$cid = $cat.productCatId}
                                <td>{$catTotals[$cid]['start']|number_format:3}</td>
                                <td>{$catTotals[$cid]['sold']|number_format:3}</td>
                            {/foreach}
                        </tr>
                    </tbody>
                </table>

            </div>
            {/if}


            <div class="clearfix"></div>
            <!-- <input type="button" class="btn btn-primary hidden-print" value="طباعة" onclick="print_Custom('mycustomheader')" /> -->
        </div>

    </div>

</div>

{literal}
<script type="text/javascript">
    $(document).ready(function () {
        $('body').on('change','.showTypeCls',function(){
            if($(this).val() == 'quantity'){
                $('#priceTypeDiv').css('display','none');
            }else{
                $('#priceTypeDiv').css('display','inline');
            }
        });

        $('#example').DataTable({
            dom: 'Bfrtip',
            "bPaginate": false,
            "aaSorting": [],
            buttons: [
                {
                    extend: 'print',
                    text: 'طباعة التقرير ',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    customize: function (win) {
                        // 1) تنظيف الهيدر الفارغ المكرر الخاص بالـ Scroll
                        $(win.document.body).find('.dataTables_scrollBody table thead').remove();

                        // جلب الجدول الأصلي من نافذة الطباعة
                        var $originalTable = $(win.document.body).find('table');
                        
                        // تحديد عدد التصنيفات في كل جزء (كل تصنيف له عمودان: أول اليوم + المباع)
                        // 4 تصنيفات تعني 8 أعمدة بيانات + عمود المخازن = 9 أعمدة إجمالاً وهو مثالي لعرض الورقة
                        var catsPerTable = 7; 
                        var columnsPerCat = 2;
                        
                        // حساب إجمالي عدد الأعمدة في الجدول (بدون عمود اسم المخزن الأول)
                        var totalDataCols = $originalTable.find('thead tr:first th').length - 1;
                        var totalChunks = Math.ceil((totalDataCols / columnsPerCat) / catsPerTable);

                        // مصفوفة للاحتفاظ بالجداول الجديدة المجزأة
                        var $dividedContainers = $('<div class="printed-chunks-container"></div>');

                        // بناء الجداول المجزأة بناءً على عدد المجموعات
                        for (var chunk = 0; chunk < totalChunks; chunk++) {
                            var startCol = 1 + (chunk * catsPerTable * columnsPerCat);
                            var endCol = startCol + (catsPerTable * columnsPerCat) - 1;

                            // إنشاء نسخة جديدة نظيفة من هيكل الجدول (الهيدر، الجسم، الإجمالي)
                            var $newTable = $('<table class="table table-bordered text-center compact" style="width:100%; direction:rtl; margin-bottom: 30px; font-size:11px;"></table>');
                            var $thead = $('<thead></thead>');
                            var $tbody = $('<tbody></tbody>');
                            var $tfoot = $('<tfoot></tfoot>');

                            // أ) نسخ أعمدة الهيدر لهذا الجزء
                            var $thr = $('<tr></tr>');
                            $thr.append($originalTable.find('thead tr th').eq(0).clone()); // عمود اسم المخزن
                            for (var c = startCol; c <= endCol; c++) {
                                var $th = $originalTable.find('thead tr th').eq(c);
                                if ($th.length) $thr.append($th.clone());
                            }
                            $thead.append($thr);

                            // ب) نسخ أسطر المخازن (البيانات) لهذا الجزء
                            $originalTable.find('tbody tr').each(function() {
                                if ($(this).hasClass('table-dark')) return; // تخطي سطر الإجمالي هنا لمعالجته لاحقاً
                                
                                var $tr = $('<tr></tr>');
                                $tr.append($(this).find('td').eq(0).clone()); // اسم المخزن
                                for (var c = startCol; c <= endCol; c++) {
                                    var $td = $(this).find('td').eq(c);
                                    if ($td.length) $tr.append($td.clone());
                                }
                                $tbody.append($tr);
                            });

                            // ج) نسخ سطر الإجمالي النهائي الخاص بهذه الأعمدة فقط
                            var $totalRow = $originalTable.find('tbody tr.table-dark, tfoot tr').first();
                            if ($totalRow.length) {
                                var $trFoot = $('<tr class="table-dark" style="font-weight:bold; background-color:#f2f2f2 !important; color:#000;"></tr>');
                                $trFoot.append($totalRow.find('td').eq(0).clone()); // كلمة الإجمالي
                                for (var c = startCol; c <= endCol; c++) {
                                    var $td = $totalRow.find('td').eq(c);
                                    if ($td.length) $trFoot.append($td.clone());
                                }
                                $tbody.append($trFoot); // إضافته في نهاية الـ tbody لضمان التنسيق في بعض المتصفحات
                            }

                            $newTable.append($thead).append($tbody);
                            
                            // إضافة عنوان توضيحي فوق كل جدول مجزأ
                            var partNum = chunk + 1;
                            $dividedContainers.append('<h4 style="direction:rtl; text-align:right; margin-top:20px;">تابع تقرير المخازن - الجزء (' + partNum + ' من ' + totalChunks + ')</h4>');
                            $dividedContainers.append($newTable);

                            // إضافة فاصل صفحة تلقائي بعد كل جدول إذا أردت أن يطبع كل جدول في ورقة مستقلة
                            if (chunk < totalChunks - 1) {
                                $dividedContainers.append('<div style="page-break-after: always;"></div>');
                            }
                        }

                        // استبدال الجدول القديم العريض جداً بالجداول الجديدة المجزأة والمنظمة
                        $originalTable.replaceWith($dividedContainers);

                        // إرسال ستايل الطباعة لتنسيق الهوامش والخطوط
                        var css = '@page { size: landscape; margin: 10mm; } ' +
                                'body { margin: 0; padding: 0; background: #fff !important; }' +
                                'table { border-collapse: collapse !important; }' +
                                'th, td { padding: 6px !important; border: 1px solid #000 !important; text-align: center !important; }' +
                                '.table-dark { background-color: #e9ecef !important; color: #000 !important; }';
                        
                        var head = win.document.head || win.document.getElementsByTagName('head');
                        var style = win.document.createElement('style');
                        style.type = 'text/css';
                        if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(win.document.createTextNode(css)); }
                        head.appendChild(style);
                    }
                }
            ],
            scrollX: true
});

    });


</script>
{/literal}