<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?><?= $offer ? 'تعديل عرض: ' . e($offer['title_ar']) : 'إنشاء عرض مجلس إدارة جديد' ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/pricing/board-offers" class="btn btn-outline" style="display:inline-flex;align-items:center;gap:6px;">
    <i data-lucide="arrow-right" style="width:15px;height:15px;"></i> العودة للقائمة
</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<?php
$old = $_SESSION['_old_input'] ?? [];
$v = fn(string $key, $default = '') => e($old[$key] ?? $offer[$key] ?? $default);
$hasCashPath = !empty($old['has_cash_path']) || (!empty($offer['cash_discount_type']));
$hasInstPath = !empty($old['has_inst_path']) || ($offer && ($offer['inst_months'] || $offer['inst_interest_rate'] !== null || $offer['inst_down_payment_pct'] !== null || $offer['inst_grace_type']));
?>

<form method="POST" action="<?= $offer ? '/pricing/board-offers/' . (int) $offer['id'] : '/pricing/board-offers' ?>">
    <?= csrf_field() ?>

    <div style="display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;">
    <!-- Main Form -->
    <div>
        <!-- Basic Info -->
        <div class="card" style="padding:20px;margin-bottom:16px;">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
                <i data-lucide="award" style="width:18px;height:18px;color:#0D7377;"></i>
                <h3 style="margin:0;color:#0D7377;font-size:15px;">بيانات العرض</h3>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                <div class="form-group" style="grid-column:1/-1;">
                    <label class="form-label">عنوان العرض <span style="color:#DC2626;">*</span></label>
                    <input type="text" name="title_ar" value="<?= $v('title_ar') ?>" class="form-input" required maxlength="200" placeholder="مثال: عرض الصيف — خصم 10% كاش" id="offer_title">
                </div>
                <div class="form-group">
                    <label class="form-label">رقم قرار مجلس الإدارة</label>
                    <input type="text" name="board_decision_number" value="<?= $v('board_decision_number') ?>" class="form-input" maxlength="50" placeholder="2026/15">
                </div>
                <div class="form-group">
                    <label class="form-label">تاريخ القرار</label>
                    <input type="date" name="board_decision_date" value="<?= $v('board_decision_date') ?>" class="form-input" style="direction:ltr;text-align:left;">
                </div>
                <div class="form-group">
                    <label class="form-label">الفرع</label>
                    <select name="branch_id" class="form-select">
                        <option value="">كل الفروع</option>
                        <?php foreach ($branches as $b): ?>
                        <option value="<?= (int) $b['id'] ?>" <?= ((int) ($old['branch_id'] ?? $offer['branch_id'] ?? 0)) === (int) $b['id'] ? 'selected' : '' ?>><?= e($b['name_ar']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">مجال التطبيق</label>
                    <select name="applies_to" class="form-select">
                        <option value="membership_fee" <?= $v('applies_to', 'membership_fee') === 'membership_fee' ? 'selected' : '' ?>>قيمة العضوية فقط</option>
                        <option value="all" <?= $v('applies_to') === 'all' ? 'selected' : '' ?>>الكل (عضوية + إضافات)</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Date Range -->
        <div class="card" style="padding:20px;margin-bottom:16px;">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
                <i data-lucide="calendar-range" style="width:18px;height:18px;color:#7C3AED;"></i>
                <h3 style="margin:0;color:#7C3AED;font-size:15px;">فترة السريان <span style="color:#DC2626;">*</span></h3>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                <div class="form-group">
                    <label class="form-label">من تاريخ</label>
                    <input type="date" name="effective_from" value="<?= $v('effective_from') ?>" class="form-input" required style="direction:ltr;text-align:left;" id="date_from">
                </div>
                <div class="form-group">
                    <label class="form-label">إلى تاريخ</label>
                    <input type="date" name="effective_to" value="<?= $v('effective_to') ?>" class="form-input" required style="direction:ltr;text-align:left;" id="date_to">
                </div>
            </div>
            <div id="date_warning" style="display:none;margin-top:8px;background:#FEF3C7;border:1px solid #FCD34D;border-radius:6px;padding:8px 12px;font-size:12px;color:#92400E;">
                <i data-lucide="alert-triangle" style="width:13px;height:13px;vertical-align:middle;margin-left:4px;"></i>
                <span id="date_warning_text"></span>
            </div>
        </div>

        <!-- Cash Path -->
        <div class="card" style="padding:20px;margin-bottom:16px;">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
                <div style="display:flex;align-items:center;gap:8px;">
                    <i data-lucide="banknote" style="width:18px;height:18px;color:#059669;"></i>
                    <h3 style="margin:0;color:#059669;font-size:15px;">مسار الكاش</h3>
                </div>
                <label style="display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;">
                    <input type="checkbox" name="has_cash_path" value="1" id="toggle_cash" <?= $hasCashPath ? 'checked' : '' ?> onchange="toggleSection('cash_section', this.checked)">
                    <span style="font-size:13px;color:#6B7280;">تفعيل خصم الكاش</span>
                </label>
            </div>
            <p style="font-size:12px;color:#9CA3AF;margin:0 0 12px;">خصم يُطبَّق عند السداد الكامل نقداً (بدون تقسيط)</p>

            <div id="cash_section" style="<?= $hasCashPath ? '' : 'display:none;' ?>">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                    <div class="form-group">
                        <label class="form-label">نوع الخصم</label>
                        <select name="cash_discount_type" class="form-select" id="cash_type">
                            <option value="percentage" <?= $v('cash_discount_type') === 'percentage' ? 'selected' : '' ?>>نسبة مئوية (%)</option>
                            <option value="fixed_amount" <?= $v('cash_discount_type') === 'fixed_amount' ? 'selected' : '' ?>>مبلغ ثابت (ج.م)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" id="cash_value_label">القيمة</label>
                        <input type="number" name="cash_discount_value" value="<?= $v('cash_discount_value') ?>" class="form-input" min="0.01" step="0.01" style="direction:ltr;text-align:left;" placeholder="10" id="cash_value">
                    </div>
                </div>
            </div>
        </div>

        <!-- Installment Path -->
        <div class="card" style="padding:20px;margin-bottom:16px;">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
                <div style="display:flex;align-items:center;gap:8px;">
                    <i data-lucide="layers" style="width:18px;height:18px;color:#D97706;"></i>
                    <h3 style="margin:0;color:#D97706;font-size:15px;">مسار التقسيط</h3>
                </div>
                <label style="display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;">
                    <input type="checkbox" name="has_inst_path" value="1" id="toggle_inst" <?= $hasInstPath ? 'checked' : '' ?> onchange="toggleSection('inst_section', this.checked)">
                    <span style="font-size:13px;color:#6B7280;">تفعيل شروط تقسيط خاصة</span>
                </label>
            </div>
            <p style="font-size:12px;color:#9CA3AF;margin:0 0 12px;">يتجاوز الإعدادات الافتراضية (مقدم 25%، فائدة 22%، 30 شهر)</p>

            <div id="inst_section" style="<?= $hasInstPath ? '' : 'display:none;' ?>">
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
                    <div class="form-group">
                        <label class="form-label">نسبة المقدم (%)</label>
                        <input type="number" name="inst_down_payment_pct" value="<?= $v('inst_down_payment_pct') ?>" class="form-input" min="0" max="100" step="0.01" style="direction:ltr;text-align:left;" placeholder="25">
                        <small style="color:#9CA3AF;font-size:11px;">فارغ = 25% (الافتراضي)</small>
                    </div>
                    <div class="form-group">
                        <label class="form-label">عدد الأشهر</label>
                        <input type="number" name="inst_months" value="<?= $v('inst_months') ?>" class="form-input" min="1" max="120" style="direction:ltr;text-align:left;" placeholder="30">
                        <small style="color:#9CA3AF;font-size:11px;">فارغ = 30 شهر</small>
                    </div>
                    <div class="form-group">
                        <label class="form-label">نسبة الفائدة (%)</label>
                        <input type="number" name="inst_interest_rate" value="<?= $v('inst_interest_rate') ?>" class="form-input" min="0" max="100" step="0.01" style="direction:ltr;text-align:left;" placeholder="22">
                        <small style="color:#9CA3AF;font-size:11px;">فارغ = 22%</small>
                    </div>
                </div>

                <!-- Grace Period -->
                <div style="margin-top:14px;padding-top:14px;border-top:1px solid #E5E7EB;">
                    <div style="display:flex;align-items:center;gap:6px;margin-bottom:12px;">
                        <i data-lucide="clock" style="width:14px;height:14px;color:#7C3AED;"></i>
                        <span style="font-size:13px;font-weight:600;color:#7C3AED;">فترة السماح (اختياري)</span>
                    </div>

                    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
                        <div class="form-group">
                            <label class="form-label">نوع فترة السماح</label>
                            <select name="inst_grace_type" id="grace_type_select" class="form-select" onchange="toggleGraceDetails()">
                                <option value="" <?= !$v('inst_grace_type') ? 'selected' : '' ?>>بدون</option>
                                <option value="first_n_months" <?= $v('inst_grace_type') === 'first_n_months' ? 'selected' : '' ?>>أول N شهر بدون فوائد</option>
                                <option value="full_free_under_n" <?= $v('inst_grace_type') === 'full_free_under_n' ? 'selected' : '' ?>>إعفاء كامل إذا الأقساط &#x2264; N</option>
                            </select>
                        </div>
                        <div class="form-group" id="grace_months_group" style="<?= $v('inst_grace_type') ? '' : 'display:none;' ?>">
                            <label class="form-label">أشهر السماح</label>
                            <input type="number" name="inst_grace_months" value="<?= $v('inst_grace_months', 0) ?>" class="form-input" min="1" max="60" style="direction:ltr;text-align:left;" placeholder="6">
                        </div>
                        <div class="form-group" id="post_grace_rate_group" style="<?= $v('inst_grace_type') === 'first_n_months' ? '' : 'display:none;' ?>">
                            <label class="form-label">فائدة بعد السماح (%)</label>
                            <input type="number" name="inst_post_grace_rate" value="<?= $v('inst_post_grace_rate') ?>" class="form-input" min="0" max="100" step="0.01" style="direction:ltr;text-align:left;" placeholder="نفس الأساسية">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Notes -->
        <div class="card" style="padding:20px;margin-bottom:16px;">
            <div class="form-group" style="margin:0;">
                <label class="form-label">ملاحظات</label>
                <textarea name="notes" class="form-input" rows="2" placeholder="ملاحظات داخلية (لن تظهر للعضو)..."><?= $v('notes') ?></textarea>
            </div>
            <input type="hidden" name="title_en" value="<?= $v('title_en') ?>">
            <input type="hidden" name="description" value="<?= $v('description') ?>">
        </div>

        <?php if ($offer): ?>
        <div class="card" style="padding:14px 20px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;">
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;">
                <input type="checkbox" name="is_active" value="1" <?= $offer['is_active'] ? 'checked' : '' ?>>
                <span style="font-size:14px;font-weight:600;color:#374151;">العرض مفعّل</span>
            </label>
            <span style="font-size:12px;color:#9CA3AF;">آخر تعديل: <?= e($offer['updated_at'] ?? $offer['created_at']) ?></span>
        </div>
        <?php endif; ?>

        <!-- Submit -->
        <div style="display:flex;gap:10px;">
            <button type="submit" class="btn btn-primary" style="min-width:140px;">
                <i data-lucide="check" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i>
                <?= $offer ? 'حفظ التعديلات' : 'إنشاء العرض' ?>
            </button>
            <a href="/pricing/board-offers" class="btn btn-outline">إلغاء</a>
        </div>
    </div>

    <!-- Live Preview Sidebar -->
    <div style="position:sticky;top:20px;">
        <div class="card" style="padding:16px;border:2px solid #E5E7EB;">
            <div style="font-size:12px;color:#6B7280;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600;">معاينة العرض</div>

            <div style="background:linear-gradient(135deg,#FEF3C7,#FDE68A);border-radius:8px;padding:10px 14px;margin-bottom:12px;">
                <strong style="color:#92400E;font-size:13px;" id="preview_title"><?= $v('title_ar') ?: 'عنوان العرض' ?></strong>
                <div style="font-size:11px;color:#92400E;margin-top:2px;" id="preview_dates">—</div>
            </div>

            <div id="preview_cash" style="<?= $hasCashPath ? '' : 'display:none;' ?>margin-bottom:10px;">
                <div style="background:#F0FDF4;border:1px solid #BBF7D0;border-radius:6px;padding:8px 10px;">
                    <div style="font-size:11px;color:#166534;font-weight:600;">مسار الكاش</div>
                    <div style="font-size:14px;font-weight:700;color:#059669;margin-top:2px;" id="preview_cash_val">—</div>
                    <div style="font-size:11px;color:#6B7280;margin-top:2px;">مثال: عضوية 150,000 = <span id="preview_cash_example">—</span></div>
                </div>
            </div>

            <div id="preview_inst" style="<?= $hasInstPath ? '' : 'display:none;' ?>">
                <div style="background:#EFF6FF;border:1px solid #BFDBFE;border-radius:6px;padding:8px 10px;">
                    <div style="font-size:11px;color:#1E40AF;font-weight:600;">مسار التقسيط</div>
                    <div style="font-size:12px;color:#374151;margin-top:4px;line-height:1.6;" id="preview_inst_details">—</div>
                </div>
            </div>

            <div id="preview_empty" style="<?= ($hasCashPath || $hasInstPath) ? 'display:none;' : '' ?>text-align:center;padding:20px 0;color:#9CA3AF;font-size:13px;">
                فعّل مسار واحد على الأقل
            </div>
        </div>

        <!-- Help -->
        <div class="card" style="padding:14px;margin-top:12px;background:#F9FAFB;border:1px solid #E5E7EB;">
            <div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:8px;"><i data-lucide="info" style="width:13px;height:13px;vertical-align:middle;margin-left:4px;color:#6B7280;"></i>كيف يعمل العرض</div>
            <ul style="font-size:11px;color:#6B7280;margin:0;padding-right:16px;line-height:1.8;">
                <li>يظهر تلقائياً في صفحة العضو عند إنشاء طلب دفع</li>
                <li>العرض الأكثر تحديداً (بفرع) يتقدم على العام</li>
                <li>يُحفظ كـ snapshot عند الطلب — تغيير العرض لا يؤثر على الطلبات السابقة</li>
                <li>الخصم الكاش يُطرح من المبلغ قبل الإرسال للخزينة</li>
                <li>التقسيط يتجاوز القيم الافتراضية (25% مقدم، 22% فائدة، 30 شهر)</li>
            </ul>
        </div>
    </div>
    </div>
</form>

<script>
function toggleSection(id, show) {
    document.getElementById(id).style.display = show ? '' : 'none';
    updatePreview();
}
function toggleGraceDetails() {
    var val = document.getElementById('grace_type_select').value;
    document.getElementById('grace_months_group').style.display = val ? '' : 'none';
    document.getElementById('post_grace_rate_group').style.display = (val === 'first_n_months') ? '' : 'none';
    updatePreview();
}

function updatePreview() {
    var title = document.getElementById('offer_title').value || 'عنوان العرض';
    document.getElementById('preview_title').textContent = title;

    var from = document.getElementById('date_from').value;
    var to = document.getElementById('date_to').value;
    document.getElementById('preview_dates').textContent = (from && to) ? ('من ' + from + ' إلى ' + to) : '—';

    // Date validation
    var warn = document.getElementById('date_warning');
    var warnText = document.getElementById('date_warning_text');
    if (from && to && from > to) {
        warn.style.display = '';
        warnText.textContent = 'تاريخ البداية بعد تاريخ الانتهاء!';
    } else if (to && to < new Date().toISOString().slice(0,10)) {
        warn.style.display = '';
        warnText.textContent = 'تاريخ الانتهاء في الماضي — العرض لن يكون ساري.';
    } else {
        warn.style.display = 'none';
    }

    var hasCash = document.getElementById('toggle_cash').checked;
    var hasInst = document.getElementById('toggle_inst').checked;
    document.getElementById('preview_cash').style.display = hasCash ? '' : 'none';
    document.getElementById('preview_inst').style.display = hasInst ? '' : 'none';
    document.getElementById('preview_empty').style.display = (!hasCash && !hasInst) ? '' : 'none';

    if (hasCash) {
        var ctype = document.getElementById('cash_type').value;
        var cval = parseFloat(document.getElementById('cash_value').value) || 0;
        if (ctype === 'percentage') {
            document.getElementById('preview_cash_val').textContent = 'خصم ' + cval + '%';
            var saved = (150000 * cval / 100);
            document.getElementById('preview_cash_example').textContent = 'يدفع ' + (150000 - saved).toLocaleString() + ' (وفّر ' + saved.toLocaleString() + ')';
        } else {
            document.getElementById('preview_cash_val').textContent = 'خصم ' + cval.toLocaleString() + ' ج.م';
            document.getElementById('preview_cash_example').textContent = 'يدفع ' + (150000 - cval).toLocaleString();
        }
    }

    if (hasInst) {
        var dp = document.querySelector('[name=inst_down_payment_pct]').value || '25';
        var mo = document.querySelector('[name=inst_months]').value || '30';
        var ir = document.querySelector('[name=inst_interest_rate]').value || '22';
        var gt = document.getElementById('grace_type_select').value;
        var gm = document.querySelector('[name=inst_grace_months]').value || '0';

        var lines = 'مقدم ' + dp + '% — ' + mo + ' شهر — فائدة ' + ir + '%';
        if (gt === 'first_n_months' && parseInt(gm) > 0) {
            lines += '\nأول ' + gm + ' شهر بدون فوائد';
        } else if (gt === 'full_free_under_n' && parseInt(gm) > 0) {
            lines += '\nإعفاء كامل إذا الأقساط ≤ ' + gm + ' شهر';
        }
        document.getElementById('preview_inst_details').textContent = lines;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    updatePreview();

    document.querySelectorAll('input, select, textarea').forEach(function(el) {
        el.addEventListener('input', updatePreview);
        el.addEventListener('change', updatePreview);
    });
});
</script>
<?php $__template->endSection(); ?>
