<?php

use Bookingor\Helper\HelperControl;
use Bookingor\Routes\AdminRoute;
use Bookingor\Backend\Controller\CustomForms\CustomFormsControl;
use Bookingor\Frontend\Controller\Service\ServiceControlFront;

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

// Populate services list for preview
ServiceControlFront::bp_front_services_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_service_card_column', '2');
$gap_x = get_option('bookingor_settings_service_cards_gap_x', '10');
$gap_y = get_option('bookingor_settings_service_cards_gap_y', '10');
$card_radius = get_option('bookingor_settings_service_card_radius', '0');
$card_border_size = get_option('bookingor_settings_service_card_border_size', '1');
$card_border_color = get_option('bookingor_settings_service_card_border_color', '#e6e6e6');
$img_width = get_option('bookingor_settings_service_image_width', '');
$img_height = get_option('bookingor_settings_service_image_height', '140');
$bg_active = get_option('bookingor_settings_service_bg_active', 'off');
$bg_color = get_option('bookingor_settings_service_bg_color', '#ffffff');
$border_active_color = get_option('bookingor_settings_service_border_active_color', '#7752DD');
$service_name = get_option('bookingor_settings_service_name', 'Services');
$headings_font = get_option('bookingor_settings_fonts_headings');
$allow_to_book = get_option('bookingor_settings_service_allow_to_book', 'on');
?>
<style>
    #bookingor-design-services {
        --bookingor-service-column: <?php echo esc_attr($column); ?>;
        --bookingor-service-gap-x: <?php echo esc_attr($gap_x); ?>px;
        --bookingor-service-gap-y: <?php echo esc_attr($gap_y); ?>px;
        --bookingor-service-img-width: <?php echo esc_attr($img_width ? $img_width . 'px' : '100%'); ?>;
        --bookingor-service-img-height: <?php echo esc_attr($img_height ? $img_height . 'px' : 'auto'); ?>;
        --bookingor-service-bg-color: <?php echo ($bg_active === 'on') ? esc_attr($bg_color) : 'transparent'; ?>;
        --bookingor-service-border-active-color: <?php echo esc_attr($border_active_color); ?>;
        --bookingor-service-card-radius: <?php echo esc_attr($card_radius); ?>px;
        --bookingor-service-card-border-size: <?php echo esc_attr($card_border_size); ?>px;
        --bookingor-service-card-border-color: <?php echo esc_attr($card_border_color); ?>;
    }
