<?php

if ( ! defined( 'ABSPATH' ) ) { exit; }
// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$service_categories = array();
$service_category_counts = array();
foreach ((array) $services as $sbs_service_for_filter) {
    $sbs_category_name = trim((string) ( $sbs_service_for_filter->category ?? '' ));
    if ($sbs_category_name !== '') {
        if (!in_array($sbs_category_name, $service_categories, true)) {
            $service_categories[] = $sbs_category_name;
            $service_category_counts[ $sbs_category_name ] = 0;
        }
        ++$service_category_counts[ $sbs_category_name ];
    }
}
sort($service_categories, SORT_NATURAL | SORT_FLAG_CASE);
$is_pro = class_exists( 'YATOON_License' ) ? YATOON_License::is_pro() : false;
$service_count = count( $services ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
?>
<div class="wrap sbs-admin-page sbs-services-page">
    <script>
        try {
            const yatoonServicesWidthKey = 'yatoon-admin-table-widths:' + location.pathname + ':' + (new URLSearchParams(location.search).get('page') || 'page') + ':sbs-services-table';
            const yatoonServicesResetKey = yatoonServicesWidthKey + ':3.4.0-service-cards';
            if (!localStorage.getItem(yatoonServicesResetKey)) {
                localStorage.removeItem(yatoonServicesWidthKey);
                localStorage.setItem(yatoonServicesResetKey, '1');
            }
        } catch (err) {}
    </script>
    <h1>
        <?php esc_html_e( 'Services', 'yatoon-booking-system' ); ?>
        <button type="button" id="sbs-add-service" class="page-title-action"><?php esc_html_e( 'Add New', 'yatoon-booking-system' ); ?></button>
        <button type="button" id="sbs-manage-categories" class="page-title-action"><?php esc_html_e( 'Manage Categories', 'yatoon-booking-system' ); ?></button>
        <?php if ( $is_pro ) : ?>
            <button type="button" id="sbs-sync-services" class="page-title-action"><?php esc_html_e( 'Sync from Square', 'yatoon-booking-system' ); ?></button>
        <?php else : ?>
            <a href="<?php echo esc_url( YATOON_License::get_upgrade_url() ); ?>" target="_blank" rel="noopener noreferrer" class="page-title-action"><?php esc_html_e( 'Sync from Square - Pro', 'yatoon-booking-system' ); ?></a>
        <?php endif; ?>
    </h1>

    <p class="description sbs-admin-page-description">
        <?php esc_html_e( 'Click any service row to edit details, options, add-ons, and category.
        Drag rows to reorder services. Changes save automatically.', 'yatoon-booking-system' ); ?>
    </p>

    <?php if (empty($services)) : ?>
        <div class="notice notice-warning">
            <p><?php esc_html_e( 'No services found. Click "Add New" to create a service or "Sync from Square".', 'yatoon-booking-system' ); ?></p>
        </div>
    <?php else : ?>
        <div class="sbs-table-toolbar">
            <div class="sbs-table-search">
                <input type="search" id="sbs-service-search" class="regular-text" autocomplete="off" placeholder="<?php echo esc_attr__( 'Search services, descriptions, or IDs', 'yatoon-booking-system' ); ?>">
                <select id="sbs-service-category-filter">
                    <option value=""><?php esc_html_e( 'All categories', 'yatoon-booking-system' ); ?></option>
                    <?php foreach ($service_categories as $filter_category) : ?>
                        <option value="<?php echo esc_attr(strtolower($filter_category)); ?>"><?php echo esc_html($filter_category); ?></option>
                    <?php endforeach; ?>
                </select>
                <select id="sbs-service-status-filter">
                    <option value=""><?php esc_html_e( 'All statuses', 'yatoon-booking-system' ); ?></option>
                    <option value="active"><?php esc_html_e( 'Active', 'yatoon-booking-system' ); ?></option>
                    <option value="inactive"><?php esc_html_e( 'Inactive', 'yatoon-booking-system' ); ?></option>
                </select>
                <select id="sbs-service-design-upload-filter">
                    <option value=""><?php esc_html_e( 'All upload settings', 'yatoon-booking-system' ); ?></option>
                    <option value="1"><?php esc_html_e( 'Photo upload enabled', 'yatoon-booking-system' ); ?></option>
                    <option value="0"><?php esc_html_e( 'No photo upload', 'yatoon-booking-system' ); ?></option>
                </select>
                <button type="button" id="sbs-service-clear-filters" class="button"><?php esc_html_e( 'Clear', 'yatoon-booking-system' ); ?></button>
            </div>
            <div class="sbs-table-actions sbs-selected-service-actions">
                <span id="sbs-selected-services-summary" class="sbs-selected-services-summary"><?php esc_html_e( 'Select a service or click a row to edit.', 'yatoon-booking-system' ); ?></span>
                <button type="button" id="sbs-edit-selected-service" class="button" disabled><?php esc_html_e( 'Edit Selected', 'yatoon-booking-system' ); ?></button>
                <button type="button" id="sbs-add-addon-selected-service" class="button" disabled><?php esc_html_e( 'Add Add-on', 'yatoon-booking-system' ); ?></button>
                <button type="button" id="sbs-delete-selected-services" class="button" disabled><?php esc_html_e( 'Delete Selected', 'yatoon-booking-system' ); ?></button>
            </div>
        </div>
        <div class="sbs-admin-table-wrap">
        <table class="wp-list-table widefat fixed striped" id="sbs-services-table">
            <thead>
                <tr>
                    <th class="sbs-col-check"><input type="checkbox" id="sbs-select-all-services-main" aria-label="<?php esc_attr_e('Select all services', 'yatoon-booking-system'); ?>"></th>
                    <th style="width:36px;">&#9776;</th>
                    <th style="width:72px;"><?php esc_html_e( 'Order', 'yatoon-booking-system' ); ?></th>
                    <th style="width:56px;">ID</th>
                    <th><?php esc_html_e( 'Service Name', 'yatoon-booking-system' ); ?></th>
                    <th style="width:86px;"><?php esc_html_e( 'Duration', 'yatoon-booking-system' ); ?></th>
                    <th style="width:82px;"><?php esc_html_e( 'Price', 'yatoon-booking-system' ); ?></th>
                    <th style="width:128px;"><?php esc_html_e( 'Category', 'yatoon-booking-system' ); ?></th>
                    <th style="width:110px;"><?php esc_html_e( 'Rules', 'yatoon-booking-system' ); ?></th>
                    <th style="width:82px;"><?php esc_html_e( 'Status', 'yatoon-booking-system' ); ?></th>
                    <th style="width:238px;"><?php esc_html_e( 'Actions', 'yatoon-booking-system' ); ?></th>
                </tr>
            </thead>
            <tbody id="sbs-sortable-services">
                <?php // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
                <?php foreach ($services as $service) : ?>
                <tr data-id="<?php echo esc_html( $service->id ); ?>"
                    data-order="<?php echo esc_html( $service->sort_order ); ?>"
                    data-category="<?php echo esc_attr(strtolower($service->category ?: '')); ?>"
                    data-status="<?php echo esc_attr($service->is_active ? 'active' : 'inactive'); ?>"
                    data-design-upload="<?php echo esc_attr(!empty($service->allow_design_upload) ? '1' : '0'); ?>"
                    data-search="<?php echo esc_attr(strtolower($service->id . ' ' . $service->name . ' ' . $service->description . ' ' . $service->category)); ?>"
                    class="sbs-main-service-row <?php echo !empty($service->allow_design_upload) ? 'has-design-upload' : ''; ?>"
                    data-service-name="<?php echo esc_attr($service->name); ?>">
                    <td><input type="checkbox" class="sbs-svc-chk" value="<?php echo esc_attr($service->id); ?>" aria-label="Select service <?php echo esc_attr($service->name); ?>"></td>
                    <td class="sbs-drag-handle" style="cursor:move; text-align:center; color:#999;">⋮⋮</td>
                    <td><input type="number" class="sbs-order-input" value="<?php echo esc_html( $service->sort_order ); ?>" min="0"></td>
                    <td><?php echo esc_html($service->id); ?></td>
                    <td>
                        <strong><?php echo esc_html($service->name); ?></strong>
                        <?php if (!empty($service->allow_design_upload)) : ?>
                            <span class="sbs-design-upload-inline-badge"><?php esc_html_e( 'Photo upload', 'yatoon-booking-system' ); ?></span>
                        <?php endif; ?>
                        <?php if ($service->description) : ?>
                            <br><small class="sbs-row-muted"><?php echo esc_html(wp_trim_words($service->description, 10)); ?></small>
                        <?php endif; ?>
                        <?php
                        // Fetch options
                        global $wpdb;
                        // phpcs:disable WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching
                        // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                        $options = $wpdb->get_results($wpdb->prepare(
                            "SELECT * FROM {$wpdb->prefix}yatoon_service_options WHERE service_id = %d ORDER BY sort_order ASC, id ASC",
                            $service->id
                        ));
                        if (!empty($options)) :
                        ?>
                            <button type="button" class="button button-small sbs-toggle-options" data-service-id="<?php echo esc_html( $service->id ); ?>">
                                <span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
                                <span class="sbs-toggle-text">Show Options (<?php echo esc_html( count($options) ); ?>)</span>
                            </button>
                        <?php endif; ?>
                    </td>
                    <td><?php echo esc_html($service->duration_minutes); ?> min</td>
                    <td>$<?php echo number_format($service->price, 2); ?></td>
                    <td><?php echo esc_html($service->category ?: '-'); ?></td>
                    <td>
                        <?php if (!empty($service->require_policy)) : ?><span class="sbs-rule-pill"><?php esc_html_e( 'Policy', 'yatoon-booking-system' ); ?></span><?php endif; ?>
                        <?php if (!empty($service->require_consent)) : ?><span class="sbs-rule-pill consent"><?php esc_html_e( 'Consent', 'yatoon-booking-system' ); ?></span><?php endif; ?>
                        <?php if (!empty($service->is_featured)) : ?><span class="sbs-rule-pill featured"><?php esc_html_e( 'Popular', 'yatoon-booking-system' ); ?></span><?php endif; ?>
                        <?php if (!empty($service->allow_design_upload)) : ?><span class="sbs-rule-pill design-upload"><?php esc_html_e( 'Photo upload', 'yatoon-booking-system' ); ?></span><?php endif; ?>
                        <?php if (empty($service->allow_staff_select)) : ?><span class="sbs-rule-pill any"><?php esc_html_e( 'Any staff', 'yatoon-booking-system' ); ?></span><?php endif; ?>
                        <?php if (empty($service->require_policy) && empty($service->require_consent) && empty($service->is_featured) && empty($service->allow_design_upload) && !empty($service->allow_staff_select)) : ?>-<?php endif; ?>
                    </td>
                    <td>
                        <button type="button" class="sbs-status-toggle <?php echo $service->is_active ? 'is-active' : 'is-hidden'; ?>" data-id="<?php echo esc_attr( $service->id ); ?>" data-active="<?php echo esc_attr( $service->is_active ? 1 : 0 ); ?>" aria-pressed="<?php echo esc_attr( $service->is_active ? 'true' : 'false' ); ?>"><?php echo esc_html( $service->is_active ? 'Active' : 'Hidden' ); ?></button>
                    </td>
                    <td class="sbs-service-actions">
                        <button type="button" class="button button-small sbs-edit-service" data-id="<?php echo esc_html( $service->id ); ?>"><?php esc_html_e( 'Edit', 'yatoon-booking-system' ); ?></button>
                        <button type="button" class="button button-small sbs-copy-addon-btn" data-service-id="<?php echo esc_html( $service->id ); ?>" data-service-name="<?php echo esc_attr($service->name); ?>"><?php esc_html_e( 'Add Add-on', 'yatoon-booking-system' ); ?></button>
                        <button type="button" class="button button-small sbs-delete-service" data-id="<?php echo esc_html( $service->id ); ?>"><?php esc_html_e( 'Delete', 'yatoon-booking-system' ); ?></button>
                    </td>
                </tr>
                <?php if (!empty($options)) : ?>
                <tr class="sbs-options-row" data-service-id="<?php echo esc_html( $service->id ); ?>" style="display:none;">
                    <td colspan="11" style="padding:0 20px 20px 60px; background:#f9f9f9;">
                        <table class="sbs-options-inline-table">
                            <thead>
                                <tr style="border-bottom:2px solid #ddd;">
                                    <th style="padding:8px; text-align:left; width:44px;"></th>
                                    <th style="padding:8px; text-align:left; width:40%;"><?php esc_html_e( 'Option Name', 'yatoon-booking-system' ); ?></th>
                                    <th style="padding:8px; text-align:left;"><?php esc_html_e( 'Duration', 'yatoon-booking-system' ); ?></th>
                                    <th style="padding:8px; text-align:left;"><?php esc_html_e( 'Price', 'yatoon-booking-system' ); ?></th>
                                    <th style="padding:8px; text-align:left;"><?php esc_html_e( 'Group', 'yatoon-booking-system' ); ?></th>
                                    <th style="padding:8px; text-align:left;"><?php esc_html_e( 'Badge', 'yatoon-booking-system' ); ?></th>
                                    <th style="padding:8px; text-align:left;"><?php esc_html_e( 'Actions', 'yatoon-booking-system' ); ?></th>
                                </tr>
                            </thead>
                            <tbody class="sbs-options-sortable" data-service-id="<?php echo esc_html( $service->id ); ?>">
                                <?php // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
                                <?php foreach ($options as $option) : ?>
                                <tr class="sbs-option-row" data-option-id="<?php echo esc_html( $option->id ); ?>">
                                    <td style="padding:4px 8px; width:20px; cursor:grab; color:#aaa; text-align:center;" class="sbs-option-drag-handle" title="<?php echo esc_attr__( 'Drag to reorder', 'yatoon-booking-system' ); ?>">&#9776;</td>
                                    <td style="padding:8px;">
                                        <input type="text" 
                                               class="sbs-option-name" 
                                               value="<?php echo esc_attr($option->name); ?>" 
                                               data-option-id="<?php echo esc_html( $option->id ); ?>"
                                               style="width:100%; padding:6px; border:1px solid #ddd; border-radius:4px;">
                                    </td>
                                    <td style="padding:8px;"><input type="number"
                                               class="sbs-option-duration"
                                               value="<?php echo esc_attr($option->duration_minutes); ?>"
                                               data-option-id="<?php echo esc_html( $option->id ); ?>"
                                               min="1" step="1"
                                               style="width:65px; padding:6px; border:1px solid #ddd; border-radius:4px;"> min</td>
                                    <td style="padding:8px;">
                                        <?php // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
                                        <?php $is_addon_opt = ( ( $option->group_name ?? '' ) === 'Add-on' ); ?>
                                        <input type="number"
                                               class="sbs-option-price"
                                               value="<?php echo number_format( $is_addon_opt ? floatval($option->price_modifier) : ( floatval($service->price) + floatval($option->price_modifier) ), 2, '.', ''); ?>"
                                               data-option-id="<?php echo esc_html( $option->id ); ?>"
                                               data-base-price="<?php echo esc_attr(floatval($service->price)); ?>"
                                               step="0.01"
                                               min="0"
                                               style="width:80px; padding:6px; border:1px solid #ddd; border-radius:4px;">
                                    </td>
                                    <td style="padding:8px;">
                                        <select class="sbs-option-group" data-option-id="<?php echo esc_html( $option->id ); ?>" style="padding:5px 6px; border:1px solid #ddd; border-radius:4px; font-size:13px;">
                                            <option value="" <?php selected($option->group_name ?? '', ''); ?>><?php esc_html_e( 'Main (single select)', 'yatoon-booking-system' ); ?></option>
                                            <option value="Add-on" <?php selected($option->group_name ?? '', 'Add-on'); ?>><?php esc_html_e( 'Add-on (multi-select)', 'yatoon-booking-system' ); ?></option>
                                        </select>
                                    </td>
                                    <td style="padding:8px;">
                                        <select class="sbs-option-badge" data-option-id="<?php echo esc_html( $option->id ); ?>" style="padding:5px 6px; border:1px solid #ddd; border-radius:4px; font-size:13px;">
                                            <option value="" <?php selected($option->badge_label ?? '', ''); ?>><?php esc_html_e( 'Auto', 'yatoon-booking-system' ); ?></option>
                                            <option value="recommended" <?php selected($option->badge_label ?? '', 'recommended'); ?>><?php esc_html_e( 'Recommended', 'yatoon-booking-system' ); ?></option>
                                            <option value="popular" <?php selected($option->badge_label ?? '', 'popular'); ?>><?php esc_html_e( 'Popular', 'yatoon-booking-system' ); ?></option>
                                            <option value="addon" <?php selected($option->badge_label ?? '', 'addon'); ?>><?php esc_html_e( 'Add-on', 'yatoon-booking-system' ); ?></option>
                                            <option value="none" <?php selected($option->badge_label ?? '', 'none'); ?>><?php esc_html_e( 'None', 'yatoon-booking-system' ); ?></option>
                                        </select>
                                    </td>
                                    <td style="padding:8px;">
                                        <div class="sbs-option-actions">
                                        <button type="button" class="button button-small sbs-save-option" data-option-id="<?php echo esc_html( $option->id ); ?>"><?php esc_html_e( 'Save', 'yatoon-booking-system' ); ?></button>
                                        <button type="button" class="button button-small sbs-delete-option" data-option-id="<?php echo esc_html( $option->id ); ?>"><?php esc_html_e( 'Delete', 'yatoon-booking-system' ); ?></button>
                                        <span class="sbs-option-save-state" aria-live="polite"></span>
                                        </div>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                        <!-- Copy Add-on button -->
                        <div style="padding:8px 0 4px;">
                            <button type="button" class="button sbs-copy-addon-btn"
                                data-service-id="<?php echo esc_html( $service->id ); ?>"
                                data-service-name="<?php echo esc_attr($service->name); ?>"
                                style="font-size:12px;">
                                <?php esc_html_e( '+ Copy Add-on from another service', 'yatoon-booking-system' ); ?>
                            </button>
                        </div>
                    </td>
                </tr>
                <?php else: ?>
                <tr class="sbs-options-row" id="options-<?php echo esc_html( $service->id ); ?>" style="display:none;">
                    <td colspan="11" style="padding:0 20px 12px 40px;">
                        <div style="padding:8px 0 4px;">
                            <button type="button" class="button sbs-copy-addon-btn"
                                data-service-id="<?php echo esc_html( $service->id ); ?>"
                                data-service-name="<?php echo esc_attr($service->name); ?>"
                                style="font-size:12px;">
                                <?php esc_html_e( '+ Copy Add-on from another service', 'yatoon-booking-system' ); ?>
                            </button>
                        </div>
                    </td>
                </tr>
                <?php endif; ?>
                <?php endforeach; ?>
            </tbody>
        </table>
        </div>
    <?php endif; ?>
