<?php

if ( ! defined( 'ABSPATH' ) ) { exit;
}
// $portal_data is set by YATOON_Staff_Portal::render_shortcode()
if ( ! isset( $portal_data ) ) { $portal_data = array();
}
$pin_length = in_array( (int) get_option( 'yatoon_staff_pin_length', 6 ), array( 4, 6 ), true ) ? (int) get_option( 'yatoon_staff_pin_length', 6 ) : 6;
$staff_portal_path = wp_parse_url( get_permalink(), PHP_URL_PATH );
$staff_portal_scope = trailingslashit( $staff_portal_path ? $staff_portal_path : '/' );
?>
<div class="yatoon-staff-portal-page" lang="<?php echo esc_attr( get_bloginfo( 'language' ) ); ?>">

<div class="ysp-install-banner" id="ysp-install-banner">
    <span class="ysp-install-banner-icon" aria-hidden="true">📲</span>
    <span><?php esc_html_e( 'Add this to your Home Screen — faster to open, works with a spotty signal, no browser bar in the way.', 'yatoon-booking-system' ); ?></span>
    <button type="button" data-install-now><?php esc_html_e( 'Install', 'yatoon-booking-system' ); ?></button>
    <button type="button" class="ysp-install-dismiss" data-install-dismiss aria-label="<?php echo esc_attr__( 'Dismiss', 'yatoon-booking-system' ); ?>"><?php esc_html_e( '&times;', 'yatoon-booking-system' ); ?></button>
</div>