</style>

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

        <div class="bookingor-d-flex justify-content-between mb-2">
            <div>
                <h3><?php esc_html_e('Edit Services 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_service_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_service_bg_active" tabindex="0" id="setting-service-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="service-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_service_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>

                                        <!-- Service Settings -->
                                        <div class="main-bd bookingor-g-0">
                                            <h6 class="h-ct"><?php esc_html_e('Service 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-5 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Service Label', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-7">
                                                        <input type="text" class="form-control form-control-sm" name="settings_service_name" tabindex="0" id="setting-service-name" value="<?php echo esc_attr($service_name); ?>">
                                                    </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('Allow to book', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-2 bookingor-g-0">
                                                        <input type="checkbox" class="form-check-input" name="settings_service_allow_to_book" tabindex="0" id="setting-service-allow-to-book" value="<?php echo esc_attr($allow_to_book); ?>" <?php checked($allow_to_book, '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('Service Card 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_service_card_radius" value="<?php echo esc_attr($card_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('Service Card 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_service_card_border_size" value="<?php echo esc_attr($card_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('Service Card 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_service_card_border_color" value="<?php echo esc_attr($card_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('Service 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_service_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('Service 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_service_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('Service Card Column', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-g-0">
                                                        <input type="number" class="form-control form-control-sm" name="settings_service_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('Service 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_service_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('Service 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_service_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-services-design" id="bookingor-design-services">
                                <div id="bookingor-service" class="bookingor-category-active bookingor-ft flex-fill bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-12 main bookingor-flex flex-column bookingor-g-0">
                                    <div class="card-body">
                                        <div class="main-services">
                                            <div class="select">
                                                <div class="bookingor-flex align-items-center justify-content-between bookingor-heading-top">
                                                    <div class="full-head-1 bookingor-service-heading"><?php echo esc_html($service_name); ?></div>
                                                </div>
                                                <div id="selectService-serv" class="select-list-1">
                                                    <ul class="main-carousel all-services-shw row mb-4" style="gap: <?php echo esc_attr($gap_y); ?>px <?php echo esc_attr($gap_x); ?>px !important;">
                                                        <?php
                                                        if (is_array(ServiceControlFront::$f_service_all) && !empty(ServiceControlFront::$f_service_all)) {
                                                            foreach (ServiceControlFront::$f_service_all as $key => $value) { ?>
                                                                <li class="full-service-2 bookingor-full-services-serv bookingor-click-get-book get_all_data select_list">
                                                                    <div class="list-f-srvs">
                                                                        <div class="f-service-image">
                                                                            <?php
                                                                            $service_img = '';
                                                                            if (!empty($value->service_icon)) {
                                                                                $service_img = wp_get_attachment_url($value->service_icon);
                                                                            }
                                                                            if (empty($service_img)) {
                                                                                $service_img = $this->f_image_default;
                                                                            }
                                                                            ?>
                                                                            <img class="serv-icon" src="<?php echo esc_attr($service_img); ?>" alt="" />
                                                                        </div>
                                                                        <div class="service-card-contents">
                                                                            <div class="service-heading-1"><?php echo esc_html($value->service_name); ?></div>
                                                                            <div class="bookingor-f-content bookingor-line-h"><?php echo esc_html($value->service_description); ?></div>
                                                                        </div>
                                                                        <div>
                                                                            <div class="bookingor-d-flex align-items-center bookingor-gap-5">
                                                                                <div class="service-duration">
                                                                                    <div class="bookingor-d-flex gap-1">
                                                                                        <div class="bookingor-d-flex"><svg xmlns="http://www.w3.org/2000/svg" class="bookingor-icon-duration" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 12H17V14H11V7H13V12Z"></path>
                                                                                            </svg></div>
                                                                                        <div class="bookingor-f-14"><?php echo esc_html(HelperControl::convert_duration($value->service_duration)); ?></div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="service-price">
                                                                                <div class="bookingor-flex">
                                                                                    <div><?php echo esc_html(get_option('bookingor_settings_currency_symbol', '$')); ?></div>
                                                                                    <div><?php echo esc_html(HelperControl::priceDecimal($value->service_cost)); ?></div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            <?php }
                                                        } else {
                                                            // Fallback if database is empty
                                                            for ($i = 1; $i <= 3; $i++) {
                                                            ?>
                                                                <li class="full-service-2 bookingor-full-services-serv bookingor-click-get-book get_all_data select_list">
                                                                    <div class="list-f-srvs">
                                                                        <div class="f-service-image">
                                                                            <img class="serv-icon" src="<?php echo esc_attr($this->f_image_default); ?>" alt="" />
                                                                        </div>
                                                                        <div class="service-card-contents">
                                                                            <div class="service-heading-1">Demo Service <?php echo $i; ?></div>
                                                                            <div class="bookingor-f-content bookingor-line-h">This is a short description of the demo service. Customize settings on the left.</div>
                                                                        </div>
                                                                        <div>
                                                                            <div class="bookingor-d-flex align-items-center bookingor-gap-5">
                                                                                <div class="service-duration">
                                                                                    <div class="bookingor-d-flex gap-1">
                                                                                        <div class="bookingor-d-flex"><svg xmlns="http://www.w3.org/2000/svg" class="bookingor-icon-duration" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 12H17V14H11V7H13V12Z"></path>
                                                                                            </svg></div>
                                                                                        <div class="bookingor-f-14">1h</div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="service-price">
                                                                                <div class="bookingor-flex">
                                                                                    <div><?php echo esc_html(get_option('bookingor_settings_currency_symbol', '$')); ?></div>
                                                                                    <div>100.00</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-services');

        // Card Radius
        $('input[name="settings_service_card_radius"]').on('input', function() {
            $root.css('--bookingor-service-card-radius', $(this).val() + 'px');
        });

        // Card Border Size
        $('input[name="settings_service_card_border_size"]').on('input', function() {
            $root.css('--bookingor-service-card-border-size', $(this).val() + 'px');
        });

        // Card Border Color
        $('input[name="settings_service_card_border_color"]').on('input', function() {
            $root.css('--bookingor-service-card-border-color', $(this).val());
        });

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

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

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

        // Gap X
        $('input[name="settings_service_cards_gap_x"]').on('input', function() {
            var val = $(this).val();
            $root.css('--bookingor-service-gap-x', val + 'px');
            $('.all-services-shw').css('gap', $('.all-services-shw').css('gap').split(' ')[0] + ' ' + val + 'px');
        });

        // Gap Y
        $('input[name="settings_service_cards_gap_y"]').on('input', function() {
            var val = $(this).val();
            $root.css('--bookingor-service-gap-y', val + 'px');
            $('.all-services-shw').css('gap', val + 'px ' + $('.all-services-shw').css('gap').split(' ')[1]);
        });

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

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

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

        // 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-service-heading').css('font-family', fontFamily);
        });

        // Service Label Input
        $('#setting-service-name').on('input', function() {
            $('.bookingor-service-heading').text($(this).val());
        });
    });
</script>