</div>

<!-- Category Manager Modal -->
<div id="sbs-category-modal" style="display:none; position:fixed; z-index:100001; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);">
    <div style="background:white; margin:80px auto; padding:28px; max-width:560px; border-radius:8px; max-height:80vh; overflow-y:auto;">
        <h3 style="margin-top:0;"><?php esc_html_e( 'Manage Categories', 'yatoon-booking-system' ); ?></h3>
        <p class="description" style="margin-top:0;"><?php esc_html_e( 'Categories are built from services. Rename a category to update every service using it, or delete it to clear that category from those services.', 'yatoon-booking-system' ); ?></p>
        <div id="sbs-category-list">
            <?php if (empty($service_categories)) : ?>
                <p style="color:#666;"><?php esc_html_e( 'No categories yet. Add one while creating or editing a service.', 'yatoon-booking-system' ); ?></p>
            <?php else : ?>
                <?php foreach ($service_categories as $category_name) : ?>
                    <div class="sbs-category-manager-row" data-category="<?php echo esc_attr($category_name); ?>">
                        <input type="text" class="regular-text sbs-category-name-input" value="<?php echo esc_attr($category_name); ?>">
                        <span class="sbs-category-count"><?php echo esc_html((int) ( $service_category_counts[ $category_name ] ?? 0 )); ?> services</span>
                        <button type="button" class="button button-small sbs-save-category"><?php esc_html_e( 'Save', 'yatoon-booking-system' ); ?></button>
                        <button type="button" class="button button-small sbs-delete-category"><?php esc_html_e( 'Delete', 'yatoon-booking-system' ); ?></button>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
        <div id="sbs-category-msg" style="margin:12px 0; font-size:13px;"></div>
        <div style="display:flex; justify-content:flex-end;">
            <button type="button" id="sbs-category-close" class="button"><?php esc_html_e( 'Close', 'yatoon-booking-system' ); ?></button>
        </div>
    </div>
