<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
use Bookly\Lib;
use Bookly\Lib\Utils\Common;
use Bookly\Frontend\Modules\Booking\Proxy;
use Bookly\Frontend\Components;

/** @var \Bookly\Lib\UserBookingData $userData */
echo $progress_tracker;
?>

<div class="bookly-box"><?php echo $info_text ?></div>
<?php if ( $info_text_guest ) : ?>
    <div class="bookly-box bookly-js-guest"><?php echo $info_text_guest ?></div>
<?php endif ?>
<?php if ( ! get_current_user_id() && ! $userData->getFacebookId() && ( Lib\Config::showLoginButton() || Lib\Proxy\Pro::showFacebookLoginButton() ) ) : ?>
<div class="bookly-box bookly-guest bookly-js-guest">
    <?php if ( Lib\Config::showLoginButton() ) : ?>
        <button class="bookly-btn bookly-js-login-show ladda-button"><?php echo Common::getTranslatedOption( 'bookly_l10n_step_details_button_login' ) ?></button>
    <?php endif ?>
    <?php Proxy\Pro::renderFacebookButton() ?>
</div>
<?php endif ?>

<div class="bookly-details-step">
    <?php if ( Lib\Config::showFirstLastName() ) : ?>
    <div class="bookly-box bookly-table">
        <div class="bookly-form-group">
            <label><?php echo Common::getTranslatedOption( 'bookly_l10n_label_first_name' ) ?></label>
            <div>
                <input class="bookly-js-first-name" type="text" value="<?php echo esc_attr( $userData->getFirstName() ) ?>"/>
            </div>
            <div class="bookly-js-first-name-error bookly-label-error"></div>
        </div>
        <div class="bookly-form-group">
            <label><?php echo Common::getTranslatedOption( 'bookly_l10n_label_last_name' ) ?></label>
            <div>
                <input class="bookly-js-last-name" type="text" value="<?php echo esc_attr( $userData->getLastName() ) ?>"/>
            </div>
            <div class="bookly-js-last-name-error bookly-label-error"></div>
        </div>
    </div>

    <?php endif ?>
    <div class="bookly-box bookly-table">
        <?php if ( ! Lib\Config::showFirstLastName() ) : ?>
        <div class="bookly-form-group">
            <label><?php echo Common::getTranslatedOption( 'bookly_l10n_label_name' ) ?></label>
            <div>
                <input class="bookly-js-full-name" type="text" value="<?php echo esc_attr( $userData->getFullName() ) ?>"/>
            </div>
            <div class="bookly-js-full-name-error bookly-label-error"></div>
        </div>
        <?php endif ?>
        <div class="bookly-form-group">
            <label><?php echo Common::getTranslatedOption( 'bookly_l10n_label_phone' ) ?></label>
            <div>
                <input class="bookly-js-user-phone-input<?php if ( get_option( 'bookly_cst_phone_default_country' ) != 'disabled' ) : ?> bookly-user-phone<?php endif ?>" value="<?php echo esc_attr( $userData->getPhone() ) ?>" type="text" />
            </div>
            <div class="bookly-js-user-phone-error bookly-label-error"></div>
        </div>
        <?php if ( Lib\Config::showFirstLastName() || ( ! Lib\Config::showFirstLastName() && ! Lib\Config::showEmailConfirm() ) ) : ?>
            <?php $self::renderTemplate( '_details_email', compact('userData') ) ?>
        <?php endif ?>
        <?php if ( Lib\Config::showFirstLastName() && Lib\Config::showEmailConfirm() ) : ?>
            <?php $self::renderTemplate( '_details_email_confirm', compact('userData') ) ?>
        <?php endif ?>
    </div>
    <?php if ( ! Lib\Config::showFirstLastName() && Lib\Config::showEmailConfirm() ) : ?>
        <div class="bookly-box bookly-table">
            <?php $self::renderTemplate( '_details_email', compact( 'userData' ) ) ?>
            <?php $self::renderTemplate( '_details_email_confirm', compact( 'userData' ) ) ?>
        </div>
    <?php endif ?>

    <?php Proxy\Pro::renderDetailsAddress( $userData ) ?>
    <?php Proxy\Pro::renderDetailsBirthday( $userData ) ?>

    <?php Proxy\CustomerInformation::renderDetailsStep( $userData ) ?>
    <?php Proxy\Shared::renderCustomFieldsOnDetailsStep( $userData ) ?>
    <?php if ( Lib\Config::showNotes() ): ?>
        <div class="bookly-box">
            <div class="bookly-form-group">
                <label><?php echo Common::getTranslatedOption( 'bookly_l10n_label_notes' ) ?></label>
                <div>
                    <textarea class="bookly-js-user-notes" rows="3"><?php echo esc_html( $userData->getNotes() ) ?></textarea>
                </div>
            </div>
        </div>
    <?php endif ?>
</div>

<?php Proxy\RecurringAppointments::renderInfoMessage( $userData ) ?>

<div class="bookly-box bookly-nav-steps">
    <?php if ( $show_back_btn ) : ?>
    <button class="bookly-back-step bookly-js-back-step bookly-btn ladda-button" data-style="zoom-in" data-spinner-size="40">
        <span class="ladda-label"><?php echo Common::getTranslatedOption( 'bookly_l10n_button_back' ) ?></span>
    </button>
    <?php endif ?>
    <div class="<?php echo get_option( 'bookly_app_align_buttons_left' ) ? 'bookly-left' : 'bookly-right' ?>">
        <button class="bookly-next-step bookly-js-next-step bookly-btn ladda-button" data-style="zoom-in" data-spinner-size="40">
            <span class="ladda-label"><?php echo Common::getTranslatedOption( 'bookly_l10n_step_details_button_next' ) ?></span>
        </button>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function($) {
     /* Service name */   
     var bookly_service_name=$('.bookly-service-dis').html();
     bookly_service_name=bookly_service_name.replace("<b>", "").replace("</b>", "").split(",")[0];
     $('.bookly-service-dis').html('<b>'+bookly_service_name+'</b>');
     
     /* staff name */
     var bookly_staff_name=$('.bookly-staffname-dis').html();
     bookly_staff_name=bookly_staff_name.replace("<b>", "").replace("</b>", "").split(",")[0];
     $('.bookly-staffname-dis').html('<b>'+bookly_staff_name+'</b>');

     /* Price */
     var bookly_price=$('.bookly-price-dis').html();
     bookly_price=bookly_price.replace("<b>", "").replace("</b>", "").split(",")[0];
     $('.bookly-price-dis').html('<b>'+bookly_price+'</b>');
 });
</script>