<?php

use Bookingor\Routes\AdminRoute;
use Bookingor\Helper\HelperControl;
// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}
?>

<div id="bookingor-wizard-container">
    <!-- Stepper Navigation -->
    <div class="wizard-steps">
        <div class="wizard-step-item active" data-step="0">
            <div class="wizard-step-circle">1</div>
            <div class="wizard-step-label"><?php esc_html_e('Business', 'bookingor'); ?></div>
        </div>
        <div class="wizard-step-item" data-step="1">
            <div class="wizard-step-circle">2</div>
            <div class="wizard-step-label"><?php esc_html_e('Hours', 'bookingor'); ?></div>
        </div>
        <div class="wizard-step-item" data-step="2">
            <div class="wizard-step-circle">3</div>
            <div class="wizard-step-label"><?php esc_html_e('Demo Import', 'bookingor'); ?></div>
        </div>
        <div class="wizard-step-item manual-setup-step" data-step="3" style="display: none;">
            <div class="wizard-step-circle">4</div>
            <div class="wizard-step-label"><?php esc_html_e('Service', 'bookingor'); ?></div>
        </div>
        <div class="wizard-step-item manual-setup-step" data-step="4" style="display: none;">
            <div class="wizard-step-circle">5</div>
            <div class="wizard-step-label"><?php esc_html_e('Staff', 'bookingor'); ?></div>
        </div>
        <div class="wizard-step-item" data-step="5">
            <div class="wizard-step-circle">4</div>
            <div class="wizard-step-label"><?php esc_html_e('Booking', 'bookingor'); ?></div>
        </div>
        <div class="wizard-step-item" data-step="6">
            <div class="wizard-step-circle">5</div>
            <div class="wizard-step-label"><?php esc_html_e('Finish', 'bookingor'); ?></div>
        </div>
    </div>

    <!-- Wizard Content -->
    <div class="wizard-content">
        <form id="bookingor-custom-wizard-form bookingor">

            <!-- Step 1: Business Details -->
            <div class="step-pane active bookingor" id="step-0">
                <h3 class="mb-4"><?php esc_html_e('Initial Setup', 'bookingor'); ?></h3>
                <p class="text-muted mb-4">
                    <?php esc_html_e('Welcome! Let\'s get your business profile set up.', 'bookingor'); ?>
                </p>

                <div class="form-group mb-4">
                    <label for="wizard_business_name"><?php esc_html_e('Business Name', 'bookingor'); ?> <span
                            class="text-danger">*</span></label>
                    <input type="text" id="wizard_business_name" name="business_name" class="form-control"
                        value="<?php echo esc_attr(get_option('bookingor_business_name')); ?>"
                        placeholder="<?php esc_attr_e('Your Business Name', 'bookingor'); ?>" required>
                    <div class="invalid-feedback">
                        <?php esc_html_e('Please enter your business name.', 'bookingor'); ?>
                    </div>
                </div>

                <div class="form-group mb-4 bookingor-d-flex flex-column">
                    <label for="wizard_business_phone"><?php esc_html_e('Phone Number', 'bookingor'); ?> <span
                            class="text-danger">*</span></label>
                    <input type="text" id="wizard_business_phone" name="business_phone" class="form-control inter-tel"
                        value="<?php echo esc_attr(get_option('bookingor_business_phone')); ?>"
                        placeholder="<?php esc_attr_e('e.g. +1 555 123 4567', 'bookingor'); ?>" required>
                </div>
            </div>

            <!-- Step 2: Working Hours -->
            <div class="step-pane" id="step-1">
                <h3 class="mb-4"><?php esc_html_e('Working Hours', 'bookingor'); ?></h3>
                <p class="text-muted mb-4">
                    <?php esc_html_e('Configure your weekly schedule. Toggle days on/off and set your hours.', 'bookingor'); ?>
                </p>

                <?php
                // Fetch existing hours or create defaults
                $stored_hours = get_option('bookingor_business_hours');
                $json = json_decode($stored_hours);

                $days = ['Monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
                $default_hours = [];

                foreach ($days as $index => $day) {
                    $obj = new stdClass();
                    if ($day === 'saturday' || $day === 'sunday') {
                        $obj->$day = 0; // Closed
                    } else {
                        $obj->$day = ["09:00", "17:00"]; // Open
                        $obj->breaks = [];
                    }
                    $default_hours[] = $obj;
                }

                // Normalization to prevent fatal errors on missing keys or properties
                $normalized_json = [];
                if (empty($json) || !is_array($json)) {
                    $normalized_json = $default_hours;
                } else {
                    foreach ($days as $index => $day) {
                        $found_obj = null;
                        foreach ($json as $stored_obj) {
                            if (is_object($stored_obj) && property_exists($stored_obj, $day)) {
                                $found_obj = clone $stored_obj;
                                break;
                            }
                        }
                        if ($found_obj) {
                            $normalized_json[] = $found_obj;
                        } else {
                            $normalized_json[] = clone $default_hours[$index];
                        }
                    }
                }
                $json = $normalized_json;
                ?>

                <div class="working-hours-container bookingor">
                    <!-- Monday -->
                    <div class="row mb-3 align-items-center">
                        <div class="bookingor-col-md-2">
                            <label class="fw-bold"><?php esc_html_e("Monday", "bookingor"); ?></label>
                        </div>
                        <div class="bookingor-col-md-7 staff-week-day" data-day="Monday">
                            <div class="bookingor-d-flex align-items-center gap-2">
                                <input class="form-control time day-start "
                                    value="<?php echo esc_attr(($json[0]->Monday === 0 || $json[0]->Monday === 1) ? "" : $json[0]->Monday[0]); ?>"
                                    <?php echo ($json[0]->Monday === 0 || $json[0]->Monday === 1) ? 'disabled' : ''; ?>>
                                <span>&mdash;</span>
                                <input class="form-control time day-end"
                                    value="<?php echo esc_attr(($json[0]->Monday === 0 || $json[0]->Monday === 1) ? "" : $json[0]->Monday[1]); ?>"
                                    <?php echo ($json[0]->Monday === 0 || $json[0]->Monday === 1) ? 'disabled' : ''; ?>>
                            </div>
                        </div>
                        <div class="bookingor-col-md-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input removeDay" type="checkbox" role="switch"
                                    value="<?php echo esc_attr(($json[0]->Monday !== 0 && $json[0]->Monday !== 1) ? "1" : "0"); ?>"
                                    <?php echo ($json[0]->Monday !== 0 && $json[0]->Monday !== 1) ? 'checked' : ''; ?>>
                                <label
                                    class="form-check-label"><?php echo ($json[0]->Monday !== 0 && $json[0]->Monday !== 1) ? esc_html__("Available", "bookingor") : esc_html__("Closed", "bookingor"); ?></label>
                            </div>
                        </div>
                    </div>

                    <!-- Tuesday -->
                    <div class="row mb-3 align-items-center">
                        <div class="bookingor-col-md-2">
                            <label class="fw-bold"><?php esc_html_e("Tuesday", "bookingor"); ?></label>
                        </div>
                        <div class="bookingor-col-md-7 staff-week-day" data-day="tuesday">
                            <div class="bookingor-d-flex align-items-center gap-2">
                                <input class="form-control time day-start"
                                    value="<?php echo esc_attr(($json[1]->tuesday === 0 || $json[1]->tuesday === 1) ? "" : $json[1]->tuesday[0]); ?>"
                                    <?php echo ($json[1]->tuesday === 0 || $json[1]->tuesday === 1) ? 'disabled' : ''; ?>>
                                <span>&mdash;</span>
                                <input class="form-control time day-end"
                                    value="<?php echo esc_attr(($json[1]->tuesday === 0 || $json[1]->tuesday === 1) ? "" : $json[1]->tuesday[1]); ?>"
                                    <?php echo ($json[1]->tuesday === 0 || $json[1]->tuesday === 1) ? 'disabled' : ''; ?>>
                            </div>
                        </div>
                        <div class="bookingor-col-md-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input removeDay" type="checkbox" role="switch"
                                    value="<?php echo esc_attr(($json[1]->tuesday !== 0 && $json[1]->tuesday !== 1) ? "1" : "0"); ?>"
                                    <?php echo ($json[1]->tuesday !== 0 && $json[1]->tuesday !== 1) ? 'checked' : ''; ?>>
                                <label
                                    class="form-check-label"><?php echo ($json[1]->tuesday !== 0 && $json[1]->tuesday !== 1) ? esc_html__("Available", "bookingor") : esc_html__("Closed", "bookingor"); ?></label>
                            </div>
                        </div>
                    </div>

                    <!-- Wednesday -->
                    <div class="row mb-3 align-items-center">
                        <div class="bookingor-col-md-2">
                            <label class="fw-bold"><?php esc_html_e("Wednesday", "bookingor"); ?></label>
                        </div>
                        <div class="bookingor-col-md-7 staff-week-day" data-day="wednesday">
                            <div class="bookingor-d-flex align-items-center gap-2">
                                <input class="form-control time day-start"
                                    value="<?php echo esc_attr(($json[2]->wednesday === 0 || $json[2]->wednesday === 1) ? "" : $json[2]->wednesday[0]); ?>"
                                    <?php echo ($json[2]->wednesday === 0 || $json[2]->wednesday === 1) ? 'disabled' : ''; ?>>
                                <span>&mdash;</span>
                                <input class="form-control time day-end"
                                    value="<?php echo esc_attr(($json[2]->wednesday === 0 || $json[2]->wednesday === 1) ? "" : $json[2]->wednesday[1]); ?>"
                                    <?php echo ($json[2]->wednesday === 0 || $json[2]->wednesday === 1) ? 'disabled' : ''; ?>>
                            </div>
                        </div>
                        <div class="bookingor-col-md-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input removeDay" type="checkbox" role="switch"
                                    value="<?php echo esc_attr(($json[2]->wednesday !== 0 && $json[2]->wednesday !== 1) ? "1" : "0"); ?>"
                                    <?php echo ($json[2]->wednesday !== 0 && $json[2]->wednesday !== 1) ? 'checked' : ''; ?>>
                                <label
                                    class="form-check-label"><?php echo ($json[2]->wednesday !== 0 && $json[2]->wednesday !== 1) ? esc_html__("Available", "bookingor") : esc_html__("Closed", "bookingor"); ?></label>
                            </div>
                        </div>
                    </div>

                    <!-- Thursday -->
                    <div class="row mb-3 align-items-center">
                        <div class="bookingor-col-md-2">
                            <label class="fw-bold"><?php esc_html_e("Thursday", "bookingor"); ?></label>
                        </div>
                        <div class="bookingor-col-md-7 staff-week-day" data-day="thursday">
                            <div class="bookingor-d-flex align-items-center gap-2">
                                <input class="form-control time day-start"
                                    value="<?php echo esc_attr(($json[3]->thursday === 0 || $json[3]->thursday === 1) ? "" : $json[3]->thursday[0]); ?>"
                                    <?php echo ($json[3]->thursday === 0 || $json[3]->thursday === 1) ? 'disabled' : ''; ?>>
                                <span>&mdash;</span>
                                <input class="form-control time day-end"
                                    value="<?php echo esc_attr(($json[3]->thursday === 0 || $json[3]->thursday === 1) ? "" : $json[3]->thursday[1]); ?>"
                                    <?php echo ($json[3]->thursday === 0 || $json[3]->thursday === 1) ? 'disabled' : ''; ?>>
                            </div>
                        </div>
                        <div class="bookingor-col-md-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input removeDay" type="checkbox" role="switch"
                                    value="<?php echo esc_attr(($json[3]->thursday !== 0 && $json[3]->thursday !== 1) ? "1" : "0"); ?>"
                                    <?php echo ($json[3]->thursday !== 0 && $json[3]->thursday !== 1) ? 'checked' : ''; ?>>
                                <label
                                    class="form-check-label"><?php echo ($json[3]->thursday !== 0 && $json[3]->thursday !== 1) ? esc_html__("Available", "bookingor") : esc_html__("Closed", "bookingor"); ?></label>
                            </div>
                        </div>
                    </div>

                    <!-- Friday -->
                    <div class="row mb-3 align-items-center">
                        <div class="bookingor-col-md-2">
                            <label class="fw-bold"><?php esc_html_e("Friday", "bookingor"); ?></label>
                        </div>
                        <div class="bookingor-col-md-7 staff-week-day" data-day="friday">
                            <div class="bookingor-d-flex align-items-center gap-2">
                                <input class="form-control time day-start"
                                    value="<?php echo esc_attr(($json[4]->friday === 0 || $json[4]->friday === 1) ? "" : $json[4]->friday[0]); ?>"
                                    <?php echo ($json[4]->friday === 0 || $json[4]->friday === 1) ? 'disabled' : ''; ?>>
                                <span>&mdash;</span>
                                <input class="form-control time day-end"
                                    value="<?php echo esc_attr(($json[4]->friday === 0 || $json[4]->friday === 1) ? "" : $json[4]->friday[1]); ?>"
                                    <?php echo ($json[4]->friday === 0 || $json[4]->friday === 1) ? 'disabled' : ''; ?>>
                            </div>
                        </div>
                        <div class="bookingor-col-md-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input removeDay" type="checkbox" role="switch"
                                    value="<?php echo esc_attr(($json[4]->friday !== 0 && $json[4]->friday !== 1) ? "1" : "0"); ?>"
                                    <?php echo ($json[4]->friday !== 0 && $json[4]->friday !== 1) ? 'checked' : ''; ?>>
                                <label
                                    class="form-check-label"><?php echo ($json[4]->friday !== 0 && $json[4]->friday !== 1) ? esc_html__("Available", "bookingor") : esc_html__("Closed", "bookingor"); ?></label>
                            </div>
                        </div>
                    </div>

                    <!-- Saturday -->
                    <div class="row mb-3 align-items-center">
                        <div class="bookingor-col-md-2">
                            <label class="fw-bold"><?php esc_html_e("Saturday", "bookingor"); ?></label>
                        </div>
                        <div class="bookingor-col-md-7 staff-week-day" data-day="saturday">
                            <div class="bookingor-d-flex align-items-center gap-2">
                                <input class="form-control time day-start"
                                    value="<?php echo esc_attr(($json[5]->saturday === 0 || $json[5]->saturday === 1) ? "" : $json[5]->saturday[0]); ?>"
                                    <?php echo ($json[5]->saturday === 0 || $json[5]->saturday === 1) ? 'disabled' : ''; ?>>
                                <span>&mdash;</span>
                                <input class="form-control time day-end"
                                    value="<?php echo esc_attr(($json[5]->saturday === 0 || $json[5]->saturday === 1) ? "" : $json[5]->saturday[1]); ?>"
                                    <?php echo ($json[5]->saturday === 0 || $json[5]->saturday === 1) ? 'disabled' : ''; ?>>
                            </div>
                        </div>
                        <div class="bookingor-col-md-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input removeDay" type="checkbox" role="switch"
                                    value="<?php echo esc_attr(($json[5]->saturday !== 0 && $json[5]->saturday !== 1) ? "1" : "0"); ?>"
                                    <?php echo ($json[5]->saturday !== 0 && $json[5]->saturday !== 1) ? 'checked' : ''; ?>>
                                <label
                                    class="form-check-label"><?php echo ($json[5]->saturday !== 0 && $json[5]->saturday !== 1) ? esc_html__("Available", "bookingor") : esc_html__("Closed", "bookingor"); ?></label>
                            </div>
                        </div>
                    </div>

                    <!-- Sunday -->
                    <div class="row mb-3 align-items-center">
                        <div class="bookingor-col-md-2">
                            <label class="fw-bold"><?php esc_html_e("Sunday", "bookingor"); ?></label>
                        </div>
                        <div class="bookingor-col-md-7 staff-week-day" data-day="sunday">
                            <div class="bookingor-d-flex align-items-center gap-2">
                                <input class="form-control time day-start"
                                    value="<?php echo esc_attr(($json[6]->sunday === 0 || $json[6]->sunday === 1) ? "" : $json[6]->sunday[0]); ?>"
                                    <?php echo ($json[6]->sunday === 0 || $json[6]->sunday === 1) ? 'disabled' : ''; ?>>
                                <span>&mdash;</span>
                                <input class="form-control time day-end"
                                    value="<?php echo esc_attr(($json[6]->sunday === 0 || $json[6]->sunday === 1) ? "" : $json[6]->sunday[1]); ?>"
                                    <?php echo ($json[6]->sunday === 0 || $json[6]->sunday === 1) ? 'disabled' : ''; ?>>
                            </div>
                        </div>
                        <div class="bookingor-col-md-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input removeDay" type="checkbox" role="switch"
                                    value="<?php echo esc_attr(($json[6]->sunday !== 0 && $json[6]->sunday !== 1) ? "1" : "0"); ?>"
                                    <?php echo ($json[6]->sunday !== 0 && $json[6]->sunday !== 1) ? 'checked' : ''; ?>>
                                <label
                                    class="form-check-label"><?php echo ($json[6]->sunday !== 0 && $json[6]->sunday !== 1) ? esc_html__("Available", "bookingor") : esc_html__("Closed", "bookingor"); ?></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 3: Demo Import -->
            <div class="step-pane bookingor" id="step-2">
                <h3 class="mb-4"><?php esc_html_e('Choose a Demo Import Data', 'bookingor'); ?></h3>
                <p class="text-muted mb-4">
                    <?php esc_html_e('Select a demo to import tailored services and settings.', 'bookingor'); ?>
                </p>

                <div class="row g-4 justify-content-center">
                    <!-- Spa Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="spa"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-buddicons-buddypress-logo mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #e83e8c;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Spa & Wellness', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">


                                    <?php esc_html_e('Massage, facial, and body treatments.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="spa"
                                        id="demo_spa">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Medical Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="medical"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-heart mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #dc3545;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Medical Clinic', 'bookingor'); ?>
                                </h5>

                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Doctor visits, checkups, and consultations.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="medical"
                                        id="demo_medical">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Salon Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="salon"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-admin-appearance mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #fd7e14;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Beauty Salon', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Haircuts, styling, and coloring services.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="salon"
                                        id="demo_salon">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Barber Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="barber"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-businessman mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #6c757d;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Barber Shop', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Haircuts, beard trims, and grooming.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="barber"
                                        id="demo_barber">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Lawyer Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="lawyer"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-media-document mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #0d6efd;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Law Firm', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Legal consultation, contract review, and representation.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="lawyer"
                                        id="demo_lawyer">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Counseling Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="counseling"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-admin-users mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #198754;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Counseling', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Therapy sessions, support groups, and mental health.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="counseling"
                                        id="demo_counseling">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tour & Travels Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="tour"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-palmtree mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #20c997;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Tour & Travels', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('City tours, adventure trips, and local guides.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="tour"
                                        id="demo_tour">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Gym & Fitness Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="gym"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-heart mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #ffc107;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Gym & Fitness', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Yoga, personal training, and fitness classes.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="gym"
                                        id="demo_gym">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Cleaning Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="cleaning"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-admin-home mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #007bff;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Cleaning Services', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Residential, commercial, and deep cleaning.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="cleaning"
                                        id="demo_cleaning">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Yoga Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="yoga"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-universal-access-alt mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #6f42c1;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Yoga & Mindfulness', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Hatha yoga, vinyasa flow, and meditation.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="yoga"
                                        id="demo_yoga">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pet Grooming Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="pet"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-pets mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #8d6e63;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Pet Grooming', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Dog and cat grooming, baths, and styling.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="pet"
                                        id="demo_pet">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Photography Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="photography"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-camera mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #343a40;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Photography', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Portraits, events, and commercial photography.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="photography"
                                        id="demo_photography">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Auto Service Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="auto"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-performance mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #e74c3c;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Auto Service', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Maintenance, repairs, and full car detailing.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="auto"
                                        id="demo_auto">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Education Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="education"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-welcome-learn-more mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #2980b9;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Education', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Private tutoring, workshops, and art classes.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="education"
                                        id="demo_education">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Consulting Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="consulting"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-chart-bar mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #2c3e50;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Consulting', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Business strategy, financial planning, and IT support.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="consulting"
                                        id="demo_consulting">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 1:1 Meeting Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="meeting"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-groups mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #9c27b0;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('1:1 Meeting', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Personal consultations, one-on-one sessions, and private interviews.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="meeting"
                                        id="demo_meeting">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Product Meeting Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="product_meeting"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-cart mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #20c997;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Product Meeting', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Product demos, onboarding sessions, and client walkthroughs.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="product_meeting"
                                        id="demo_product_meeting">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Car Rental Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="car_rental"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-car mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #17a2b8;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Car Rental', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Renting cars, SUVs, and luxury vehicles by the day.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="car_rental"
                                        id="demo_car_rental">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Hotel & Stays Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="hotel"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-building mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #fd7e14;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Hotel & Stays', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Room, cabin, and campsite bookings by the day/night.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="hotel"
                                        id="demo_hotel">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Home Rental Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="home_rental"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-admin-home mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #28a745;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Home Rental', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Apartments, villas, and vacation rentals by the day/night.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="home_rental"
                                        id="demo_home_rental">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Equipment Rental Demo -->
                    <div class="bookingor-col-md-4">
                        <div class="card demo-card" data-demo="equipment_rental"
                            style="cursor: pointer; transition: all 0.3s;">
                            <div class="card-body text-center p-4">
                                <span class="dashicons dashicons-admin-tools mb-3"
                                    style="font-size: 40px; width: 40px; height: 40px; color: #6f42c1;"></span>
                                <h5 class="card-title fw-bold"><?php esc_html_e('Equipment Rental', 'bookingor'); ?>
                                </h5>
                                <p class="card-text text-muted small">
                                    <?php esc_html_e('Camera gear, party items, and power tool rentals by the day.', 'bookingor'); ?>
                                </p>
                                <div class="form-check mt-3 d-flex justify-content-center">
                                    <input class="form-check-input" type="radio" name="demo_template" value="equipment_rental"
                                        id="demo_equipment_rental">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 4: Manual Service Setup -->
            <div class="step-pane bookingor" id="step-3">
                <h3 class="mb-4"><?php esc_html_e('Setup Your First Service', 'bookingor'); ?></h3>
                <p class="text-muted mb-4">
                    <?php esc_html_e('Create a category and a service to get started.', 'bookingor'); ?>
                </p>

                <div class="form-group mb-4">
                    <label for="wizard_category_name"><?php esc_html_e('Category Name', 'bookingor'); ?> <span
                            class="text-danger">*</span></label>
                    <input type="text" id="wizard_category_name" name="category_name" class="form-control"
                        placeholder="<?php esc_attr_e('e.g. Wellness, Haircut', 'bookingor'); ?>">
                </div>

                <div class="form-group mb-4">
                    <label for="wizard_service_name"><?php esc_html_e('Service Name', 'bookingor'); ?> <span
                            class="text-danger">*</span></label>
                    <input type="text" id="wizard_service_name" name="service_name" class="form-control"
                        placeholder="<?php esc_attr_e('e.g. Full Body Massage', 'bookingor'); ?>">
                </div>



                <div class="row">
                    <div class="bookingor-col-md-6">
                        <div class="form-group mb-4">
                            <label for="wizard_service_cost"><?php esc_html_e('Service Cost', 'bookingor'); ?> <span
                                    class="text-danger">*</span></label>
                            <input type="number" id="wizard_service_cost" name="service_cost" class="form-control"
                                placeholder="0.00" step="0.01">
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-8 bookingor-col-lg-8 bookingor-col-xl-8">
                        <label for="wizard_service_cost"><?php esc_html_e('Service Duration', 'bookingor'); ?> <span
                                class="text-danger">*</span></label>
                        <div class="row bookingor-g-0" id="adding-multiple-duration">
                            <div class="bookingor-col-12 bookingor-col-sm-12 bookingor-col-md-10 bookingor-col-lg-9 bookingor-col-xl-9">
                                <div class="row ">
                                    <div
                                        class="bookingor-col-12 bookingor-col-sm-4 bookingor-col-md-4 bookingor-col-lg-3 bookingor-col-xl-3 bookingor-g-0 mb-2">
                                        <div class="form-control-wrap">
                                            <div class="input-group add-duration bookingor-gap-2">
                                                <input type="number" class="form-control align-self-start"
                                                    id="wizard_service_duration" name="service_duration" value=""
                                                    placeholder="00:00" />
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="bookingor-col-12 bookingor-col-sm-8 bookingor-col-md-8 bookingor-col-lg-6 bookingor-col-xl-6">
                                        <div class="form-control-select" id="slot-change"
                                            data-slot-change="<?php echo esc_attr(get_option('bpro_settings_default_time_slot')); ?>">
                                            <select class="form-control change-duration"
                                                id="wizard_service_duration_type" name="duration_type">
                                                <?php
                                                foreach (HelperControl::$service_duration_select  as $key => $value_select) {
                                                ?>
                                                    <option value="<?php echo esc_attr(esc_attr($key)); ?>"><?php echo esc_html($value_select); ?></option>
                                                <?php
                                                } ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <span
                                    class="info-detail pd-b-1 price-tab-info"><?php esc_html_e("Add time in minutes or hours", "bookingor"); ?></span>
                            </div>
                        </div>
                        <section class="section-helper box-shadow-z4 service-duration-helper">
                            <div class="hover-bridge"></div>
                            <header>
                                <h6>
                                    <span class="helper-head
                                    ing"><?php esc_html_e("Pick Service Duration", "bookingor"); ?></span>
                                </h6>
                            </header>
                            <div class="helper-text">
                                <p class="co-text-medium">
                                    <?php esc_html_e("Set Duration by Minutes, Hours, Daily, Weekly", "bookingor"); ?>
                                </p>
                            </div>
                        </section>
                    </div>
                </div>
                <div class="form-group mb-4">
                    <label for="wizard_location_title">
                        <?php esc_html_e('Location Title', 'bookingor'); ?> <span class="text-danger">*</span>
                    </label>
                    <input type="text" id="wizard_location_title" name="location_title" class="form-control"
                        placeholder="<?php esc_attr_e('Main Branch, Downtown Office etc.', 'bookingor'); ?>">
                </div>

                <div class="form-group mb-4">
                    <label for="wizard_location_address">
                        <?php esc_html_e('Location Address', 'bookingor'); ?>
                    </label>
                    <input type="text" id="wizard_location_address" name="location_address" class="form-control"
                        placeholder="<?php esc_attr_e('123 Main St, City, Country', 'bookingor'); ?>">
                </div>
            </div>

            <!-- Step 5: Manual Staff Setup -->
            <div class="step-pane bookingor" id="step-4">
                <h3 class="mb-4"><?php esc_html_e('Add Your First Staff Member', 'bookingor'); ?></h3>
                <p class="text-muted mb-4">
                    <?php esc_html_e('Who will be providing the services?', 'bookingor'); ?>
                </p>

                <div class="row">
                    <div class="bookingor-col-md-6">
                        <div class="form-group mb-4">
                            <label for="wizard_staff_fname"><?php esc_html_e('First Name', 'bookingor'); ?> <span
                                    class="text-danger">*</span></label>
                            <input type="text" id="wizard_staff_fname" name="staff_fname" class="form-control"
                                placeholder="<?php esc_attr_e('John', 'bookingor'); ?>">
                        </div>
                    </div>
                    <div class="bookingor-col-md-6">
                        <div class="form-group mb-4">
                            <label for="wizard_staff_lname"><?php esc_html_e('Last Name', 'bookingor'); ?> <span
                                    class="text-danger">*</span></label>
                            <input type="text" id="wizard_staff_lname" name="staff_lname" class="form-control"
                                placeholder="<?php esc_attr_e('Doe', 'bookingor'); ?>">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="bookingor-col-md-6">
                        <div class="form-group mb-4">
                            <label for="wizard_staff_email"><?php esc_html_e('Email', 'bookingor'); ?> <span
                                    class="text-danger">*</span></label>
                            <input type="email" id="wizard_staff_email" name="staff_email" class="form-control"
                                placeholder="<?php esc_attr_e('contact@example.com', 'bookingor'); ?>">
                        </div>
                    </div>
                    <div class="bookingor-col-md-6">
                        <div class="form-group mb-4">
                            <label for="wizard_staff_phone"><?php esc_html_e('Phone', 'bookingor'); ?> <span
                                    class="text-danger">*</span></label>
                            <input type="text" id="wizard_staff_phone" name="staff_phone" class="form-control"
                                placeholder="<?php esc_attr_e('1234567890', 'bookingor'); ?>">
                        </div>
                    </div>
                </div>
            </div>



            <!-- Step 7: Booking Page Selection -->
            <div class="step-pane bookingor" id="step-5">
                <h3 class="mb-4"><?php esc_html_e('Choose Booking Page Design', 'bookingor'); ?></h3>
                <p class="text-muted mb-4">
                    <?php esc_html_e('Select one of the 6 booking designs for your appointment page.', 'bookingor'); ?>
                </p>

                <div class="row g-4 justify-content-center">
                    <?php
                    $designs = [
                        ['id' => 1, 'name' => 'Design 1', 'shortcode' => '[BOOKINGOR_DESIGN_1]', 'description' => "3 Cloumn Booking "],
                        ['id' => 2, 'name' => 'Design 2', 'shortcode' => '[BOOKINGOR_DESIGN_2]', 'description' => "2 Column Booking"],
                        ['id' => 3, 'name' => 'Design 3', 'shortcode' => '[BOOKINGOR_DESIGN_3]', 'description' => "Sidebar Step by Step Booking"],
                        ['id' => 4, 'name' => 'Design 4', 'shortcode' => '[BOOKINGOR_DESIGN_4]', 'description' => "Horizondal Progress Bar Booking"],
                        ['id' => 5, 'name' => 'Design 5', 'shortcode' => '[BOOKINGOR_DESIGN_5]', 'description' => "Slider Calender and select booking"],
                        ['id' => 6, 'name' => 'Design 6', 'shortcode' => '[BOOKINGOR_DESIGN_6 service="" staff="" location=""]', 'description' => "Single Booking"],
                    ];
                    foreach ($designs as $design): ?>
                        <div class="bookingor-col-md-4 ">
                            <div class="card design-card p-1" data-design="<?php echo esc_attr($design['id']); ?>"
                                data-shortcode="<?php echo esc_attr($design['shortcode']); ?>"
                                style="cursor: pointer; transition: all 0.3s; border: 1px solid #dee2e6;">
                                <div class="card-body text-center p-1">
                                    <div class="mb-3">
                                        <img src="<?php echo esc_url(plugins_url('../../assets/images/design-' . $design['id'] . '.jpg', __FILE__)); ?>"
                                            alt="<?php echo esc_attr($design['name']); ?>"
                                            style="max-width: 100%; height: auto; border-radius: 4px;">
                                    </div>
                                    <h5 class="card-title fw-bold"><?php echo esc_html($design['name']); ?></h5>
                                    <p class="card-text text-muted small"><?php echo esc_html($design['shortcode']); ?></p>
                                    <p class="card-text text-muted small"><?php echo esc_html($design['description']); ?></p>
                                    <div class="form-check mt-3 d-flex justify-content-center">
                                        <input class="form-check-input" type="radio" name="booking_design"
                                            value="<?php echo esc_attr($design['id']); ?>"
                                            id="design_<?php echo esc_attr($design['id']); ?>">
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- Step 8: Finish -->
            <div class="step-pane bookingor" id="step-6">
                <div class="text-center py-4">
                    <div class="mb-4">
                        <span class="dashicons dashicons-yes-alt"
                            style="font-size: 64px; width: 64px; height: 64px; color: #198754;"></span>
                    </div>
                    <h3 class="mb-3"><?php esc_html_e('Initial Setup Complete!', 'bookingor'); ?></h3>


                    <div id="created-pages-links" class="mt-4">
                        <h4 class="mb-3 text-success"><?php esc_html_e('Your Pages are Ready!', 'bookingor'); ?>
                        </h4>
                        <div class="d-flex flex-wrap justify-content-center gap-3 mb-5">
                            <a href="#" id="link-booking-page" class="btn btn-outline-primary" target="_blank">
                                <span
                                    class="dashicons dashicons-calendar-alt me-2"></span><?php esc_html_e('Booking Page', 'bookingor'); ?>
                            </a>
                        </div>

                        <a href="<?php echo admin_url('admin.php?page=bookingor'); ?>" id="btn-finish-setup"
                            class="btn btn-success btn-lg px-5 py-3 mt-3">
                            <?php esc_html_e('Go to Admin Dashboard', 'bookingor'); ?> <span
                                class="dashicons dashicons-arrow-right-alt"
                                style="line-height: 1.5; margin-left: 5px;"></span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Footer Navigation -->
            <div class="wizard-footer" id="wizard-footer-nav">
                <button type="button" class="btn btn-wizard btn-wizard-prev" id="btn-prev" style="visibility: hidden;">
                    <?php esc_html_e('Previous', 'bookingor'); ?>
                </button>
                <div class="ms-auto">
                    <button type="button" class="btn btn-wizard btn-wizard-skip me-2" id="btn-skip"
                        style="display: none; background: transparent; border: 1px solid #ced4da; color: #6c757d;">
                        <?php esc_html_e('Skip', 'bookingor'); ?>
                    </button>
                    <button type="button" class="btn btn-wizard btn-wizard-next" id="btn-next">
                        <?php esc_html_e('Next Step', 'bookingor'); ?>
                    </button>
                </div>
            </div>

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