<div id="ysp-app">

    <div class="ysp-screen active" id="ysp-login-screen">
        <?php
        $_ysp_logo = get_option( 'yatoon_business_logo' );
        if ( $_ysp_logo ) :
        ?>
        <div class="ysp-login-logo" style="background:none;box-shadow:none;padding:0;">
            <img src="<?php echo esc_url( $_ysp_logo ); ?>"
                 alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>"
                 style="width:64px;height:64px;object-fit:contain;border-radius:16px;">
        </div>
        <?php else : ?>
        <div class="ysp-login-logo">Y</div>
        <?php endif; ?>
        <div class="ysp-login-title"><?php echo esc_html( get_option( 'yatoon_business_name', get_bloginfo( 'name' ) ) ); ?></div>
        <div class="ysp-login-sub">Staff Portal - Enter your <?php echo esc_html( $pin_length ); ?>-digit PIN</div>

        <form class="ysp-login-form" id="ysp-login-form" autocomplete="off">
            <div class="ysp-pin-display" id="ysp-pin-display">
                <?php for ( $i = 0; $i < $pin_length; $i++ ) : ?>
                <div class="ysp-pin-dot" data-index="<?php echo esc_attr( $i ); ?>"></div>
                <?php endfor; ?>
            </div>
            <div class="ysp-login-error" id="ysp-login-error" role="alert" aria-live="assertive"></div>
            <div class="ysp-numpad" id="ysp-numpad">
                <?php foreach ( range( 1, 9 ) as $n ) : ?>
                <button type="button" class="ysp-numpad-btn" data-digit="<?php echo esc_attr( $n ); ?>"><?php echo esc_html( $n ); ?></button>
                <?php endforeach; ?>
                <button type="button" class="ysp-numpad-btn empty"></button>
                <button type="button" class="ysp-numpad-btn" data-digit="0">0</button>
                <button type="button" class="ysp-numpad-btn backspace" id="ysp-backspace"><?php esc_html_e( 'Del', 'yatoon-booking-system' ); ?></button>
            </div>
        </form>
        <div class="ysp-alt-login" style="margin-top:18px;display:grid;gap:9px;max-width:360px;width:100%;">
            <?php $google_staff_url = class_exists( 'YATOON_Google_Identity' ) ? YATOON_Google_Identity::start_url( 'staff', get_permalink() ) : ''; ?>
            <?php if ( $google_staff_url ) : ?><a class="ysp-google-login" href="<?php echo esc_url( $google_staff_url ); ?>" style="display:block;text-align:center;padding:11px;border:1px solid #d1d5db;border-radius:10px;background:#fff;color:#1f2937;text-decoration:none;font-weight:650;"><?php esc_html_e( 'Continue with Google', 'yatoon-booking-system' ); ?></a><?php endif; ?>
            <?php if ( (array) get_option( 'yatoon_staff_otp_login_ids', array() ) ) : ?>
            <button type="button" id="ysp-show-code-login" class="ysp-google-login" style="padding:11px;border:1px solid #d1d5db;border-radius:10px;background:#fff;font-weight:650;"><?php esc_html_e( 'Sign in with email or phone', 'yatoon-booking-system' ); ?></button>
            <div id="ysp-code-login" hidden style="display:none;gap:8px;"><select id="ysp-code-channel"><option value="email"><?php esc_html_e( 'Email', 'yatoon-booking-system' ); ?></option><?php if ( class_exists( 'YATOON_Twilio' ) && YATOON_Twilio::is_enabled() ) : ?><option value="sms"><?php esc_html_e( 'Text message', 'yatoon-booking-system' ); ?></option><?php endif; ?></select><input id="ysp-code-identifier" type="text" autocomplete="username" placeholder="Email or mobile phone"><button type="button" id="ysp-send-code"><?php esc_html_e( 'Send code', 'yatoon-booking-system' ); ?></button><input id="ysp-login-code" type="text" inputmode="numeric" maxlength="6" autocomplete="one-time-code" placeholder="6-digit code" hidden><button type="button" id="ysp-verify-code" hidden><?php esc_html_e( 'Verify & Sign In', 'yatoon-booking-system' ); ?></button></div>
            <?php endif; ?>
        </div>
    </div>

    <div class="ysp-screen" id="ysp-schedule-screen">
        <div class="ysp-topbar">
            <div>
                <div class="ysp-topbar-name" id="ysp-staff-name">-</div>
                <div class="ysp-topbar-sub" id="ysp-topbar-date"><?php esc_html_e( 'Loading...', 'yatoon-booking-system' ); ?></div>
            </div>
            <div class="ysp-topbar-actions">
                <div class="ysp-topbar-buttons">
                    <button type="button" class="ysp-refresh-btn ysp-icon-button" id="ysp-add-booking-btn" title="<?php esc_attr_e( 'Add appointment', 'yatoon-booking-system' ); ?>" aria-label="<?php esc_attr_e( 'Add appointment', 'yatoon-booking-system' ); ?>" style="display:none;"><span aria-hidden="true">+</span></button>
                    <button type="button" class="ysp-refresh-btn ysp-icon-button" id="ysp-refresh-btn" title="<?php esc_attr_e( 'Refresh', 'yatoon-booking-system' ); ?>" aria-label="<?php esc_attr_e( 'Refresh', 'yatoon-booking-system' ); ?>"><span aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.2 8.3A6.3 6.3 0 105.9 13.8M16.2 8.3V4M16.2 8.3h-4.2" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></span></button>
                    <button type="button" class="ysp-topbar-logout ysp-icon-button" id="ysp-logout-btn" title="<?php esc_attr_e( 'Sign out', 'yatoon-booking-system' ); ?>" aria-label="<?php esc_attr_e( 'Sign out', 'yatoon-booking-system' ); ?>"><span aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 4.5H5.6c-.7 0-1.3.6-1.3 1.3v8.4c0 .7.6 1.3 1.3 1.3H8M13.2 13.5l3-3.5-3-3.5M16 10H8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span></button>
                </div>
                <span id="ysp-last-sync" class="ysp-last-sync"></span>
            </div>
        </div>

        <div class="ysp-calendar-toolbar" id="ysp-calendar-toolbar">
            <div class="ysp-view-switch" role="group" aria-label="<?php echo esc_attr__( 'Calendar view', 'yatoon-booking-system' ); ?>">
                <button type="button" data-calendar-mode="month"><?php esc_html_e( 'Month', 'yatoon-booking-system' ); ?></button>
                <button type="button" data-calendar-mode="day"><?php esc_html_e( 'Day', 'yatoon-booking-system' ); ?></button>
                <button type="button" data-calendar-mode="week"><?php esc_html_e( 'Week', 'yatoon-booking-system' ); ?></button>
                <button type="button" data-calendar-mode="list"><?php esc_html_e( 'List', 'yatoon-booking-system' ); ?></button>
            </div>
            <button type="button" class="ysp-calendar-options" id="ysp-calendar-options-btn" aria-label="<?php echo esc_attr__( 'Calendar and employee filters', 'yatoon-booking-system' ); ?>" title="<?php echo esc_attr__( 'Calendar and employee filters', 'yatoon-booking-system' ); ?>">&#9881;</button>
        </div>

        <div class="ysp-staff-tabs" id="ysp-staff-tabs" style="display:none;"></div>
        <div class="ysp-day-tabs" id="ysp-day-tabs"></div>

        <div class="ysp-schedule" id="ysp-schedule-list">
            <div class="ysp-loading-wrap"><div class="ysp-spinner"></div></div>
        </div>

        <div class="ysp-bottom-nav" id="ysp-bottom-nav">
            <button type="button" class="ysp-bottom-nav-btn active" data-view="today">
                <span class="ysp-bottom-nav-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zm.9 4a.9.9 0 10-1.8 0v4.15c0 .3.14.58.38.76l2.7 2a.9.9 0 101.07-1.45l-2.35-1.75V6z"/></svg></span>
                <span><?php esc_html_e( 'Today', 'yatoon-booking-system' ); ?></span>
            </button>
            <button type="button" class="ysp-bottom-nav-btn" data-view="calendar">
                <span class="ysp-bottom-nav-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 2a1 1 0 011 1v.6h6V3a1 1 0 112 0v.6h.4A2.6 2.6 0 0118 6.2v8.2A2.6 2.6 0 0115.4 17H4.6A2.6 2.6 0 012 14.4V6.2A2.6 2.6 0 014.6 3.6H5V3a1 1 0 011-1zM4.2 8.4v6a.4.4 0 00.4.4h10.8a.4.4 0 00.4-.4v-6H4.2z"/></svg></span>
                <span><?php esc_html_e( 'Calendar', 'yatoon-booking-system' ); ?></span>
            </button>
            <button type="button" class="ysp-bottom-nav-btn" id="ysp-bottom-clients-btn" data-view="clients" style="display:none;">
                <span class="ysp-bottom-nav-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M10 10.3a3.65 3.65 0 100-7.3 3.65 3.65 0 000 7.3zM3.3 17.2c.75-3.65 3.55-5.7 6.7-5.7s5.95 2.05 6.7 5.7a.9.9 0 01-.88 1.08H4.18a.9.9 0 01-.88-1.08z"/></svg></span>
                <span><?php esc_html_e( 'Clients', 'yatoon-booking-system' ); ?></span>
            </button>
            <button type="button" class="ysp-bottom-nav-btn" id="ysp-bottom-checkout-btn" data-view="checkout" style="display:none;">
                <span class="ysp-bottom-nav-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zm.85 3.9a.85.85 0 10-1.7 0v.32c-1.4.28-2.4 1.28-2.4 2.58 0 1.7 1.5 2.25 2.75 2.65l.15.05c1.2.38 1.7.62 1.7 1.15 0 .5-.55.85-1.35.85-.75 0-1.5-.3-1.98-.82a.85.85 0 10-1.24 1.16c.63.68 1.55 1.13 2.57 1.28v.3a.85.85 0 101.7 0v-.3c1.42-.24 2.45-1.24 2.45-2.6 0-1.75-1.55-2.3-2.8-2.7l-.13-.04c-1.18-.37-1.67-.6-1.67-1.1 0-.46.5-.78 1.2-.78.62 0 1.22.24 1.63.65a.85.85 0 101.2-1.2c-.55-.55-1.3-.9-2.1-1.02v-.44z"/></svg></span>
                <span><?php esc_html_e( 'Checkout', 'yatoon-booking-system' ); ?></span>
            </button>
            <button type="button" class="ysp-bottom-nav-btn" id="ysp-bottom-messages-btn" data-view="messages" style="display:none;">
                <span class="ysp-bottom-nav-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 5A2.5 2.5 0 002 7.5v5A2.5 2.5 0 004.5 15h11a2.5 2.5 0 002.5-2.5v-5A2.5 2.5 0 0015.5 5h-11zm.3 1.7l4.55 3.4a1 1 0 001.2 0l4.55-3.4c.6.05 1.1.5 1.2 1.1L10 10.6 3.6 7.8c.1-.6.6-1.05 1.2-1.1z"/></svg></span>
                <span><?php esc_html_e( 'Messages', 'yatoon-booking-system' ); ?></span>
            </button>
            <button type="button" class="ysp-bottom-nav-btn" id="ysp-bottom-more-btn">
                <span class="ysp-bottom-nav-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><circle cx="4.2" cy="10" r="1.7"/><circle cx="10" cy="10" r="1.7"/><circle cx="15.8" cy="10" r="1.7"/></svg></span>
                <span><?php esc_html_e( 'More', 'yatoon-booking-system' ); ?></span>
            </button>
        </div>
    </div>

