<?php

use Bookingor\Frontend\Controller\Category\CategoryControlFront;
use Bookingor\Helper\HelperControl;
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; ?>
<div class="bookingor design-1" id="bookingor-design-4" data-design-id="<?php echo isset($get_design_id) ? esc_attr($get_design_id) : ''; ?>">
    <div class="bookingor-container w-100 f-h bookingor-g-0 bookingor-flex flex-column">
        <div class="bookingor-loader-container">
            <div class="bookingor-d-flex align-items-center justify-content-center pt-3 pb-3">
                <div class="bookingor-loader">
                    <div class="bookingor-loader-wheel"></div>
                    <div class="bookingor-loader-text bookingor-d-flex"></div>
                </div>
            </div>
        </div>
        <form id="bkinz-booking-design-4" class="bookingor-flex flex-column h-100">
            <input type="hidden" id="get-design-type" name="get_design_type" value="4">
            <?php if (get_option("bookingor_settings_category_active") === "on") { ?>
                <div id="main-book-4" class="bookingor-category-active bookingor-ft flex-fill g-0 f-height bookingor-d-none">
                    <div class="row bookingor-g-0 f-height">
                        <div id="bookingor-category" class="bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-12  bookingor-flex flex-column j-width bookingor-g-0">
                            <div class="card-body flex-fill  bookingor-d-flex flex-column justify-content-between">
                                <div class="sidebar-category-2 bookingor-pd-all bookingor-flex flex-column flex-fill">
                                    <div class="select">
                                        <div class="bookingor-heading-top bookingor-flex align-items-center">
                                            <div class="full-head-1 mb-3 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("Select a ", "bookingor-pro"); ?><?php echo esc_html(get_option('bookingor_settings_category_name')); ?>
                                            </div>
                                        </div>
                                        <div id="selectListCategory-1" class="select-list-1">
                                            <ul class="main-carousel  bookingor-d-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-1 boookingor-full-categories-4 get_all_data carousel-cell  bookingor-d-flex flex-column align-items-center justify-content-center select_list">
                                                        <div class="lgImg <?php echo esc_attr(get_option("bookingor_settings_category_images_icons")); ?>">
                                                            <img src="<?php echo esc_attr($value->icon ?  wp_get_attachment_url($value->icon) : $this->f_image_default);  ?>" alt="" />
                                                        </div>
                                                        <div class="bookingor-category-name bookingor-f-16"><?php echo esc_html($value->category_name); ?></div>
                                                    </li>
                                                <?php
                                                } ?>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3 bookingor-progress">
                                    <div class="bookingor-progress-bar-move bookingor-progress-bar"></div>
                                </div>
                                <div class="main_footer d-m  bookingor-d-flex align-items-center justify-content-end main_botm">
                                    <div class="bookingor-flex justify-content-end">
                                        <button type="button" id="book-category-continue" class="btn_orange bookingor-button bookingor-cont-btn"><?php echo esc_html(get_option("bookingor_settings_continue_button_text")); ?></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php } ?>
            <div id="bookingor-service-book" class="position-relative bookingor-ft flex-fill g-0 f-height bookingor-d-none" data-extra-show="0">
                <?php if (get_option("bookingor_settings_woocommcerce_payment_active") === "on") { ?>
                    <?php include plugin_dir_path(__FILE__) . 'Services/woocommerce-service-4.php'; ?>
                <?php } else { ?>

                    <div id="bookingor-service" class="bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-8 main bookingor-flex j-width flex-column bookingor-g-0">
                        <div class="card-body">
                            <div class="main-services bookingor-pd-all">
                                <div class="main_top d-m bookingor-d-flex align-items-center justify-content-between pd-l-r  gap-3">
                                    <div class="to-searchs">
                                        <div id="the-services-search">
                                            <div class="bookingor-searchbar-show-now">
                                                <input type="text" class="form-control bookingor-searchbar-2" autocomplete="off" id="searchService-4" placeholder="Search  <?php echo esc_attr(get_option('bookingor_settings_service_name')); ?>" />
                                            </div>
                                            <div class="bookingor-front-search-show pad-all-l flw-set bookingor-d-none">
                                                <div id="sugg-show-all-service" class="search-show-all">
                                                    <div class="search-serv">
                                                        <div class="sug-1">
                                                            <?php
                                                            if (is_array(ServiceControlFront::$f_service_all) || is_object(ServiceControlFront::$f_service_all)) {
                                                                foreach (ServiceControlFront::$f_service_all as $key => $value) { ?>
                                                                    <div class="bookingor-search-all-service s-label widget-location" data-get-category-id="<?php echo esc_attr($value->category_get_id); ?>" data-get-service-id="<?php echo esc_attr($value->service_id); ?>" data-get-service-name="<?php echo esc_attr($value->service_name); ?>"><?php echo esc_html($value->service_name); ?></div>
                                                            <?php }
                                                            }
                                                            ?>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="left bookingor-flex align-items-center justify-content-end">
                                        <div class="btn-group">
                                            <div class="left bookingor-flex align-items-center dropdown bookingor-btn dropdown-toggle" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" role="button">Price</div>
                                            <div class="price-abs-menu dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuClickableInside">
                                                <div id="slider-range"></div>
                                                <div class="price-inputs bookingor-flex align-items-center justify-content-between">
                                                    <div>
                                                        <label><?php esc_html_e("min", "bookingor-pro"); ?></label>
                                                        <span><?php echo esc_html(get_option("bookingor_settings_currency_symbol")); ?></span><input type="number" min="0" class="form-control" id="minPrice" />
                                                    </div>
                                                    <div>
                                                        <label><?php esc_html_e("max", "bookingor-pro"); ?></label>
                                                        <span><?php echo esc_html(get_option("bookingor_settings_currency_symbol")); ?></span><input type="number" min="0" class="form-control" id="maxPrice" />
                                                    </div>
                                                </div>
                                                <div id="applyBtn"><?php esc_html_e("apply", "bookingor-pro"); ?></div>
                                            </div>
                                        </div>
                                        <div class="view_icons bookingor-flex align-items-center">
                                            <img id="gridView" src="<?php echo esc_attr(plugin_dir_url(dirname(dirname(__FILE__))) . 'assets/images/design-svg/grid-view.svg'); ?> " alt="" />
                                            <img id="listView" src="<?php echo esc_attr(plugin_dir_url(dirname(dirname(__FILE__))) . 'assets/images/design-svg/list-view.svg'); ?>" alt="" />
                                        </div>
                                    </div>
                                </div>
                                <div class="select service-selecting">
                                    <div class="bookingor-flex gap-5 bookingor-heading-top">
                                        <div class="full-head-1 bookingor-service-heading"><?php echo esc_html(get_option('bookingor_settings_service_name')); ?></div>
                                        <div id="serviceWarning" class="align-items-center justify-content-center">
                                            <span class="select_warning align-items-center bookingor-d-none justify-content-center"><?php esc_html_e("Select a ", "bookingor-pro"); ?><?php echo esc_html(get_option('bookingor_settings_service_name')); ?></span>
                                            <span class="blank_wraing bookingor-d-none"><?php esc_html_e("No ", "bookingor-pro"); ?><?php echo esc_html(get_option('bookingor_settings_service_name')); ?><?php esc_html_e("Try another", "bookingor-pro"); ?></span>
                                        </div>
                                    </div>
                                    <div id="selectService-4" class="select-list-1">
                                        <ul class="main-carousel all-services-shw row">
                                            <?php foreach (
                                                ServiceControlFront::$f_service_all as $key =>
                                                $value
                                            ) {  ?>
                                                <li data-get-location-id="<?php echo esc_attr($value->location_get_id); ?>" data-get-category-id="<?php echo esc_attr($value->category_get_id); ?>" <?php echo esc_attr(isset($value->subcategories) ? 'data-subcategory-id="' . $value->subcategories . '"' : ''); ?> data-repeat-status="<?php echo esc_attr($value->recurring_status); ?>" data-repeat-type="<?php echo esc_attr($value->recurring_type); ?>" data-service-id="<?php echo esc_attr($value->service_id); ?>" data-get-service-price="<?php echo esc_attr($value->service_cost); ?>" data-get-duration="<?php echo esc_attr($value->service_duration); ?>" class="full-service-2 bookingor-full-services-4 get_all_data select_list services-grid-view service-list-view">
                                                    <div class="list-f-srvs">
                                                        <div class="f-service-image <?php echo esc_attr(get_option("bookingor_settings_service_images_icons")); ?>">
                                                            <img class="serv-icon" src="<?php echo esc_attr($value->service_icon ?  wp_get_attachment_url($value->service_icon) : $this->f_image_default);  ?>" alt="" />
                                                            <?php if ($value->service_duration_type !== 'hour-period') { ?>
                                                                <div class="grid-view-time-du">
                                                                    <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>
                                                            <?php } ?>
                                                        </div>
                                                        <div class="service-card-contents">
                                                            <div class="service-heading-1"><?php echo esc_html($value->service_name); ?></div>
                                                            <div class="service-price-grid">
                                                                <div class="<?php echo esc_attr(get_option('bookingor_currency_position_change')); ?> bookingor-flex">
                                                                    <div class="<?php echo esc_attr(get_option('bookingor_currency_position_change')); ?>">
                                                                        <?php echo esc_html(get_option("bookingor_settings_currency_symbol")); ?>
                                                                    </div>
                                                                    <div><?php echo esc_html(HelperControl::priceDecimal($value->service_cost)) . ($value->service_duration_type === 'hour-period' ? ' /hr' : ''); ?></div>
                                                                </div>
                                                            </div>
                                                            <div class="bookingor-f-content"><?php echo esc_html($value->service_description); ?>
                                                            </div>
                                                        </div>
                                                        <div class="price-duration-no-grid">
                                                            <div class="service-price">
                                                                <div class="<?php echo esc_attr(get_option('bookingor_currency_position_change')); ?> bookingor-flex">
                                                                    <div class="<?php echo esc_attr(get_option('bookingor_currency_position_change')); ?>">
                                                                        <?php echo esc_html(get_option("bookingor_settings_currency_symbol")); ?>
                                                                    </div>
                                                                    <div><?php echo esc_html(HelperControl::priceDecimal($value->service_cost)) . ($value->service_duration_type === 'hour-period' ? ' /hr' : ''); ?></div>
                                                                </div>
                                                            </div>
                                                            <?php if ($value->service_duration_type !== 'hour-period') { ?>
                                                                <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>
                                                            <?php } ?>
                                                        </div>
                                                    </div>
                                                </li>
                                            <?php } ?>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 bookingor-progress">
                            <div class="bookingor-progress-bar-move bookingor-progress-bar"></div>
                        </div>
                        <div class="main_footer d-m bookingor-d-flex align-items-center justify-content-between main_botm" id="bookingor-back-cate">
                            <div class="bookingor-flex justify-content-start">
                                <button type="button" id="back-category" class="bookingor-d-none bookingor-btn_back bookingor-button"><?php echo esc_html(get_option("bookingor_settings_back_button_text")); ?></button>
                            </div>
                            <div class="bookingor-flex justify-content-end">
                                <button type="button" id="ctBtn-4" class="btn_orange bookingor-button bookingor-cont-btn"><?php echo esc_html(get_option("bookingor_settings_continue_button_text")); ?></button>
                            </div>
                        </div>
                    </div>
                <?php } ?>
            </div>
            <?php if (get_option("bookingor_settings_staff_active") === "on") { ?>
                <div id="second-book-4" class="bookingor-staff-active bookingor-ft flex-fill g-0 f-height bookingor-d-none">
                    <div class="row bookingor-g-0 f-height">
                        <div class="bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-12  bookingor-flex j-width bookingor-g-0 bookingor-flex j-width flex-column ">
                            <div class="card-body ">
                                <div class="sidebar_container bookingor-flex flex-column bookingor-pd-all ">
                                    <div class="select">
                                        <div id="employeeWarning" 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("Please Select a ", "bookingor-pro"); ?><?php echo esc_html(get_option('bookingor_settings_staff_name')); ?>
                                        </div>
                                        <div class="bookingor-flex align-items-center justify-content-between bookingor-heading-top">
                                            <div class="full-head-1 bookingor-staff-heading"><?php echo esc_html(get_option('bookingor_settings_staff_name')); ?></div>
                                        </div>
                                        <div id="selectListEmployee-4" class="select-list-1">
                                            <ul class="emp-g bookingor-d-flex flex-wrap gap-x-10">
                                                <?php
                                                foreach (
                                                    StaffControlFront::$f_staff as $key =>
                                                    $value
                                                ) { ?>
                                                    <li data-select="select-shop" data-get-service-id="<?php echo esc_attr($value->service_get_id); ?>" data-staff-id="<?php echo esc_attr($value->staff_id); ?>" class="shop-list-1 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" data-staff-name="<?php echo esc_attr($value->staff_first_name . ' ' . $value->staff_last_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>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                <?php
                                                }
                                                ?>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 bookingor-progress">
                                <div class="bookingor-progress-bar-move bookingor-progress-bar"></div>
                            </div>
                            <div class="main_footer d-m bookingor-d-flex align-items-center justify-content-between main_botm">
                                <div class="bookingor-flex justify-content-start">
                                    <button type="button" id="back-employee" class="bookingor-btn_back bookingor-button"><?php echo esc_html(get_option("bookingor_settings_back_button_text")); ?></button>
                                </div>
                                <div class="bookingor-flex justify-content-end">
                                    <button type="button" id="next-employee" class="btn_orange bookingor-button bookingor-cont-btn"><?php echo esc_html(get_option("bookingor_settings_continue_button_text")); ?></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php }
            if (get_option("bookingor_settings_location_active") === "on") { ?>
                <div id="location-book" class="bookingor-location-active bookingor-ft bookingor-d-none cal-pick" data-location-book="">
                    <div class="row bookingor-g-0 f-height">
                        <div class="bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-12  flex-column bookingor-d-flex j-width bookingor-g-0">
                            <div class="card-body">
                                <div class="sidebar_container  bookingor-d-flex flex-column bookingor-pd-all">
                                    <div id="the-location-search" class="pd-l-r">

                                        <input type="text" class="form-control bookingor-searchbar-location" autocomplete="off" id="searchLocation" placeholder="Search <?php echo esc_attr(get_option('bookingor_settings_location_name')); ?>" />
                                        <div class="bookingor-front-search-show pad-all-l flw-set bookingor-d-none">
                                            <div id="sugg-show-all-location" class="search-show-all">
                                                <div class="search-serv">
                                                    <div class="sug-1">
                                                        <?php
                                                        foreach (
                                                            LocationControlFront::service_location_assign() as $key =>
                                                            $value
                                                        ) { ?>
                                                            <div class="all-location bookingor-full-location" data-get-location-id="<?php echo esc_attr($value->location_id); ?>" data-get-service-id="<?php echo esc_attr($value->service_get_id); ?>"><?php echo esc_html($value->location_city); ?></div>
                                                        <?php } ?>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center">
                                        <div class="full-head-1 bookingor-location-heading"><?php echo esc_html(get_option('bookingor_settings_location_name')); ?></div>

                                    </div>

                                    <div id="select-Location-1" class="select-list-1">
                                        <ul class="bookingor-d-flex emp-g flex-wrap gap-x-10">
                                            <?php
                                            foreach (
                                                LocationControlFront::$f_location_assign as $key =>
                                                $value
                                            ) { ?>
                                                <li data-select="select-location" data-get-service-id="<?php echo esc_attr($value->service_get_id); ?>" data-location-id="<?php echo esc_attr($value->location_id); ?>" class="location-list bookingor-location-all select_list no-shadow get_all_data">
                                                    <div class="bookingor-d-flex align-items-center ">
                                                        <div class="right  bookingor-d-flex justify-content-start bookingor-my-direction">
                                                            <div class="location-image">
                                                                <?php if ($value->location_icon) { ?>
                                                                    <img class="location-set-image" src="<?php echo esc_attr(wp_get_attachment_url($value->location_icon));  ?>" alt="" />
                                                                <?php } else { ?>
                                                                    <img class="location-set-image" src="<?php echo esc_attr(plugin_dir_url(dirname(dirname(__FILE__))) . 'assets/images/location_icons_2.png'); ?>">
                                                                <?php } ?>
                                                            </div>
                                                            <div class="location-data">
                                                                <div class="location-title"><?php echo esc_html($value->location_title); ?></div>
                                                                <div class="location-details">
                                                                    <div class="lc-gp mb-2  bookingor-d-flex align-items-center">
                                                                        <div class="bookingor-d-flex"><svg class="bookingor-location-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                                                                <path d="M12 20.8995L16.9497 15.9497C19.6834 13.2161 19.6834 8.78392 16.9497 6.05025C14.2161 3.31658 9.78392 3.31658 7.05025 6.05025C4.31658 8.78392 4.31658 13.2161 7.05025 15.9497L12 20.8995ZM12 23.7279L5.63604 17.364C2.12132 13.8492 2.12132 8.15076 5.63604 4.63604C9.15076 1.12132 14.8492 1.12132 18.364 4.63604C21.8787 8.15076 21.8787 13.8492 18.364 17.364L12 23.7279ZM12 13C13.1046 13 14 12.1046 14 11C14 9.89543 13.1046 9 12 9C10.8954 9 10 9.89543 10 11C10 12.1046 10.8954 13 12 13ZM12 15C9.79086 15 8 13.2091 8 11C8 8.79086 9.79086 7 12 7C14.2091 7 16 8.79086 16 11C16 13.2091 14.2091 15 12 15Z"></path>
                                                                            </svg></div>
                                                                        <div class="location-address"><?php echo esc_html($value->location_address); ?></div>
                                                                    </div>
                                                                    <div class="lc-gp  bookingor-d-flex align-items-center">
                                                                        <div class="bookingor-d-flex">
                                                                            <svg class="bookingor-tele-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                                                                <path d="M7 4V20H17V4H7ZM6 2H18C18.5523 2 19 2.44772 19 3V21C19 21.5523 18.5523 22 18 22H6C5.44772 22 5 21.5523 5 21V3C5 2.44772 5.44772 2 6 2ZM12 17C12.5523 17 13 17.4477 13 18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18C11 17.4477 11.4477 17 12 17Z"></path>
                                                                            </svg>
                                                                        </div>
                                                                        <span class="location-phone"><?php echo esc_html($value->location_phone); ?></span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            <?php
                                            }
                                            ?>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 bookingor-progress">
                                <div class="bookingor-progress-bar-move bookingor-progress-bar"></div>
                            </div>
                            <div class="main_footer d-m bookingor-d-flex align-items-center justify-content-between main_botm">
                                <div class="bookingor-flex justify-content-start">
                                    <button type="button" id="back-location-btn" class="bookingor-btn_back bookingor-button"><?php echo esc_html(get_option("bookingor_settings_back_button_text")); ?></button>
                                </div>
                                <div class="bookingor-flex justify-content-end">
                                    <button type="button" id="next-location-btn" class="btn_orange bookingor-button bookingor-cont-btn"><?php echo esc_html(get_option("bookingor_settings_continue_button_text")); ?></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php } ?>
            <div id="bookingor-pick-date-time-book" class="bookingor-ft bookingor-d-none bookingor-ft flex-fill g-0 f-height">
                <div class="row bookingor-g-0 f-height">
                    <div class="bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-12 t-b-set ">
                        <div class="card-body">
                            
                            <div class="row bookingor-g-0 f-height bk-pd-all">
                                <div class="bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-8 bookingor-flex flex-column">
                                    <div class="card-body">
                                        <div class="bookingor-flex flex-column">
                                            <div id="calendar-full-4"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-4 main bookingor-flex flex-column bookingor-g-0" id="time-slot-sw">
                                    <div class="card-body">
                                        <div class="pd-l-0" id="main-time-container">
                                            <div id="picktimeWarning" 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 Time", "bookingor-pro"); ?>
                                            </div>
                                            <div class="bookingor-flex align-items-center justify-content-between bookingor-heading-top">
                                                <div class="full-head-2"><?php echo esc_html(get_option("bookingor_settings_time_name")); ?></div>
                                            </div>
                                            <div id="selectPickTime-4" class="select-list-1">
                                                <ul class="bookingor-flex flex-wrap all-pick-time select-four max-h-156"></ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 bookingor-progress">
                            <div class="bookingor-progress-bar-move bookingor-progress-bar"></div>
                        </div>
                        <div class="main_footer d-m bookingor-d-flex align-items-center justify-content-between main_botm">
                            <div class="bookingor-flex justify-content-start">
                                <button type="button" id="bookingor-time-back-btn" class="bookingor-btn_back bookingor-button"><?php echo esc_html(get_option("bookingor_settings_back_button_text")); ?></button>
                            </div>
                            <div class="bookingor-flex justify-content-end" id="check-repeat">
                                <button type="button" id="book-ready-design-4" class="btn_orange bookingor-button ready-b bookingor-cont-btn bookingor-cont-btn"><?php esc_html_e("Book", "bookingor-pro"); ?></button>
                                <?php if (is_plugin_active('bookingor-recurring-appointment/bookingor-recurring-appointment.php')) { ?>
                                    <button type="button" id="repeat-cont" class="btn_orange bookingor-button ready-b bookingor-cont-btn"><?php echo esc_html(get_option("bookingor_settings_continue_button_text")); ?></button>
                                <?php } ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php
            if (is_plugin_active('bookingor-recurring-appointment/bookingor-recurring-appointment.php')) {
                require_once wp_normalize_path(WP_PLUGIN_DIR . '/bookingor-recurring-appointment/app/Frontend/View/Recurring/recurring.php');
            }
            ?>
            <?php include plugin_dir_path(__FILE__) . 'tabs/customer-book.php'; ?>
            <?php include plugin_dir_path(__FILE__) . 'tabs/customer-payment.php'; ?>
            <?php include plugin_dir_path(__FILE__) . 'tabs/customer-thankyou.php'; ?>
        </form>
    </div>
</div>