<?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">
    <i data-lucide="arrow-right" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></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() ?>

    <!-- Basic Info -->
    <div class="card" style="padding:20px;margin-bottom:20px;">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:20px;">
            <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:15px;">
            <div class="form-group">
                <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="مثال: عرض الصيف 2026">
            </div>
            <div class="form-group">
                <label class="form-label">عنوان العرض بالإنجليزي</label>
                <input type="text" name="title_en" value="<?= $v('title_en') ?>" class="form-input" maxlength="200" placeholder="e.g. Summer 2026 Offer">
            </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) ($offer['branch_id'] ?? 0)) === (int) $b['id'] ? 'selected' : '' ?>><?= e($b['name_ar']) ?></option>
                    <?php endforeach; ?>
                </select>
                <small style="color:#6B7280;font-size:11px;">اتركه فارغاً ليسري على كل الفروع</small>
            </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 class="form-group" style="margin-top:15px;">
            <label class="form-label">وصف / ملاحظات</label>
            <textarea name="description" class="form-input" rows="2" placeholder="وصف مختصر للعرض..."><?= $v('description') ?></textarea>
        </div>
    </div>

    <!-- Date Range -->
    <div class="card" style="padding:20px;margin-bottom:20px;">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:20px;">
            <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:15px;">
            <div class="form-group">
                <label class="form-label">تاريخ البداية <span style="color:#DC2626;">*</span></label>
                <input type="date" name="effective_from" value="<?= $v('effective_from') ?>" class="form-input" required style="direction:ltr;text-align:left;">
            </div>
            <div class="form-group">
                <label class="form-label">تاريخ الانتهاء <span style="color:#DC2626;">*</span></label>
                <input type="date" name="effective_to" value="<?= $v('effective_to') ?>" class="form-input" required style="direction:ltr;text-align:left;">
            </div>
        </div>
    </div>

    <!-- Cash Path -->
    <div class="card" style="padding:20px;margin-bottom:20px;">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;">
            <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;">
                <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>

        <div id="cash_section" style="<?= $hasCashPath ? '' : 'display:none;' ?>">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
                <div class="form-group">
                    <label class="form-label">نوع الخصم</label>
                    <select name="cash_discount_type" class="form-select">
                        <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">القيمة</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="مثال: 15">
                    <small style="color:#6B7280;font-size:11px;">نسبة أو مبلغ حسب النوع المختار</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Installment Path -->
    <div class="card" style="padding:20px;margin-bottom:20px;">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;">
            <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;">
                <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>

        <div id="inst_section" style="<?= $hasInstPath ? '' : 'display:none;' ?>">
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;">
                <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:#6B7280;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:#6B7280;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:#6B7280;font-size:11px;">اتركه فارغاً لاستخدام الافتراضي (22%)</small>
                </div>
            </div>

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

                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;">
                    <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' : '' ?>>إعفاء كامل إذا الأقساط ≤ 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="اتركه فارغاً لنفس الفائدة أعلاه">
                        <small style="color:#6B7280;font-size:11px;">فارغ = نفس نسبة الفائدة الأساسية</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Notes -->
    <div class="card" style="padding:20px;margin-bottom:20px;">
        <div class="form-group" style="margin:0;">
            <label class="form-label">ملاحظات إضافية</label>
            <textarea name="notes" class="form-input" rows="2"><?= $v('notes') ?></textarea>
        </div>
    </div>

    <?php if ($offer): ?>
    <div class="card" style="padding:15px;margin-bottom:20px;background:#F9FAFB;">
        <div class="form-group" style="margin:0;">
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                <input type="checkbox" name="is_active" value="1" <?= $offer['is_active'] ? 'checked' : '' ?>>
                <span class="form-label" style="margin:0;">العرض مفعّل</span>
            </label>
        </div>
    </div>
    <?php endif; ?>

    <!-- Submit -->
    <div style="display:flex;gap:10px;justify-content:flex-start;">
        <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>
</form>

<script>
function toggleSection(id, show) {
    document.getElementById(id).style.display = show ? '' : 'none';
}
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';
}
</script>
<?php $__template->endSection(); ?>