</div>

<!-- Copy Add-on Modal -->
<div id="sbs-copy-addon-modal" style="display:none; position:fixed; z-index:100001; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);">
    <div style="background:white; margin:80px auto; padding:28px; max-width:520px; border-radius:8px; max-height:80vh; overflow-y:auto;">
        <h3 style="margin-top:0;"><?php esc_html_e( 'Copy Add-on to', 'yatoon-booking-system' ); ?> <span id="sbs-addon-target-name"></span></h3>
        <p style="color:#666; font-size:13px;"><?php esc_html_e( 'Copy an option from another service, or enter a name, duration, and price below to create a new Add-on.', 'yatoon-booking-system' ); ?></p>

        <div style="margin-bottom:16px;">
            <label style="font-weight:600; display:block; margin-bottom:6px;"><?php esc_html_e( 'Optional: copy from existing service', 'yatoon-booking-system' ); ?></label>
            <select id="sbs-addon-source-service" style="width:100%; padding:7px; border:1px solid #ccc; border-radius:4px;">
                <option value=""><?php esc_html_e( '-- Loading... --', 'yatoon-booking-system' ); ?></option>
            </select>
            <p id="sbs-addon-source-empty" class="description" style="display:none;margin:6px 0 0;"><?php esc_html_e( 'No reusable options found yet. You can still type a new Add-on below.', 'yatoon-booking-system' ); ?></p>
        </div>

        <div id="sbs-addon-options-list" style="margin-bottom:16px; display:none;">
            <label style="font-weight:600; display:block; margin-bottom:6px;"><?php esc_html_e( 'Select Option', 'yatoon-booking-system' ); ?></label>
            <select id="sbs-addon-source-option" style="width:100%; padding:7px; border:1px solid #ccc; border-radius:4px;">
                <option value=""><?php esc_html_e( '-- Please select a source service first --', 'yatoon-booking-system' ); ?></option>
            </select>
            <div id="sbs-addon-option-preview" style="margin-top:8px; padding:8px 12px; background:#f7f7f7; border-radius:4px; font-size:12px; color:#555; display:none;"></div>
        </div>

        <div style="margin-bottom:16px;">
            <label style="font-weight:600; display:block; margin-bottom:6px;"><?php esc_html_e( 'Display Name (editable)', 'yatoon-booking-system' ); ?></label>
            <input type="text" id="sbs-addon-name" style="width:100%; padding:7px; border:1px solid #ccc; border-radius:4px;" placeholder="<?php echo esc_attr__( 'e.g. Custom Design / Nail Art', 'yatoon-booking-system' ); ?>">
        </div>

        <div style="display:flex; gap:12px; margin-bottom:16px;">
            <div style="flex:1;">
                <label style="font-weight:600; display:block; margin-bottom:6px;"><?php esc_html_e( 'Duration (min)', 'yatoon-booking-system' ); ?></label>
                <input type="number" id="sbs-addon-duration" min="5" step="5" style="width:100%; padding:7px; border:1px solid #ccc; border-radius:4px;">
            </div>
            <div style="flex:1;">
                <label style="font-weight:600; display:block; margin-bottom:6px;"><?php esc_html_e( 'Price ($)', 'yatoon-booking-system' ); ?></label>
                <input type="number" id="sbs-addon-price" min="0" step="0.01" style="width:100%; padding:7px; border:1px solid #ccc; border-radius:4px;">
            </div>
        </div>

        <div id="sbs-addon-sq-id-row" style="margin-bottom:16px; padding:8px 12px; background:#e8f4fd; border-radius:4px; font-size:12px; color:#0073aa;">
            <strong><?php esc_html_e( 'Square Variation ID:', 'yatoon-booking-system' ); ?> </strong><span id="sbs-addon-sq-id-display"><?php esc_html_e( '(optional; copied when available)', 'yatoon-booking-system' ); ?></span>
        </div>

        <div id="sbs-addon-msg" style="margin-bottom:12px; font-size:13px;"></div>

        <div style="display:flex; gap:10px; justify-content:flex-end;">
            <button type="button" id="sbs-addon-cancel" class="button"><?php esc_html_e( 'Cancel', 'yatoon-booking-system' ); ?></button>
            <button type="button" id="sbs-addon-confirm" class="button button-primary" disabled><?php esc_html_e( 'Add', 'yatoon-booking-system' ); ?></button>
        </div>
    </div>
