<?php

use Bookingor\Helper\HelperControl;
use Bookingor\Routes\AdminRoute;
use Bookingor\Backend\Controller\CustomForms\CustomFormsControl;
use Bookingor\Frontend\Controller\Staff\StaffControlFront;

// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

// Populate staff list for preview
StaffControlFront::bp_front_staff_view();
if (empty($this->f_image_default)) {
    $this->f_image_default = plugin_dir_url(dirname(dirname(dirname(dirname(__FILE__))))) . 'app/Backend/assets/images/cate-serv.jpg';
}

$column = get_option('bookingor_settings_staff_card_column', '3');
$gap_x = get_option('bookingor_settings_staff_cards_gap_x', '10');
$gap_y = get_option('bookingor_settings_staff_cards_gap_y', '10');
$img_radius = get_option('bookingor_settings_staff_image_radius', '56');
$img_border_size = get_option('bookingor_settings_staff_image_border_size', '1');
$img_border_color = get_option('bookingor_settings_staff_image_border_color', '#ffffff');
$img_width = get_option('bookingor_settings_staff_image_width', '140');
$img_height = get_option('bookingor_settings_staff_image_height', '140');
$bg_active = get_option('bookingor_settings_staff_bg_active', 'off');
$bg_color = get_option('bookingor_settings_staff_bg_color', '#ffffff');
$border_active_color = get_option('bookingor_settings_staff_border_active_color', '#7752DD');
$staff_phone_show = get_option('bookingor_settings_staff_phone_show', 'on');
$staff_email_show = get_option('bookingor_settings_staff_email_show', 'on');
$staff_tagline_show = get_option('bookingor_settings_staff_tagline_show', 'on');
$staff_location_show = get_option('bookingor_settings_staff_location_show', 'on');
$staff_about_show = get_option('bookingor_settings_staff_about_show', 'on');
$staff_name = get_option('bookingor_settings_staff_name', 'Staff');
$headings_font = get_option('bookingor_settings_fonts_headings');
?>
<style>
    #bookingor-design-staff {
        --bookingor-staff-column: <?php echo esc_attr($column); ?>;
        --bookingor-staff-gap-x: <?php echo esc_attr($gap_x); ?>px;
        --bookingor-staff-gap-y: <?php echo esc_attr($gap_y); ?>px;
        --bookingor-staff-img-radius: <?php echo esc_attr($img_radius); ?>px;
        --bookingor-staff-img-border-size: <?php echo esc_attr($img_border_size); ?>px;
        --bookingor-staff-img-border-color: <?php echo esc_attr($img_border_color); ?>;
        --bookingor-staff-img-width: <?php echo esc_attr($img_width); ?>px;
        --bookingor-staff-img-height: <?php echo esc_attr($img_height); ?>px;
        --bookingor-staff-bg-color: <?php echo ($bg_active === 'on') ? esc_attr($bg_color) : 'transparent'; ?>;
        --bookingor-staff-border-active-color: <?php echo esc_attr($border_active_color); ?>;
        --bookingor-staff-phone-display: <?php echo ($staff_phone_show === 'on') ? 'block' : 'none'; ?>;
        --bookingor-staff-email-display: <?php echo ($staff_email_show === 'on') ? 'block' : 'none'; ?>;
        --bookingor-staff-tagline-display: <?php echo ($staff_tagline_show === 'on') ? 'block' : 'none'; ?>;
        --bookingor-staff-location-display: <?php echo ($staff_location_show === 'on') ? 'block' : 'none'; ?>;
        --bookingor-staff-about-display: <?php echo ($staff_about_show === 'on') ? 'block' : 'none'; ?>;
    }
    #bookingor-design-staff .staff-email {
        display: var(--bookingor-staff-email-display);
    }
    #bookingor-design-staff .staff-tagline {
        display: var(--bookingor-staff-tagline-display);
    }
    #bookingor-design-staff .staff-location {
        display: var(--bookingor-staff-location-display);
    }
    #bookingor-design-staff .staff-about {
        display: var(--bookingor-staff-about-display);
    }
</style>

