
<?php $__env->startSection('title', 'قائمة الموردين'); ?>
<?php $__env->startPush('css'); ?>
<style>
    /* ضبط عرض أعمدة جدول الموردين */
    /* عمود # صغير */
    #serverSideTable th:nth-child(1),
    #serverSideTable td:nth-child(1) {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 50px !important;
        text-align: center;
    }
    /* عمود الاسم أكبر */
    #serverSideTable th:nth-child(2),
    #serverSideTable td:nth-child(2) {
        min-width: 180px !important;
        width: 200px !important;
    }
    /* عمود الإجراءات (السابع) مع حد فاصل واضح */
    #serverSideTable th:nth-child(7),
    #serverSideTable td:nth-child(7) {
        width: 110px !important;
        min-width: 110px !important;
        text-align: center;
        border-right: 2px solid #ddd !important;
    }
    /* حد فاصل أيسر لعمود الحساب للتأكيد */
    #serverSideTable th:nth-child(6),
    #serverSideTable td:nth-child(6) {
        border-left: 2px solid #ddd !important;
    }
</style>
<?php $__env->stopPush(); ?>
<?php $__env->startSection('content'); ?>
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                الموردين
                <?php if($currentUser->can('Create Suppliers')): ?>
                    <a data-toggle="modal" data-target="#myModal" class="btn btn-success pull-right"
                        href="<?php echo e(route('suppliers.create')); ?>"><i class="fa fa-plus"></i> إضافة</a>
                <?php endif; ?>
                
                <a class="btn btn-primary" href="javascript:void(0)" onclick="openReportThemeModal();" style="margin-right:5px;">
                    <i class="fa fa-print"></i> طباعة منسّقة
                </a>
            </h1>
        </section>

        <!-- Main content -->
        <section class="content">

            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="serverSideTable" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>الاسم</th>
                                        <th>رقم الجوال</th>
                                        <th>رقم الهوية</th>
                                        <th>الرقم الضريبي</th>
                                        <th>الحساب</th>
                                        <th class="no-sort">الإجراءات</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->

        
        <div id="report-theme-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:9999; align-items:center; justify-content:center;">
            <div style="background:#fff; border-radius:12px; padding:28px 32px; width:480px; max-width:95vw; box-shadow:0 8px 40px rgba(0,0,0,0.25); direction:rtl;">
                <h4 style="margin:0 0 6px 0; font-size:17px; color:#1a3c5e;">اختر تصميم التقرير</h4>
                <p style="margin:0 0 20px 0; font-size:12px; color:#777;">التصميم سيظهر في نافذة الطباعة مع هيدر موحّد</p>
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px;">
                    <div class="report-theme-card" onclick="selectReportTheme('navy')" data-theme="navy"
                         style="border:2px solid #1a3c5e; border-radius:8px; padding:12px; cursor:pointer; text-align:center; background:#f0f4f8;">
                        <div style="height:28px; background:#1a3c5e; border-radius:4px; margin-bottom:8px;"></div>
                        <div style="height:8px; background:#c8960a; border-radius:2px; margin-bottom:6px;"></div>
                        <div style="height:6px; background:#eef2f7; border-radius:2px;"></div>
                        <div style="margin-top:8px; font-size:12px; font-weight:bold; color:#1a3c5e;">كحلي ذهبي</div>
                        <div style="font-size:10px; color:#888;">الافتراضي</div>
                    </div>
                    <div class="report-theme-card" onclick="selectReportTheme('green')" data-theme="green"
                         style="border:2px solid #ddd; border-radius:8px; padding:12px; cursor:pointer; text-align:center; background:#fff;">
                        <div style="height:28px; background:#1b5e38; border-radius:4px; margin-bottom:8px;"></div>
                        <div style="height:8px; background:#4caf50; border-radius:2px; margin-bottom:6px;"></div>
                        <div style="height:6px; background:#e8f5e9; border-radius:2px;"></div>
                        <div style="margin-top:8px; font-size:12px; font-weight:bold; color:#1b5e38;">أخضر</div>
                        <div style="font-size:10px; color:#888;">رسمي هادئ</div>
                    </div>
                    <div class="report-theme-card" onclick="selectReportTheme('gray')" data-theme="gray"
                         style="border:2px solid #ddd; border-radius:8px; padding:12px; cursor:pointer; text-align:center; background:#fff;">
                        <div style="height:28px; background:#37474f; border-radius:4px; margin-bottom:8px;"></div>
                        <div style="height:8px; background:#90a4ae; border-radius:2px; margin-bottom:6px;"></div>
                        <div style="height:6px; background:#eceff1; border-radius:2px;"></div>
                        <div style="margin-top:8px; font-size:12px; font-weight:bold; color:#37474f;">رمادي</div>
                        <div style="font-size:10px; color:#888;">احترافي بسيط</div>
                    </div>
                    <div class="report-theme-card" onclick="selectReportTheme('burgundy')" data-theme="burgundy"
                         style="border:2px solid #ddd; border-radius:8px; padding:12px; cursor:pointer; text-align:center; background:#fff;">
                        <div style="height:28px; background:#6a0f2a; border-radius:4px; margin-bottom:8px;"></div>
                        <div style="height:8px; background:#c0392b; border-radius:2px; margin-bottom:6px;"></div>
                        <div style="height:6px; background:#fdf0f0; border-radius:2px;"></div>
                        <div style="margin-top:8px; font-size:12px; font-weight:bold; color:#6a0f2a;">بردوني</div>
                        <div style="font-size:10px; color:#888;">فخم مميز</div>
                    </div>
                </div>
                <div style="display:flex; gap:10px; justify-content:flex-end;">
                    <button type="button" onclick="closeReportThemeModal()" style="padding:8px 20px; border:1px solid #ddd; border-radius:6px; background:#f5f5f5; cursor:pointer; font-size:13px;">إغلاق</button>
                    <button type="button" onclick="printStyledReport();" style="padding:8px 20px; border:none; border-radius:6px; background:#1a3c5e; color:#fff; cursor:pointer; font-size:13px;">
                        <i class="fa fa-print"></i> طباعة الآن
                    </button>
                </div>
            </div>
        </div>

        <div id="myModal" class="modal fade" style="overflow:hidden;" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                        <p class="text-center">
                        <div class="fa-3x text-center"><i class="fa fa-cog fa-spin"></i>
                            << جارى التحميل>>
                        </div>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">إغلاق</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>
