<?php

use Bookingor\Frontend\Controller\Category\CategoryControlFront;
use Bookingor\Frontend\Controller\Location\LocationControlFront;
use Bookingor\Frontend\Controller\Service\ServiceControlFront;
use Bookingor\Frontend\Controller\Staff\StaffControlFront;
use Bookingor\Helper\HelperControl;

// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
} ?>
<div class="bookingor design-1" id="bookingor-design-2" data-design-id="<?php echo isset($get_design_id) ? esc_attr($get_design_id) : ''; ?>">
    <input type="hidden" id="get-time-format" name="get_time_format" value="<?php echo esc_attr(get_option('bookingor_time_format')); ?>">
    <div class="bookingor-container w-100 f-h bookingor-g-0 bookingor-flex flex-column">
        <div class="bookingor-loader-container bookingor-d-flex align-items-center justify-content-center pt-3 pb-3">
            <div class="bookingor-loader-all">
                <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-2" class="bookingor-v-none  bookingor-flex flex-column h-100">
            <input type="hidden" id="get-design-type" name="get_design_type" value="2">
            <div id="main-book-2" class="bookingor-ft flex-fill bookingor-d-none position-relative">
                <div class="row bookingor-g-0 f-height w-100">
                    <?php if (get_option('bookingor_settings_category_active') === 'on') {  ?>
                        <div id="bookingor-category" class="bookingor-category-active bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-4 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-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-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 bookingor-gap-5 category-list-view boookingor-full-categories-2 carousel-cell bookingor-flex flex-column align-items-center justify-content-center select_list">
                                                        <div class="<?php echo esc_attr(get_option('bookingor_settings_category_images_icons')); ?>">
                                                            <img class="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>
                                                    </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');
                                                    }
                                                }
                                                ?>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php }
                    if (get_option('bookingor_settings_woocommcerce_payment_active') === 'on') { ?>

                        <?php include_once plugin_dir_path(__FILE__) . 'Services/woocommerce-service.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">
                                    <div class="align-items-center justify-content-between ">
                                        <div class="main_top pd-serv-header">
                                            <div class="row bookingor-g-0 w-100">
                                                <div class="bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-9 bookingor-col-xl-9">
                                                    <div class="to-searchs">
                                                        <?php if (get_option('bookingor_settings_location_active') === 'on') { ?>
                                                            <div id="the-location-search">
                                                                <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); ?>" data-get-location-name="<?php echo esc_attr($value->location_address); ?>">
                                                                                        <div class="text-cr">

                                                                                            <?php echo esc_html($value->location_address); ?>
                                                                                        </div>
                                                                                    </div>
                                                                                <?php } ?>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        <?php } ?>
                                                        <div id="the-services-search">
                                                            <div class="bookingor-searchbar-show-now">
                                                                <input type="text" class="form-control bookingor-searchbar-2" autocomplete="off" id="searchService-2" 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
                                                                            foreach (
                                                                                ServiceControlFront::$f_service_all as $key => $value
                                                                            ) { ?>
                                                                                <div class="bookingor-search-all-service s-label widget-location" 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>
                                                <div class="bookingor-gap-5 bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-3 bookingor-col-xl-3 left align-items-center justify-content-end bookingor-g-0 bookingor-flex">
                                                    <div class="bookingor-flex bookingor-gap-5">
                                                        <div>
                                                            <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"><?php esc_html_e('Price', 'bookingor-pro'); ?></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>
                                                        <div class="bookingor-gap-5 view_icons bookingor-flex align-items-center">
                                                            <div class="bookingor-grid-icons">
                                                                <img id="gridView" src="<?php echo esc_attr(plugin_dir_url(dirname(dirname(__FILE__))) . '/assets/images/design-svg/grid-view.svg'); ?> " alt="" />
                                                            </div>
                                                            <div class="bookingor-grid-icons">
                                                                <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>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="select">
                                        <div class="bookingor-flex gap-5">
                                            <div class="full-head-1 pd-l-o 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_attr(get_option('bookingor_settings_service_name')); ?><?php esc_html_e('Try another', 'bookingor-pro'); ?></span>
                                            </div>
                                        </div>
                                        <div id="selectService-2" 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) && !empty($value->subcategories) ? 'data-subcategory-id=' . $value->subcategories . '' : ''); ?> <?php if (is_plugin_active('bookingor-recurring-appointment/bookingor-recurring-appointment.php')) { ?> data-repeat-status="<?php echo esc_attr($value->recurring_status); ?>" data-repeat-type="<?php echo esc_attr($value->recurring_type); ?>" <?php } ?> 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-2 get_all_data select_list">
                                                        <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="" />
                                                            </div>
                                                            <div class="service-card-contents">
                                                                <div class="service-heading-1"><?php echo esc_html($value->service_name); ?></div>
                                                                <?php if (get_option('bookingor_settings_service_description_show') === 'on') { ?>
                                                                    <div class="bookingor-f-content bookingor-line-h"><?php echo esc_html($value->service_description); ?></div>
                                                                <?php } ?>
                                                            </div>
                                                            <div>
                                                                <div class="bookingor-d-flex align-items-center bookingor-gap-5">
                                                                    <?php if (get_option('bookingor_settings_service_duration_show') === 'on' && $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_minutes_to_display($value->service_duration, $value->service_duration_type)); ?></div>
                                                                            </div>
                                                                        </div>
                                                                    <?php } ?>
                                                                    <?php if (get_option('bookingor_settings_service_capacity_show') === 'on') { ?>
                                                                        <div class="service-capacity bookingor-d-flex align-items-center">
                                                                            <div class="bookingor-d-flex gap-1">
                                                                                <svg class="bookingor-icon-capacity" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 9C8 6.79086 9.79086 5 12 5C14.2091 5 16 6.79086 16 9C16 11.2091 14.2091 13 12 13C9.79086 13 8 11.2091 8 9ZM15.8243 13.6235C17.1533 12.523 18 10.8604 18 9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9C6 10.8604 6.84668 12.523 8.17572 13.6235C4.98421 14.7459 3 17.2474 3 20C3 20.5523 3.44772 21 4 21C4.55228 21 5 20.5523 5 20C5 17.7306 7.3553 15 12 15C16.6447 15 19 17.7306 19 20C19 20.5523 19.4477 21 20 21C20.5523 21 21 20.5523 21 20C21 17.2474 19.0158 14.7459 15.8243 13.6235Z" fill="#000000" />
                                                                                </svg>
                                                                            </div>
                                                                            <div class="bookingor-f-14">
                                                                                <?php echo esc_html($value->service_capacity_max); ?>
                                                                            </div>
                                                                        </div>
                                                                    <?php } ?>
                                                                </div>
                                                                <?php if (get_option('bookingor_settings_service_price_show') === 'on') { ?>
                                                                    <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 } ?>
                                                                <?php if (get_option('bookingor_settings_location_active') === 'on') { ?>
                                                                    <div class="service-location">
                                                                        <div class="bookingor-d-flex">
                                                                            <?php if (get_option('bookingor_settings_location_address') === 'on') { ?>
                                                                                <div id="bookingor-location-address-active" class="text-cr bookingor-f-13"><?php echo esc_html($value->location_address); ?></div>
                                                                            <?php } ?>
                                                                        </div>
                                                                    <?php } ?>
                                                                    </div>
                                                            </div>
                                                    </li>
                                                <?php } ?>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="main_footer main_botm bookingor-d-flex align-items-center justify-content-end">
                                <div class="bookingor-flex justify-content-end">
                                    <button type="button" id="ctBtn-2" 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>
            </div>
            <div id="second-book-2" class="bookingor-ft  cal-pick bookingor-d-none">
                <div class="row bookingor-g-0 f-height">
                    <?php if (get_option('bookingor_settings_staff_active') === 'on') { ?>
                        <div class="bookingor-staff-active bookingor-col-sm-12 bookingor-col-12 bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-4 sidebar-1  j-width bookingor-g-0">
                            <div class="card-body">
                                <div class="sidebar_container bookingor-flex flex-column">
                                    <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('Must Select a employee', 'bookingor-pro'); ?>
                                        </div>
                                        <div class="bookingor-flex align-items-center justify-content-between">
                                            <div class="full-head-1 bookingor-staff-heading"><?php echo esc_html(get_option('bookingor_settings_staff_name')); ?></div>
                                        </div>
                                        <div id="selectListEmployee-2" class="select-list-1">
                                            <ul class="bookingor-flex emp-g 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">
                                                            <i class="fas fa-check-circle"></i>
                                                            <div class="right bookingor-flex justify-content-start flex-row">
                                                                <div class="bookingor-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>
                    <?php } ?>
                    <div id="bookingor-ser" class="bookingor-service-active bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-<?php echo get_option('bookingor_settings_staff_active') === 'on' ? '8' : '12'; ?> bookingor-g-0 flex-column bookingor-d-flex j-width">
                        <div class="card-body">
                    
                            <div class="row bookingor-g-0  bookingor-g-0 tp-pd-oly">
                                <div class="bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-8 bookingor-col-lg-8 bookingor-flex flex-column lf-rt-pd">
                                    <div class="card-body">
                                        <div class="bookingor-flex flex-column">
                                            <div class="select">
                                                <div id="calendar-full-2"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-4 bookingor-col-lg-4  bookingor-flex flex-column bookingor-g-0" id="time-slot-sw">
                                    <div class="card-body">
                                        <div id="main-time-container">
                                            <div class="select">
                                                <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="respon-padd bookingor-flex align-items-center justify-content-between">
                                                    <div class="full-head-1 bookingor-time-heading"><?php echo esc_html(get_option('bookingor_settings_time_name')); ?></div>
                                                </div>
                                                <div id="selectPickTime-2" class="select-list-1">
                                                    <?php if (get_option('bookingor_settings_default_time_sheet') === 'staff-time-sheet') {
                                                    ?>
                                                        <div class="bookingor-f-16 pick-staff-text"><?php esc_html_e('Pick ', 'bookingor-pro');  ?> <?php echo esc_html(get_option('bookingor_settings_staff_name')); ?> </div>
                                                    <?php } ?>
                                                    <ul class="bookingor-flex flex-wrap all-pick-time select-four max-h-156">
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="main_footer bookingor-d-flex align-items-center justify-content-between main_botm">
                            <div class="bookingor-flex justify-content-start">
                                <button type="button" id="second-b-back-2" 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-2" class="btn_orange bookingor-button ready-b 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>