<?php if (!defined('ABSPATH')) exit;
$opt = function($k, $d='') { return get_option('dzqcod_' . $k, $d); };
?>
<div class="wrap dza-wrap" dir="rtl">
<?php include DZQCOD_PATH.'templates/nav.php'; ?>
<div class="dza-header"><h1>صفحات تأكيد الطلب</h1></div>
<div class="dza-content">
<p style="color:#666;margin-bottom:20px">تخصيص ما يراه العميل بعد إرسال طلبه — صفحة OTP، صفحة الشكر، صفحة الاتصال</p>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px">

<!-- ═══ 1. OTP VERIFICATION ═══ -->
<div class="dza-card" style="border-top:4px solid #6366f1">
<h3>📱 صفحة التحقق OTP</h3>
<p style="color:#888;font-size:12px;margin-bottom:12px">عند التفعيل، يُرسل رمز تحقق للعميل على هاتفه. إذا أدخل الرمز → الطلبية تتأكد تلقائياً بدون اتصال.</p>

<div class="dza-field">
<label><strong>تفعيل OTP</strong></label>
<label class="dza-switch"><input type="checkbox" id="po-otp-enabled" <?php echo esc_html($opt('otp_enabled')==='yes'?'checked':''); ?> value="yes"><span class="slider"></span></label>
</div>

<div class="dza-field">
<label>📝 نص رسالة OTP <small>(متغيرات: {code} {order})</small></label>
<textarea id="po-otp-message" rows="2" class="dza-input" style="width:100%"><?php echo esc_html(esc_textarea($opt('otp_message', 'رمز تأكيد طلبك #{order}: {code}'))); ?></textarea>
</div>

<div class="dza-field">
<label>⏰ مهلة الرمز (بالدقائق)</label>
<input type="number" id="po-otp-expire" class="dza-input" value="<?php echo esc_attr($opt('otp_expire_minutes', '10')); ?>" min="2" max="30" style="width:100px">
</div>

<div class="dza-field">
<label>✅ نص نجاح التأكيد</label>
<input type="text" id="po-otp-success" class="dza-input" value="<?php echo esc_attr($opt('otp_success_text', '🎉 تم تأكيد طلبك بنجاح! سيتم شحنه قريباً.')); ?>" style="width:100%">
</div>
</div>

<!-- ═══ 2. THANK YOU PAGE ═══ -->
<div class="dza-card" style="border-top:4px solid #22c55e">
<h3>✅ صفحة الشكر (بدون OTP)</h3>
<p style="color:#888;font-size:12px;margin-bottom:12px">تظهر عندما يكون OTP معطّل. العميل يرسل الطلب ويرى هذه الصفحة مباشرة.</p>

<div class="dza-field">
<label>📌 العنوان الرئيسي</label>
<input type="text" id="po-ty-title" class="dza-input" value="<?php echo esc_attr($opt('thankyou_title', '✅ تم إرسال طلبك بنجاح!')); ?>" style="width:100%">
</div>

<div class="dza-field">
<label>📝 الرسالة</label>
<textarea id="po-ty-message" rows="2" class="dza-input" style="width:100%"><?php echo esc_html(esc_textarea($opt('thankyou_message', 'سيتم الاتصال بك قريباً لتأكيد الطلب'))); ?></textarea>
</div>

<div class="dza-field">
<label><strong>عرض اختيار فترة الاتصال</strong></label>
<label class="dza-switch"><input type="checkbox" id="po-ty-show-callback" <?php echo esc_html($opt('thankyou_show_callback','yes')==='yes'?'checked':''); ?> value="yes"><span class="slider"></span></label>
<small style="color:#888">يسمح للعميل باختيار متى يفضل أن تتصلوا به</small>
</div>
</div>

<!-- ═══ 3. CALLBACK PAGE ═══ -->
<div class="dza-card" style="border-top:4px solid #f59e0b">
<h3>📞 صفحة "سنتصل بك"</h3>
<p style="color:#888;font-size:12px;margin-bottom:12px">تظهر عندما: العميل يتخطى OTP / ينتهي وقت الرمز / أو يختار "سيتم الاتصال بي".</p>

