
<?php $__env->startSection('title','أوامر الشغل'); ?>

<?php $__env->startPush('css'); ?>
<style>
    .workordersTableWrap {
        overflow-x: auto;
    }

    .dataTableWO {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    .dataTableWO th,
    .dataTableWO td {
        vertical-align: middle !important;
        text-align: center !important;
    }

    .dataTableWO thead th {
        background: #f7f7f7 !important;
        font-weight: bold !important;
        border: 1px solid #d2d6de !important;
        white-space: nowrap !important;
    }

    .dataTableWO tbody td {
        border: 1px solid #d2d6de !important;
    }

    .dataTableWO tbody tr:nth-child(even) td {
        background: #fcfcfc;
    }

    .dataTableWO th.col-index,
    .dataTableWO td.col-index {
        width: 40px !important;
        min-width: 40px !important;
    }

    .dataTableWO th.col-name,
    .dataTableWO td.col-name {
        min-width: 130px !important;
    }

    .dataTableWO th.col-entry,
    .dataTableWO td.col-entry,
    .dataTableWO th.col-exit,
    .dataTableWO td.col-exit {
        min-width: 110px !important;
        width: 110px !important;
    }

    .dataTableWO th.col-user,
    .dataTableWO td.col-user,
    .dataTableWO th.col-client,
    .dataTableWO td.col-client,
    .dataTableWO th.col-mobile,
    .dataTableWO td.col-mobile,
    .dataTableWO th.col-model,
    .dataTableWO td.col-model,
    .dataTableWO th.col-year,
    .dataTableWO td.col-year,
    .dataTableWO th.col-chassis,
    .dataTableWO td.col-chassis,
    .dataTableWO th.col-plate,
    .dataTableWO td.col-plate,
    .dataTableWO th.col-kilo,
    .dataTableWO td.col-kilo {
        min-width: 95px !important;
        white-space: nowrap !important;
    }

    .dataTableWO th.col-actions,
    .dataTableWO td.col-actions {
        min-width: 120px !important;
        width: 120px !important;
        white-space: nowrap !important;
        border-right: 3px solid #555 !important;
        border-left: 3px solid #555 !important;
    }

    .dataTableWO.table-bordered > thead > tr > th.col-actions,
    .dataTableWO.table-bordered > tbody > tr > td.col-actions,
    .dataTableWO.table-bordered > tfoot > tr > th.col-actions {
        border-right: 3px solid #555 !important;
        border-left: 3px solid #555 !important;
    }

    .dataTableWO.table-bordered > thead > tr > th.col-kilo,
    .dataTableWO.table-bordered > tbody > tr > td.col-kilo,
    .dataTableWO.table-bordered > tfoot > tr > th.col-kilo {
        border-left: 3px solid #555 !important;
    }

    .wo-date-stack {
        line-height: 1.35 !important;
        font-weight: bold;
        display: inline-block;
        min-width: 90px;
    }

    .wo-date-stack .day,
    .wo-date-stack .date,
    .wo-date-stack .time {
        display: block;
        white-space: nowrap;
        font-size: 12px;
    }

    .dt-buttons .buttons-print {
        display: none !important;
    }

    @media  print {
        .hideprint,
        .box-header,
        .content-header,
        nav, header, footer,
        .sidebar, .main-sidebar, .navbar, .main-header,
        .btn, .pagination, .dataTables_length, .dataTables_filter, .dataTables_info {
            display: none !important;
        }
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                أوامر الشغل

                <span style="float:left; display:flex; gap:5px; align-items:center;">
                    <?php if($currentUser->can('Create WorkOrders')): ?>
                        <a class="btn btn-success" href="<?php echo e(route('workorders.create')); ?>">
                            <i class="fa fa-plus"></i> إضافة
                        </a>
                    <?php endif; ?>

                    <a class="btn btn-primary" href="javascript:void(0)" onclick="openReportThemeModal();">
                        <i class="fa fa-print"></i> طباعة منسقة
                    </a>
                </span>

                <div style="clear:both;"></div>
            </h1>
        </section>

        <section class="content">
            <?php echo $__env->make('_partial.workorderfilter', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-body workordersTableWrap">
                            <table id="serverSideTable" class="table table-bordered table-hover dataTableWO">
                                <thead>
                                    <tr>
                                        <th class="col-index">#</th>
                                        <th class="col-name">الاسم</th>
                                        <th class="col-entry">تاريخ الدخول</th>
                                        <th class="col-exit">تاريخ الخروج</th>
                                        <th class="col-user">المستخدم</th>
                                        <th class="col-client">العميل</th>
                                        <th class="col-mobile">الجوال</th>
                                        <th class="col-model">موديل</th>
                                        <th class="col-year">سنة الصنع</th>
                                        <th class="col-chassis">الشاسيه</th>
                                        <th class="col-plate">اللوحة</th>
                                        <th class="col-kilo">عداد الكيلو</th>
                                        <th class="col-actions hideprint">الإجراءات</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <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:520px; 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>

                    <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>

                    <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>

                    <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>
                </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>
<?php $__env->stopSection(); ?>

<script>
    var pageUrl = "<?php echo e(route('workorders.index')); ?>";
    var columns = [];

    columns.push(
        {data:null, name:'#', orderable:false, searchable:false, className:'col-index'},
        {data:"name", name:"name", className:'col-name'},
        {data:"entery", name:"entery", className:'col-entry'},
        {data:"exit", name:"exit", className:'col-exit'},
        {data:"creator", name:"creator", className:'col-user'},
        {data:"client", name:"client", className:'col-client'},
        {data:"mobile", name:"mobile", className:'col-mobile'},
        {data:"model", name:"model", className:'col-model'},
        {data:"manufacture_year", name:"manufacture_year", orderable:false, searchable:false, className:'col-year'},
        {data:"chassis_no", name:"chassis_no", className:'col-chassis'},
        {data:"car_number", name:"car_number", className:'col-plate'},
        {data:"kilo_counter", name:"kilo_counter", className:'col-kilo'},
        {data:"actions", name:"actions", orderable:false, searchable:false, className:'col-actions hideprint'}
    );
</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('workorder_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'] ?? $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('workorder_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 headers = [];
        document.querySelectorAll('#serverSideTable thead th').forEach(function(th) {
            if (th.classList.contains('hideprint')) return;
            headers.push(th.textContent.trim());
        });

        var rowsHtml = '';
        var rowIter = 0;

        document.querySelectorAll('#serverSideTable tbody tr').forEach(function(tr) {
            var tds = tr.querySelectorAll('td');
            if (!tds.length || tr.querySelector('td.dataTables_empty')) return;

            rowIter++;
            var rowClass = (rowIter % 2 === 0) ? 'row-even' : '';
            var rowHtml = '<tr class="' + rowClass + '">';

            tds.forEach(function(td) {
                if (td.classList.contains('hideprint')) return;
                rowHtml += '<td class="td-center">' + escapeHtml(td.innerText.trim()) + '</td>';
            });

            rowHtml += '</tr>';
            rowsHtml += rowHtml;
        });

        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());

        var headerHtml =
            '<div class="report-header">' +
                '<table class="header-table">' +
                    '<tr>' +
                        '<td class="header-right">' +
                            '<div class="site-name-ar">' + escapeHtml(reportSettings.siteName) + '</div>' +
                            (reportSettings.address ? '<div class="small-line">' + escapeHtml(reportSettings.address) + '</div>' : '') +
                            (reportSettings.mobile ? '<div class="small-line">' + escapeHtml(reportSettings.mobile) + '</div>' : '') +
                            '<div class="small-line">الرقم الضريبي: ' + escapeHtml(reportSettings.taxNumber) + '</div>' +
                        '</td>' +
                        '<td class="header-center">' +
                            (reportSettings.logo ? '<img class="site-logo" src="' + reportSettings.logo + '">' : '') +
                        '</td>' +
                        '<td class="header-left">' +
                            '<div class="site-name-en">' + escapeHtml(reportSettings.siteNameEn) + '</div>' +
                            (reportSettings.addressEn ? '<div class="small-line">' + escapeHtml(reportSettings.addressEn) + '</div>' : '') +
                            (reportSettings.mobileEn ? '<div class="small-line">' + escapeHtml(reportSettings.mobileEn) + '</div>' : '') +
                            '<div class="small-line">Tax Number: ' + escapeHtml(reportSettings.taxNumberEn || reportSettings.taxNumber) + '</div>' +
                        '</td>' +
                    '</tr>' +
                '</table>' +
            '</div>';

        var titleHtml =
            '<div class="report-title-wrap">' +
                '<div class="report-title-line"></div>' +
                '<div class="report-title">' + escapeHtml(reportTitle) + '</div>' +
                '<div class="report-title-line"></div>' +
            '</div>';

        var metaHtml =
            '<table class="meta-table"><tr>' +
                '<td><span class="meta-lbl">اسم التقرير</span>' + escapeHtml(reportTitle) + '</td>' +
                '<td><span class="meta-lbl">المستخدم</span>' + escapeHtml(reportUserName) + '</td>' +
                '<td><span class="meta-lbl">عدد السجلات</span>' + rowIter + '</td>' +
                '<td><span class="meta-lbl">تاريخ الطباعة</span>' + dateStr + ' - ' + timeStr + '</td>' +
            '</tr></table>';

        var tableHeadHtml = '<tr class="items-head-row">';
        headers.forEach(function(h) {
            tableHeadHtml += '<th>' + escapeHtml(h) + '</th>';
        });
        tableHeadHtml += '</tr>';

        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>' + buildReportCSS(t) + '</style>' +
                '</head>' +
                '<body>' +
                    '<div id="printReport">' +
                        headerHtml +
                        titleHtml +
                        metaHtml +
                        '<table class="items-tbl">' +
                            '<thead>' + tableHeadHtml + '</thead>' +
                            '<tbody>' + rowsHtml + '</tbody>' +
                        '</table>' +
                    '</div>' +
                    '<script>window.addEventListener("load", function(){ setTimeout(function(){ window.focus(); window.print(); }, 400); });<\/script>' +
                '</body>' +
            '</html>';

        var printWin = window.open('', '_blank', 'width=1400,height=900');
        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 + ';',
            '}',
            '*{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;}',
            '.report-header{margin-bottom:10px;border-bottom:2px solid var(--theme-primary);padding-bottom:10px;}',
            '.header-table{width:100%;table-layout:fixed;border-collapse:collapse;}',
            '.header-right{width:36%;text-align:right;vertical-align:middle;}',
            '.header-center{width:28%;text-align:center;vertical-align:middle;}',
            '.header-left{width:36%;text-align:left;vertical-align:middle;direction:ltr;}',
            '.site-logo{max-height:72px;max-width:100%;}',
            '.site-name-ar,.site-name-en{font-size:16px;font-weight:900;color:var(--theme-primary);line-height:1.6;}',
            '.small-line{font-size:11px;font-weight:bold;line-height:1.5;color:#333;}',
            '.report-title-wrap{text-align:center;margin:12px 0 10px 0;}',
            '.report-title-line{height:3px;background:var(--theme-primary);width:100%;}',
            '.report-title{font-size:20px;font-weight:900;color:var(--theme-primary);padding:8px 0;}',
            '.meta-table{width:100%;table-layout:fixed;background:var(--theme-primary);color:#fff;margin-bottom:10px;border-collapse:collapse;}',
            '.meta-table td{padding:8px 6px;font-size:11px;text-align:center;border:none;}',
            '.meta-lbl{display:block;color:var(--theme-accent-lt);font-weight:bold;font-size:10px;margin-bottom:2px;}',
            '.items-tbl{width:100%;border-collapse:collapse;table-layout:fixed;border:2px solid #333;}',
            '.items-tbl thead 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);}',
            '.items-tbl tbody td{border:1px solid #333;padding:6px 4px;font-size:11px;font-weight:bold;vertical-align:middle;text-align:center;white-space:pre-line;}',
            '.items-tbl tbody tr.row-even td{background:var(--theme-row-alt);}',
            '.items-tbl thead tr th:nth-last-child(2), .items-tbl tbody tr td:nth-last-child(2){border-left:3px solid #888 !important;}',
            '@media  print{',
                '@page{margin:12mm 10mm;}',
                'html,body{margin:0 !important;padding:0 !important;}',
                '*{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}',
                '.items-tbl thead{display:table-header-group;}',
                '.items-tbl tbody tr{page-break-inside:avoid;break-inside:avoid;}',
            '}'
        ].join('');
    }

    $(document).ready(function() {
        updateThemeCards();
    });

    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/workorders/index.blade.php ENDPATH**/ ?>