<?php
// Exit if accessed directly
if (! defined('ABSPATH')) exit; ?>
<div class="wrap bookingor">
    <div>
        <h3><?php esc_html_e("Design Templates", "bookingor"); ?></h3>
    </div>
    <div class="main bookingor">
        <div class="row bookingor-g-0">
            <div class="bookingor-col-xl-12 main-top">
                <div class="row justify-content-between top-reverse bookingor-g-0">
                    <div class="bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-12 bookingor-col-lg-12 bookingor-col-xl-12 bookingor-col-xxl-12 pd-1">
                        <div class="row  bookingor-gap-2">
                            <div class="bookingor-col-12 bookingor-col-sm-6 bookingor-col-md-6 bookingor-col-lg-4 bookingor-col-xl-3 bookingor-col-xxl-3">
                                <div class="card">
                                    <img class="card-img-top" src="<?php echo  esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . 'assets/images/design-1.jpg'); ?>" alt="">
                                    <div class="card-body">
                                        <h5 class="card-title"><?php esc_html_e("Template 1", "bookingor"); ?></h5>
                                        <p class="card-text"><?php esc_html_e("This Template has a Location, Services and Staff booking a landing page, you can turn off location or staff base on your needs", "bookingor"); ?></p>
                                        <span class="btn btn-primary"><?php esc_html_e("[BOOKINGOR_DESIGN_1]", "bookingor"); ?></span>
                                    </div>
                                    <a href="<?php echo sanitize_text_field(isset($_SERVER['REQUEST_URI'])) ? esc_url(sanitize_text_field(wp_unslash($_SERVER['REQUEST_URI'] . '&type=edit-template&id=1'))) : ''; ?>" class="bookingor-btn bookingor-btn-primary bookingor-flex justify-content-center"><span><?php esc_html_e("Customize", "bookingor"); ?></span></a>
                                </div>
                            </div>
                            <div class="bookingor-col-12 bookingor-col-sm-6 bookingor-col-md-6 bookingor-col-lg-4 bookingor-col-xl-3 bookingor-col-xxl-3">
                                <div class="card">
                                    <img class="card-img-top" src="<?php echo esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . 'assets/images/design-2.jpg'); ?>" alt="">
                                    <div class="card-body">
                                        <h5 class="card-title"><?php esc_html_e("Template 2", "bookingor"); ?></h5>
                                        <p class="card-text"><?php esc_html_e("This Template has category services and location on a landing page. You can turn off category or location base on your needs.", "bookingor"); ?></p>
                                        <span class="btn btn-primary"><?php esc_html_e("[BOOKINGOR_DESIGN_2]", "bookingor"); ?></span>
                                    </div>

                                    <a href="<?php echo sanitize_text_field(isset($_SERVER['REQUEST_URI'])) ? esc_url(sanitize_text_field(wp_unslash($_SERVER['REQUEST_URI'] . '&type=edit-template&id=2'))) : ''; ?>" class="bookingor-btn bookingor-btn-primary bookingor-flex justify-content-center"><span><?php esc_html_e("Customize", "bookingor"); ?></span></a>


                                </div>
                            </div>
                            <div class="bookingor-col-12 bookingor-col-sm-6 bookingor-col-md-6 bookingor-col-lg-4 bookingor-col-xl-3 bookingor-col-xxl-3">
                                <div class="card">
                                    <img class="card-img-top" src="<?php echo  esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . 'assets/images/design-3.jpg'); ?>" alt="">
                                    <div class="card-body">
                                        <h5 class="card-title"><?php esc_html_e("Template 3", "bookingor"); ?></h5>
                                        <p class="card-text"><?php esc_html_e("This Template has a step by step booking allow to make booking in process way. you can turn off any step base on your needs", "bookingor"); ?></p>
                                        <span class="btn btn-primary"><?php esc_html_e("[BOOKINGOR_DESIGN_3]", "bookingor"); ?></span>
                                    </div>
                                    <a href="<?php echo sanitize_text_field(isset($_SERVER['REQUEST_URI'])) ? esc_url(sanitize_text_field(wp_unslash($_SERVER['REQUEST_URI'] . '&type=edit-template&id=3'))) : ''; ?>" class="bookingor-btn bookingor-btn-primary bookingor-flex justify-content-center"><span><?php esc_html_e("Customize", "bookingor"); ?></span></a>
                                </div>
                            </div>
                            <div class="bookingor-col-12 bookingor-col-sm-6 bookingor-col-md-6 bookingor-col-lg-4 bookingor-col-xl-3 bookingor-col-xxl-3">
                                <div class="card">
                                    <img class="card-img-top" src="<?php echo  esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . 'assets/images/design-4.jpg'); ?>" alt="">
                                    <div class="card-body">
                                        <h5 class="card-title"><?php esc_html_e("Template 4", "bookingor"); ?></h5>
                                        <p class="card-text"><?php esc_html_e("This Template has a a progress bar with step by step booking. you can turn off any step base on your needs", "bookingor"); ?></p>
                                        <span class="btn btn-primary"><?php esc_html_e("[BOOKINGOR_DESIGN_4]", "bookingor"); ?></span>
                                    </div>
                                    <a href="<?php echo sanitize_text_field(isset($_SERVER['REQUEST_URI'])) ? esc_url(sanitize_text_field(wp_unslash($_SERVER['REQUEST_URI'] . '&type=edit-template&id=4'))) : ''; ?>" class="bookingor-btn bookingor-btn-primary bookingor-flex justify-content-center"><span><?php esc_html_e("Customize", "bookingor"); ?></span></a>
                                </div>
                            </div>
                            <div class="bookingor-col-12 bookingor-col-sm-6 bookingor-col-md-6 bookingor-col-lg-4 bookingor-col-xl-3 bookingor-col-xxl-3">
                                <div class="card">
                                    <img class="card-img-top" src="<?php echo  esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . 'assets/images/design-5.jpg'); ?>" alt="">
                                    <div class="card-body">
                                        <h5 class="card-title"><?php esc_html_e("Template 5", "bookingor"); ?></h5>
                                        <p class="card-text"><?php esc_html_e("This Template has unique slider calendar with select option. if you don't have any images of services or category it best way to use it. you can turn off any step base on your needs", "bookingor"); ?></p>
                                        <span class="btn btn-primary"><?php esc_html_e("[BOOKINGOR_DESIGN_5]", "bookingor"); ?></span>
                                    </div>
                                    <a href="<?php echo sanitize_text_field(isset($_SERVER['REQUEST_URI'])) ? esc_url(sanitize_text_field(wp_unslash($_SERVER['REQUEST_URI'] . '&type=edit-template&id=5'))) : ''; ?>" class="bookingor-btn bookingor-btn-primary bookingor-flex justify-content-center"><span><?php esc_html_e("Customize", "bookingor"); ?></span></a>
                                </div>
                            </div>
                            <div class="bookingor-col-12 bookingor-col-sm-6 bookingor-col-md-6 bookingor-col-lg-4 bookingor-col-xl-3 bookingor-col-xxl-3">
                                <div class="card">
                                    <img class="card-img-top" src="<?php echo  esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . 'assets/images/design-6.jpg'); ?>" alt="">
                                    <div class="card-body">
                                        <h5 class="card-title"><?php esc_html_e("Template 6", "bookingor"); ?></h5>
                                        <p class="card-text"><?php esc_html_e("This Template has a single service  booking form with location. if you want to show only one services then youse services or category ID", "bookingor"); ?></p>
                                        <span class="btn btn-primary"><?php esc_html_e("[BOOKINGOR_DESIGN_6]", "bookingor"); ?></span>
                                    </div>
                                    <a href="<?php echo sanitize_text_field(isset($_SERVER['REQUEST_URI'])) ? esc_url(sanitize_text_field(wp_unslash($_SERVER['REQUEST_URI'] . '&type=edit-template&id=6'))) : ''; ?>" class="bookingor-btn bookingor-btn-primary bookingor-flex justify-content-center"><span><?php esc_html_e("Customize", "bookingor"); ?></span></a>
                                </div>
                            </div>
                            <div class="bookingor-col-12 bookingor-col-sm-6 bookingor-col-md-6 bookingor-col-lg-4 bookingor-col-xl-3 bookingor-col-xxl-3">
                                <div class="card">
                                    <img class="card-img-top" src="<?php echo  esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . 'assets/images/design-category.jpg'); ?>" alt="">
                                    <div class="card-body">
                                        <h5 class="card-title"><?php esc_html_e("Category Starter", "bookingor"); ?></h5>
                                        <p class="card-text"><?php esc_html_e("This template is focused on categories, allowing users to browse and select categories in a sleek interface.", "bookingor"); ?></p>
                                        <span class="btn btn-primary"><?php esc_html_e("[BOOKINGOR_START_CATEGORY]", "bookingor"); ?></span>
                                    </div>
                                    <a href="<?php echo sanitize_text_field(isset($_SERVER['REQUEST_URI'])) ? esc_url(sanitize_text_field(wp_unslash($_SERVER['REQUEST_URI'] . '&type=edit-template&id=8'))) : ''; ?>" class="bookingor-btn bookingor-btn-primary bookingor-flex justify-content-center"><span><?php esc_html_e("Customize", "bookingor"); ?></span></a>
                                </div>
                            </div>
                            <div class="bookingor-col-12 bookingor-col-sm-6 bookingor-col-md-6 bookingor-col-lg-4 bookingor-col-xl-3 bookingor-col-xxl-3">
                                <div class="card">
                                    <img class="card-img-top" src="<?php echo  esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . 'assets/images/design-service.jpg'); ?>" alt="">
                                    <div class="card-body">
                                        <h5 class="card-title"><?php esc_html_e("Services Starter", "bookingor"); ?></h5>
                                        <p class="card-text"><?php esc_html_e("This template is focused on services, allowing users to browse and select services in a sleek interface.", "bookingor"); ?></p>
                                        <span class="btn btn-primary"><?php esc_html_e("[BOOKINGOR_START_SERVICE]", "bookingor"); ?></span>
                                    </div>
                                    <a href="<?php echo sanitize_text_field(isset($_SERVER['REQUEST_URI'])) ? esc_url(sanitize_text_field(wp_unslash($_SERVER['REQUEST_URI'] . '&type=edit-template&id=9'))) : ''; ?>" class="bookingor-btn bookingor-btn-primary bookingor-flex justify-content-center"><span><?php esc_html_e("Customize", "bookingor"); ?></span></a>
                                </div>
                            </div>
                            <div class="bookingor-col-12 bookingor-col-sm-6 bookingor-col-md-6 bookingor-col-lg-4 bookingor-col-xl-3 bookingor-col-xxl-3">
                                <div class="card">
                                    <img class="card-img-top" src="<?php echo  esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . 'assets/images/design-staff.jpg'); ?>" alt="">
                                    <div class="card-body">
                                        <h5 class="card-title"><?php esc_html_e("Staff Starter", "bookingor"); ?></h5>
                                        <p class="card-text"><?php esc_html_e("This template is focused on staff, allowing users to browse and select staff members in a sleek interface.", "bookingor"); ?></p>
                                        <span class="btn btn-primary"><?php esc_html_e("[BOOKINGOR_START_STAFF]", "bookingor"); ?></span>
                                    </div>
                                    <a href="<?php echo sanitize_text_field(isset($_SERVER['REQUEST_URI'])) ? esc_url(sanitize_text_field(wp_unslash($_SERVER['REQUEST_URI'] . '&type=edit-template&id=10'))) : ''; ?>" class="bookingor-btn bookingor-btn-primary bookingor-flex justify-content-center"><span><?php esc_html_e("Customize", "bookingor"); ?></span></a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>