<?php
// phpcs:disable WordPress.DB.PreparedSQL.InterpolatedNotPrepared, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQLPlaceholders.LikeWildcardsInQuery, WordPress.DB.PreparedSQLPlaceholders.UnfinishedPrepare, WordPress.DB.PreparedSQLPlaceholders.ReplacementsWrongNumber, WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.Security.NonceVerification.Missing, WordPress.Security.NonceVerification.Recommended, WordPress.Security.ValidatedSanitizedInput.MissingUnslash, WordPress.Security.ValidatedSanitizedInput.InputNotSanitized, WordPress.Security.ValidatedSanitizedInput.InputNotValidated, WordPress.Security.SafeRedirect.wp_redirect_wp_redirect, WordPress.WP.I18n.MissingTranslatorsComment, WordPress.WP.I18n.UnorderedPlaceholdersText, WordPress.DateTime.RestrictedFunctions.date_date, WordPress.WP.AlternativeFunctions.rand_mt_rand, WordPress.PHP.DevelopmentFunctions.error_log_error_log, Squiz.PHP.DiscouragedFunctions.Discouraged, WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound, WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedFunctionFound
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Shared font options
$sbs_font_options = array(
    'system'        => 'System Default',
    'inter'         => 'Inter - Clean Modern',
    'poppins'       => 'Poppins - Friendly Round',
    'roboto'        => 'Roboto - Google Standard',
    'montserrat'    => 'Montserrat - Geometric',
    'lato'          => 'Lato - Humanist',
    'nunito'        => 'Nunito - Soft & Round',
    'raleway'       => 'Raleway - Thin Elegant',
    'ubuntu'        => 'Ubuntu - Friendly Tech',
    'oswald'        => 'Oswald - Tall & Compact',
    'exo'           => 'Exo 2 - Futuristic',
    'bebas'         => 'Bebas Neue - Bold 3D Impact',
    'anton'         => 'Anton - Strong & Punchy',
    'black_han'     => 'Black Han Sans - Heavy Modern',
    'archivo_black' => 'Archivo Black - Clean Bold',
    'playfair'      => 'Playfair Display - Elegant Serif',
    'playfair_h'    => 'Playfair Display Bold - Serif Heading',
    'boogaloo'      => 'Boogaloo - Fun & Playful',
);

global $wpdb;
$yatoon_popular_selected_raw = get_option('yatoon_popular_pick_service_ids', array());
if (!is_array($yatoon_popular_selected_raw)) {
    $yatoon_popular_selected_raw = explode(',', (string) $yatoon_popular_selected_raw);
}
$yatoon_popular_selected_ids = array_values(array_filter(array_map('absint', $yatoon_popular_selected_raw)));
$yatoon_popular_pick_services = $wpdb->get_results(
    "SELECT id, name, category, is_featured FROM {$wpdb->prefix}yatoon_services WHERE is_active = 1 ORDER BY is_featured DESC, sort_order ASC, name ASC"
);

function sbs_btn_row($label, $prefix, $defaults) {
    global $sbs_font_options;
    $font   = get_option($prefix . '_font',       'system');
    $size   = intval(get_option($prefix . '_size',  $defaults['size']));
    $color  = get_option($prefix . '_text_color',  $defaults['color']);
    $bg     = get_option($prefix . '_bg_color',    $defaults['bg']);
    $text   = get_option($prefix . '_label',       $defaults['label']);
    $radius = intval(get_option($prefix . '_radius', $defaults['radius'] ?? 20));
    echo '<tr class="sbs-btn-row">';
    echo '<th scope="row" style="padding-top:18px;vertical-align:top;">';
    echo '<label style="font-weight:600;">' . esc_html($label) . '</label>';
    echo '</th><td>';
    echo '<div class="sbs-btn-control-grid">';

    // Label input
    echo '<div class="sbs-ctrl"><label class="sbs-ctrl-label">Button Text</label>';
    echo '<input type="text" name="' . $prefix . '_label" value="' . esc_attr($text) . '" class="regular-text" style="max-width:200px;"></div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

    // Font select
    echo '<div class="sbs-ctrl"><label class="sbs-ctrl-label">Font</label>';
    echo '<select name="' . $prefix . '_font" style="max-width:230px;">'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
    foreach ($sbs_font_options as $val => $lbl) {
        $sel = selected($font, $val, false);
        echo '<option value="' . esc_attr($val) . '"' . $sel . '>' . esc_html($lbl) . '</option>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
    }
    echo '</select></div>';

    // Size
    echo '<div class="sbs-ctrl"><label class="sbs-ctrl-label">Size</label>';
    echo '<span style="display:flex;align-items:center;gap:4px;"><input type="number" name="' . $prefix . '_size" value="' . $size . '" min="10" max="36" style="width:66px;"><span style="color:#6b7280;font-size:12px;">px</span></span></div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

    // Text colour
    echo '<div class="sbs-ctrl"><label class="sbs-ctrl-label">Text Color</label>';
    echo '<input type="color" name="' . $prefix . '_text_color" value="' . esc_attr($color) . '"></div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

    // BG colour
    echo '<div class="sbs-ctrl"><label class="sbs-ctrl-label">Background</label>';
    echo '<input type="color" name="' . $prefix . '_bg_color" value="' . esc_attr($bg) . '"></div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

    // Border radius
    echo '<div class="sbs-ctrl"><label class="sbs-ctrl-label">Border Radius</label>';
    echo '<span style="display:flex;align-items:center;gap:4px;"><input type="number" name="' . $prefix . '_radius" value="' . $radius . '" min="0" max="50" style="width:66px;"><span style="color:#6b7280;font-size:12px;">px</span></span></div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

    // Live preview
    $btn_style = 'background:' . esc_attr($bg) . ';color:' . esc_attr($color) . ';font-size:' . $size . 'px;border:none;padding:8px 18px;border-radius:' . $radius . 'px;cursor:default;font-weight:600;white-space:nowrap;';
    echo '<div class="sbs-ctrl"><label class="sbs-ctrl-label">Live Preview</label>';
    echo '<button type="button" class="sbs-preview-btn" data-prefix="' . $prefix . '" style="' . $btn_style . '">' . esc_html($text ?: $defaults['label']) . '</button></div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

    echo '</div></td></tr>';
}
?>

