<?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;
$allow_to_book = get_option('bookingor_settings_category_allow_to_book', 'on');
?>
<div class="bookingor " id="bookingor-design-category" data-allow-to-book="<?php echo esc_attr($allow_to_book); ?>">
    <style>
        #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 id="bookingor-design-cateogry" class="bookingor-container bookingor-category-design">
        <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>
        <div id="bookingor-widget-category">
            <div id="main-book" class="bookingor-ft flex-fill">
                <div class="row bookingor-g-0 f-height w-100">
                    <?php if (get_option('bookingor_settings_category_active') === 'on') {
                        $column = !empty($column) ? $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');
                        $view_type = get_option('bookingor_settings_category_view_type', 'category-list-view');
                        $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;
                            }
                        </style>
                        <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-12  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-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($view_type); ?> 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>
                                                    </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>
                    <?php } ?>
                </div>
            </div>
            <!-- Modal -->


        </div>
        <?php if ($allow_to_book === 'on') { ?>
            <div class="modal fade" id="bookingorModal" tabindex="-1" aria-labelledby="bookingorModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content position-relative">
                        <button type="button" class="btn-close position-absolute top-0 end-0 m-3 z-3"
                            data-bs-dismiss="modal" aria-label="Close" style="z-index: 1050;"></button>
                        <?php
                        include plugin_dir_path(__FILE__) . 'modal-book/popup-design.php';
                        ?>
                    </div>
                </div>
            </div>
        <?php } ?>
        <?php if ($allow_to_book === 'on') { ?>
            <script>
                jQuery(document).ready(function($) {
                    $("<bookingor class='bookingor bookingor-why-backgrop'></bookingor>").appendTo("body");

                    $('.full-category-start').on('click', function() {
                        var categoryId = $(this).attr('data-category-id');
                        if ($('#bkinz-booking-design-4').length) {
                            // Reset all steps and show the service selection step directly
                            $('#bkinz-booking-design-4 .bookingor-ft').addClass('bookingor-d-none');
                            $('#bookingor-service-book').removeClass('bookingor-d-none');

                            // Set progress bar to service step (approx 30%)
                            $('.bookingor-progress-bar-move').css('width', '30%');

                            // Filter services by the selected category ID
                            var $services = $('.bookingor-full-services-4');
                            $services.addClass('bookingor-d-none');

                            var $matched = $services.filter(function() {
                                var catIds = $(this).attr('data-get-category-id') || "";
                                return catIds.split(',').indexOf(categoryId) !== -1;
                            });

                            if ($matched.length > 0) {
                                $matched.removeClass('bookingor-d-none');
                                $('.blank_wraing').addClass('bookingor-d-none');
                            } else {
                                $('.blank_wraing').removeClass('bookingor-d-none');
                            }
                        }
                    });
                });
            </script>
        <?php } ?>
    </div>

</div>