<?php

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

use Bookingor\Frontend\Controller\Category\CategoryControlFront;
use Bookingor\Frontend\Controller\Staff\StaffControlFront;
use Bookingor\Frontend\Controller\Service\ServiceControlFront;
use Bookingor\Frontend\Controller\Location\LocationControlFront;
// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

if (empty($this->f_image_default)) {
    $this->f_image_default = AdminRoute::$default_img;
}
?>


<?php
$column = get_option('bookingor_settings_category_card_column', '4');
$gap_x = get_option('bookingor_settings_category_cards_gap_x', '10');
$gap_y = get_option('bookingor_settings_category_cards_gap_y', '10');
$img_radius = get_option('bookingor_settings_category_image_radius', '0');
$img_border_size = get_option('bookingor_settings_category_image_border_size', '0');
$img_border_color = get_option('bookingor_settings_category_image_border_color', '#000000');
$img_width = get_option('bookingor_settings_category_image_width');
$img_height = get_option('bookingor_settings_category_image_height');
$bg_active = get_option('bookingor_settings_category_bg_active', 'off');
$bg_color = get_option('bookingor_settings_category_bg_color', '#ffffff');
$text_color = get_option('bookingor_settings_category_text_color', '#000000');
$allow_to_book = get_option('bookingor_settings_category_allow_to_book', 'on');
?>
<style>
    #bookingor-design-category {
        --bookingor-category-column: <?php echo esc_attr($column); ?>;
        --bookingor-category-gap-x: <?php echo esc_attr($gap_x); ?>px;
        --bookingor-category-gap-y: <?php echo esc_attr($gap_y); ?>px;
        --bookingor-category-img-radius: <?php echo esc_attr($img_radius); ?>px;
        --bookingor-category-img-border-size: <?php echo esc_attr($img_border_size); ?>px;
        --bookingor-category-img-border-color: <?php echo esc_attr($img_border_color); ?>;
        <?php if (!empty($img_width)) { ?>
        --bookingor-category-img-width: <?php echo esc_attr($img_width); ?>px;
        <?php } ?>
        <?php if (!empty($img_height)) { ?>
        --bookingor-category-img-height: <?php echo esc_attr($img_height); ?>px;
        <?php } ?>
        --bookingor-category-bg-color: <?php echo ($bg_active === 'on') ? esc_attr($bg_color) : 'transparent'; ?>;
        --bookingor-category-text-color: <?php echo esc_attr($text_color); ?>;
    }
    #bookingor-design-category .bookingor-line-h {
        color: var(--bookingor-category-text-color) !important;
    }
    #bookingor-design-category.bookingor-container,
    #bookingor-design-category .bookingor-container,
    .bookingor-category-design.bookingor-container,
    .bookingor-category-design .bookingor-container {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        box-shadow: none !important;
    }