</div>

<!-- Add/Edit Service Modal -->
<div id="sbs-service-modal" style="display:none; position:fixed; z-index:100000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);">
    <div class="sbs-service-modal-panel">
        <button type="button" class="sbs-service-modal-close" aria-label="<?php echo esc_attr__( 'Close', 'yatoon-booking-system' ); ?>"><?php esc_html_e( '&times;', 'yatoon-booking-system' ); ?></button>
        <h2 id="sbs-modal-title"><?php esc_html_e( 'Add Service', 'yatoon-booking-system' ); ?></h2>
        <form id="sbs-service-form">
            <input type="hidden" id="service-id" value="">
            
            <p>
                <label><strong><?php esc_html_e( 'Service Name *', 'yatoon-booking-system' ); ?></strong></label>
                <input type="text" id="service-name" class="regular-text" required tabindex="1">
            </p>
            
            <p>
                <label><strong><?php esc_html_e( 'Description', 'yatoon-booking-system' ); ?></strong></label>
                <textarea id="service-description" rows="3" class="large-text" tabindex="2"></textarea>
                <span style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;">
                    <button type="button" class="button button-secondary" id="yatoon-ai-desc-btn"><?php esc_html_e( 'Improve with AI', 'yatoon-booking-system' ); ?></button>
                    <span class="description" id="yatoon-ai-desc-status"><?php esc_html_e( 'Uses this service\'s name, category, price, duration, and current description.', 'yatoon-booking-system' ); ?></span>
                </span>
            </p>
            
	            <p style="display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;">
                <span style="flex:0 0 48%;">
                    <label><strong><?php esc_html_e( 'Duration (minutes) *', 'yatoon-booking-system' ); ?></strong></label>
                    <input type="number" id="service-duration" class="regular-text" min="5" step="5" required tabindex="3" style="width:100%;box-sizing:border-box;">
                </span>
		                <span style="flex:0 0 48%;">
		                    <label><strong><?php esc_html_e( 'Price ($) *', 'yatoon-booking-system' ); ?></strong></label>
		                    <input type="number" id="service-price" class="regular-text" min="0" step="0.01" required tabindex="4" style="width:100%;box-sizing:border-box;">
		                </span>
		                <span style="flex:0 0 48%;">
		                    <label><strong><?php esc_html_e( 'Tax rate override (%)', 'yatoon-booking-system' ); ?></strong></label>
		                    <input type="number" id="service-tax-rate" class="regular-text" min="0" max="100" step="0.001" tabindex="5" style="width:100%;box-sizing:border-box;">
		                    <span class="description"><?php esc_html_e( 'Leave blank to inherit the shop rate. Enter 0 for a deliberately zero-rated service.', 'yatoon-booking-system' ); ?></span>
		                </span>
	                <span style="flex:0 0 48%;">
	                    <label><strong><?php esc_html_e( 'Estimated supply cost ($)', 'yatoon-booking-system' ); ?></strong></label>
	                    <input type="number" id="service-estimated-cost" class="regular-text" min="0" step="0.01" value="0" tabindex="5" style="width:100%;box-sizing:border-box;">
	                    <span class="description"><?php esc_html_e( 'Optional. Used only for estimated service profit reports; it does not change the customer price.', 'yatoon-booking-system' ); ?></span>
	                </span>
            </p>
            
            <p>
                <label><strong><?php esc_html_e( 'Category', 'yatoon-booking-system' ); ?></strong></label>
                <span class="sbs-category-picker">
                    <select id="service-category-select" class="regular-text" tabindex="5">
                        <option value=""><?php esc_html_e( 'No category', 'yatoon-booking-system' ); ?></option>
                        <?php foreach ($service_categories as $category_name) : ?>
                            <option value="<?php echo esc_attr($category_name); ?>"><?php echo esc_html($category_name); ?></option>
                        <?php endforeach; ?>
                        <option value="__new"><?php esc_html_e( '+ Add new category', 'yatoon-booking-system' ); ?></option>
                    </select>
                    <input type="text" id="service-category-new" class="regular-text" placeholder="<?php echo esc_attr__( 'New category name', 'yatoon-booking-system' ); ?>" style="display:none;" tabindex="6">
                    <input type="hidden" id="service-category" value="">
                </span>
            </p>

            <div class="sbs-service-image-field">
                <label><strong><?php esc_html_e( 'Cover Image', 'yatoon-booking-system' ); ?></strong></label>
                <p class="description" style="margin:3px 0 10px;"><?php esc_html_e( 'Recommended: a bright square or 4:3 service photo, at least 900px wide. This image is used on the mobile booking card, so close-up nail or treatment photos convert best.', 'yatoon-booking-system' ); ?></p>
                <input type="hidden" id="service-image-url" value="">
                <div id="service-image-preview" class="sbs-service-image-preview" style="display:none;">
                    <img src="" alt="" style="width:120px;height:120px;object-fit:cover;border-radius:8px;border:1px solid #dcdcde;background:#f6f7f7;">
                </div>
                <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;">
                    <button type="button" class="button" id="service-image-upload"><?php esc_html_e( 'Upload / Choose Image', 'yatoon-booking-system' ); ?></button>
                    <button type="button" class="button" id="service-image-remove" style="display:none;"><?php esc_html_e( 'Remove Image', 'yatoon-booking-system' ); ?></button>
                    <span class="description"><?php esc_html_e( 'No image? Yatoon will show a polished placeholder card automatically.', 'yatoon-booking-system' ); ?></span>
                </div>
            </div>

            <!-- Gallery images -->
            <div class="sbs-service-gallery-field" style="margin:16px 0;">
                <label><strong><?php esc_html_e( 'Gallery Images', 'yatoon-booking-system' ); ?></strong></label>
                <p class="description" style="margin:2px 0 10px;"><?php esc_html_e( 'These appear in the Catalog gallery view and the', 'yatoon-booking-system' ); ?> <code><?php esc_html_e( '[yatoon_gallery]', 'yatoon-booking-system' ); ?></code> <?php esc_html_e( 'homepage slider. Drag to reorder.', 'yatoon-booking-system' ); ?></p>
                <div id="service-gallery-grid" class="sbs-gallery-grid"></div>
                <div style="display:flex;gap:8px;margin-top:10px;">
                    <button type="button" class="button" id="service-gallery-add"><?php esc_html_e( '+ Add Images', 'yatoon-booking-system' ); ?></button>
                    <span class="description" style="align-self:center;"><?php esc_html_e( 'Select multiple at once from Media Library', 'yatoon-booking-system' ); ?></span>
                </div>
            </div>
            
            <p>
                <label>
                    <input type="checkbox" id="service-active" checked>
                    <strong><?php esc_html_e( 'Active (visible on booking page)', 'yatoon-booking-system' ); ?></strong>
                </label>
            </p>

            <div style="border:1px solid #e5e7eb;border-radius:8px;padding:14px;margin:14px 0;background:#f9fafb;">
                <h3 style="margin:0 0 10px;font-size:14px;"><?php esc_html_e( 'Booking Rules', 'yatoon-booking-system' ); ?></h3>
                <p style="margin:8px 0;">
                    <label><input type="checkbox" id="service-require-policy"> <?php esc_html_e( 'Require cancellation / no-show policy acknowledgement for this service', 'yatoon-booking-system' ); ?></label>
                </p>
                <p style="margin:8px 0;">
                    <label><input type="checkbox" id="service-require-consent"> <?php esc_html_e( 'Require consent / waiver signature for this service', 'yatoon-booking-system' ); ?></label>
                </p>
                <p style="margin:8px 0;">
                    <label><input type="checkbox" id="service-allow-staff-select" checked> <?php esc_html_e( 'Let customers choose staff for this service', 'yatoon-booking-system' ); ?></label>
                </p>
                <p style="margin:8px 0;">
                    <label><input type="checkbox" id="service-allow-design-upload"> <?php esc_html_e( 'Allow customer design image upload', 'yatoon-booking-system' ); ?></label>
                    <span class="description" style="display:block;margin:4px 0 0 24px;"><?php esc_html_e( 'Use for Custom Design / Nail Art services. The General upload switch must also be enabled.', 'yatoon-booking-system' ); ?></span>
                </p>
                <p style="margin:8px 0;">
                    <label><input type="checkbox" id="service-is-featured"> <?php esc_html_e( 'Show Popular badge on the booking page', 'yatoon-booking-system' ); ?></label>
                </p>
                <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;">
                    <label><?php esc_html_e( 'Buffer before (min)', 'yatoon-booking-system' ); ?><input type="number" id="service-buffer-before" min="0" step="5" value="0" style="width:100%;"></label>
                    <label><?php esc_html_e( 'Buffer after (min)', 'yatoon-booking-system' ); ?><input type="number" id="service-buffer-after" min="0" step="5" value="0" style="width:100%;"></label>
                    <label><?php esc_html_e( 'Lead time (min)', 'yatoon-booking-system' ); ?><input type="number" id="service-lead-time" min="0" step="15" value="0" style="width:100%;"></label>
                </div>
                <p class="description" style="margin:10px 0 0;"><?php esc_html_e( 'Buffers and lead time are stored now for scheduling/reporting; Square availability remains the final source when Square mode is active.', 'yatoon-booking-system' ); ?></p>
            </div>
            
            <p>
                <button type="submit" class="button button-primary"><?php esc_html_e( 'Save Service', 'yatoon-booking-system' ); ?></button>
                <button type="button" class="button sbs-service-modal-cancel"><?php esc_html_e( 'Cancel', 'yatoon-booking-system' ); ?></button>
            </p>
        </form>

        <!-- Manual Options Manager (only shown when editing an existing service) -->
        <div id="sbs-modal-options-section" style="display:none; margin-top:20px; border-top:1px solid #e5e7eb; padding-top:20px;">
            <h3 style="margin:0 0 10px; font-size:14px;"><?php esc_html_e( 'Service Options / Variations', 'yatoon-booking-system' ); ?></h3>
            <p class="description" style="margin:0 0 12px;"><?php esc_html_e( 'Add options like "Hands" / "Feet" so customers can choose when booking.', 'yatoon-booking-system' ); ?></p>

            <table id="sbs-modal-options-table" style="width:100%; border-collapse:collapse; margin-bottom:12px; font-size:13px;">
                <thead>
                    <tr style="background:#f9fafb; border-bottom:1px solid #e5e7eb;">
                        <th style="padding:6px 4px; width:56px; text-align:left;"><?php esc_html_e( 'Order', 'yatoon-booking-system' ); ?></th>
                        <th style="padding:6px 8px; text-align:left;"><?php esc_html_e( 'Name', 'yatoon-booking-system' ); ?></th>
                        <th style="padding:6px 8px; text-align:left; width:80px;"><?php esc_html_e( 'Duration', 'yatoon-booking-system' ); ?><br><span style="font-weight:normal;color:#888;"><?php esc_html_e( '(min)', 'yatoon-booking-system' ); ?></span></th>
                        <th style="padding:6px 8px; text-align:left; width:80px;"><?php esc_html_e( 'Price', 'yatoon-booking-system' ); ?><br><span style="font-weight:normal;color:#888;">($)</span></th>
                        <th style="padding:6px 8px; text-align:left; width:110px;"><?php esc_html_e( 'Type', 'yatoon-booking-system' ); ?></th>
                        <th style="padding:6px 8px; width:160px; text-align:right;"><?php esc_html_e( 'Actions', 'yatoon-booking-system' ); ?></th>
                    </tr>
                </thead>
                <tbody id="sbs-modal-options-body">
                    <tr id="sbs-modal-options-empty"><td colspan="6" style="padding:18px 8px; color:#6b7280; text-align:center;"><?php esc_html_e( 'No options yet. Add one below, or reuse an existing option from another service.', 'yatoon-booking-system' ); ?></td></tr>
                </tbody>
            </table>

            <!-- Add new option row -->
            <div style="background:#f9fafb; border:1px solid #e5e7eb; border-radius:6px; padding:12px; margin-top:4px;">
                <strong style="font-size:13px; display:block; margin-bottom:8px;"><?php esc_html_e( '+ Add New Option', 'yatoon-booking-system' ); ?></strong>
                <div style="margin-bottom:10px;">
                    <label for="sbs-new-option-existing" style="display:block;font-size:12px;font-weight:700;color:#374151;margin-bottom:5px;"><?php esc_html_e( 'Reuse existing item', 'yatoon-booking-system' ); ?></label>
                    <select id="sbs-new-option-existing" style="width:100%;max-width:560px;">
                        <option value=""><?php esc_html_e( 'Manual - create a new option', 'yatoon-booking-system' ); ?></option>
                    </select>
                    <input type="hidden" id="sbs-new-option-source-service" value="">
                    <input type="hidden" id="sbs-new-option-source-option" value="">
                    <p id="sbs-new-option-link-note" class="description" style="margin:5px 0 0;"><?php esc_html_e( 'Choose an existing service option to reuse its shared ID, or enter a new option manually below.', 'yatoon-booking-system' ); ?></p>
                </div>
                <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end;">
                    <label style="flex:2; min-width:120px;">
                        <span style="font-size:12px; color:#555;"><?php esc_html_e( 'Name *', 'yatoon-booking-system' ); ?></span>
                        <input type="text" id="sbs-new-option-name" placeholder="<?php echo esc_attr__( 'e.g. Hands', 'yatoon-booking-system' ); ?>" style="width:100%; padding:5px 7px; border:1px solid #ccc; border-radius:4px; font-size:13px;">
                    </label>
                    <label style="flex:1; min-width:70px;">
                        <span style="font-size:12px; color:#555;"><?php esc_html_e( 'Duration (min)', 'yatoon-booking-system' ); ?></span>
                        <input type="number" id="sbs-new-option-duration" min="5" step="5" value="10" style="width:100%; padding:5px 7px; border:1px solid #ccc; border-radius:4px; font-size:13px;">
                    </label>
                    <label style="flex:1; min-width:70px;">
                        <span style="font-size:12px; color:#555;"><?php esc_html_e( 'Price ($)', 'yatoon-booking-system' ); ?></span>
                        <input type="number" id="sbs-new-option-price" min="0" step="0.01" value="0" style="width:100%; padding:5px 7px; border:1px solid #ccc; border-radius:4px; font-size:13px;">
                    </label>
                    <label style="flex:1; min-width:100px;">
                        <span style="font-size:12px; color:#555;"><?php esc_html_e( 'Type', 'yatoon-booking-system' ); ?></span>
                        <select id="sbs-new-option-group" style="width:100%; padding:5px 7px; border:1px solid #ccc; border-radius:4px; font-size:13px;">
                            <option value=""><?php esc_html_e( 'Main (single)', 'yatoon-booking-system' ); ?></option>
                            <option value="Add-on"><?php esc_html_e( 'Add-on (multi)', 'yatoon-booking-system' ); ?></option>
                        </select>
                    </label>
                    <button type="button" id="sbs-modal-add-option-btn" class="button button-primary" style="height:30px; align-self:flex-end;"><?php esc_html_e( 'Add', 'yatoon-booking-system' ); ?></button>
                </div>
                <div id="sbs-modal-option-msg" style="margin-top:8px; font-size:12px; display:none;"></div>
            </div>
        </div>
    </div>
</div>


