<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<?php if ( !isset($_GET['user_nonce']) || !wp_verify_nonce(sanitize_text_field(wp_unslash($_GET['user_nonce'])), 'DialBunny') ) { echo 'Sorry, we couldn’t verify your request due to a security check failure.'; return; } ?>
<div class="content d-flex flex-column flex-column-fluid" id="content">
  <div class="container-xxl" id="content_container">
    <?php
    $table = $wpdb->prefix . 'dialbunny_phone_details';
    // Direct database query used below – $wpdb->prepare() is always used to prevent SQL injection.
    $saveData = $wpdb->get_results($wpdb->prepare("SELECT voice_assistant FROM {$wpdb->prefix}dialbunny_phone_details WHERE user = %d LIMIT 1", wp_get_current_user()->ID)); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
    $decodedData = json_decode($saveData[0]->voice_assistant, true);
    ?>
    <?php if (isset($_GET['updated'])) { echo wp_kses_post(dialbunny_main_success("Saved Successfuly", "You have successfully updated your AI assistant settings.")); }  ?>
    <div class="card mb-8">
      <div class="card-body flex-column p-5">
        <div class="d-flex align-items-center h-lg-300px p-5 p-lg-15">
          <div class="d-flex flex-column align-items-start justift-content-center flex-equal me-5">
            <div class="d-flex flex-wrap flex-sm-nowrap">
              <div class="d-flex flex-center flex-shrink-0 bg-light rounded w-100px h-100px w-lg-150px h-lg-150px me-7 mb-4">
                <div class="d-flex justify-content-center align-items-center p-10">
                    <span class="menu-bullet">
                        <span class="fa fa-robot text-dark display-1"></span>
                    </span>
                </div>
              </div>
              <div class="flex-grow-1">
                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                  <div class="d-flex flex-column">
                    <div class="d-flex align-items-center mb-1">
                      <a class="text-gray-800 fs-2 fw-bold me-3">Assistant Setup</a>
                    </div>
                    <div class="d-flex flex-wrap fw-semibold mb-4 fs-5 text-gray-400">Create an AI assistant that answers the phone for you when your unavailable. Click the link below to view documentation on setting up your AI assistant.</div>
                  </div>
                </div>
                <div class="d-flex flex-wrap justify-content-start">
                  <div class="d-flex flex-wrap">
                    <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-2">
                      <div class="d-flex align-items-center">
                        <a href="https://dialbunny.com/documentation/?doc=assistant_setup" target="_blank" class="d-flex align-items-center fw-semibold fs-6 text-gray-400 link-primary">
                          <i class="fs-1 me-2">
                            <span class="fas fa-file-text"></span>
                          </i>
                          <div class="fs-4 fw-bold mb-0">Documentation</div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-rounded bg-light d-flex flex-stack flex-wrap p-5">
          <ul class="nav flex-wrap border-transparent fw-bold">
            <li class="nav-item my-1">
              <a class="btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase active" href="<?php echo esc_url(wp_nonce_url($dialbunnyDashboardUrl.'&dashboardpage=voiceassistant', 'DialBunny', 'user_nonce')); ?>">Voice Assistant</a>
            </li>
            <li class="nav-item my-1">
              <a class="btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase" href="<?php echo esc_url(wp_nonce_url($dialbunnyDashboardUrl.'&dashboardpage=messagesassistant', 'DialBunny', 'user_nonce')); ?>">Messages Assistant</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="col-12 mb-6">
      <div class="card h-xl-100" id="kt_timeline_widget_2_card">
        <div class="card-body">
          <div class="tab-content">
            <div class="tab-pane fade active show" id="" role="tabpanel">
              <div class="card border border-gray-300 border-dashed rounded p-6 mb-6">
                <div class="card-header border-0 pt-5">
                  <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold text-gray-900">Customize when your AI assistant will answer the phone</span>
                    <span class="text-muted mt-1 fw-semibold fs-7">Setting up your voice assistant with DialBunny is incredibly easy, just a few clicks and you’re ready to start answering calls with AI.</span>
                  </h3>
                  <div class="card-toolbar">
                  </div>
                </div>
                <form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post" class="form">
                  <?php wp_nonce_field( 'DialBunny', 'user_nonce' ); ?>
                  <input type="hidden" name="action" value="dialbunny_update_ai_assistant"></input>
                  <input type="hidden" name="dashboardpage" value="voiceassistant"></input>
                    <div class="card-body">
    									<div class="tab-content">
    										<div id="kt_activity_today" class="card-body p-0 tab-pane fade show active" role="tabpanel" aria-labelledby="kt_activity_today_tab">
    											<div class="timeline timeline-border-dashed">
    												<div class="timeline-item">
    													<div class="timeline-line"></div>
    													<div class="timeline-icon">
                                <span class="menu-bullet">
                                  <span class="fas fa-level-down"></span>
                                </span>
    													</div>
    													<div class="timeline-content mb-10 mt-n1">
    														<div class="pe-3 mb-5">
    															<div class="fs-5 fw-semibold mb-2">Determin when your AI assistant will assist callers:</div>
    															<div class="d-flex align-items-center mt-1 fs-6">
    																<div class="text-muted me-2 fs-7">Your AI assistant will answer the phone after your custom automated responses.</div>
    															</div>
    														</div>
    														<div class="pb-5">
    															<div class="align-items-center border border-dashed border-gray-300 rounded px-7 py-3 mb-5">
                                    <div class="row">
                                      <div class="col-sm-6">
        																<a class="fs-5 text-gray-900 fw-semibold">Call Initiated</a>
                                      </div>
      																<div class="col-sm-6">
                                        <div class="form-check form-switch form-check-custom form-check-solid me-10">
                                          <input role="button" class="form-check-input h-20px w-30px hover::primary" type="checkbox" onclick="dialbunny_changeCheckboxValue(this)" <?php if (isset($decodedData['ai_initiated']) && $decodedData['ai_initiated'] == "1") { echo 'checked="checked" value="1"'; } else { echo 'value="0"'; } ?> name="initiated"/>
                                        </div>
      																</div>
                                    </div>
    															</div>
    															<div class="align-items-center border border-dashed border-gray-300 rounded px-7 py-3 mb-5">
                                    <div class="row">
                                      <div class="col-sm-6">
        																<a class="fs-5 text-gray-900 fw-semibold">Busy or Unanswered</a>
                                      </div>
      																<div class="col-sm-6">
                                        <div class="form-check form-switch form-check-custom form-check-solid me-10">
                                          <input role="button" class="form-check-input h-20px w-30px" type="checkbox" onclick="dialbunny_changeCheckboxValue(this)" <?php if (isset($decodedData['ai_busy']) && $decodedData['ai_busy'] == "1") { echo 'checked="checked" value="1"'; } else { echo 'value="0"'; } ?> name="busy" />
                                        </div>
      																</div>
                                    </div>
    															</div>
    															<div class="align-items-center border border-dashed border-gray-300 rounded px-7 py-3">
                                    <div class="row">
                                      <div class="col-sm-6">
        																<a class="fs-5 text-gray-900 fw-semibold">Outside Timetable Hours</a>
                                      </div>
      																<div class="col-sm-6">
                                        <div class="form-check form-switch form-check-custom form-check-solid me-10">
                                          <input role="button" class="form-check-input h-20px w-30px" type="checkbox" onclick="dialbunny_changeCheckboxValue(this)" <?php if (isset($decodedData['ai_timetable']) && $decodedData['ai_timetable'] == "1") { echo 'checked="checked" value="1"'; } else { echo 'value="0"'; } ?> name="timetable"/>
                                        </div>
      																</div>
                                    </div>
    															</div>
    														</div>
    													</div>
    												</div>
    												<div class="timeline-item">
    													<div class="timeline-line"></div>
    													<div class="timeline-icon">
                                <span class="menu-bullet">
                                  <span class="fas fa-phone"></span>
                                </span>
    													</div>
    													<div class="timeline-content mb-10 mt-n1">
    														<div class="pe-3 mb-5">
    															<div class="fs-5 fw-semibold mb-2">Twilio voice assistant configuration:</div>
    															<div class="d-flex align-items-center mt-1 fs-6">
    																<div class="text-muted me-2 fs-7">The fields below can be found in the channels tab inside your Twilio assistant configuration page.</div>
    															</div>
    														</div>
    														<div class="pb-5">
    															<div class="align-items-center border border-dashed border-gray-300 rounded px-7 py-3 mb-5">
                                    <div class="row">
                                        <label class="col-12 col-form-label fw-semibold fs-6">id:</label>
                                        <div class="col-12">
                                          <input id="phoneNumber" type="password" maxlength="250" name="id" class="form-control form-control-lg form-control-solid" placeholder="ai..." value="<?php if (isset($decodedData['id'])) { echo esc_html($decodedData['id']); } ?>" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-12 col-form-label fw-semibold fs-6">Greeting Message:</label>
                                        <div class="col-12">
                                          <input id="phoneNumber" type="text" maxlength="250" name="greeting" class="form-control form-control-lg form-control-solid" placeholder="Hi! Ask me anything!" value="<?php if (isset($decodedData['greeting'])) { echo esc_html($decodedData['greeting']); } ?>" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-12 col-form-label fw-semibold fs-6">Voice:</label>
                                        <div class="col-12">
                                          <input id="phoneNumber" type="text" maxlength="25" name="voice" class="form-control form-control-lg form-control-solid" placeholder="en-US-Journey-O" value="<?php if (isset($decodedData['voice'])) { echo esc_html($decodedData['voice']); } ?>" />
                                        </div>
                                    </div>
    															</div>
    														</div>
    													</div>
    												</div>
    												<div class="timeline-item">
    													<div class="timeline-line"></div>
    													<div class="timeline-icon me-4">
                                <span class="menu-bullet">
                                  <span class="fas fa-check"></span>
                                </span>
    													</div>
    													<div class="timeline-content mb-10 mt-n2">
    														<div class="overflow-auto pe-3">
    															<div class="fs-5 fw-semibold mb-2">That's It!</div>
    															<div class="d-flex align-items-center mt-1 fs-6">
    																<div class="text-muted me-2 fs-7">It's as simple as that to allow your very own personal assistant to answer the phone for you.</div>
    															</div>
    														</div>
    													</div>
    												</div>
    											</div>
    										</div>
    									</div>
    								</div>
                    <div class="card-footer d-flex justify-content-end py-6 px-9">
                      <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                  </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



  </div>
</div>
