<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<?php if ( !isset($_GET['user_nonce']) || !wp_verify_nonce(sanitize_text_field(wp_unslash($_GET['user_nonce'])), 'Copuloo') ) { 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
    $copuloo_table = $wpdb->prefix . 'copuloo_phone_details';
    // Direct database query used below – $wpdb->prepare() is always used to prevent SQL injection.
    $copuloo_saveData = $wpdb->get_results($wpdb->prepare("SELECT voice_assistant FROM {$wpdb->prefix}copuloo_phone_details WHERE user = %d LIMIT 1", wp_get_current_user()->ID)); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
    $copuloo_decodedData = json_decode($copuloo_saveData[0]->voice_assistant ?? '', true);
    ?>
    <?php if (isset($_GET['updated'])) { echo wp_kses_post(copuloo_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://copuloo.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" data-bs-toggle="pill" href="#ai_assistant_tab_1" aria-selected="false" role="tab" tabindex="-1">Assistant Setup</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" data-bs-toggle="pill" href="#ai_assistant_tab_2" aria-selected="true" role="tab" tabindex="-1">Voice Configuration</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" data-bs-toggle="pill" href="#ai_assistant_tab_3" aria-selected="true" role="tab" tabindex="-1">Messenger Configuration</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="col-12 mb-6">
      <div class="card h-xl-100">
        <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">
                <form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post" class="form">
                  <?php wp_nonce_field( 'Copuloo', 'user_nonce' ); ?>
                  <input type="hidden" name="action" value="copuloo_update_ai_assistant"></input>
                  <input type="hidden" name="dashboardpage" value="aiassistant"></input>
                  <div class="tab-content">

                    <div class="tab-pane fade active show" id="ai_assistant_tab_1" role="tabpanel">
                     <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">AI Assistant Setup</span>
                           <span class="text-muted mt-1 fw-semibold fs-7">Setting up your assistant with Copuloo 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>
                        <div class="card-body">
                           <div class="tab-content">
                              <div class="card-body p-0 tab-pane fade show active" role="tabpanel">
                                 <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-code"></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 AI Assistant configuration:</div>
                                             <div class="d-flex align-items-center mt-1 fs-6">
                                                <div class="text-muted me-2 fs-7">Go to your Twilio account, create an AI Assistant from the AI Assistants page and then add the SID code from your newly created Twilio AI Assistant.</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">SID:</label>
                                                   <div class="col-12">
                                                      <input type="text" maxlength="250" name="twilio_sid" class="form-control form-control-lg form-control-solid" placeholder="Twilio Assistant SID" value="<?php if (isset($copuloo_decodedData['twilio_sid'])) { echo esc_html($copuloo_decodedData['twilio_sid']); } ?>" />
                                                   </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-code"></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">Vapi AI Assistant configuration:</div>
                                             <div class="d-flex align-items-center mt-1 fs-6">
                                                <div class="text-muted me-2 fs-7">Go to your Vapi account, create an Assistant from the Assistants page. Then from the Phone Numbers page, click add phone number, select Free Vapi SIP and then copy and paste the SIP url below.</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">Inbound SIP Url:</label>
                                                   <div class="col-12">
                                                      <input type="text" maxlength="250" name="vapi_sip" class="form-control form-control-lg form-control-solid" placeholder="Vapi Assistant SIP Url" value="<?php if (isset($copuloo_decodedData['vapi_sip'])) { echo esc_html($copuloo_decodedData['vapi_sip']); } ?>" />
                                                   </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">You can either setup a Twilio AI Assistant or a Vapi AI Assistant.</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>
                    </div>

                    <div class="tab-pane fade" id="ai_assistant_tab_2" role="tabpanel">
                      <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">Inbound AI Assistant Voice Configuration</span>
                          <span class="text-muted mt-1 fw-semibold fs-7">Setting up your voice assistant with Copuloo is incredibly easy, just a few clicks and you’re ai assistant will be customized to your liking.</span>
                        </h3>
                        <div class="card-toolbar">
                        </div>
                      </div>
                          <div class="card-body">
          									<div class="tab-content">
          										<div class="card-body p-0 tab-pane fade show active" role="tabpanel">
          											<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-code"></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">Determine which assistant will answer the phone:</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 py-6">
                                              <div class="mb-10 cursor-pointer">
                                                  <div class="form-check cursor-pointer">
                      																<input class="form-check-input cursor-pointer" type="radio" value="twilio" id="flexCheckDefault1" name="radio" <?php if (isset($copuloo_decodedData['voice_company']) && $copuloo_decodedData['voice_company'] == 'twilio') { echo 'checked="checked"'; } ?>>
                                                      <label class="fs-5 text-gray-900 fw-semibold cursor-pointer" for="flexCheckDefault1">Twilio</label>
                                                  </div>
                                              </div>
                                              <div class="cursor-pointer">
                                                  <div class="form-check cursor-pointer">
                      																<input class="form-check-input cursor-pointer" type="radio" value="vapi" id="flexCheckDefault2" name="radio" <?php if (isset($copuloo_decodedData['voice_company']) && $copuloo_decodedData['voice_company'] == 'vapi') { echo 'checked="checked"'; } ?>>
                                                      <label class="fs-5 text-gray-900 fw-semibold cursor-pointer" for="flexCheckDefault2">Vapi</label>
                                                  </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-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">Determine 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="copuloo_changeCheckboxValue(this)" <?php if (isset($copuloo_decodedData['ai_initiated']) && $copuloo_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="copuloo_changeCheckboxValue(this)" <?php if (isset($copuloo_decodedData['ai_busy']) && $copuloo_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="copuloo_changeCheckboxValue(this)" <?php if (isset($copuloo_decodedData['ai_timetable']) && $copuloo_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">You can customize a greeting message that will play when the AI assistant answers the phone. Additionally, you can choose a custom voice from the list of available options on the Twilio website.</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">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 (!empty($copuloo_decodedData['greeting'])) { echo esc_html($copuloo_decodedData['greeting']); } else { echo 'Hi! Ask me anything!'; } ?>" />
                                              </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 (!empty($copuloo_decodedData['voice'])) { echo esc_html($copuloo_decodedData['voice']); } else { echo 'en-US-Journey-O'; } ?>" />
                                              </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 customize your AI voice assistant.</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>
                      </div>

                    <div class="tab-pane fade" id="ai_assistant_tab_3" role="tabpanel">
                      <div class="card h-100 flex-center bg-light-primary border-primary border border-dashed p-8">
                          <div href="#" class="fs-5 fw-bold mb-2">Feature Coming Soon!</div>
                          <div class="fs-7 fw-semibold text-gray-500 text-center">An AI assistant that can automatically respond to text messages is a powerful new feature coming soon to Copuloo. It will help businesses engage with customers instantly, answer common questions, and provide 24/7 support, all without lifting a finger.</div>
                      </div>
                      <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">AI Assistant Messenger Configuration</span>
                          <span class="text-muted mt-1 fw-semibold fs-7">Setting up your messenger assistant with Copuloo is incredibly easy, just a few clicks and you’re ready to start answering texts with AI.</span>
                        </h3>
                        <div class="card-toolbar">
                        </div>
                      </div>
                          <div class="card-body">
          									<div class="tab-content">
          										<div class="card-body p-0 tab-pane fade show active" role="tabpanel">
          											<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">Determine whether your AI assistant will answer text messages:</div>
          															<div class="d-flex align-items-center mt-1 fs-6">
          																<div class="text-muted me-2 fs-7">Your AI assistant will not answer text messages from blocked contacts.</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">Answer Text Messages</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="copuloo_changeCheckboxValue(this)" <?php if (isset($copuloo_decodedData['ai_messages']) && $copuloo_decodedData['ai_messages'] == "1") { echo 'checked="checked" value="1"'; } else { echo 'value="0"'; } ?> name="messages"/>
                                              </div>
            																</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 text messages 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>
                      </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



  </div>
</div>
