<?php
$atsColors=[
['ui_accent','لون التمييز',$curAccent?:($themes[$curTheme][3]??'#fbbf24')],['ui_text_color','لون النص',$curTextColor?:'#eaf0ff'],['ui_border_color','لون الإطار',$curBorderColor?:'#d1d5db'],
['ui_body_bg','لون الواجهات',$curBodyBg],['ui_surface_color','لون الكروت',$curSurfaceColor],['ui_surface_alt_color','الأسطح الثانوية',$curSurfaceAltColor],['ui_topbar_color','الشريط العلوي',$curTopbarColor],['ui_windowbar_color','شريط النوافذ',$curWindowbarColor],['ui_sidebar_color','السايدبار',$curSidebarColor],['ui_sidebar_item_color','عناصر السايدبار',$curSidebarItemColor],['ui_input_color','مربعات الإدخال',$curInputColor],['ui_input_text_color','نص الإدخال',$curInputTextColor],['ui_table_head_color','رأس الجدول',$curTableHeadColor],['ui_table_row_color','صفوف الجدول',$curTableRowColor],['ui_table_row_alt_color','الصف البديل',$curTableRowAltColor],['ui_menu_color','القوائم',$curMenuColor],['ui_modal_color','النوافذ المنبثقة',$curModalColor],['ui_alert_color','الرسائل العامة',$curAlertColor],['ui_security_alert_color','رسائل الحماية',$curSecurityAlertColor]
];
$atsRanges=[
['ui_font_size','الخط العام',$curFontSize,12,20],['ui_title_font_size','العناوين',$curTitleFontSize,16,34],['ui_bar_font_size','الأشرطة',$curBarFontSize,10,18],['ui_input_font_size','الإدخال',$curInputFontSize,11,18],['ui_table_font_size','الجداول',$curTableFontSize,10,18],['ui_menu_font_size','القوائم',$curMenuFontSize,10,18],['ui_modal_font_size','النوافذ',$curModalFontSize,12,20],['ui_control_height','ارتفاع الحقول',$curControlHeight,32,54],['ui_table_row_height','ارتفاع صف الجدول',$curTableRowHeight,36,64],['ui_radius','استدارة الزوايا',$curRadius,6,30],['ui_surface_alpha','شفافية البطاقات',$curSurfaceAlpha,30,96],['ui_menu_alpha','شفافية القوائم',$curMenuAlpha,30,96]
];
?>
<div class="content-wrapper android-template-page"><main class="ats-main">
  <header class="ats-heading"><div><span>Design System</span><h1>استوديو التصميم</h1><p>ضبط القالب العام والخطوط والألوان والقياسات من الهاتف.</p></div><a href="app_settings.php"><i class="fa fa-cog"></i><b>الإعدادات</b></a></header>
  <?php if($msg): ?><div class="ats-notice is-ok"><?= ua_ts_h($msg) ?></div><?php endif; ?><?php if($err): ?><div class="ats-notice is-error"><?= ua_ts_h($err) ?></div><?php endif; ?>
  <?php if(!($conn instanceof mysqli)): ?><div class="ats-notice is-error">تعذر الاتصال بقاعدة البيانات.</div><?php else: ?>
  <section class="ats-preview" id="ats-preview"><span>معاينة</span><h2>عنوان الصفحة</h2><p>مثال حي للبطاقة والنص وعناصر الإدخال.</p><input value="حقل إدخال" readonly><button type="button">زر أساسي</button></section>
  <form class="ats-form" method="post" data-ua-android-native-layout>
    <section class="ats-card"><div class="ats-title"><i class="fa fa-paint-brush"></i><div><span>Theme</span><h2>القالب العام</h2></div></div><input type="hidden" name="ui_design_mode" value="v2"><div class="ats-themes"><?php foreach($themes as $id=>$theme): ?><label><input type="radio" name="ui_theme" value="<?= ua_ts_h($id) ?>" <?= $curTheme===$id?'checked':'' ?>><span style="--swatch:<?= ua_ts_h($theme[3]??'#fbbf24') ?>"><i></i><b><?= ua_ts_h($theme[0]??$id) ?></b><small><?= ua_ts_h($theme[1]??'') ?></small></span></label><?php endforeach; ?></div></section>
    <details class="ats-card ats-details" open><summary><span><i class="fa fa-font"></i><b>الخطوط والأحجام</b></span><i class="fa fa-angle-down"></i></summary><div><label><span>نوع الخط</span><select name="ui_font_family"><?php foreach($fontFamilies as $k=>$v): ?><option value="<?= ua_ts_h($k) ?>" <?= $curFontFamily===$k?'selected':'' ?>><?= ua_ts_h($v) ?></option><?php endforeach; ?></select></label><label><span>السماكة</span><select name="ui_font_weight"><?php foreach($fontWeights as $k=>$v): ?><option value="<?= ua_ts_h($k) ?>" <?= $curFontWeight===$k?'selected':'' ?>><?= ua_ts_h($v) ?></option><?php endforeach; ?></select></label><?php foreach($atsRanges as $r): ?><label class="ats-range"><span><?= ua_ts_h($r[1]) ?> <b data-range-value><?= (int)$r[2] ?></b></span><input type="range" name="<?= ua_ts_h($r[0]) ?>" min="<?= (int)$r[3] ?>" max="<?= (int)$r[4] ?>" value="<?= (int)$r[2] ?>"></label><?php endforeach; ?></div></details>
    <details class="ats-card ats-details"><summary><span><i class="fa fa-eyedropper"></i><b>الألوان والأسطح</b></span><i class="fa fa-angle-down"></i></summary><div class="ats-colors"><?php foreach($atsColors as $c): ?><label><span><?= ua_ts_h($c[1]) ?></span><div><input type="color" value="<?= ua_ts_h($c[2]) ?>" data-color-picker><input name="<?= ua_ts_h($c[0]) ?>" value="<?= ua_ts_h(($c[0]==='ui_accent'&&$curAccent==='')?'':(($c[0]==='ui_text_color'&&$curTextColor==='')?'':(($c[0]==='ui_border_color'&&$curBorderColor==='')?'':$c[2]))) ?>" dir="ltr" data-color-text></div></label><?php endforeach; ?></div></details>
    <details class="ats-card ats-details"><summary><span><i class="fa fa-sliders"></i><b>التموضع والحواف</b></span><i class="fa fa-angle-down"></i></summary><div><label><span>عرض الصفحة</span><select name="ui_page_max_width"><?php foreach($pageWidths as $k=>$v): ?><option value="<?= ua_ts_h($k) ?>" <?= $curPageMaxWidth===$k?'selected':'' ?>><?= ua_ts_h($v) ?></option><?php endforeach; ?></select></label><label><span>المسافات</span><select name="ui_spacing_scale"><?php foreach($spacingScales as $k=>$v): ?><option value="<?= ua_ts_h($k) ?>" <?= $curSpacingScale===$k?'selected':'' ?>><?= ua_ts_h($v) ?></option><?php endforeach; ?></select></label><label><span>شكل الإطار</span><select name="ui_border_style"><?php foreach($borderStyles as $k=>$v): ?><option value="<?= ua_ts_h($k) ?>" <?= $curBorderStyle===$k?'selected':'' ?>><?= ua_ts_h($v) ?></option><?php endforeach; ?></select></label><label><span>سماكة الإطار</span><input type="number" min="1" max="3" name="ui_border_width" value="<?= (int)$curBorderWidth ?>"></label><label><span>نمط الظل</span><select name="ui_card_style"><?php foreach($cardStyles as $k=>$v): ?><option value="<?= ua_ts_h($k) ?>" <?= $curCardStyle===$k?'selected':'' ?>><?= ua_ts_h($v) ?></option><?php endforeach; ?></select></label><label><span>كثافة الواجهة</span><select name="ui_density"><option value="comfy" <?= $curDensity==='comfy'?'selected':'' ?>>مريحة</option><option value="compact" <?= $curDensity==='compact'?'selected':'' ?>>مضغوطة</option></select></label><label><span>السايدبار</span><select name="ui_sidebar"><option value="hover" <?= $curSidebar==='hover'?'selected':'' ?>>توسع عند المرور</option><option value="pinned" <?= $curSidebar==='pinned'?'selected':'' ?>>مثبت</option><option value="compact" <?= $curSidebar==='compact'?'selected':'' ?>>أيقونات فقط</option></select></label></div></details>
    <button class="ats-save"><i class="fa fa-save"></i> حفظ وتطبيق القالب</button>
  </form><?php endif; ?>
</main></div>
<script>(function(){document.querySelectorAll('.ats-range input').forEach(function(x){x.addEventListener('input',function(){x.previousElementSibling.querySelector('[data-range-value]').textContent=x.value;});});document.querySelectorAll('[data-color-picker]').forEach(function(p){var t=p.parentElement.querySelector('[data-color-text]');p.addEventListener('input',function(){t.value=p.value;update();});t.addEventListener('input',function(){if(/^#[0-9a-f]{6}$/i.test(t.value))p.value=t.value;update();});});function update(){var card=document.getElementById('ats-preview'),bg=document.querySelector('[name=ui_body_bg]'),surface=document.querySelector('[name=ui_surface_color]'),accent=document.querySelector('[name=ui_accent]'),text=document.querySelector('[name=ui_text_color]');if(!card)return;card.style.background=surface&&surface.value||'#101a2a';card.style.color=text&&text.value||'#eaf0ff';card.style.borderColor=accent&&accent.value||'#fbbf24';if(bg)card.parentElement.style.setProperty('--ats-page-preview',bg.value);}update();})();</script>