<style>
.sbs-section-head{margin:20px 0 6px;font-size:15px;color:#1d2327;border-bottom:2px solid #e5e7eb;padding-bottom:8px;font-weight:700;}
.sbs-btn-control-grid{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;padding:8px 0 4px;}
.sbs-ctrl{display:flex;flex-direction:column;gap:4px;}
.sbs-ctrl-label{font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;}
.sbs-btn-row{border-top:1px solid #f0f0f0;}
.sbs-btn-row td{padding:12px 10px 14px;}
.form-table th{width:220px;}
</style>

<div class="wrap">
<h1>&#127912; Brand &amp; Button Settings</h1>
<p class="description">Customise your booking system - logo, colours, typography, and every button label, font, size and colour.</p>

<form method="post" action="options.php" enctype="multipart/form-data">
<?php settings_fields('yatoon_brand_settings'); ?>
<table class="form-table">

<tr><th colspan="2"><h2 class="sbs-section-head">&#127970; Branding</h2></th></tr>

<tr>
<th><label for="yatoon_business_name">Business Name</label></th>
<td>
<input type="text" name="yatoon_business_name" id="yatoon_business_name"
       value="<?php echo esc_attr(get_option('yatoon_business_name', 'Your Business')); ?>" class="regular-text">
<p class="description">Displayed throughout the booking page. Default: "Your Business"</p>
</td>
</tr>

<tr>
<th><label for="sbs_business_logo">Business Logo</label></th>
<td>
<?php
$logo_url = get_option('yatoon_business_logo', '');
$logo_id  = get_option('yatoon_business_logo_id', 0);
?>
<div id="sbs-logo-preview" style="margin-bottom:12px;">
<?php if ($logo_url): ?>
<img src="<?php echo esc_url($logo_url); ?>" style="max-width:200px;max-height:100px;display:block;margin-bottom:8px;border:1px solid #e5e7eb;border-radius:6px;padding:4px;">
<?php endif; ?>
</div>
<input type="hidden" id="sbs_business_logo"    name="yatoon_business_logo"    value="<?php echo esc_url($logo_url); ?>">
<input type="hidden" id="sbs_business_logo_id" name="yatoon_business_logo_id" value="<?php echo intval($logo_id); ?>">
<button type="button" class="button button-primary" id="sbs-upload-logo">
&#128247; <?php echo $logo_url ? 'Change Logo' : 'Upload Logo'; ?>
</button>
<?php if ($logo_url): ?>
<button type="button" class="button" id="sbs-remove-logo" style="margin-left:8px;color:#dc2626;">&#10005; Remove</button>
<?php endif; ?>
<p class="description" style="margin-top:8px;">Recommended: at least 400x200px (2x for Retina/high-DPI screens), PNG with transparent background works best.</p>
<div id="sbs-logo-upload-error" style="display:none;margin-top:8px;padding:8px 12px;background:#fef2f2;border:1px solid #fca5a5;border-radius:6px;color:#dc2626;font-size:13px;">
&#9888;&#65039; Media Library not available. Please refresh and try again.
</div>
</td>
</tr>

<tr><th colspan="2"><h2 class="sbs-section-head">&#127912; Colours</h2></th></tr>

<tr>
<th><label for="yatoon_primary_color">Primary Color</label></th>
<td>
<input type="color" name="yatoon_primary_color" id="yatoon_primary_color" value="<?php echo esc_attr(get_option('yatoon_primary_color', '#ec4899')); ?>">
<p class="description">Progress steps and selected states. Default: Pink #ec4899</p>
</td>
</tr>

<tr>
<th><label for="yatoon_secondary_color">Secondary Color</label></th>
<td>
<input type="color" name="yatoon_secondary_color" id="yatoon_secondary_color" value="<?php echo esc_attr(get_option('yatoon_secondary_color', '#db2777')); ?>">
<p class="description">Accent colour. Default: Dark Pink #db2777</p>
</td>
</tr>

<tr>
<th><label for="yatoon_text_color">Body Text Color</label></th>
<td>
<input type="color" name="yatoon_text_color" id="yatoon_text_color" value="<?php echo esc_attr(get_option('yatoon_text_color', '#1f2937')); ?>">
<p class="description">Main text colour. Default: #1f2937</p>
</td>
</tr>

<tr>
<th>Live Preview</th>
<td>
    <div id="yatoon-color-preview" style="max-width:380px;border:1px solid #e5e7eb;border-radius:14px;padding:18px;background:#fff;box-shadow:0 6px 20px rgba(15,23,42,.06);">
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
            <?php foreach (array('Service','Date & Time','Details') as $yt_i => $yt_step_label) : ?>
                <div style="display:flex;align-items:center;gap:6px;<?php echo esc_attr( $yt_i > 0 ? 'opacity:.45;' : '' ); ?>">
                    <span id="yatoon-preview-dot-<?php echo esc_attr( $yt_i ); ?>" style="width:22px;height:22px;border-radius:999px;background:<?php echo esc_attr( $yt_i === 0 ? get_option('yatoon_primary_color', '#ec4899') : '#e5e7eb' ); ?>;display:inline-block;"></span>
                    <span style="font-size:11px;font-weight:600;color:#6b7280;"><?php echo esc_html($yt_step_label); ?></span>
                </div>
            <?php endforeach; ?>
        </div>
        <div style="border:1px solid #e5e7eb;border-radius:10px;padding:14px;margin-bottom:12px;">
            <strong id="yatoon-preview-service-name" style="display:block;color:<?php echo esc_attr(get_option('yatoon_text_color', '#1f2937')); ?>;font-size:14px;">Gel Manicure</strong>
            <span style="display:block;color:#9ca3af;font-size:12px;margin:2px 0 8px;">45 min</span>
            <span id="yatoon-preview-price" style="display:inline-block;font-weight:700;color:<?php echo esc_attr(get_option('yatoon_secondary_color', '#db2777')); ?>;">$45</span>
        </div>
        <button type="button" id="yatoon-preview-btn" style="width:100%;border:none;border-radius:8px;padding:12px;color:#fff;font-weight:700;font-size:14px;cursor:default;background:<?php echo esc_attr(get_option('yatoon_primary_color', '#ec4899')); ?>;">Continue</button>
    </div>
    <p class="description" style="margin-top:8px;">Updates instantly as you change colors above - no need to save first to see how it'll look.</p>
    <script>
    (function() {
        function $(id) { return document.getElementById(id); }
        function hook(colorInputId, apply) {
            var input = document.querySelector('input[name="' + colorInputId + '"]');
            if (!input) return;
            input.addEventListener('input', function() { apply(input.value); });
        }
        hook('yatoon_primary_color', function(val) {
            var dot = $('yatoon-preview-dot-0');
            var btn = $('yatoon-preview-btn');
            if (dot) dot.style.background = val;
            if (btn) btn.style.background = val;
        });
        hook('yatoon_secondary_color', function(val) {
            var price = $('yatoon-preview-price');
            if (price) price.style.color = val;
        });
        hook('yatoon_text_color', function(val) {
            var name = $('yatoon-preview-service-name');
            if (name) name.style.color = val;
        });
    })();
    </script>
</td>
</tr>

<tr><th colspan="2"><h2 class="sbs-section-head">Plugin Skin</h2></th></tr>

<tr>
<th><label for="yatoon_plugin_page_bg_color">Plugin Background</label></th>
<td>
<input type="color" name="yatoon_plugin_page_bg_color" id="yatoon_plugin_page_bg_color" value="<?php echo esc_attr(get_option('yatoon_plugin_page_bg_color', '#f5f5f7')); ?>">
<p class="description">Overall booking, service menu, portal and manage-booking background. Default: #f5f5f7</p>
</td>
</tr>

<tr>
<th><label for="yatoon_plugin_card_bg_color">Panel/Card Background</label></th>
<td>
<input type="color" name="yatoon_plugin_card_bg_color" id="yatoon_plugin_card_bg_color" value="<?php echo esc_attr(get_option('yatoon_plugin_card_bg_color', '#ffffff')); ?>">
<p class="description">Main panels, cards and service item background. Default: #ffffff</p>
</td>
</tr>

<tr>
<th><label for="yatoon_plugin_border_color">Panel Border Color</label></th>
<td>
<input type="color" name="yatoon_plugin_border_color" id="yatoon_plugin_border_color" value="<?php echo esc_attr(get_option('yatoon_plugin_border_color', '#e5e5ea')); ?>">
<p class="description">Borders around cards, inputs and panels. Default: #e5e5ea</p>
</td>
</tr>

<tr>
<th><label for="yatoon_primary_button_bg_color">Primary Action Buttons</label></th>
<td>
<div class="sbs-btn-control-grid">
    <div class="sbs-ctrl">
        <label class="sbs-ctrl-label" for="yatoon_primary_button_bg_color">Background</label>
        <input type="color" name="yatoon_primary_button_bg_color" id="yatoon_primary_button_bg_color" value="<?php echo esc_attr(get_option('yatoon_primary_button_bg_color', '#008a00')); ?>">
    </div>
    <div class="sbs-ctrl">
        <label class="sbs-ctrl-label" for="yatoon_primary_button_text_color">Text Color</label>
        <input type="color" name="yatoon_primary_button_text_color" id="yatoon_primary_button_text_color" value="<?php echo esc_attr(get_option('yatoon_primary_button_text_color', '#ffffff')); ?>">
    </div>
    <div class="sbs-ctrl">
        <label class="sbs-ctrl-label" for="yatoon_primary_button_font_size">Font Size</label>
        <span style="display:flex;align-items:center;gap:4px;"><input type="number" name="yatoon_primary_button_font_size" id="yatoon_primary_button_font_size" value="<?php echo intval(get_option('yatoon_primary_button_font_size', 16)); ?>" min="10" max="32" style="width:66px;"><span style="color:#6b7280;font-size:12px;">px</span></span>
    </div>
    <div class="sbs-ctrl">
        <label class="sbs-ctrl-label" for="yatoon_primary_button_radius">Radius</label>
        <span style="display:flex;align-items:center;gap:4px;"><input type="number" name="yatoon_primary_button_radius" id="yatoon_primary_button_radius" value="<?php echo intval(get_option('yatoon_primary_button_radius', 999)); ?>" min="0" max="999" style="width:76px;"><span style="color:#6b7280;font-size:12px;">px</span></span>
    </div>
    <div class="sbs-ctrl">
        <label class="sbs-ctrl-label">Preview</label>
        <button type="button" id="yatoon-primary-action-preview" style="background:<?php echo esc_attr(get_option('yatoon_primary_button_bg_color', '#008a00')); ?>;color:<?php echo esc_attr(get_option('yatoon_primary_button_text_color', '#ffffff')); ?>;font-size:<?php echo intval(get_option('yatoon_primary_button_font_size', 16)); ?>px;border:none;padding:10px 22px;border-radius:999px;font-weight:700;">Pick a Time</button>
    </div>
</div>
<p class="description">Controls Book Now, Continue/Pick a Time, submit, portal primary buttons and service menu booking buttons. Default background restores the original green.</p>
</td>
</tr>

<tr>
<th><label for="sbs_readmore_color">Read More Link Color</label></th>
<td>
<input type="color" name="sbs_readmore_color" id="sbs_readmore_color" value="<?php echo esc_attr(get_option('sbs_readmore_color', get_option('yatoon_readmore_color', '#16a34a'))); ?>">
<p class="description">Color of the &quot;Read more&quot; / &quot;Show less&quot; link on service descriptions. Default: Green #16a34a</p>
</td>
</tr>

<tr><th colspan="2"><h2 class="sbs-section-head">&#9999;&#65039; Typography</h2></th></tr>

<tr>
<th><label for="sbs_heading_font">Section Title Font</label></th>
<td>
<select name="sbs_heading_font" id="sbs_heading_font" style="max-width:280px;">
<?php
$hf = get_option('sbs_heading_font', get_option('yatoon_heading_font', 'bebas'));
foreach ($sbs_font_options as $val => $lbl) {
    echo '<option value="' . esc_attr($val) . '"' . selected($hf, $val, false) . '>' . esc_html($lbl) . '</option>';
}
?>
</select>
<p class="description">Font for headings like "Nail Enhancements". Bebas Neue gives a bold 3D look.</p>
</td>
</tr>

<tr>
<th><label for="sbs_heading_color">Section Title Color</label></th>
<td>
<input type="color" name="sbs_heading_color" id="sbs_heading_color" value="<?php echo esc_attr(get_option('sbs_heading_color', get_option('yatoon_heading_color', '#ec4899'))); ?>">
<p class="description">Default: Pink #ec4899</p>
</td>
</tr>

<tr>
<th><label for="sbs_heading_size">Section Title Size</label></th>
<td>
<input type="number" name="sbs_heading_size" id="sbs_heading_size" value="<?php echo intval(get_option('sbs_heading_size', get_option('yatoon_heading_size', 32))); ?>" min="14" max="72" style="width:80px;"> px
<p class="description">Default: 32px</p>
</td>
</tr>

<tr>
<th><label for="sbs_main_title_size">Page Title Size<br><small style="font-weight:400;color:#6b7280;">"Book Your Appointment"</small></label></th>
<td>
<input type="number" name="sbs_main_title_size" id="sbs_main_title_size" value="<?php echo intval(get_option('sbs_main_title_size', get_option('yatoon_main_title_size', 34))); ?>" min="16" max="72" style="width:80px;"> px
<p class="description">Default: 34px</p>
</td>
</tr>

<tr>
<th><label for="sbs_cat_tab_size">Category Tab Size</label></th>
<td>
<input type="number" name="sbs_cat_tab_size" id="sbs_cat_tab_size" value="<?php echo esc_attr(rtrim(rtrim(number_format((float) get_option('sbs_cat_tab_size', get_option('yatoon_cat_tab_size', 15)), 1, '.', ''), '0'), '.')); ?>" min="8" max="28" step="0.5" style="width:80px;"> px
<p class="description">Category tabs e.g. Enhancements / Manicures. Default: 15px</p>
</td>
</tr>

<tr><th colspan="2"><h2 class="sbs-section-head">Booking Page Labels</h2></th></tr>

<tr>
<th><label for="yatoon_show_popular_picks">Popular Picks</label></th>
<td>
<input type="hidden" name="yatoon_show_popular_picks" value="0">
<label>
    <input type="checkbox" name="yatoon_show_popular_picks" id="yatoon_show_popular_picks" value="1" <?php checked((int) get_option('yatoon_show_popular_picks', 1), 1); ?>>
    Show Popular Picks on the booking page
</label>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;">
    <label style="display:flex;flex-direction:column;gap:5px;font-weight:600;">
        Mobile count
        <input type="number" name="yatoon_popular_picks_mobile_count" value="<?php echo esc_attr((int) get_option('yatoon_popular_picks_mobile_count', 4)); ?>" min="1" max="12" step="1" style="width:80px;">
    </label>
    <label style="display:flex;flex-direction:column;gap:5px;font-weight:600;">
        Desktop count
        <input type="number" name="yatoon_popular_picks_desktop_count" value="<?php echo esc_attr((int) get_option('yatoon_popular_picks_desktop_count', 6)); ?>" min="1" max="12" step="1" style="width:80px;">
    </label>
</div>
<p class="description">Controls the "Popular Picks" recommendation block near the top of the customer booking page. Turn this off if you want customers to go straight into the full service list.</p>
<p class="description">Recommended default: 4 on mobile, 6 on desktop. Use any number from 1 to 12, for example 3 if you only want three picks.</p>
<label style="display:block;margin-top:14px;font-weight:600;" for="yatoon_popular_pick_service_ids">Choose exact Popular Picks</label>
<select name="yatoon_popular_pick_service_ids[]" id="yatoon_popular_pick_service_ids" multiple size="8" style="width:min(520px,100%);max-width:100%;">
    <?php foreach ((array) $yatoon_popular_pick_services as $pick_option) : ?>
        <?php
        $pick_label = trim(($pick_option->category ? $pick_option->category . ' - ' : '') . $pick_option->name);
        if (!empty($pick_option->is_featured)) {
            $pick_label .= ' (Favorite)';
        }
        ?>
        <option value="<?php echo esc_attr($pick_option->id); ?>" <?php selected(in_array((int) $pick_option->id, $yatoon_popular_selected_ids, true)); ?>><?php echo esc_html($pick_label); ?></option>
    <?php endforeach; ?>
</select>
<p class="description">Hold Ctrl/Command to select multiple. If you choose services here, Popular Picks will show only these services in this order. Leave empty to use the automatic Favorite list.</p>
</td>
</tr>

<tr>
<th><label for="yatoon_service_popular_label">Service Popular Badge</label></th>
<td>
<input type="text" name="yatoon_service_popular_label" id="yatoon_service_popular_label" value="<?php echo esc_attr(get_option('yatoon_service_popular_label', 'Popular')); ?>" class="regular-text">
<p class="description">Shown on service cards when a service is marked Popular in Services.</p>
</td>
</tr>

<tr>
<th><label for="yatoon_option_addon_group_label">Option &amp; Add-on Text</label></th>
<td>
<div class="sbs-btn-control-grid" style="align-items:flex-start;max-width:760px;">
    <div class="sbs-ctrl"><label class="sbs-ctrl-label">Detail Kicker</label><input type="text" name="yatoon_option_customize_kicker" value="<?php echo esc_attr(get_option('yatoon_option_customize_kicker', 'Customize your service')); ?>" class="regular-text"></div>
    <div class="sbs-ctrl"><label class="sbs-ctrl-label">Top Eyebrow</label><input type="text" name="yatoon_option_related_eyebrow" value="<?php echo esc_attr(get_option('yatoon_option_related_eyebrow', 'Related choices')); ?>" class="regular-text"></div>
    <div class="sbs-ctrl"><label class="sbs-ctrl-label">Top Title</label><input type="text" name="yatoon_option_related_title" value="<?php echo esc_attr(get_option('yatoon_option_related_title', 'Choose what fits your visit')); ?>" class="regular-text"></div>
    <div class="sbs-ctrl"><label class="sbs-ctrl-label">Top Hint</label><input type="text" name="yatoon_option_related_hint" value="<?php echo esc_attr(get_option('yatoon_option_related_hint', 'Tap to select')); ?>" class="regular-text"></div>
    <div class="sbs-ctrl"><label class="sbs-ctrl-label">Main Option Title</label><input type="text" name="yatoon_option_main_group_label" value="<?php echo esc_attr(get_option('yatoon_option_main_group_label', 'Choose one option')); ?>" class="regular-text"></div>
    <div class="sbs-ctrl"><label class="sbs-ctrl-label">Main Option Help</label><input type="text" name="yatoon_option_main_group_help" value="<?php echo esc_attr(get_option('yatoon_option_main_group_help', 'Pick the main style or variation for this service.')); ?>" class="regular-text"></div>
    <div class="sbs-ctrl"><label class="sbs-ctrl-label">Add-on Section Title</label><input type="text" name="yatoon_option_addon_group_label" id="yatoon_option_addon_group_label" value="<?php echo esc_attr(get_option('yatoon_option_addon_group_label', 'Recommended add-ons')); ?>" class="regular-text"></div>
    <div class="sbs-ctrl"><label class="sbs-ctrl-label">Add-on Help</label><input type="text" name="yatoon_option_addon_group_help" value="<?php echo esc_attr(get_option('yatoon_option_addon_group_help', 'Optional extras you can add to this appointment.')); ?>" class="regular-text"></div>
    <div class="sbs-ctrl"><label class="sbs-ctrl-label">1st Add-on Badge</label><input type="text" name="yatoon_option_recommended_badge_label" value="<?php echo esc_attr(get_option('yatoon_option_recommended_badge_label', 'Recommended')); ?>" class="regular-text"></div>
    <div class="sbs-ctrl"><label class="sbs-ctrl-label">2nd Add-on Badge</label><input type="text" name="yatoon_option_popular_badge_label" value="<?php echo esc_attr(get_option('yatoon_option_popular_badge_label', 'Popular')); ?>" class="regular-text"></div>
    <div class="sbs-ctrl"><label class="sbs-ctrl-label">Other Add-on Badge</label><input type="text" name="yatoon_option_addon_badge_label" value="<?php echo esc_attr(get_option('yatoon_option_addon_badge_label', 'Add-on')); ?>" class="regular-text"></div>
</div>
<p class="description">These labels control the service customization screen and add-on badges on the booking page.</p>
</td>
</tr>

<tr>
<th><label>Category Order &amp; Names</label></th>
<td>
<?php
global $wpdb;
// phpcs:disable WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter
$all_cats = $wpdb->get_col("SELECT DISTINCT category FROM {$wpdb->prefix}yatoon_services WHERE category IS NOT NULL AND category != '' ORDER BY category");
$saved_order = get_option('yatoon_category_order', '');
if (is_array($saved_order)) { $saved_order = implode("
", $saved_order); }
$ordered_entries = array();
if ($saved_order && is_string($saved_order)) {
    $raw_lines = array_filter(array_map('trim', explode("
", $saved_order)));
    foreach ($raw_lines as $line) {
        if (strpos($line, '|') !== false) {
            list($label, $db) = explode('|', $line, 2);
            $ordered_entries[] = array('label' => trim($label), 'db' => trim($db));
        } else {
            $ordered_entries[] = array('label' => trim($line), 'db' => trim($line));
        }
    }
}
// Drop stale entries whose DB category was deleted/renamed via Manage Categories
$ordered_entries = array_values(array_filter($ordered_entries, function($entry) use ($all_cats) {
    return in_array($entry['db'], $all_cats, true);
}));
// Add any new DB cats not yet in list
$existing_dbs = array_column($ordered_entries, 'db');
foreach ($all_cats as $c) {
    if (!in_array($c, $existing_dbs)) {
        $ordered_entries[] = array('label' => $c, 'db' => $c);
    }
}
?>
<p class="description" style="margin-bottom:10px;">
    Set the <strong>order number</strong> for each category (0 = first). Edit the <strong>Display Name</strong> to rename it on the booking page.<br>
    Click <strong>Save Settings</strong> when done.
</p>
<table style="border-collapse:collapse; width:100%; max-width:560px;">
    <thead>
        <tr style="background:#f0f0f0;">
            <th style="padding:6px 10px; text-align:left; font-size:12px; color:#555;">Order</th>
            <th style="padding:6px 10px; text-align:left; font-size:12px; color:#555;">Display Name</th>
            <th style="padding:6px 10px; text-align:left; font-size:12px; color:#555;">DB Category</th>
        </tr>
    </thead>
    <tbody id="sbs-cat-order-tbody">
    <?php foreach ($ordered_entries as $idx => $entry) : ?>
        <tr style="border-bottom:1px solid #e5e7eb;" data-db="<?php echo esc_attr($entry['db']); ?>">
            <td style="padding:6px 10px; width:70px;">
                <input type="number" class="sbs-cat-order-num" value="<?php echo esc_attr( $idx ); ?>" min="0" max="99"
                    style="width:55px; padding:4px 6px; border:1px solid #d1d5db; border-radius:4px; text-align:center;">
            </td>
            <td style="padding:6px 10px;">
                <input type="text" class="sbs-cat-label-input" value="<?php echo esc_attr($entry['label']); ?>"
                    style="width:100%; padding:4px 8px; border:1px solid #d1d5db; border-radius:4px; font-size:13px;">
            </td>
            <td style="padding:6px 10px; color:#9ca3af; font-size:12px;"><?php echo esc_html($entry['db']); ?></td>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>
<input type="hidden" name="yatoon_category_order" id="yatoon_category_order" value="">
<script>
jQuery(function($){
    function updateInput() {
        var rows = [];
        $('#sbs-cat-order-tbody tr').each(function(){
            rows.push({
                order: parseInt($(this).find('.sbs-cat-order-num').val()) || 0,
                label: $(this).find('.sbs-cat-label-input').val().trim(),
                db:    $(this).data('db')
            });
        });
        rows.sort(function(a,b){ return a.order - b.order; });
        var lines = rows.map(function(r){ return r.label + '|' + r.db; });
        $('#yatoon_category_order').val(lines.join("\n"));
    }
    $('#sbs-cat-order-tbody').on('input', 'input', updateInput);
    updateInput();
});
</script>
<p class="description" style="margin-top:8px; color:#6b7280;">Tip: Use 0, 1, 2, 3... to set order. Duplicate numbers are sorted alphabetically.</p>
</td>
</tr>

<tr><th colspan="2">
<h2 class="sbs-section-head">&#128280; Button Labels, Fonts &amp; Colours</h2>
<p style="font-size:13px;color:#6b7280;margin:0 0 2px;">Rename and restyle every button to match your brand. <strong>Tip:</strong> Change "Add" &#8594; "Book", "Continue" &#8594; "Next", etc.</p>
</th></tr>

<?php
sbs_btn_row('&#128722; ADD Button  (on each service)', 'yatoon_add_btn', array(
    'label' => 'Add', 'size' => 14, 'color' => '#ffffff', 'bg' => '#ec4899',
));
sbs_btn_row('&#9664; Back Button', 'yatoon_back_btn', array(
    'label' => 'Back', 'size' => 14, 'color' => '#374151', 'bg' => '#f3f4f6',
));
sbs_btn_row('&#9654; Continue Button', 'sbs_continue_btn', array(
    'label' => 'Continue', 'size' => 15, 'color' => '#ffffff', 'bg' => '#008a00',
));
sbs_btn_row('&#128197; "+ Add More Services" - Calendar page: top green banner (right side small button)', 'sbs_addmore3_btn', array(
    'label' => '+ Add More Services', 'size' => 13, 'color' => '#ffffff', 'bg' => '#e00000',
));
sbs_btn_row('&#128101; "+ Add Service for [Person]" - Calendar page: green banner per-person button', 'sbs_add_for_person_btn', array(
    'label' => '+ Add Service for', 'size' => 12, 'color' => '#ffffff', 'bg' => '#16a34a',
));
sbs_btn_row('&#128101; "+ Add Guest Together" - Calendar page: green banner guest button', 'sbs_add_guest_btn', array(
    'label' => '+ Add Guest Together', 'size' => 12, 'color' => '#16a34a', 'bg' => '#f0fdf4',
));
sbs_btn_row('&#128203; "+ Add More Services" - Calendar page: bottom nav bar (next to Back button)', 'sbs_addmore2_btn', array(
    'label' => '+ Add More Services', 'size' => 16, 'color' => '#ffffff', 'bg' => '#e00000',
));
sbs_btn_row('&#128203; "Add Another Appointment" - Review &amp; Book page: top right corner', 'sbs_addmore_btn', array(
    'label' => 'Add Another Appointment', 'size' => 14, 'color' => '#ffffff', 'bg' => '#ec4899',
));
sbs_btn_row('&#9989; Confirm Button - 1 appointment (single)', 'sbs_confirm_single_btn', array(
    'label' => 'Confirm Booking', 'size' => 15, 'color' => '#ffffff', 'bg' => '#16a34a',
));
sbs_btn_row('&#9989; Confirm Button - 2 appointments (plural)', 'sbs_confirm_btn', array(
    'label' => 'Confirm All Bookings', 'size' => 15, 'color' => '#ffffff', 'bg' => '#16a34a',
));
?>

</table>
<?php submit_button('&#128190; Save All Settings', 'primary large'); ?>
</form>
</div>

<script>
jQuery(document).ready(function($) {
    var frame;
    $('#sbs-upload-logo').on('click', function(e) {
        e.preventDefault();
        if (typeof wp === 'undefined' || typeof wp.media === 'undefined') {
            $('#sbs-logo-upload-error').show(); return;
        }
        if (frame) { frame.open(); return; }
        frame = wp.media({ title: 'Select Business Logo', button: { text: 'Use this logo' }, multiple: false, library: { type: 'image' } });
        frame.on('select', function() {
            var a = frame.state().get('selection').first().toJSON();
            $('#sbs_business_logo').val(a.url);
            $('#sbs_business_logo_id').val(a.id);
            $('#sbs-logo-preview').html('<img src="'+a.url+'" style="max-width:200px;max-height:100px;display:block;margin-bottom:8px;border:1px solid #e5e7eb;border-radius:6px;padding:4px;">');
            $('#sbs-upload-logo').text('Change Logo');
            if ($('#sbs-remove-logo').length === 0) {
                $('#sbs-upload-logo').after(' <button type="button" class="button" id="sbs-remove-logo" style="margin-left:8px;color:#dc2626;">Remove</button>');
            }
        });
        frame.open();
    });
    $(document).on('click', '#sbs-remove-logo', function(e) {
        e.preventDefault();
        if (!confirm('Remove the business logo?')) return;
        $('#sbs_business_logo').val(''); $('#sbs_business_logo_id').val('');
        $('#sbs-logo-preview').html(''); $('#sbs-upload-logo').text('Upload Logo'); $(this).remove();
    });

    // Live preview
    function updatePreview($row) {
        var prefix  = $row.find('.sbs-preview-btn').data('prefix');
        if (!prefix) return;
        var label   = $row.find('input[name="'+prefix+'_label"]').val()       || 'Button';
        var textCol = $row.find('input[name="'+prefix+'_text_color"]').val()  || '#ffffff';
        var bgCol   = $row.find('input[name="'+prefix+'_bg_color"]').val()    || '#ec4899';
        var size    = $row.find('input[name="'+prefix+'_size"]').val()        || '14';
        $row.find('.sbs-preview-btn').text(label).css({ background: bgCol, color: textCol, 'font-size': size+'px' });
    }
    $('.sbs-btn-row').each(function() {
        var $row = $(this);
        $row.find('input').on('input change', function() { updatePreview($row); });
    });

    function updateSkinPreview() {
        $('#yatoon-primary-action-preview').css({
            background: $('#yatoon_primary_button_bg_color').val() || '#008a00',
            color: $('#yatoon_primary_button_text_color').val() || '#ffffff',
            'font-size': ($('#yatoon_primary_button_font_size').val() || '16') + 'px',
            'border-radius': ($('#yatoon_primary_button_radius').val() || '999') + 'px'
        });
    }
    $('#yatoon_primary_button_bg_color, #yatoon_primary_button_text_color, #yatoon_primary_button_font_size, #yatoon_primary_button_radius').on('input change', updateSkinPreview);
});
</script>