<script>
    var pageUrl = "<?php echo e(route('suppliers.index')); ?>";
    var columns = [];
    columns.push({
            data: null,
            name: '#',
            orderable: false,
            searchable: false
        },
        //{data: "branche", name: "branche"},
        {
            data: "name",
            name: "name"
        }, {
            data: "mobile",
            name: "mobile"
        }, {
            data: "id_number",
            name: "id_number"
        }, {
            data: "tax_number",
            name: "tax_number"
        }, {
            data: "balance",
            name: "balance"
        }, {
            data: 'actions',
            name: 'actions',
            orderable: false,
            searchable: false
        }
    );
</script>
<?php echo $__env->make('_partial.datatable', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php $__env->startPush('js'); ?>
    <script>
        /* ═══════════════════════════════════════════════════════════
           ✨ نظام الطباعة المنسّقة مع اختيار التصاميم
        ═══════════════════════════════════════════════════════════ */

        var reportThemes = {
            navy:     { primary:'#1a3c5e', primaryDk:'#0d2a45', accent:'#c8960a', accentLt:'#f0b429', rowAlt:'#f4f7fc', lblBg:'#eef2f7' },
            green:    { primary:'#1b5e38', primaryDk:'#144d2c', accent:'#4caf50', accentLt:'#81c784', rowAlt:'#f1f8f2', lblBg:'#e8f5e9' },
            gray:     { primary:'#37474f', primaryDk:'#263238', accent:'#78909c', accentLt:'#b0bec5', rowAlt:'#f5f6f7', lblBg:'#eceff1' },
            burgundy: { primary:'#6a0f2a', primaryDk:'#4a0a1e', accent:'#c0392b', accentLt:'#e57373', rowAlt:'#fdf5f6', lblBg:'#fdf0f0' }
        };
        var currentReportTheme = localStorage.getItem('report_theme') || 'navy';

        var reportSettings = {
            siteName:    <?php echo json_encode($settings['SiteName']    ?? '', 15, 512) ?>,
            siteNameEn:  <?php echo json_encode($settings['SiteNameEn']  ?? '', 15, 512) ?>,
            address:     <?php echo json_encode($settings['Address']     ?? '', 15, 512) ?>,
            addressEn:   <?php echo json_encode($settings['AddressEn']   ?? '', 15, 512) ?>,
            mobile:      <?php echo json_encode($settings['mobile']      ?? '', 15, 512) ?>,
            mobileEn:    <?php echo json_encode($settings['mobileEn']    ?? '', 15, 512) ?>,
            taxNumber:   <?php echo json_encode($settings['taxnumber']   ?? '', 15, 512) ?>,
            taxNumberEn: <?php echo json_encode($settings['taxnumberEn'] ?? '', 15, 512) ?>,
            logo:        <?php echo json_encode(!empty($settings['logo']) ? \Illuminate\Support\Facades\Storage::url('logo/' . $settings['logo']) : '', 15, 512) ?>
        };
        var reportTitle    = <?php echo json_encode('قائمة الموردين', 15, 512) ?>;
        var reportUserName = <?php echo json_encode(optional($currentUser)->name ?? '', 15, 512) ?>;

        function openReportThemeModal() {
            document.getElementById('report-theme-modal').style.display = 'flex';
            updateThemeCards();
        }
        function closeReportThemeModal() {
            document.getElementById('report-theme-modal').style.display = 'none';
        }
        function updateThemeCards() {
            document.querySelectorAll('.report-theme-card').forEach(function(c) {
                var name   = c.getAttribute('data-theme');
                var t      = reportThemes[name];
                var active = (name === currentReportTheme);
                c.style.border     = active ? '2px solid ' + t.primary : '2px solid #ddd';
                c.style.background = active ? '#f0f4f8' : '#fff';
            });
        }
        function selectReportTheme(name) {
            currentReportTheme = name;
            localStorage.setItem('report_theme', name);
            updateThemeCards();
        }

        function escapeHtml(str) {
            return String(str == null ? '' : str).replace(/[&<>"']/g, function(c) {
                return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
            });
        }

        function printStyledReport() {
            var t  = reportThemes[currentReportTheme];
            var dt = $('#serverSideTable').DataTable();

            // 1) جمع رؤوس الأعمدة الظاهرة (تخطّي عمود # وعمود الإجراءات)
            var headers     = [];
            var visibleIdxs = [];
            dt.columns().every(function() {
                if (!this.visible()) return;
                var colIdx = this.index();
                if (colIdx === 0) return; // تخطّي عمود #
                var $h = $(this.header());
                if ($h.hasClass('no-sort')) return;
                var txt = $h.text().trim();
                if (!txt || txt === '#') return;
                headers.push(txt);
                visibleIdxs.push(colIdx);
            });

            // 2) جمع بيانات الصفوف
            var rowsHtml = '';
            var rowIter  = 0;
            $('#serverSideTable tbody > tr').each(function() {
                var $tr = $(this);
                if ($tr.find('.dataTables_empty').length) return;
                rowIter++;
                var rowClass = (rowIter % 2 === 0) ? 'row-even' : '';
                var rowHtml  = '<tr class="' + rowClass + '">';
                visibleIdxs.forEach(function(colIdx) {
                    var cellNode = null;
                    try { cellNode = dt.cell($tr.get(0), colIdx).node(); } catch (e) {}
                    var text = cellNode ? $(cellNode).text().trim() : '';
                    rowHtml += '<td class="td-center">' + escapeHtml(text) + '</td>';
                });
                rowHtml += '</tr>';
                rowsHtml += rowHtml;
            });

            if (rowIter === 0) {
                alert('لا توجد بيانات للطباعة');
                return;
            }

            // 3) تاريخ ووقت الطباعة
            var now     = new Date();
            var pad     = function(n) { return ('0' + n).slice(-2); };
            var dateStr = now.getFullYear() + '-' + pad(now.getMonth() + 1) + '-' + pad(now.getDate());
            var timeStr = pad(now.getHours()) + ':' + pad(now.getMinutes());

            // 4) بناء الهيدر الموحّد — RTL: العربي يمين، اللوجو وسط، الإنجليزي يسار
            var headerHtml = '' +
                '<div class="report-header">' +
                    '<table style="width:100%; table-layout:fixed; direction:rtl; border-collapse:collapse;">' +
                        '<tr>' +
                            '<td style="width:36%; vertical-align:middle; text-align:right; direction:rtl; padding:0 0 0 10px;">' +
                                '<div style="font-size:16px; font-weight:bold; line-height:1.6; color:var(--theme-primary);">' + escapeHtml(reportSettings.siteName) + '</div>' +
                                (reportSettings.address ? '<div style="font-size:11px; font-weight:bold; line-height:1.5;">' + escapeHtml(reportSettings.address) + '</div>' : '') +
                                (reportSettings.mobile  ? '<div style="font-size:11px; font-weight:bold; line-height:1.5;">' + escapeHtml(reportSettings.mobile)  + '</div>' : '') +
                                '<div style="font-size:11px; font-weight:bold; line-height:1.5;">الرقم الضريبى: ' + escapeHtml(reportSettings.taxNumber) + '</div>' +
                            '</td>' +
                            '<td style="width:28%; vertical-align:middle; text-align:center; padding:0 8px;">' +
                                (reportSettings.logo ? '<img style="max-height:100px; max-width:100%;" src="' + reportSettings.logo + '">' : '') +
                            '</td>' +
                            '<td style="width:36%; vertical-align:middle; text-align:left; direction:ltr; padding:0 10px 0 0;">' +
                                '<div style="font-size:16px; font-weight:bold; line-height:1.6; color:var(--theme-primary);">' + escapeHtml(reportSettings.siteNameEn) + '</div>' +
                                (reportSettings.addressEn ? '<div style="font-size:11px; font-weight:bold; line-height:1.5;">' + escapeHtml(reportSettings.addressEn) + '</div>' : '') +
                                (reportSettings.mobileEn  ? '<div style="font-size:11px; font-weight:bold; line-height:1.5;">' + escapeHtml(reportSettings.mobileEn)  + '</div>' : '') +
                                '<div style="font-size:11px; font-weight:bold; line-height:1.5;">Tax Number: ' + escapeHtml(reportSettings.taxNumberEn) + '</div>' +
                            '</td>' +
                        '</tr>' +
                    '</table>' +
                '</div>';

            // 5) عنوان التقرير
            var titleHtml = '<div class="inv-title-block">' +
                '<div class="inv-title-ar">' + escapeHtml(reportTitle) + '</div>' +
                '<div class="inv-number">تاريخ الإصدار &nbsp;|&nbsp; Issued: <strong>' + dateStr + ' — ' + timeStr + '</strong></div>' +
                '</div>';

            // 6) شريط المعلومات
            var metaHtml = '<table class="meta-table"><tr>' +
                '<td><span class="meta-lbl">اسم التقرير (Report):</span>' + escapeHtml(reportTitle) + '</td>' +
                '<td><span class="meta-lbl">المستخدم (User):</span>' + escapeHtml(reportUserName) + '</td>' +
                '<td><span class="meta-lbl">عدد السجلات (Count):</span>' + rowIter + '</td>' +
                '<td><span class="meta-lbl">الوقت (Time):</span>' + timeStr + '</td>' +
                '</tr></table>';

            // 7) جدول البيانات
            var tableHeadHtml = '<tr class="items-head-row">';
            headers.forEach(function(h) {
                tableHeadHtml += '<th>' + escapeHtml(h) + '</th>';
            });
            tableHeadHtml += '</tr>';
            var tableHtml = '<table class="items-tbl"><thead>' + tableHeadHtml + '</thead><tbody>' + rowsHtml + '</tbody></table>';

            // 8) التذييل
            var footerHtml = '<div class="report-footer">© ' + now.getFullYear() + ' ' + escapeHtml(reportSettings.siteName) + '</div>';

            // 9) بناء HTML كامل + CSS
            var css = buildReportCSS(t);
            var fullHtml =
                '<!DOCTYPE html>' +
                '<html lang="ar" dir="rtl">' +
                '<head>' +
                    '<meta charset="UTF-8">' +
                    '<title>' + escapeHtml(reportTitle) + '</title>' +
                    '<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap" rel="stylesheet">' +
                    '<style>' + css + '</style>' +
                '</head>' +
                '<body>' +
                    '<div id="printReport">' +
                        headerHtml +
                        titleHtml +
                        metaHtml +
                        tableHtml +
                        footerHtml +
                    '</div>' +
                    '<script>window.addEventListener("load", function(){ setTimeout(function(){ window.focus(); window.print(); }, 400); });<\/script>' +
                '</body></html>';

            // 10) فتح النافذة والكتابة
            var printWin = window.open('', '_blank', 'width=1100,height=800');
            if (!printWin) {
                alert('يرجى السماح بالنوافذ المنبثقة في المتصفح للطباعة');
                return;
            }
            printWin.document.open();
            printWin.document.write(fullHtml);
            printWin.document.close();

            closeReportThemeModal();
        }

        function buildReportCSS(t) {
            return [
                ':root{',
                    '--theme-primary:'    + t.primary    + ';',
                    '--theme-primary-dk:' + t.primaryDk  + ';',
                    '--theme-accent:'     + t.accent     + ';',
                    '--theme-accent-lt:'  + t.accentLt   + ';',
                    '--theme-row-alt:'    + t.rowAlt     + ';',
                    '--theme-lbl-bg:'     + t.lblBg      + ';',
                '}',
                '*{box-sizing:border-box;}',
                'html,body{margin:0;padding:0;}',
                'body{font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif;direction:rtl;padding:12px;color:#111;font-size:12px;background:#fff;}',
                '#printReport{width:100%;max-width:100%;margin:0 auto;overflow:hidden;}',
                '.report-header{margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--theme-primary);}',
                '.report-header table{width:100% !important;max-width:100% !important;}',
                '.inv-title-block{text-align:center;border-top:3px solid var(--theme-primary);border-bottom:3px solid var(--theme-primary);padding:8px 0;margin-bottom:8px;forced-color-adjust:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;}',
                '.inv-title-ar{font-size:18px;font-weight:900;color:var(--theme-primary);letter-spacing:1px;}',
                '.inv-number{font-size:12px;color:#555;margin-top:3px;}',
                '.inv-number strong{color:var(--theme-accent);font-size:13px;}',
                '.meta-table{width:100% !important;max-width:100% !important;table-layout:fixed;background:var(--theme-primary);color:#fff;margin-bottom:10px;border-collapse:collapse;border-radius:3px;forced-color-adjust:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;}',
                '.meta-table td{padding:6px 8px;font-size:11px;text-align:center;border:none;vertical-align:middle;word-wrap:break-word;overflow-wrap:break-word;}',
                '.meta-lbl{display:block;color:var(--theme-accent-lt);font-weight:bold;font-size:10px;margin-bottom:2px;}',
                '.items-tbl{width:100% !important;max-width:100% !important;border-collapse:collapse;margin-bottom:10px;table-layout:fixed;border:2px solid #333;}',
                '.items-tbl thead .items-head-row th{background:var(--theme-primary);color:#fff;text-align:center;font-size:11px;font-weight:bold;padding:7px 3px;border:1px solid var(--theme-primary-dk);line-height:1.4;word-wrap:break-word;overflow-wrap:break-word;forced-color-adjust:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;}',
                '.items-tbl tbody tr td{border:1px solid #333;padding:5px 3px;font-size:11px;font-weight:bold;vertical-align:middle;text-align:center;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;white-space:normal;}',
                '.items-tbl tbody tr.row-even td{background:var(--theme-row-alt);}',
                '.report-footer{text-align:center;font-size:10px;color:#888;margin-top:12px;padding-top:6px;border-top:1px dashed #ccc;}',
                '@media  print{',
                    '@page{margin:15mm 12mm;}',
                    'html,body{margin:0 !important;padding:0 !important;width:100% !important;}',
                    '#printReport{width:100% !important;max-width:100% !important;padding:0 !important;margin:0 !important;}',
                    '*{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;color-adjust:exact !important;}',
                    '.items-tbl{width:100% !important;max-width:100% !important;table-layout:fixed !important;border:2px solid #333 !important;}',
                    '.items-tbl tbody tr{page-break-inside:avoid;break-inside:avoid;}',
                    '.items-tbl thead{display:table-header-group;}',
                    '.report-header,.inv-title-block,.meta-table{page-break-inside:avoid;}',
                '}'
            ].join('');
        }

        // تحديث بطاقات الثيم + إخفاء زر الطباعة الافتراضي من DataTables
        $(document).ready(function() {
            setTimeout(function() {
                updateThemeCards();
                $('.dt-buttons .buttons-print').hide();
            }, 400);
        });

        // إغلاق المودال عند النقر خارجه
        document.addEventListener('click', function(e) {
            var modal = document.getElementById('report-theme-modal');
            if (e.target === modal) closeReportThemeModal();
        });
    </script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layouts.front', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/mwarsha2023/public_html/test4.mwarsha.com/resources/views/suppliers/index.blade.php ENDPATH**/ ?>