<div class="wrap bookingor">
    <form id="bookingor-editing-templates" class="">
        <input type="hidden" id="editing-id" name="editing_id" value="10" />

        <div class="bookingor-d-flex justify-content-between mb-2">
            <div>
                <h3><?php esc_html_e('Edit Staff Starter', 'bookingor'); ?></h3>
            </div>
            <div>
                <button type="submit" class="main-top-buttons btn_blue ml-2"><?php echo esc_html("Publish", "bookingor"); ?></button>
            </div>
        </div>
        <div class="main bookingor">
            <div class="bookingor-loader-container">
                <div class="bookingor-d-flex align-items-center justify-content-center ">
                    <div class="bookingor-loader">
                        <div class="bookingor-loader-wheel"></div>
                        <div class="bookingor-loader-text bookingor-d-flex"></div>
                    </div>
                </div>
            </div>

            <div class="row bookingor-g-0">
                <div class="bookingor-col-xl-12 main-top bookingor-d-none">
                    <div class="row ">
                        <div id="v-pills-tabContent" class="tab-content bookingor-g-0 bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-3 bookingor-col-xxl-3 pt-32 pb-3">
                            <div class="tab-pane fade show active" id="pills-colors-n-fonts" role="tabpanel" aria-labelledby="pills-colors-n-fonts">
                                <div class="row">
                                    <div class="row bookingor-col-xxl-10 bookingor-col-xl-12 bookingor-col-lg-12 bookingor-col-md-12 bookingor-col-sm-12 bookingor-col-12 tab-pane fade show active fonts-n-s bookingor-set-sidebar">
                                        
                                        <!-- Fonts & Styles -->
                                        <div class="main-bd bookingor-g-0">
                                            <h6 class="h-ct"><?php esc_html_e('Fonts and Style', 'bookingor'); ?></h6>
                                            <div class="row pt-2 pb-2">
                                                <div class="form-group row align-items-top bdr-b">
                                                    <div class="bookingor-col-10 pd-1 bookingor-g-0">
                                                        <label class="h-l-n lft bookingor-f-13"><?php esc_html_e('Hover and Active Border Color', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-2 bookingor-g-0">
                                                        <div class="form-control-select">
                                                            <input type="color" class="w-100" name="settings_staff_border_active_color" value="<?php echo esc_attr($border_active_color); ?>">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row align-items-center mb-2 mt-2">
                                                    <div class="bookingor-col-10 pd-1 bookingor-g-0">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Custom Background Color', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-2 bookingor-g-0">
                                                        <input type="checkbox" class="form-check-input" name="settings_staff_bg_active" tabindex="0" id="setting-staff-bg-active" value="<?php echo esc_attr($bg_active); ?>" <?php checked($bg_active, 'on'); ?>>
                                                    </div>
                                                </div>
                                                <div class="form-group row align-items-center mb-2 mt-2 bdr-b <?php echo ($bg_active === 'on') ? '' : 'bookingor-d-none'; ?>" id="staff-bg-color-wrapper">
                                                    <div class="bookingor-col-10 pd-1 bookingor-g-0">
                                                        <label class="h-l-n lft bookingor-f-13"><?php esc_html_e('Background Color', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-2 bookingor-g-0">
                                                        <div class="form-control-select">
                                                            <input type="color" class="w-100" name="settings_staff_bg_color" value="<?php echo esc_attr($bg_color); ?>">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="bookingor-col-12 pd-1 bookingor-g-0">
                                                        <label class="h-l-n lft bookingor-f-13"><?php esc_html_e('Heading Font Family', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-12 bookingor-g-0">
                                                        <div class="form-control-select form-control-select-sm">
                                                            <div class="mb-3">
                                                                <select class="form-select form-select-sm" name="settings_headings_font_family" id="heading-font-family">
                                                                    <option value=""><?php echo esc_html("Theme Heading Fonts", "bookingor"); ?></option>
                                                                    <option value="Lato" <?php selected($headings_font, 'Lato'); ?>><?php esc_html_e('Lato', 'bookingor'); ?></option>
                                                                    <option value="Roboto" <?php selected($headings_font, 'Roboto'); ?>><?php esc_html_e('Roboto', 'bookingor'); ?></option>
                                                                    <option value="Merriweather" <?php selected($headings_font, 'Merriweather'); ?>><?php esc_html_e('Merriweather', 'bookingor'); ?></option>
                                                                    <option value="Montserrat" <?php selected($headings_font, 'Montserrat'); ?>><?php esc_html_e('Montserrat', 'bookingor'); ?></option>
                                                                    <option value="Mulish" <?php selected($headings_font, 'Mulish'); ?>><?php esc_html_e('Mulish', 'bookingor'); ?></option>
                                                                    <option value="Nunito" <?php selected($headings_font, 'Nunito'); ?>><?php esc_html_e('Nunito', 'bookingor'); ?></option>
                                                                    <option value="Asap Condensed" <?php selected($headings_font, 'Asap Condensed'); ?>><?php esc_html_e('Asap Condensed', 'bookingor'); ?></option>
                                                                    <option value="Open Sans" <?php selected($headings_font, 'Open Sans'); ?>><?php esc_html_e('Open Sans', 'bookingor'); ?></option>
                                                                    <option value="Barlow" <?php selected($headings_font, 'Barlow'); ?>><?php esc_html_e('Barlow', 'bookingor'); ?></option>
                                                                    <option value="Oswald" <?php selected($headings_font, 'Oswald'); ?>><?php esc_html_e('Oswald', 'bookingor'); ?></option>
                                                                    <option value="Bitter" <?php selected($headings_font, 'Bitter'); ?>><?php esc_html_e('Bitter', 'bookingor'); ?></option>
                                                                    <option value="Poppins" <?php selected($headings_font, 'Poppins'); ?>><?php esc_html_e('Poppins', 'bookingor'); ?></option>
                                                                    <option value="Carme" <?php selected($headings_font, 'Carme'); ?>><?php esc_html_e('Carme', 'bookingor'); ?></option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Staff Settings -->
                                        <div class="main-bd bookingor-g-0">
                                            <h6 class="h-ct"><?php esc_html_e('Staff Settings', 'bookingor'); ?></h6>
                                            <div class="row pt-2 pb-2">
                                                <div class="form-group row align-items-center mb-2 mt-2">
                                                    <div class="bookingor-col-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Show Staff Phone', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <input type="checkbox" class="form-check-input" name="settings_staff_phone_show" tabindex="0" id="setting-staff-phone-show" value="<?php echo esc_attr($staff_phone_show); ?>" <?php checked($staff_phone_show, 'on'); ?>>
                                                    </div>
                                                </div>
                                                <div class="form-group row align-items-center mb-2 mt-2">
                                                    <div class="bookingor-col-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Show Staff Email', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <input type="checkbox" class="form-check-input" name="settings_staff_email_show" tabindex="0" id="setting-staff-email-show" value="<?php echo esc_attr($staff_email_show); ?>" <?php checked($staff_email_show, 'on'); ?>>
                                                    </div>
                                                </div>
                                                <div class="form-group row align-items-center mb-2 mt-2">
                                                    <div class="bookingor-col-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Show Staff Tag Line', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <input type="checkbox" class="form-check-input" name="settings_staff_tagline_show" tabindex="0" id="setting-staff-tagline-show" value="<?php echo esc_attr($staff_tagline_show); ?>" <?php checked($staff_tagline_show, 'on'); ?>>
                                                    </div>
                                                </div>
                                                <div class="form-group row align-items-center mb-2 mt-2">
                                                    <div class="bookingor-col-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Show Staff Location', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <input type="checkbox" class="form-check-input" name="settings_staff_location_show" tabindex="0" id="setting-staff-location-show" value="<?php echo esc_attr($staff_location_show); ?>" <?php checked($staff_location_show, 'on'); ?>>
                                                    </div>
                                                </div>
                                                <div class="form-group row align-items-center mb-2 mt-2">
                                                    <div class="bookingor-col-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Show Staff About Description', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <input type="checkbox" class="form-check-input" name="settings_staff_about_show" tabindex="0" id="setting-staff-about-show" value="<?php echo esc_attr($staff_about_show); ?>" <?php checked($staff_about_show, 'on'); ?>>
                                                    </div>
                                                </div>


                                                <div class="form-group row align-items-center mb-2 mt-2 bdr-b">
                                                    <div class="bookingor-col-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Staff Image Radius', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <div class="bookingor-d-flex align-items-center bookingor-gap-5">
                                                            <input type="number" class="form-control form-control-sm" name="settings_staff_image_radius" value="<?php echo esc_attr($img_radius); ?>">
                                                            <span>px</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group row align-items-center mb-2 mt-2 bdr-b">
                                                    <div class="bookingor-col-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Staff Image Width', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <div class="bookingor-d-flex align-items-center bookingor-gap-5">
                                                            <input type="number" class="form-control form-control-sm" name="settings_staff_image_width" placeholder="Auto" value="<?php echo esc_attr($img_width); ?>">
                                                            <span>px</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group row align-items-center mb-2 mt-2 bdr-b">
                                                    <div class="bookingor-col-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Staff Image Height', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <div class="bookingor-d-flex align-items-center bookingor-gap-5">
                                                            <input type="number" class="form-control form-control-sm" name="settings_staff_image_height" placeholder="Auto" value="<?php echo esc_attr($img_height); ?>">
                                                            <span>px</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group row align-items-center mb-2 mt-2 bdr-b">
                                                    <div class="bookingor-col-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Staff Image Border Size', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <div class="bookingor-d-flex align-items-center bookingor-gap-5">
                                                            <input type="number" class="form-control form-control-sm" name="settings_staff_image_border_size" value="<?php echo esc_attr($img_border_size); ?>">
                                                            <span>px</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group row align-items-center mb-2 mt-2 bdr-b">
                                                    <div class="bookingor-col-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Staff Image Border Color', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <div class="bookingor-d-flex align-items-center bookingor-gap-5">
                                                            <input type="color" class="w-100" name="settings_staff_image_border_color" value="<?php echo esc_attr($img_border_color); ?>">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group row align-items-center mb-2 mt-2 bdr-b">
                                                    <div class="bookingor-col-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Staff Card Column', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <input type="number" class="form-control form-control-sm" name="settings_staff_card_column" value="<?php echo esc_attr($column); ?>">
                                                    </div>
                                                </div>

                                                <div class="form-group row align-items-center mb-2 mt-2 bdr-b">
                                                    <div class="bookingor-col-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Staff Cards Gap (X-axis)', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <div class="bookingor-d-flex align-items-center bookingor-gap-5">
                                                            <input type="number" class="form-control form-control-sm" name="settings_staff_cards_gap_x" value="<?php echo esc_attr($gap_x); ?>">
                                                            <span>px</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group row align-items-center mb-2 mt-2 bdr-b">
                                                    <div class="bookingor-col-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Staff Cards Gap (Y-axis)', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <div class="bookingor-d-flex align-items-center bookingor-gap-5">
                                                            <input type="number" class="form-control form-control-sm" name="settings_staff_cards_gap_y" value="<?php echo esc_attr($gap_y); ?>">
                                                            <span>px</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Live Preview Frame -->
                        <div class="bookingor-col-xl-9 bookingor-col-lg-12 bookingor-col-md-12 bookingor-col-sm-12 bookingor-col-12 ">
                            <div class="bookingor-container bookingor-staff-design" id="bookingor-design-staff">
                                <div id="bookingor-staff" class="bookingor-category-active bookingor-ft bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-12 sidebar-1 flex-column j-width bookingor-g-0">
                                    <div class="card-body flex-fill">
                                        <div class="sidebar_container bookingor-flex flex-column bookingor-pd-all flex-fill">
                                            <div class="select">

                                                <div id="selectListEmployee-10" class="select-list-1">
                                                    <ul class="emp-g bookingor-d-flex flex-wrap gap-x-10">
                                                        <?php
                                                        if (is_array(StaffControlFront::$f_staff) && !empty(StaffControlFront::$f_staff)) {
                                                            foreach (StaffControlFront::$f_staff as $key => $value) { ?>
                                                                <li class="bookingor-click-start-staff shop-list-1 bookingor-all-staff select_list no-shadow get_all_data">
                                                                    <div class="bookingor-flex align-items-center">
                                                                        <div class="right bookingor-flex justify-content-start flex-column">
                                                                            <div class="user-avatar">
                                                                                <?php if ($value->staff_icon) { ?>
                                                                                    <img class="memeber-ava" src="<?php echo esc_attr(wp_get_attachment_url($value->staff_icon));  ?>" alt="" />
                                                                                <?php } else { ?>
                                                                                    <img class="memeber-ava" src="" data-avatar="<?php echo esc_attr($value->staff_first_name . " " . $value->staff_last_name); ?>" alt="" />
                                                                                <?php } ?>
                                                                            </div>
                                                                            <div class="staff-data">
                                                                                <div class="staff-name"><?php echo esc_html($value->staff_first_name . " " . $value->staff_last_name); ?></div>
                                                                                <div class="staff-de">
                                                                                    <div class="staff-cl">
                                                                                        <i class="bx bx-phone-call"></i>
                                                                                        <span class="staff-cl"><?php echo esc_html($value->staff_phone); ?></span>
                                                                                    </div>
                                                                                    <div class="staff-email">
                                                                                        <i class="bx bx-envelope"></i>
                                                                                        <span class="staff-email"><?php echo esc_html($value->staff_email); ?></span>
                                                                                    </div>
                                                                                    <div class="staff-tagline">
                                                                                        <span class="staff-tagline"><?php echo esc_html($value->staff_tag_line); ?></span>
                                                                                    </div>
                                                                                    <?php
                                                                                    $loc_address = '';
                                                                                    if (!empty($value->staff_location)) {
                                                                                        $loc_address = $value->staff_location;
                                                                                    } elseif (!empty($value->location_get_id)) {
                                                                                        global $wpdb;
                                                                                        $loc_ids = array_map('intval', explode(',', $value->location_get_id));
                                                                                        if (!empty($loc_ids)) {
                                                                                            $loc_id = $loc_ids[0];
                                                                                            $loc_address = $wpdb->get_var($wpdb->prepare("SELECT location_address FROM {$wpdb->prefix}bookingor_location WHERE location_id = %d", $loc_id));
                                                                                        }
                                                                                    }
                                                                                    if (!empty($loc_address)) { ?>
                                                                                        <div class="staff-location">
                                                                                            <i class="bx bx-map"></i>
                                                                                            <span class="staff-location"><?php echo esc_html($loc_address); ?></span>
                                                                                        </div>
                                                                                    <?php } ?>
                                                                                    <div class="staff-about">
                                                                                        <span class="staff-about"><?php echo esc_html($value->staff_about); ?></span>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            <?php }
                                                        } else {
                                                            // Fallback if database is empty
                                                            for ($i = 1; $i <= 3; $i++) {
                                                            ?>
                                                                <li class="bookingor-click-start-staff shop-list-1 bookingor-all-staff select_list no-shadow get_all_data">
                                                                    <div class="bookingor-flex align-items-center">
                                                                        <div class="right bookingor-flex justify-content-start flex-column">
                                                                            <div class="user-avatar">
                                                                                <img class="memeber-ava" src="<?php echo esc_attr($this->f_image_default); ?>" alt="" />
                                                                            </div>
                                                                            <div class="staff-data">
                                                                                <div class="staff-name">Demo Staff <?php echo $i; ?></div>
                                                                                <div class="staff-de">
                                                                                    <div class="staff-cl">
                                                                                        <i class="bx bx-phone-call"></i>
                                                                                        <span class="staff-cl">+123456789<?php echo $i; ?></span>
                                                                                    </div>
                                                                                    <div class="staff-email">
                                                                                        <i class="bx bx-envelope"></i>
                                                                                        <span class="staff-email">demo<?php echo $i; ?>@example.com</span>
                                                                                    </div>
                                                                                    <div class="staff-tagline">
                                                                                        <span class="staff-tagline">Demo Tagline <?php echo $i; ?></span>
                                                                                    </div>
                                                                                    <div class="staff-location">
                                                                                        <i class="bx bx-map"></i>
                                                                                        <span class="staff-location">Demo Location <?php echo $i; ?></span>
                                                                                    </div>
                                                                                    <div class="staff-about">
                                                                                        <span class="staff-about">Demo about description for staff member <?php echo $i; ?>.</span>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            <?php }
                                                        } ?>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    jQuery(document).ready(function($) {
        var $root = $('#bookingor-design-staff');

        // Image Radius
        $('input[name="settings_staff_image_radius"]').on('input', function() {
            $root.css('--bookingor-staff-img-radius', $(this).val() + 'px');
        });

        // Image Width
        $('input[name="settings_staff_image_width"]').on('input', function() {
            var val = $(this).val();
            $root.css('--bookingor-staff-img-width', val ? val + 'px' : '');
        });

        // Image Height
        $('input[name="settings_staff_image_height"]').on('input', function() {
            var val = $(this).val();
            $root.css('--bookingor-staff-img-height', val ? val + 'px' : '');
        });

        // Image Border Size
        $('input[name="settings_staff_image_border_size"]').on('input', function() {
            $root.css('--bookingor-staff-img-border-size', $(this).val() + 'px');
        });

        // Image Border Color
        $('input[name="settings_staff_image_border_color"]').on('input', function() {
            $root.css('--bookingor-staff-img-border-color', $(this).val());
        });

        // Columns
        $('input[name="settings_staff_card_column"]').on('input', function() {
            $root.css('--bookingor-staff-column', $(this).val());
        });

        // Gap X
        $('input[name="settings_staff_cards_gap_x"]').on('input', function() {
            $root.css('--bookingor-staff-gap-x', $(this).val() + 'px');
        });

        // Gap Y
        $('input[name="settings_staff_cards_gap_y"]').on('input', function() {
            $root.css('--bookingor-staff-gap-y', $(this).val() + 'px');
        });

        // Background Active Checkbox
        $('#setting-staff-bg-active').on('change', function() {
            var isChecked = $(this).is(':checked');
            $(this).val(isChecked ? 'on' : 'off');
            if (isChecked) {
                $('#staff-bg-color-wrapper').removeClass('bookingor-d-none');
                var colorVal = $('input[name="settings_staff_bg_color"]').val();
                $root.css('--bookingor-staff-bg-color', colorVal);
            } else {
                $('#staff-bg-color-wrapper').addClass('bookingor-d-none');
                $root.css('--bookingor-staff-bg-color', 'transparent');
            }
        });

        // Background Color Input
        $('input[name="settings_staff_bg_color"]').on('input', function() {
            if ($('#setting-staff-bg-active').is(':checked')) {
                $root.css('--bookingor-staff-bg-color', $(this).val());
            }
        });

        // Hover and Active Border Color
        $('input[name="settings_staff_border_active_color"]').on('input', function() {
            $root.css('--bookingor-staff-border-active-color', $(this).val());
        });

        // Show/Hide Staff Phone Number
        $('#setting-staff-phone-show').on('change', function() {
            var isChecked = $(this).is(':checked');
            $(this).val(isChecked ? 'on' : 'off');
            $root.css('--bookingor-staff-phone-display', isChecked ? 'block' : 'none');
        });

        // Show/Hide Staff Email
        $('#setting-staff-email-show').on('change', function() {
            var isChecked = $(this).is(':checked');
            $(this).val(isChecked ? 'on' : 'off');
            $root.css('--bookingor-staff-email-display', isChecked ? 'block' : 'none');
        });

        // Show/Hide Staff Tag Line
        $('#setting-staff-tagline-show').on('change', function() {
            var isChecked = $(this).is(':checked');
            $(this).val(isChecked ? 'on' : 'off');
            $root.css('--bookingor-staff-tagline-display', isChecked ? 'block' : 'none');
        });

        // Show/Hide Staff Location
        $('#setting-staff-location-show').on('change', function() {
            var isChecked = $(this).is(':checked');
            $(this).val(isChecked ? 'on' : 'off');
            $root.css('--bookingor-staff-location-display', isChecked ? 'block' : 'none');
        });

        // Show/Hide Staff About Description
        $('#setting-staff-about-show').on('change', function() {
            var isChecked = $(this).is(':checked');
            $(this).val(isChecked ? 'on' : 'off');
            $root.css('--bookingor-staff-about-display', isChecked ? 'block' : 'none');
        });

        // Heading Font Family
        $('#heading-font-family').on('change', function() {
            var selectedFont = $(this).val();
            var fontFamily = selectedFont ? ("Bookingor " + selectedFont + ", sans-serif") : "";
            if (selectedFont === 'Bitter' || selectedFont === 'Carme') {
                fontFamily = "Bookingor " + selectedFont + ", serif";
            }
            $('.bookingor-staff-heading').css('font-family', fontFamily);
        });


    });
</script>