<div class="dza-field">
<label>📌 العنوان</label>
<input type="text" id="po-cb-title" class="dza-input" value="<?php echo esc_attr($opt('callback_title', '📞 سنتصل بك لتأكيد الطلب')); ?>" style="width:100%">
</div>

<div class="dza-field">
<label>📝 الرسالة</label>
<textarea id="po-cb-message" rows="2" class="dza-input" style="width:100%"><?php echo esc_html(esc_textarea($opt('callback_message', 'اختر الفترة المناسبة للاتصال بك'))); ?></textarea>
</div>

<div class="dza-field">
<label>📱 رقم المتجر (يظهر للعميل)</label>
<input type="text" id="po-cb-phone" class="dza-input" value="<?php echo esc_attr($opt('callback_store_phone', '')); ?>" style="width:200px" placeholder="مثال: 0664170006">
<small style="color:#888">يظهر للعميل: "سيتم الاتصال بك من هذا الرقم: 0664..."</small>
</div>

<div class="dza-field">
<label>⏰ الفترات المتاحة</label>
<div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:4px">
<?php
$slots = ['morning' => '☀️ صباحاً (9-12)', 'afternoon' => '🌤️ ظهراً (12-15)', 'evening' => '🌅 مساءً (15-18)', 'night' => '🌙 ليلاً (18-21)', 'anytime' => '⏰ أي وقت'];
$active_slots = explode(',', $opt('callback_slots', 'morning,afternoon,evening,night,anytime'));
foreach ($slots as $k => $l): ?>
<label style="display:flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid #ddd;border-radius:8px;cursor:pointer;font-size:12px">
<input type="checkbox" class="po-slot-check" value="<?php echo esc_html($k); ?>" <?php echo esc_html(in_array($k, $active_slots)?'checked':''); ?>>
<?php echo esc_html($l); ?>
</label>
<?php endforeach; ?>
</div>
</div>
</div>

<!-- ═══ 4. CONFIRMED PAGE ═══ -->
<div class="dza-card" style="border-top:4px solid #a855f7">
<h3>🎉 صفحة التأكيد الناجح</h3>
<p style="color:#888;font-size:12px;margin-bottom:12px">تظهر بعد إدخال رمز OTP الصحيح. الطلبية مؤكدة!</p>

<div class="dza-field">
<label>📌 العنوان</label>
<input type="text" id="po-cf-title" class="dza-input" value="<?php echo esc_attr($opt('confirmed_title', '🎉 تم تأكيد طلبك!')); ?>" style="width:100%">
</div>

<div class="dza-field">
<label>📝 الرسالة</label>
<textarea id="po-cf-message" rows="2" class="dza-input" style="width:100%"><?php echo esc_html(esc_textarea($opt('confirmed_message', 'سيتم شحن طلبك قريباً'))); ?></textarea>
</div>

<div class="dza-field">
<label><strong>عرض Upsell بعد التأكيد</strong></label>
<label class="dza-switch"><input type="checkbox" id="po-upsell-enabled" <?php echo esc_html($opt('post_order_upsell_enabled')==='yes'?'checked':''); ?> value="yes"><span class="slider"></span></label>
<small style="color:#888">عرض منتجات مقترحة بعد التأكيد</small>
</div>

<div class="dza-field">
<label>🔥 نص العرض</label>
<input type="text" id="po-upsell-text" class="dza-input" value="<?php echo esc_attr($opt('post_order_upsell_text', '🔥 عروض حصرية لك!')); ?>" style="width:100%">
</div>
</div>

</div>