</style>

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

        <div class="bookingor-d-flex justify-content-between mb-2">
            <div>
                <h3><?php esc_html_e('Edit Category 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">
                                        <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 bookingor-col-sm-10 bookingor-col-md-10 bookingor-col-lg-10 bookingor-col-xl-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-col-sm-2 bookingor-col-md-2 bookingor-col-lg-2 bookingor-col-xl-2 bookingor-g-0">
                                                        <div class="form-control-select">
                                                            <input type="color" class="w-100" name="setting_color_border" value="<?php echo esc_attr(get_option('bookingor_settings_color_border')); ?>">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row align-items-center mb-2 mt-2">
                                                    <div class="bookingor-col-10 bookingor-col-sm-10 bookingor-col-md-10 bookingor-col-lg-10 bookingor-col-xl-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-col-sm-2 bookingor-col-md-2 bookingor-col-lg-2 bookingor-col-xl-2 bookingor-g-0">
                                                        <input type="checkbox" class="form-check-input" name="settings_category_bg_active" tabindex="0" id="setting-category-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="category-bg-color-wrapper">
                                                    <div class="bookingor-col-10 bookingor-col-sm-10 bookingor-col-md-10 bookingor-col-lg-10 bookingor-col-xl-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-col-sm-2 bookingor-col-md-2 bookingor-col-lg-2 bookingor-col-xl-2 bookingor-g-0">
                                                        <div class="form-control-select">
                                                            <input type="color" class="w-100" name="settings_category_bg_color" value="<?php echo esc_attr($bg_color); ?>">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row align-items-center mb-2 mt-2 bdr-b">
                                                    <div class="bookingor-col-10 bookingor-col-sm-10 bookingor-col-md-10 bookingor-col-lg-10 bookingor-col-xl-10 pd-1 bookingor-g-0">
                                                        <label class="h-l-n lft bookingor-f-13"><?php esc_html_e('Text Color', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-2 bookingor-col-sm-2 bookingor-col-md-2 bookingor-col-lg-2 bookingor-col-xl-2 bookingor-g-0">
                                                        <div class="form-control-select">
                                                            <input type="color" class="w-100" name="settings_category_text_color" value="<?php echo esc_attr($text_color); ?>">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-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-col-sm-12 bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-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 echo  get_option('bookingor_settings_fonts_headings') === 'Lato' ? 'selected' : ''; ?>><?php esc_html_e('Lato', 'bookingor'); ?></option>
                                                                    <option value="Roboto" <?php echo  get_option('bookingor_settings_fonts_headings') === 'Roboto' ? 'selected' : ''; ?>><?php esc_html_e('Roboto', 'bookingor'); ?></option>
                                                                    <option value="Merriweather" <?php echo  get_option('bookingor_settings_fonts_headings') === 'Merriweather' ? 'selected' : ''; ?>><?php esc_html_e('Merriweather', 'bookingor'); ?></option>
                                                                    <option value="Montserrat" <?php echo  get_option('bookingor_settings_fonts_headings') === 'Montserrat' ? 'selected' : ''; ?>><?php esc_html_e('Montserrat', 'bookingor'); ?></option>
                                                                    <option value="Mulish" <?php echo  get_option('bookingor_settings_fonts_headings') === 'Mulish' ? 'selected' : ''; ?>><?php esc_html_e('Mulish', 'bookingor'); ?></option>
                                                                    <option value="Nunito" <?php echo  get_option('bookingor_settings_fonts_headings') === 'Nunito' ? 'selected' : ''; ?>><?php esc_html_e('Nunito', 'bookingor'); ?></option>
                                                                    <option value="Asap Condensed" <?php echo  get_option('bookingor_settings_fonts_headings') === 'Asap Condensed' ? 'selected' : ''; ?>><?php esc_html_e('Asap Condensed', 'bookingor'); ?></option>
                                                                    <option value="Open Sans" <?php echo  get_option('bookingor_settings_fonts_headings') === 'Open Sans' ? 'selected' : ''; ?>><?php esc_html_e('Open Sans', 'bookingor'); ?></option>
                                                                    <option value="Barlow" <?php echo  get_option('bookingor_settings_fonts_headings') === 'Barlow' ? 'selected' : ''; ?>><?php esc_html_e('Barlow', 'bookingor'); ?></option>
                                                                    <option value="Oswald" <?php echo  get_option('bookingor_settings_fonts_headings') === 'Oswald' ? 'selected' : ''; ?>><?php esc_html_e('Oswald', 'bookingor'); ?></option>
                                                                    <option value="Bitter" <?php echo  get_option('bookingor_settings_fonts_headings') === 'Bitter' ? 'selected' : ''; ?>><?php esc_html_e('Bitter', 'bookingor'); ?></option>
                                                                    <option value="Poppins" <?php echo  get_option('bookingor_settings_fonts_headings') === 'Poppins' ? 'selected' : ''; ?>><?php esc_html_e('Poppins', 'bookingor'); ?></option>
                                                                    <option value="Carme" <?php echo  get_option('bookingor_settings_fonts_headings') === 'Carme' ? 'selected' : ''; ?>><?php esc_html_e('Carme', 'bookingor'); ?></option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="main-bd bookingor-g-0">
                                            <h6 class="h-ct"><?php esc_html_e('Category 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-10 bookingor-col-sm-10 bookingor-col-md-10 bookingor-col-lg-10 bookingor-col-xl-10 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Show Category Name', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-2 bookingor-col-sm-2 bookingor-col-md-2 bookingor-col-lg-2 bookingor-col-xl-2 bookingor-g-0">
                                                        <input type="checkbox" class="form-check-input" name="settings_category_name_show" tabindex="0" id="setting-category-name-show" value="<?php echo esc_attr(get_option('bookingor_settings_category_name_show', 'on')); ?>" <?php checked(get_option('bookingor_settings_category_name_show', 'on'), 'on'); ?>>
                                                    </div>
                                                </div>
                                                <div class="form-group row align-items-center mb-2 mt-2">
                                                    <div class="bookingor-col-10 bookingor-col-sm-10 bookingor-col-md-10 bookingor-col-lg-10 bookingor-col-xl-10 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Allow to book', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-2 bookingor-col-sm-2 bookingor-col-md-2 bookingor-col-lg-2 bookingor-col-xl-2 bookingor-g-0">
                                                        <input type="checkbox" class="form-check-input" name="settings_category_allow_to_book" tabindex="0" id="setting-category-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">
                                                    <div class="bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-5 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Category Label', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-2 bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-7">
                                                        <input type="text" class="form-control form-control-sm" name="settings_category_name" tabindex="0" id="setting-category-name" value="<?php echo esc_attr(get_option('bookingor_settings_category_name')); ?>">
                                                    </div>
                                                </div>

                                                <div class="form-group row align-items-center mb-2 mt-2 bdr-b">
                                                    <div class="bookingor-col-8 bookingor-col-sm-8 bookingor-col-md-8 bookingor-col-lg-8 bookingor-col-xl-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Category Image Radius', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-col-sm-4 bookingor-col-md-4 bookingor-col-lg-4 bookingor-col-xl-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_category_image_radius" value="<?php echo esc_attr(get_option('bookingor_settings_category_image_radius', '0')); ?>">
                                                            <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 bookingor-col-sm-8 bookingor-col-md-8 bookingor-col-lg-8 bookingor-col-xl-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Category Image Width', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-col-sm-4 bookingor-col-md-4 bookingor-col-lg-4 bookingor-col-xl-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_category_image_width" placeholder="Auto" value="<?php echo esc_attr(get_option('bookingor_settings_category_image_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 bookingor-col-sm-8 bookingor-col-md-8 bookingor-col-lg-8 bookingor-col-xl-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Category Image Height', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-col-sm-4 bookingor-col-md-4 bookingor-col-lg-4 bookingor-col-xl-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_category_image_height" placeholder="Auto" value="<?php echo esc_attr(get_option('bookingor_settings_category_image_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 bookingor-col-sm-8 bookingor-col-md-8 bookingor-col-lg-8 bookingor-col-xl-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Category Image Border', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-col-sm-4 bookingor-col-md-4 bookingor-col-lg-4 bookingor-col-xl-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_category_image_border_size" value="<?php echo esc_attr(get_option('bookingor_settings_category_image_border_size', '0')); ?>">
                                                            <input type="color" class="w-100" name="settings_category_image_border_color" value="<?php echo esc_attr(get_option('bookingor_settings_category_image_border_color', '#000000')); ?>">
                                                        </div>
                                                    </div>
                                                </div>

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

                                                <div class="form-group row align-items-center mb-2 mt-2 bdr-b">
                                                    <div class="bookingor-col-8 bookingor-col-sm-8 bookingor-col-md-8 bookingor-col-lg-8 bookingor-col-xl-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Category Cards Gap (X-axis)', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-col-sm-4 bookingor-col-md-4 bookingor-col-lg-4 bookingor-col-xl-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_category_cards_gap_x" value="<?php echo esc_attr(get_option('bookingor_settings_category_cards_gap_x', '10')); ?>">
                                                            <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 bookingor-col-sm-8 bookingor-col-md-8 bookingor-col-lg-8 bookingor-col-xl-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Category Cards Gap (Y-axis)', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-col-sm-4 bookingor-col-md-4 bookingor-col-lg-4 bookingor-col-xl-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_category_cards_gap_y" value="<?php echo esc_attr(get_option('bookingor_settings_category_cards_gap_y', '10')); ?>">
                                                            <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 bookingor-col-sm-8 bookingor-col-md-8 bookingor-col-lg-8 bookingor-col-xl-8 pd-1">
                                                        <label class="h-l-n bookingor-f-13"><?php esc_html_e('Category View Type', 'bookingor'); ?></label>
                                                    </div>
                                                    <div class="bookingor-col-4 bookingor-col-sm-4 bookingor-col-md-4 bookingor-col-lg-4 bookingor-col-xl-4 bookingor-g-0">
                                                        <select class="form-select form-select-sm" name="settings_category_view_type" id="setting-category-view-type">
                                                            <option value="category-list-view" <?php selected(get_option('bookingor_settings_category_view_type', 'category-list-view'), 'category-list-view'); ?>><?php esc_html_e('List View', 'bookingor'); ?></option>
                                                            <option value="category-grid-view" <?php selected(get_option('bookingor_settings_category_view_type', 'category-list-view'), 'category-grid-view'); ?>><?php esc_html_e('Grid View', 'bookingor'); ?></option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bookingor-col-xl-9 bookingor-col-lg-12 bookingor-col-md-12 bookingor-col-sm-12 bookingor-col-12 ">
                            <div class="bookingor" id="bookingor-design-category">
                                <div class="bookingor-container bookingor-category-design">
                                    <div id="bookingor-category" 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-category-2 bookingor-flex flex-column flex-fill">
                                            <div class="select">
                                                <div class="bookingor-flex align-items-center justify-content-between">
                                                    <div class="full-head-1 pd-l-o bookingor-category-heading"><?php echo esc_html(get_option('bookingor_settings_category_name')); ?></div>
                                                    <div id="categoryWarning" class="select_warning bookingor-d-none align-items-center justify-content-center">
                                                        <span class="bookingor-flex align-items-center justify-content-center">!</span><?php esc_html_e('Must Select a ', 'bookingor'); ?> <?php echo esc_html(get_option('bookingor_settings_category_name')); ?>
                                                    </div>
                                                </div>
                                                <div id="selectListCategory-8" class="select-list-1">
                                                    <ul class="main-carousel bookingor-flex flex-wrap">
                                                        <?php foreach (
                                                            CategoryControlFront::$f_widget_category as $key => $value
                                                        ) { ?>
                                                            <li data-category-id="<?php echo esc_attr($value->category_id); ?>" class="full-category-start bookingor-gap-5 <?php echo esc_attr(get_option('bookingor_settings_category_view_type', 'category-list-view')); ?> boookingor-full-categories carousel-cell bookingor-flex flex-column align-items-center justify-content-center select_list" <?php if ($allow_to_book === 'on') { ?>data-bs-toggle="modal" data-bs-target="#bookingorModal"<?php } ?>>
                                                                <div class="">
                                                                    <img class="category-lgImg" src="<?php echo esc_attr($value->icon ? wp_get_attachment_url($value->icon) : $this->f_image_default); ?>" alt="" />
                                                                </div>
                                                                <div class="bookingor-line-h"><?php echo esc_html($value->category_name); ?></div>
                                                                <div class="bookingor-category-name" style="display: none;"><?php echo esc_html($value->category_name); ?></div>
                                                            </li>
                                                            <?php
                                                            if (class_exists('Bookingor\Frontend\Controller\ServiceSubcategory\ServiceSubcategoryControl')) {
                                                                require wp_normalize_path(WP_PLUGIN_DIR . '/bookingor-subcategory-addon/app/Frontend/View/Subcategory/design-2-subcategory.php'); ?>
                                                            <?php
                                                            } ?>
                                                        <?php
                                                        } ?>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

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

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

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

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

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

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

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

        // Image Width
        $('input[name="settings_category_image_width"]').on('input', function() {
            var val = $(this).val();
            if (val) {
                $root.css('--bookingor-category-img-width', val + 'px');
            } else {
                $root.css('--bookingor-category-img-width', '');
            }
        });

        // Image Height
        $('input[name="settings_category_image_height"]').on('input', function() {
            var val = $(this).val();
            if (val) {
                $root.css('--bookingor-category-img-height', val + 'px');
            } else {
                $root.css('--bookingor-category-img-height', '');
            }
        });

        // View Type
        $('#setting-category-view-type').on('change', function() {
            var val = $(this).val();
            if (val === 'category-list-view') {
                $root.find('.boookingor-full-categories').removeClass('category-grid-view').addClass('category-list-view');
            } else {
                $root.find('.boookingor-full-categories').removeClass('category-list-view').addClass('category-grid-view');
            }
        });

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

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

        // Category Text Color Input
        $('input[name="settings_category_text_color"]').on('input', function() {
            $root.css('--bookingor-category-text-color', $(this).val());
        });

        // Allow to book
        $('#setting-category-allow-to-book').on('change', function() {
            var isChecked = $(this).is(':checked');
            $(this).val(isChecked ? 'on' : 'off');
            if (isChecked) {
                $root.find('.full-category-start').attr('data-bs-toggle', 'modal').attr('data-bs-target', '#bookingorModal');
            } else {
                $root.find('.full-category-start').removeAttr('data-bs-toggle').removeAttr('data-bs-target');
            }
        });
    });
</script>
