<?php // vars: $settings, $errors ?>
<?php $docs = $settings['documents'] ?? []; ?>
<?php
$areaLabels = ['header' => 'Header Zones', 'body' => 'Body Zones', 'footer' => 'Footer Zones'];
$renderPreviewCard = static function (string $docKey, string $templateKey, array $templateSections, array $sectionDefinitions) use ($areaLabels): void {
    ?>
    <div class="print-template-preview border rounded-4 bg-white p-3 mt-3" data-template-preview data-doc="<?= e($docKey) ?>" data-template="<?= e($templateKey) ?>">
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <div>
          <div class="fw-semibold">معاينة تنظيم القالب</div>
          <div class="text-muted small">هذه المعاينة إدارية فقط لتوضيح ترتيب الأقسام. اختيار القالب يتم من إعدادات الطباعة هنا فقط، وليس من شاشة طباعة المستند.</div>
        </div>
        <span class="badge text-bg-light"><?= e($templateKey) ?></span>
      </div>
      <div class="row g-3">
        <?php foreach ($areaLabels as $areaKey => $areaLabel): ?>
          <?php
          $rows = [];
          $definedSections = is_array($sectionDefinitions[$areaKey] ?? null) ? $sectionDefinitions[$areaKey] : [];
          foreach ($definedSections as $sectionKey => $sectionDef) {
              $sectionData = is_array($templateSections[$areaKey][$sectionKey] ?? null) ? $templateSections[$areaKey][$sectionKey] : [];
              $rows[] = [
                  'key' => $sectionKey,
                  'label' => (string)($sectionDef['label'] ?? $sectionKey),
                  'enabled' => !array_key_exists('enabled', $sectionData) || !empty($sectionData['enabled']),
                  'order' => (int)($sectionData['order'] ?? ($sectionDef['order'] ?? 10)),
                  'title' => trim((string)($sectionData['title'] ?? ($sectionDef['default_title'] ?? ''))),
              ];
          }
          usort($rows, static function (array $a, array $b): int {
              return $a['order'] <=> $b['order'];
          });
          ?>
          <div class="col-lg-4">
            <div class="preview-zone h-100 border rounded-4 p-3 bg-light-subtle" data-preview-area="<?= e($areaKey) ?>">
              <div class="fw-semibold mb-2"><?= e($areaLabel) ?></div>
              <div class="small text-muted mb-2">الترتيب الحالي للأقسام داخل هذا الجزء.</div>
              <div class="preview-zone-list d-grid gap-2">
                <?php foreach ($rows as $row): ?>
                  <div class="preview-chip <?= $row['enabled'] ? 'is-enabled' : 'is-disabled' ?>" data-preview-section="<?= e($areaKey . ':' . $row['key']) ?>">
                    <div class="d-flex justify-content-between align-items-center gap-2">
                      <div class="fw-semibold">#<?= e((string)$row['order']) ?> — <?= e($row['title'] !== '' ? $row['title'] : $row['label']) ?></div>
                      <span class="badge <?= $row['enabled'] ? 'text-bg-success' : 'text-bg-secondary' ?>">
                        <?= e($row['enabled'] ? 'مفعل' : 'مخفي') ?>
                      </span>
                    </div>
                    <div class="small text-muted mt-1"><?= e($row['label']) ?> — <?= e($row['key']) ?></div>
                  </div>
                <?php endforeach; ?>
              </div>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
    </div>
    <?php
};
?>
<div class="d-flex justify-content-between align-items-center mb-3">
  <div>
    <h4 class="mb-1">إعدادات الطباعة</h4>
    <div class="text-muted small">إدارة إعدادات POS والباركود، وربط إعدادات الطباعة الفعلية لكل مستند مع القوالب الحالية A4 وReceipt، وإدارة Template Profiles للمستندات. اختيار القالب يتم من هذه الصفحة فقط.</div>
  </div>
</div>
<?php $flash = flash_get(); if ($flash): ?>
  <div class="alert alert-<?= e($flash['type']==='success'?'success':'danger') ?>"><?= e($flash['message']) ?></div>
<?php endif; ?>
<?php if (!empty($errors)): ?>
  <div class="alert alert-danger"><ul class="mb-0"><?php foreach($errors as $er): ?><li><?= e($er) ?></li><?php endforeach; ?></ul></div>
<?php endif; ?>