<!-- ═══ FLOW DIAGRAM ═══ -->
<div class="dza-card" style="border:2px solid #e2e8f0">
<h3 style="margin-bottom:12px">🔄 مسار العميل بعد الطلب</h3>
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:600">
<div style="background:#6366f1;color:#fff;padding:8px 14px;border-radius:10px">🛒 إرسال الطلب</div>
<span>→</span>
<div style="background:#f59e0b;color:#fff;padding:8px 14px;border-radius:10px">
OTP مفعّل؟
</div>
<span>→ نعم →</span>
<div style="background:#6366f1;color:#fff;padding:8px 14px;border-radius:10px">📱 صفحة OTP</div>
<span>→</span>
<div style="background:#22c55e;color:#fff;padding:8px 14px;border-radius:10px">✅ أدخل الرمز → مؤكد!</div>
</div>
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:600;margin-top:8px">
<div style="width:140px"></div>
<span style="margin-right:76px">↓ لا</span>
</div>
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:600;margin-top:4px">
<div style="width:140px"></div>
<div style="background:#22c55e;color:#fff;padding:8px 14px;border-radius:10px">✅ صفحة الشكر</div>
<span>→</span>
<div style="background:#f59e0b;color:#fff;padding:8px 14px;border-radius:10px">📞 اختيار فترة الاتصال</div>
<span>→</span>
<div style="background:#64748b;color:#fff;padding:8px 14px;border-radius:10px">📋 يظهر لموظف الاتصال</div>
</div>
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:600;margin-top:8px">
<div style="width:140px"></div>
<span>↓ تخطى OTP / انتهى الوقت</span>
</div>
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:600;margin-top:4px">
<div style="width:140px"></div>
<div style="background:#f59e0b;color:#fff;padding:8px 14px;border-radius:10px">📞 صفحة "سنتصل بك"</div>
<span>→</span>
<div style="background:#64748b;color:#fff;padding:8px 14px;border-radius:10px">📋 يظهر لموظف الاتصال مع الفترة</div>
</div>
</div>

<!-- ═══ LIVE PREVIEW ═══ -->
<div class="dza-card" style="border:2px solid #6366f1">
<h3 style="margin-bottom:12px">👁️ معاينة حية — ما يراه العميل</h3>
<div style="display:flex;gap:12px;margin-top:12px;flex-wrap:wrap">
<button class="dza-btn po-preview-btn active" data-preview="otp" style="flex:1">📱 OTP</button>
<button class="dza-btn po-preview-btn" data-preview="thankyou" style="flex:1">✅ شكراً</button>
<button class="dza-btn po-preview-btn" data-preview="callback" style="flex:1">📞 اتصال</button>
<button class="dza-btn po-preview-btn" data-preview="confirmed" style="flex:1">🎉 مؤكد</button>
</div>
<div id="po-preview-area" style="margin-top:16px;background:#f8fafc;border-radius:16px;padding:24px;min-height:300px;display:flex;align-items:center;justify-content:center">
<!-- Preview renders here via JS -->
</div>
</div>

<!-- ═══ SAVE BUTTON ═══ -->
<div style="text-align:center;margin-top:16px">
<button id="save-postorder" class="dza-btn" style="padding:12px 40px;font-size:16px;background:#6366f1;color:#fff;border-radius:12px">💾 حفظ جميع الإعدادات</button>
<div id="po-save-msg" style="margin-top:8px;font-size:14px"></div>
</div>

</div>