</div>

<div class="ysp-overlay" id="ysp-detail-overlay">
    <div class="ysp-sheet" id="ysp-detail-sheet">
        <button type="button" class="ysp-sheet-close" data-ysp-close="detail" aria-label="<?php echo esc_attr__( 'Close', 'yatoon-booking-system' ); ?>"><?php esc_html_e( '&times;', 'yatoon-booking-system' ); ?></button>
        <div class="ysp-sheet-handle"></div>
        <div class="ysp-sheet-body" id="ysp-sheet-body"></div>
    </div>
</div>

<div class="ysp-overlay" id="ysp-editor-overlay">
    <div class="ysp-sheet" id="ysp-editor-sheet">
        <button type="button" class="ysp-sheet-close" data-ysp-close="editor" aria-label="<?php echo esc_attr__( 'Close', 'yatoon-booking-system' ); ?>"><?php esc_html_e( '&times;', 'yatoon-booking-system' ); ?></button>
        <div class="ysp-sheet-handle"></div>
        <div class="ysp-sheet-body" id="ysp-editor-body"></div>
    </div>
</div>

<div class="ysp-toast" id="ysp-toast" role="status" aria-live="polite"></div>

<script>
window.yspData = {
    ajaxUrl: <?php echo json_encode( admin_url( 'admin-ajax.php' ) ); ?>,
    nonce:   <?php echo json_encode( wp_create_nonce( 'yatoon_staff_portal_nonce' ) ); ?>,
    bizName: <?php echo json_encode( get_bloginfo( 'name' ) ); ?>,
    swUrl:   <?php echo json_encode( home_url( '/yatoon-staff-sw.js' ) ); ?>,
    swScope: <?php echo json_encode( $staff_portal_scope ); ?>,
    paymentRequestUrl: <?php echo json_encode( get_option( 'yatoon_payment_request_url', '' ) ); ?>,
    squareCheckoutUrl: <?php echo json_encode( get_option( 'yatoon_square_checkout_url', '' ) ); ?>,
    squareAppUrl: <?php echo json_encode( get_option( 'yatoon_square_app_url', '' ) ); ?>,
        squareCheckoutNote: <?php echo wp_json_encode( get_option( 'yatoon_square_checkout_note', __( 'Open Square App and use Tap to Pay, then return here and mark the appointment paid.', 'yatoon-booking-system' ) ) ); ?>,
    activePlatform: <?php echo json_encode( get_option( 'yatoon_active_platform', 'local' ) ); ?>,
    squareNoShowFeeEnabled: <?php echo json_encode( get_option( 'yatoon_square_no_show_fee_enabled', '' ) === '1' ); ?>,
    squareNoShowFeeAmount: <?php echo json_encode( get_option( 'yatoon_square_no_show_fee_amount', '25' ) ); ?>,
        squareNoShowFeeNote: <?php echo wp_json_encode( get_option( 'yatoon_square_no_show_fee_note', __( 'Open Square and charge the approved no-show or late-cancellation fee, then mark it here.', 'yatoon-booking-system' ) ) ); ?>,
    idleLockMinutes: <?php echo json_encode( (int) get_option( 'yatoon_staff_idle_lock_minutes', 5 ) ); ?>,
    pinLength: <?php echo json_encode( $pin_length ); ?>,
    googleUrl: <?php echo wp_json_encode( $google_staff_url ?? '' ); ?>,
};
</script>
</div>