<form method="post" class="card shadow-sm border-0">
  <div class="card-body p-4">
    <?= csrf_field() ?>

    <div class="row g-4 align-items-start mb-4">
      <div class="col-lg-7">
        <div class="border rounded-4 p-3 h-100 bg-light-subtle">
          <div class="fw-semibold mb-2">طباعة نقطة البيع POS</div>
          <label class="form-label">مقاس الطباعة الافتراضي</label>
          <select class="form-select form-select-lg" name="pos_default_print_format">
            <option value="receipt" <?= (($settings['pos_default_print_format'] ?? 'receipt') === 'receipt' ? 'selected' : '') ?>>Receipt — طابعة حرارية / إيصال</option>
            <option value="a4" <?= (($settings['pos_default_print_format'] ?? '') === 'a4' ? 'selected' : '') ?>>A4 — ورقة كاملة</option>
          </select>
          <div class="form-text mt-2">يستخدم هذا الإعداد عند الضغط على «ترحيل وطباعة» من شاشة POS.</div>
        </div>

        <div class="border rounded-4 p-3 h-100 bg-light-subtle mt-3">
          <div class="fw-semibold mb-2">طباعة باركود الأصناف</div>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">عرض ملصق الباركود (مم)</label>
              <input type="number" min="20" max="200" step="0.1" class="form-control form-control-lg" name="barcode_label_width_mm" value="<?= e((string)($settings['barcode_label_width_mm'] ?? '50')) ?>">
            </div>
            <div class="col-md-6">
              <label class="form-label">ارتفاع ملصق الباركود (مم)</label>
              <input type="number" min="20" max="200" step="0.1" class="form-control form-control-lg" name="barcode_label_height_mm" value="<?= e((string)($settings['barcode_label_height_mm'] ?? '30')) ?>">
            </div>
            <div class="col-12">
              <div class="form-check form-switch mt-1">
                <input class="form-check-input" type="checkbox" role="switch" id="barcode_show_price" name="barcode_show_price" value="1" <?= !empty($settings['barcode_show_price']) ? 'checked' : '' ?>>
                <label class="form-check-label fw-semibold" for="barcode_show_price">إظهار السعر في ملصق الباركود</label>
              </div>
              <div class="form-check form-switch mt-3">
                <input class="form-check-input" type="checkbox" role="switch" id="barcode_show_item_name" name="barcode_show_item_name" value="1" <?= !empty($settings['barcode_show_item_name']) ? 'checked' : '' ?>>
                <label class="form-check-label fw-semibold" for="barcode_show_item_name">إظهار اسم الصنف في ملصق الباركود</label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="border rounded-4 p-3 h-100">
          <div class="fw-semibold mb-2">ماذا أضفنا في مرحلة Template Designer A؟</div>
          <ul class="mb-0 ps-3">
            <li class="mb-2">3 Template Profiles ثابتة لكل مستند: قياسي / مختصر / رسمي.</li>
            <li class="mb-2">اختيار القالب الافتراضي للمستند نفسه بدون إعادة بناء الطباعة.</li>
            <li class="mb-2">التحكم في إظهار الأقسام الأساسية لكل قالب.</li>
            <li class="mb-2">تغيير ترتيب الأقسام داخل Header / Body / Footer.</li>
            <li class="mb-2">تعديل عنوان كل Section بشكل مستقل لكل قالب.</li>
            <li>الربط تم على القوالب الحالية نفسها، وليس على نظام جديد منفصل.</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="border rounded-4 p-3">
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <div>
          <div class="fw-semibold">إعدادات المستندات + Template Profiles</div>
          <div class="text-muted small">الإعدادات العامة ما زالت تعمل كما هي، وتمت إضافة ملفات قوالب جاهزة قابلة للتخصيص على نفس المستند.</div>
        </div>
      </div>

      <div class="accordion" id="documentPrintSettingsAccordion">
        <?php $docIndex = 0; foreach ($docs as $docKey => $doc): $docIndex++; $collapseId = 'docPrint' . $docIndex; $templates = is_array($doc['templates'] ?? null) ? $doc['templates'] : []; $sectionDefinitions = is_array($doc['section_definitions'] ?? null) ? $doc['section_definitions'] : []; ?>
          <div class="accordion-item border rounded-4 mb-3 overflow-hidden">
            <h2 class="accordion-header" id="heading<?= e((string)$docIndex) ?>">
              <button class="accordion-button <?= $docIndex === 1 ? '' : 'collapsed' ?>" type="button" data-bs-toggle="collapse" data-bs-target="#<?= e($collapseId) ?>" aria-expanded="<?= $docIndex === 1 ? 'true' : 'false' ?>" aria-controls="<?= e($collapseId) ?>">
                <span class="fw-semibold"><?= e((string)($doc['label'] ?? $docKey)) ?></span>
                <span class="ms-2 small text-muted">— المقاس الافتراضي: <?= e(strtoupper((string)($doc['default_format'] ?? 'a4'))) ?></span>
                <span class="ms-2 small text-primary">— القالب الحالي: <?= e((string)($templates[$doc['active_template'] ?? 'standard']['label'] ?? 'القالب القياسي')) ?></span>
              </button>
            </h2>
            <div id="<?= e($collapseId) ?>" class="accordion-collapse collapse <?= $docIndex === 1 ? 'show' : '' ?>" aria-labelledby="heading<?= e((string)$docIndex) ?>" data-bs-parent="#documentPrintSettingsAccordion">
              <div class="accordion-body bg-light-subtle">
                <div class="row g-3 mb-4">
                  <div class="col-lg-4">
                    <label class="form-label">المقاس الافتراضي</label>
                    <select class="form-select" name="documents[<?= e($docKey) ?>][default_format]">
                      <?php foreach (($doc['allowed_formats'] ?? ['a4']) as $fmt): ?>
                        <option value="<?= e($fmt) ?>" <?= (($doc['default_format'] ?? 'a4') === $fmt ? 'selected' : '') ?>><?= e($fmt === 'receipt' ? 'Receipt 80mm' : 'A4') ?></option>
                      <?php endforeach; ?>
                    </select>
                    <div class="form-text">يستخدم هذا الاختيار كصيغة افتراضية للمستند نفسه داخل شاشة اختيار المقاس والطباعة.</div>
                  </div>
                  <div class="col-lg-4">
                    <label class="form-label">القالب الافتراضي للمستند</label>
                    <select class="form-select" name="documents[<?= e($docKey) ?>][active_template]">
                      <?php foreach ($templates as $templateKey => $template): ?>
                        <option value="<?= e($templateKey) ?>" <?= (($doc['active_template'] ?? 'standard') === $templateKey ? 'selected' : '') ?>><?= e((string)($template['label'] ?? $templateKey)) ?></option>
                      <?php endforeach; ?>
                    </select>
                    <div class="form-text">هذا القالب هو الذي سيُستخدم فعليًا عند طباعة هذا المستند.</div>
                  </div>
                  <div class="col-lg-4">
                    <label class="form-label">Footer Note</label>
                    <textarea class="form-control" rows="2" name="documents[<?= e($docKey) ?>][footer_note]" placeholder="نص سفلي خاص بهذا المستند"><?= e((string)($doc['footer_note'] ?? '')) ?></textarea>
                  </div>
                </div>

                <div class="row g-3 mb-4">
                  <div class="col-md-6 col-xl-3">
                    <div class="form-check form-switch mt-2">
                      <input class="form-check-input" type="checkbox" role="switch" id="<?= e($docKey) ?>_show_logo" name="documents[<?= e($docKey) ?>][show_logo]" value="1" <?= !empty($doc['show_logo']) ? 'checked' : '' ?>>
                      <label class="form-check-label fw-semibold" for="<?= e($docKey) ?>_show_logo">إظهار الشعار</label>
                    </div>
                  </div>
                  <div class="col-md-6 col-xl-3">
                    <div class="form-check form-switch mt-2">
                      <input class="form-check-input" type="checkbox" role="switch" id="<?= e($docKey) ?>_show_signatures" name="documents[<?= e($docKey) ?>][show_signatures]" value="1" <?= !empty($doc['show_signatures']) ? 'checked' : '' ?>>
                      <label class="form-check-label fw-semibold" for="<?= e($docKey) ?>_show_signatures">إظهار التوقيعات</label>
                    </div>
                  </div>
                  <div class="col-md-6 col-xl-3">
                    <div class="form-check form-switch mt-2">
                      <input class="form-check-input" type="checkbox" role="switch" id="<?= e($docKey) ?>_show_tax_no" name="documents[<?= e($docKey) ?>][show_tax_no]" value="1" <?= !empty($doc['show_tax_no']) ? 'checked' : '' ?>>
                      <label class="form-check-label fw-semibold" for="<?= e($docKey) ?>_show_tax_no">إظهار الرقم الضريبي</label>
                    </div>
                  </div>
                  <div class="col-md-6 col-xl-3">
                    <div class="form-check form-switch mt-2">
                      <input class="form-check-input" type="checkbox" role="switch" id="<?= e($docKey) ?>_show_terms" name="documents[<?= e($docKey) ?>][show_terms]" value="1" <?= !empty($doc['show_terms']) ? 'checked' : '' ?>>
                      <label class="form-check-label fw-semibold" for="<?= e($docKey) ?>_show_terms">إظهار الشروط</label>
                    </div>
                    <div class="form-text">يفعّل فعليًا في عرض السعر والقوالب التي تحتوي قسم شروط.</div>
                  </div>
                </div>

                <div class="border rounded-4 bg-white p-3">
                  <div class="fw-semibold mb-2">Template Profiles</div>
                  <div class="text-muted small mb-3">عدّل اسم كل قالب، ثم فعّل أو عطّل الأقسام الأساسية ورتبها وغير عنوانها. التطبيق فعلي على الطباعة الحالية.</div>

                  <div class="accordion" id="templateAccordion_<?= e($docKey) ?>">
                    <?php $templateIndex = 0; foreach ($templates as $templateKey => $template): $templateIndex++; $templateCollapse = 'tpl_' . $docKey . '_' . $templateKey; $templateSections = is_array($template['sections'] ?? null) ? $template['sections'] : []; ?>
                      <div class="accordion-item border rounded-4 mb-3 overflow-hidden">
                        <h2 class="accordion-header" id="heading_<?= e($templateCollapse) ?>">
                          <button class="accordion-button <?= $templateIndex === 1 ? '' : 'collapsed' ?>" type="button" data-bs-toggle="collapse" data-bs-target="#<?= e($templateCollapse) ?>" aria-expanded="<?= $templateIndex === 1 ? 'true' : 'false' ?>" aria-controls="<?= e($templateCollapse) ?>">
                            <span class="fw-semibold"><?= e((string)($template['label'] ?? $templateKey)) ?></span>
                            <span class="ms-2 badge text-bg-light"><?= e($templateKey) ?></span>
                            <?php if (($doc['active_template'] ?? 'standard') === $templateKey): ?><span class="ms-2 badge text-bg-primary">الافتراضي</span><?php endif; ?>
                          </button>
                        </h2>
                        <div id="<?= e($templateCollapse) ?>" class="accordion-collapse collapse <?= $templateIndex === 1 ? 'show' : '' ?>" data-bs-parent="#templateAccordion_<?= e($docKey) ?>">
                          <div class="accordion-body bg-light-subtle">
                            <div class="row g-3 mb-3">
                              <div class="col-lg-6">
                                <label class="form-label">اسم القالب</label>
                                <input class="form-control" type="text" name="documents[<?= e($docKey) ?>][templates][<?= e($templateKey) ?>][label]" value="<?= e((string)($template['label'] ?? '')) ?>" placeholder="اسم يظهر في اختيار القالب">
                              </div>
                              <div class="col-lg-6">
                                <div class="alert alert-info mb-0 small">هذا القالب مرتبط بنوع المستند نفسه. ترتيب الأقسام هنا ينعكس مباشرة في Header / Body / Footer عند اختياره كقالب افتراضي.</div>
                              </div>
                            </div>

                            <?php foreach ($sectionDefinitions as $areaKey => $areaSections): ?>
                              <div class="border rounded-4 p-3 bg-white mb-3">
                                <div class="fw-semibold mb-2"><?= e($areaKey === 'header' ? 'Header Zones' : ($areaKey === 'body' ? 'Body Zones' : 'Footer Zones')) ?></div>
                                <div class="table-responsive">
                                  <table class="table table-sm align-middle mb-0">
                                    <thead>
                                      <tr>
                                        <th style="width:90px">إظهار</th>
                                        <th>القسم</th>
                                        <th style="width:120px">الترتيب</th>
                                        <th>العنوان المخصص</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                      <?php foreach ($areaSections as $sectionKey => $sectionDef): $sectionData = is_array($templateSections[$areaKey][$sectionKey] ?? null) ? $templateSections[$areaKey][$sectionKey] : []; ?>
                                        <tr>
                                          <td>
                                            <div class="form-check form-switch">
                                              <input class="form-check-input" type="checkbox" role="switch" id="<?= e($docKey . '_' . $templateKey . '_' . $areaKey . '_' . $sectionKey) ?>" name="documents[<?= e($docKey) ?>][templates][<?= e($templateKey) ?>][sections][<?= e($areaKey) ?>][<?= e($sectionKey) ?>][enabled]" value="1" <?= !array_key_exists('enabled', $sectionData) || !empty($sectionData['enabled']) ? 'checked' : '' ?>>
                                            </div>
                                          </td>
                                          <td>
                                            <label class="fw-semibold" for="<?= e($docKey . '_' . $templateKey . '_' . $areaKey . '_' . $sectionKey) ?>"><?= e((string)($sectionDef['label'] ?? $sectionKey)) ?></label>
                                            <div class="small text-muted">المفتاح: <?= e($sectionKey) ?></div>
                                          </td>
                                          <td>
                                            <input class="form-control" type="number" min="1" max="99" name="documents[<?= e($docKey) ?>][templates][<?= e($templateKey) ?>][sections][<?= e($areaKey) ?>][<?= e($sectionKey) ?>][order]" value="<?= e((string)($sectionData['order'] ?? ($sectionDef['order'] ?? 10))) ?>">
                                          </td>
                                          <td>
                                            <input class="form-control" type="text" name="documents[<?= e($docKey) ?>][templates][<?= e($templateKey) ?>][sections][<?= e($areaKey) ?>][<?= e($sectionKey) ?>][title]" value="<?= e((string)($sectionData['title'] ?? ($sectionDef['default_title'] ?? ''))) ?>" placeholder="عنوان اختياري لهذا القسم">
                                          </td>
                                        </tr>
                                      <?php endforeach; ?>
                                    </tbody>
                                  </table>
                                </div>
                              </div>
                            <?php endforeach; ?>
                          </div>
                        </div>
                      </div>
                    <?php endforeach; ?>
                  </div>

                  <?php foreach ($templates as $templateKey => $template): $templateSections = is_array($template['sections'] ?? null) ? $template['sections'] : []; $renderPreviewCard($docKey, (string)$templateKey, $templateSections, $sectionDefinitions); endforeach; ?>
                </div>
              </div>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
  <div class="card-footer bg-white d-flex justify-content-end gap-2 p-3">
    <a href="<?= e(url('/admin/dashboard')) ?>" class="btn btn-outline-secondary">رجوع</a>
    <button class="btn btn-primary px-4">حفظ الإعدادات</button>
  </div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const areaLabels = {header: 'Header Zones', body: 'Body Zones', footer: 'Footer Zones'};
  const parseInputName = (name) => {
    const match = /^documents\[([^\]]+)\]\[templates\]\[([^\]]+)\]\[sections\]\[([^\]]+)\]\[([^\]]+)\]\[(enabled|order|title)\]$/.exec(name || '');
    if (!match) return null;
    return {doc: match[1], template: match[2], area: match[3], key: match[4], field: match[5]};
  };

  const collectAreaRows = (docKey, templateKey, areaKey) => {
    const rows = [];
    document.querySelectorAll(`input[name^="documents[${docKey}][templates][${templateKey}][sections][${areaKey}]"], select[name^="documents[${docKey}][templates][${templateKey}][sections][${areaKey}]"]`).forEach((el) => {
      const parts = parseInputName(el.name);
      if (!parts || parts.area !== areaKey) return;
      let row = rows.find((item) => item.key === parts.key);
      if (!row) {
        row = {key: parts.key, label: '', title: '', order: 10, enabled: true};
        const label = document.querySelector(`label[for="${CSS.escape(docKey + '_' + templateKey + '_' + areaKey + '_' + parts.key)}"]`);
        row.label = label ? label.textContent.trim() : parts.key;
        rows.push(row);
      }
      if (parts.field === 'enabled') row.enabled = el.checked;
      if (parts.field === 'order') row.order = parseInt(el.value || '10', 10) || 10;
      if (parts.field === 'title') row.title = (el.value || '').trim();
    });
    return rows.sort((a,b) => a.order - b.order);
  };

  const renderPreview = (docKey, templateKey) => {
    const root = document.querySelector(`[data-template-preview][data-doc="${docKey}"][data-template="${templateKey}"]`);
    if (!root) return;
    Object.keys(areaLabels).forEach((areaKey) => {
      const zone = root.querySelector(`[data-preview-area="${areaKey}"] .preview-zone-list`);
      if (!zone) return;
      const rows = collectAreaRows(docKey, templateKey, areaKey);
      zone.innerHTML = rows.map((row) => {
        const title = row.title !== '' ? row.title : row.label;
        return `<div class="preview-chip ${row.enabled ? 'is-enabled' : 'is-disabled'}" data-preview-section="${areaKey}:${row.key}">
          <div class="d-flex justify-content-between align-items-center gap-2">
            <div class="fw-semibold">#${row.order} — ${title}</div>
            <span class="badge ${row.enabled ? 'text-bg-success' : 'text-bg-secondary'}">${row.enabled ? 'مفعل' : 'مخفي'}</span>
          </div>
          <div class="small text-muted mt-1">${row.label} — ${row.key}</div>
        </div>`;
      }).join('');
    });
  };

  document.querySelectorAll('input[name*="[templates]"], select[name*="[templates]"]').forEach((el) => {
    const parts = parseInputName(el.name);
    if (parts) {
      const handler = () => renderPreview(parts.doc, parts.template);
      el.addEventListener('input', handler);
      el.addEventListener('change', handler);
      handler();
    }
  });
});
</script>
</form>
