<?php

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<?php

$sab_nome_chat = '' !== trim( (string) $business_name ) ? $business_name : $bot_name;
?>
<div id="sar-toast"></div>
<div id="sar">
  <div id="sar-win" role="dialog" aria-modal="true" aria-label="<?php echo esc_attr( sprintf( /* translators: %s: business name */ __( 'Chat %s', 'sabriel-ai' ), $sab_nome_chat ) ); ?>">
    <div id="sar-hdr" style="position:relative">
      <?php if ( '' !== (string) $logo_url ) : ?>
      <div id="sar-av" style="background-image:url(<?php echo esc_url( $logo_url ); ?>);background-size:contain;background-position:center;background-repeat:no-repeat"></div>
      <?php else : ?>
      <div id="sar-av"><?php echo esc_html( $iniziale ); ?></div>
      <?php endif; ?>
      <div id="sar-hi">
        <div id="sar-hn"><?php echo esc_html( $bot_name ); ?></div>
        <div id="sar-hs"><span class="sar-gd"></span><?php esc_html_e( 'Online', 'sabriel-ai' ); ?></div>
      </div>
      <button class="sar-hb" id="sar-hbprofile" title="<?php esc_attr_e( 'Your profile', 'sabriel-ai' ); ?>"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></button>
      <button class="sar-hb" id="sar-hbhist" title="<?php esc_attr_e( 'History', 'sabriel-ai' ); ?>"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></button>
      <button class="sar-hb" id="sar-hbback" title="<?php esc_attr_e( 'Back', 'sabriel-ai' ); ?>" style="display:none"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg></button>
      <button class="sar-hb" id="sar-hbmin" title="<?php esc_attr_e( 'Minimize', 'sabriel-ai' ); ?>" aria-label="<?php esc_attr_e( 'Minimize', 'sabriel-ai' ); ?>" style="font-size:18px;font-weight:300;line-height:1;padding-bottom:3px">&#8212;</button>
      <button class="sar-hb" id="sar-hbclose" aria-label="<?php esc_attr_e( 'Close', 'sabriel-ai' ); ?>"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
      <div id="sar-confirm">
        <span><?php esc_html_e( 'Close permanently?', 'sabriel-ai' ); ?></span>
        <button class="sar-cBtn" id="sar-cyes"><?php esc_html_e( 'Yes', 'sabriel-ai' ); ?></button>
        <button class="sar-cBtn" id="sar-cno"><?php esc_html_e( 'No', 'sabriel-ai' ); ?></button>
      </div>
    </div>
    <div id="sar-profov">
      <div id="sar-profbox">
        <div class="sar-ptitle"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><?php esc_html_e( 'Your details', 'sabriel-ai' ); ?></div>
        <div class="sar-f"><label for="sar-pnome"><?php esc_html_e( 'First name *', 'sabriel-ai' ); ?></label><input type="text" id="sar-pnome" autocomplete="given-name"></div>
        <div class="sar-f"><label for="sar-pcognome"><?php esc_html_e( 'Last name *', 'sabriel-ai' ); ?></label><input type="text" id="sar-pcognome" autocomplete="family-name"></div>
        <div class="sar-f"><label for="sar-pemail"><?php esc_html_e( 'Email *', 'sabriel-ai' ); ?></label><input type="email" id="sar-pemail" autocomplete="email"></div>
        <div class="sar-f"><label for="sar-ptel"><?php esc_html_e( 'Phone', 'sabriel-ai' ); ?></label><input type="tel" id="sar-ptel" autocomplete="tel"></div>
        <button class="sar-psave" id="sar-psave"><?php esc_html_e( 'Save changes', 'sabriel-ai' ); ?></button>
        <button class="sar-pcancel" id="sar-pcancel"><?php esc_html_e( 'Cancel', 'sabriel-ai' ); ?></button>
      </div>
    </div>
    <div class="sar-sc" id="sar-sc-w">
      <div id="sar-sc-wi">
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
          <?php if ( '' !== (string) $logo_url ) : ?>
          <div class="sar-wlogo" style="background-image:url(<?php echo esc_url( $logo_url ); ?>);background-size:contain;background-position:center;background-repeat:no-repeat"></div>
          <?php else : ?>
          <div class="sar-wlogo"><?php echo esc_html( $iniziale ); ?></div>
          <?php endif; ?>
          <h3 style="margin:0"><?php esc_html_e( 'How can we help you?', 'sabriel-ai' ); ?></h3>
        </div>
        <p class="sar-sub"><?php
        if ( '' !== trim( (string) $business_name ) ) {
            echo esc_html( sprintf( /* translators: %s: business name */ __( 'Enter your details to get started. We\'ll answer your questions about %s in real time.', 'sabriel-ai' ), $business_name ) );
        } else {
            esc_html_e( 'Enter your details to get started. We\'ll answer your questions in real time.', 'sabriel-ai' );
        }
        ?></p>
        <div class="sar-fr">
          <div class="sar-f">
            <label for="sar-fname"><?php esc_html_e( 'First name *', 'sabriel-ai' ); ?></label>
                        <input type="text" id="sar-fname" placeholder="<?php esc_attr_e( 'John', 'sabriel-ai' ); ?>" autocomplete="given-name" inputmode="text">
            <div class="sar-ferr" id="sar-ferr-name"><?php esc_html_e( 'First name is required', 'sabriel-ai' ); ?></div>
          </div>
          <div class="sar-f">
            <label for="sar-fsurn"><?php esc_html_e( 'Last name *', 'sabriel-ai' ); ?></label>
                        <input type="text" id="sar-fsurn" placeholder="<?php esc_attr_e( 'Smith', 'sabriel-ai' ); ?>" autocomplete="family-name" inputmode="text">
            <div class="sar-ferr" id="sar-ferr-surn"><?php esc_html_e( 'Last name is required', 'sabriel-ai' ); ?></div>
          </div>
        </div>
        <div class="sar-f" style="margin-top:12px">
          <label for="sar-femail"><?php esc_html_e( 'Email *', 'sabriel-ai' ); ?></label>
                    <input type="email" id="sar-femail" placeholder="<?php esc_attr_e( 'john@example.com', 'sabriel-ai' ); ?>" autocomplete="email" inputmode="email">
          <div class="sar-ferr" id="sar-ferr-email"><?php esc_html_e( 'Invalid email. E.g.: name@domain.com', 'sabriel-ai' ); ?></div>
        </div>
        <div class="sar-f" style="margin-top:12px">
          <label for="sar-ftel"><?php esc_html_e( 'Phone (optional)', 'sabriel-ai' ); ?></label>
          <input type="tel" id="sar-ftel" placeholder="<?php esc_attr_e( 'Your phone number', 'sabriel-ai' ); ?>" autocomplete="tel" inputmode="tel">
        </div>
        <button id="sar-sbtn"><?php esc_html_e( 'Start the conversation', 'sabriel-ai' ); ?></button>
        <p class="sar-priv"><?php
        esc_html_e( 'Your details are used only to reply to you and stay on this site. The conversation is processed by an artificial intelligence service to generate the answers.', 'sabriel-ai' );
        $sab_url_privacy = function_exists( 'get_privacy_policy_url' ) ? get_privacy_policy_url() : '';
        if ( $sab_url_privacy ) {
            echo ' <a href="' . esc_url( $sab_url_privacy ) . '" target="_blank" rel="noopener nofollow">' . esc_html__( 'Privacy policy', 'sabriel-ai' ) . '</a>';
        }
        ?></p>
      </div>
    </div>
    <div class="sar-sc" id="sar-sc-c">
      <div id="sar-msgs">
        <div id="sar-robanner"><span id="sar-rotext"></span><button id="sar-roback">&#8592; <?php esc_html_e( 'Back to chat', 'sabriel-ai' ); ?></button></div>
      </div>
      <div id="sar-ia">
        <div id="sar-ap"><button id="sar-aprm" title="<?php esc_attr_e( 'Remove', 'sabriel-ai' ); ?>">x</button></div>
        <div id="sar-ir">
          <button id="sar-att" title="<?php echo esc_attr( $sab_legge_pdf
            ? sprintf( /* translators: %s: number of megabytes, e.g. 5 */ __( 'Attach image or PDF (max %s MB)', 'sabriel-ai' ), $sab_max_allegato_mb )
            : sprintf( /* translators: %s: number of megabytes, e.g. 5 */ __( 'Attach image (max %s MB)', 'sabriel-ai' ), $sab_max_allegato_mb ) ); ?>"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></button>
          <input type="file" id="sar-fi" accept="image/jpeg,image/png,image/webp,image/gif<?php echo $sab_legge_pdf ? ',application/pdf' : ''; ?>">
          <button id="sar-mic" title="<?php esc_attr_e( 'Speak instead of typing', 'sabriel-ai' ); ?>" aria-label="<?php esc_attr_e( 'Microphone', 'sabriel-ai' ); ?>"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg></button>
          <textarea id="sar-ta" placeholder="<?php esc_attr_e( 'Type a message...', 'sabriel-ai' ); ?>" rows="1" aria-label="<?php esc_attr_e( 'Message', 'sabriel-ai' ); ?>"></textarea>
          <button id="sar-snd" disabled aria-label="<?php esc_attr_e( 'Send', 'sabriel-ai' ); ?>"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></button>
        </div>
      </div>
    </div>
    <div class="sar-sc" id="sar-sc-h">
      <div id="sar-hl"></div>
      <button id="sar-hclear"><?php esc_html_e( 'Delete all history', 'sabriel-ai' ); ?></button>
    </div>
    <div id="sar-foot"><?php echo esc_html( $bot_name ); ?><?php if ( Sabriel_Base::get( 'mostra_credito' ) ) : ?><span id="sar-pw"><a href="https://sabrielagency.com" target="_blank" rel="noopener nofollow" style="color:inherit;text-decoration:none"><?php esc_html_e( 'Powered by Sabriel AI', 'sabriel-ai' ); ?></a></span><?php endif; ?></div>
  </div>
  <button id="sar-tog" aria-label="<?php echo esc_attr( sprintf( /* translators: %s: business name */ __( 'Chat %s', 'sabriel-ai' ), $sab_nome_chat ) ); ?>" aria-expanded="false">
    <div id="sar-ndot"></div>
    <svg class="ic" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
    <svg class="ix" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  </button>
</div>