<style>
.dza-field{margin-bottom:12px}
.dza-field label{display:block;margin-bottom:4px;font-size:13px;font-weight:600}
.dza-input{padding:8px 12px;border:2px solid #e2e8f0;border-radius:8px;font-size:13px;font-family:inherit;outline:none;transition:.2s}
.dza-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.dza-switch{position:relative;display:inline-block;width:48px;height:26px;vertical-align:middle}
.dza-switch input{opacity:0;width:0;height:0}
.dza-switch .slider{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:26px;transition:.3s}
.dza-switch .slider::before{content:'';position:absolute;height:20px;width:20px;right:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
.dza-switch input:checked+.slider{background:#6366f1}
.dza-switch input:checked+.slider::before{transform:translateX(-22px)}
.po-preview-btn{padding:8px 16px;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;font-weight:700;transition:.2s;background:#fff}
.po-preview-btn.active{border-color:#6366f1;background:#eef2ff;color:#6366f1}
</style>

<script>
jQuery(function($){
    // ═══ LIVE PREVIEW ═══
    function renderPreview(type) {
        var area = $('#po-preview-area');
        var h = '<div style="text-align:center;max-width:400px;width:100%">';
        if (type === 'otp') {
            h += '<div style="font-size:48px;margin-bottom:12px">📱</div>';
            h += '<h2 style="font-size:20px;font-weight:900;margin-bottom:6px">تأكيد الطلب</h2>';
            h += '<p style="color:#64748b;font-size:13px;margin-bottom:16px">تم إرسال رمز التحقق إلى <strong dir="ltr">05XX****89</strong></p>';
            h += '<div style="margin-bottom:12px"><input type="text" style="width:160px;padding:12px;font-size:24px;text-align:center;letter-spacing:10px;border:3px solid #e2e8f0;border-radius:12px;font-weight:900" value="4829" disabled></div>';
            h += '<button style="padding:10px 24px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#818cf8);color:#fff;font-weight:800;border:none;font-size:14px">✅ تأكيد الطلب</button>';
            h += '<br><button style="padding:8px 16px;border-radius:8px;background:#f1f5f9;color:#94a3b8;border:none;font-size:11px;margin-top:10px;cursor:pointer">⏭️ تخطي — سيتم الاتصال بي</button>';
        } else if (type === 'thankyou') {
            h += '<div style="font-size:48px;margin-bottom:12px">✅</div>';
            h += '<h2 style="font-size:20px;font-weight:900;margin-bottom:6px">' + ($('#po-ty-title').val()||'تم إرسال طلبك بنجاح!') + '</h2>';
            h += '<p style="color:#64748b;font-size:13px;margin-bottom:16px">' + ($('#po-ty-message').val()||'سيتم الاتصال بك') + '</p>';
            h += '<div style="background:#eef2ff;border:2px solid #a5b4fc;border-radius:12px;padding:16px;margin:12px 0"><div style="font-size:28px;font-weight:900;color:#4f46e5">#10052</div><p style="font-size:11px;color:#4f46e5;margin:4px 0 0">رقم طلبك</p></div>';
            if ($('#po-ty-show-callback').is(':checked')) {
                h += '<p style="font-size:12px;color:#94a3b8;margin:10px 0 6px">📞 متى تفضل أن نتصل بك؟</p>';
                h += '<div style="display:flex;flex-wrap:wrap;gap:4px;justify-content:center">';
                h += '<span style="padding:6px 12px;border:2px solid #6366f1;background:#eef2ff;color:#6366f1;border-radius:8px;font-size:11px;font-weight:700">☀️ صباحاً</span>';
                h += '<span style="padding:6px 12px;border:2px solid #e2e8f0;border-radius:8px;font-size:11px;font-weight:600">🌤️ ظهراً</span>';
                h += '<span style="padding:6px 12px;border:2px solid #e2e8f0;border-radius:8px;font-size:11px;font-weight:600">🌅 مساءً</span>';
                h += '</div>';
            }
        } else if (type === 'callback') {
            h += '<div style="font-size:48px;margin-bottom:12px">📞</div>';
            h += '<h2 style="font-size:20px;font-weight:900;margin-bottom:6px">' + ($('#po-cb-title').val()||'سنتصل بك') + '</h2>';
            h += '<p style="color:#64748b;font-size:13px;margin-bottom:16px">' + ($('#po-cb-message').val()||'اختر الفترة المناسبة') + '</p>';
            var ph = $('#po-cb-phone').val();
            if (ph) h += '<p style="font-size:12px;color:#6366f1;font-weight:700;margin-bottom:12px">سيتم الاتصال بك من: <span dir="ltr">' + ph + '</span></p>';
            h += '<div style="display:flex;flex-direction:column;gap:6px">';
            h += '<div style="padding:10px;border:2px solid #6366f1;background:#eef2ff;border-radius:10px;font-size:13px;font-weight:700;text-align:center">☀️ صباحاً <span style="font-size:11px;color:#94a3b8">9:00 - 12:00</span></div>';
            h += '<div style="padding:10px;border:2px solid #e2e8f0;border-radius:10px;font-size:13px;font-weight:600;text-align:center">🌤️ ظهراً <span style="font-size:11px;color:#94a3b8">12:00 - 15:00</span></div>';
            h += '<div style="padding:10px;border:2px solid #e2e8f0;border-radius:10px;font-size:13px;font-weight:600;text-align:center">🌅 مساءً <span style="font-size:11px;color:#94a3b8">15:00 - 18:00</span></div>';
            h += '</div>';
            h += '<button style="margin-top:12px;padding:10px 24px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#818cf8);color:#fff;font-weight:800;border:none;font-size:14px">📞 تأكيد الموعد</button>';
        } else if (type === 'confirmed') {
            h += '<div style="font-size:48px;margin-bottom:12px">🎉</div>';
            h += '<h2 style="font-size:20px;font-weight:900;color:#22c55e;margin-bottom:6px">' + ($('#po-cf-title').val()||'تم تأكيد طلبك!') + '</h2>';
            h += '<p style="color:#64748b;font-size:13px;margin-bottom:16px">' + ($('#po-cf-message').val()||'سيتم شحن طلبك قريباً') + '</p>';
            h += '<div style="background:#f0fdf4;border:2px solid #86efac;border-radius:12px;padding:16px;margin:12px 0"><div style="font-size:28px;font-weight:900;color:#166534">#10052</div><p style="font-size:11px;color:#166534;margin:4px 0 0">رقم طلبك — احتفظ به</p></div>';
            h += '<button style="margin-top:12px;padding:10px 24px;border-radius:10px;background:linear-gradient(135deg,#22c55e,#4ade80);color:#fff;font-weight:800;border:none;font-size:14px">🛒 متابعة التسوق</button>';
        }
        h += '</div>';
        area.html(h);
    }

    // Preview tab switching
    $(document).on('click', '.po-preview-btn', function(){
        $('.po-preview-btn').removeClass('active'); $(this).addClass('active');
        renderPreview($(this).data('preview'));
    });
    // Live update preview on input change
    $(document).on('input change', '#po-ty-title,#po-ty-message,#po-ty-show-callback,#po-cb-title,#po-cb-message,#po-cb-phone,#po-cf-title,#po-cf-message', function(){
        renderPreview($('.po-preview-btn.active').data('preview'));
    });
    renderPreview('otp'); // Initial

    // ═══ SAVE ALL ═══
    $(document).on('click', '#save-postorder', function(){
        var $b = $(this); $b.prop('disabled',true).text('⏳ جاري الحفظ...');
        var slots = []; $('.po-slot-check:checked').each(function(){ slots.push($(this).val()); });
        $.post(dza.ajax, {
            action: 'dzqcod_save_postorder_settings', nonce: dza.nonce,
            otp_enabled: $('#po-otp-enabled').is(':checked') ? 'yes' : 'no',
            otp_message: $('#po-otp-message').val(),
            otp_expire_minutes: $('#po-otp-expire').val(),
            otp_success_text: $('#po-otp-success').val(),
            thankyou_title: $('#po-ty-title').val(),
            thankyou_message: $('#po-ty-message').val(),
            thankyou_show_callback: $('#po-ty-show-callback').is(':checked') ? 'yes' : 'no',
            callback_title: $('#po-cb-title').val(),
            callback_message: $('#po-cb-message').val(),
            callback_store_phone: $('#po-cb-phone').val(),
            callback_slots: slots.join(','),
            confirmed_title: $('#po-cf-title').val(),
            confirmed_message: $('#po-cf-message').val(),
            post_order_upsell_enabled: $('#po-upsell-enabled').is(':checked') ? 'yes' : 'no',
            post_order_upsell_text: $('#po-upsell-text').val(),
        }, function(r){
            $b.prop('disabled',false).text('💾 حفظ جميع الإعدادات');
            $('#po-save-msg').text(r.data ? r.data.message : '✅ تم الحفظ').css('color','#22c55e');
            setTimeout(function(){ $('#po-save-msg').fadeOut(); }, 3000);
        });
    });
});
</script>

</div><!--dza-main-->
</div><!--dza-layout-->
</div><!--dza-wrap-->
