<?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 * FROM {$wpdb->prefix}copuloo_phone_details WHERE user = %d LIMIT 1", wp_get_current_user()->ID)); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
    ?>
    <?php if (isset($_GET['updated'])) { echo wp_kses_post(copuloo_main_success("Saved Successfuly", "You have successfully updated your inbound call settings.")); }  ?>
    <div class="col-12 mb-6">
      <div class="card h-xl-100" id="timeline_widget_2_card">
        <div class="card-header position-relative py-0 border-bottom-2">
          <h3 class="card-title">Forward Incoming Calls</h3>
        </div>
        <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">Call Router</span>
                    <span class="text-muted mt-1 fw-semibold fs-7">In order to setup call routing effectively you will need to add a phone number below where all calls will be routed to. You can add up to three phone numbers, when one number leads to no answer the call will be routed to the next.</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( 'Copuloo', 'user_nonce' ); ?>
                  <input type="hidden" name="action" value="copuloo_update_router_table"></input>
                  <input type="hidden" name="dashboardpage" value="inbound"></input>
                  <div class="card-body pt-5">
                    <div class="row mb-6">
                      <label class="col-lg-4 col-form-label fw-semibold fs-6">Phone Number 1</label>
                      <div class="col-lg-8">
                        <div class="row">
                          <div class="col-lg-4 fv-row">
                            <?php
                            $copuloo_mainNumber1 = explode("-", $copuloo_saveData[0]->call1 ?? '');
                            if (isset($copuloo_saveData[0]->call1))
                            {
                              // Escaped inside the copuloo_country_code() function
                              echo copuloo_country_code($copuloo_mainNumber1[0], "countrycode1"); // phpcs:ignore WordPress.Security.EscapeOutput
                            }
                            else { echo copuloo_country_code("none", "countrycode1"); } // phpcs:ignore WordPress.Security.EscapeOutput  ?>
                          </div>
                          <div class="col-lg-8 fv-row">
                            <input id="phoneNumber" type="number" maxlength="16" name="call1" class="form-control form-control-lg form-control-solid" placeholder="Phone Number" value="<?php if (isset($copuloo_saveData[0]->call1)) { echo esc_html($copuloo_mainNumber1[1]); } ?>" />
                          </div>
                          <?php
                          if (isset($copuloo_saveData[0]->call1) && strlen($copuloo_mainNumber1[1]) > 3 && $copuloo_saveData[0]->call1_verified == 0) {
                            echo '
														<div class="fv-row mt-6">
															<div class="notice d-flex bg-light-warning rounded border-warning border border-dashed p-6">
                                <i class="fs-2 text-warning me-4"><span class="fas fa-info-circle"></span></i>
																<div class="d-flex flex-stack flex-grow-1">
																	<div class="fw-semibold">
																		<h4 class="text-gray-900 fw-bold">Please Verify Phone Number</h4>
																		<div class="fs-6 text-gray-700">
																			<button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#call_verify">Verify Number</button> You won\'t be able to route calls until this number is verified.
																		</div>
																	</div>
																</div>
															</div>
														</div>';
                          }
                          ?>
                        </div>
                      </div>
                    </div>
                    <div class="row mb-6">
                      <label class="col-lg-4 col-form-label fw-semibold fs-6">Phone Number 2</label>
                      <div class="col-lg-8">
                        <div class="row">
                          <div class="col-lg-4 fv-row">
                            <?php
                            $copuloo_mainNumber2 = explode("-", $copuloo_saveData[0]->call2 ?? '');
                            if (isset($copuloo_saveData[0]->call2))
                            {
                              // Escaped inside the copuloo_country_code() function
                              echo copuloo_country_code($copuloo_mainNumber2[0], "countrycode2"); // phpcs:ignore WordPress.Security.EscapeOutput
                            }
                            else { echo copuloo_country_code("none", "countrycode2"); } // phpcs:ignore WordPress.Security.EscapeOutput  ?>
                          </div>
                          <div class="col-lg-8 fv-row">
                            <input id="phoneNumber2" type="number" maxlength="16" name="call2" class="form-control form-control-lg form-control-solid" placeholder="Phone Number" value="<?php if (isset($copuloo_saveData[0]->call2)) { echo esc_html($copuloo_mainNumber2[1]); } ?>" />
                          </div> <?php
                          if (isset($copuloo_saveData[0]->call2) && strlen($copuloo_mainNumber2[1]) > 3 && $copuloo_saveData[0]->call2_verified == 0) {
                            echo '
															<div class="fv-row mt-6">
																<div class="notice d-flex bg-light-warning rounded border-warning border border-dashed p-6">
																	<i class="fs-2 text-warning me-4"><span class="fas fa-info-circle"></span></i>
																	<div class="d-flex flex-stack flex-grow-1">
																		<div class="fw-semibold">
																			<h4 class="text-gray-900 fw-bold">Please Verify Phone Number</h4>
																			<div class="fs-6 text-gray-700">
																				<button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#call_verify">Verify Number</button> You won\'t be able to route calls until this number is verified.
																			</div>
																		</div>
																	</div>
																</div>
															</div>';
                          }
                          ?>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <label class="col-lg-4 col-form-label fw-semibold fs-6">Phone Number 3</label>
                      <div class="col-lg-8">
                        <div class="row">
                          <div class="col-lg-4 fv-row">
                            <?php
                            $copuloo_mainNumber3 = explode("-", $copuloo_saveData[0]->call3 ?? '');
                            if (isset($copuloo_saveData[0]->call3))
                            {
                              // Escaped inside the copuloo_country_code() function
                              echo copuloo_country_code($copuloo_mainNumber3[0], "countrycode3"); // phpcs:ignore WordPress.Security.EscapeOutput
                            }
                            else { echo copuloo_country_code("none", "countrycode3"); } // phpcs:ignore WordPress.Security.EscapeOutput  ?>
                          </div>
                          <div class="col-lg-8 fv-row">
                            <input id="phoneNumber3" type="number" maxlength="16" name="call3" class="form-control form-control-lg form-control-solid" placeholder="Phone Number" value="<?php if (isset($copuloo_saveData[0]->call3)) { echo esc_html($copuloo_mainNumber3[1]); } ?>" />
                          </div> <?php
                          if (isset($copuloo_saveData[0]->call3) && strlen($copuloo_mainNumber3[1]) > 10 && $copuloo_saveData[0]->call3_verified == 0) {
                            echo '
																<div class="fv-row mt-6">
																	<div class="notice d-flex bg-light-warning rounded border-warning border border-dashed p-6">
																		<i class="fs-2 text-warning me-4"><span class="fas fa-info-circle"></span></i>
																		<div class="d-flex flex-stack flex-grow-1">
																			<div class="fw-semibold">
																				<h4 class="text-gray-900 fw-bold">Please Verify Phone Number</h4>
																				<div class="fs-6 text-gray-700">
																					<button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#call_verify">Verify Number</button> You won\'t be able to route calls until this number is verified.
																				</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" id="account_profile_details_submit">Save Changes</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 mb-6">
      <div class="card h-xl-100" id="timeline_widget_2_card">
        <div class="card-header position-relative py-0 border-bottom-2">
          <h3 class="card-title">Basic Responses</h3>
          <ul class="nav nav-stretch nav-pills nav-pills-custom d-flex mt-3" role="tablist">
            <li class="nav-item p-0 ms-0 me-8" role="presentation">
              <a class="nav-link btn btn-color-muted px-0 active" data-bs-toggle="pill" href="#timeline_widget_2_tab_1" aria-selected="false" role="tab" tabindex="-1">
                <span class="nav-text fw-semibold fs-4 mb-3">Welcome</span>
                <span class="bullet-custom position-absolute z-index-2 w-100 h-2px top-100 bottom-n100 bg-primary rounded"></span>
              </a>
            </li>
            <li class="nav-item p-0 ms-0 me-8" role="presentation">
              <a class="nav-link btn btn-color-muted px-0" data-bs-toggle="pill" href="#timeline_widget_2_tab_3" aria-selected="false" role="tab" tabindex="-1">
                <span class="nav-text fw-semibold fs-4 mb-3">Busy</span>
                <span class="bullet-custom position-absolute z-index-2 w-100 h-2px top-100 bottom-n100 bg-primary rounded"></span>
              </a>
            </li>
            <li class="nav-item p-0 ms-0" role="presentation">
              <a class="nav-link btn btn-color-muted px-0" data-bs-toggle="pill" href="#timeline_widget_2_tab_4" aria-selected="true" role="tab">
                <span class="nav-text fw-semibold fs-4 mb-3">Work Hours</span>
                <span class="bullet-custom position-absolute z-index-2 w-100 h-2px top-100 bottom-n100 bg-primary rounded"></span>
              </a>
            </li>
          </ul>
        </div>
        <div class="card-body">
          <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_router_table"></input>
          <input type="hidden" name="dashboardpage" value="inbound"></input>
          <div class="tab-content">
            <div class="tab-pane fade active show" id="timeline_widget_2_tab_1" 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">Welcome Message</span>
                    <span class="text-muted mt-1 fw-semibold fs-7">Run a text to speach prompt when the phone call is initiated. Leave blank to disable this feature.</span>
                  </h3>
                  <div class="card-toolbar"></div>
                </div>
                  <div class="card-body pt-5">
                    <div class="row">
                      <label class="col-lg-4 col-form-label fw-semibold fs-6">Message</label>
                      <div class="col-lg-8">
                        <div class="row mb-6">
                          <div class="col-lg-12 fv-row">
                            <textarea type="textarea" maxlength="500" rows="6" name="welcome" class="form-control form-control-lg form-control-solid" placeholder="Please hold while we transfer you to the next available representative."><?php if (isset($copuloo_saveData[0]->welcome) && $copuloo_saveData[0]->welcome != null) { echo esc_html($copuloo_saveData[0]->welcome); } ?></textarea>
                          </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" id="account_profile_details_submit">Save Changes</button>
                  </div>
              </div>
            </div>
            <div class="tab-pane fade" id="timeline_widget_2_tab_3" 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">Busy Message</span>
                    <span class="text-muted mt-1 fw-semibold fs-7">Run a tex to speach prompt when the call becomes busy or unanswered. Leave blank to disable this feature.</span>
                  </h3>
                  <div class="card-toolbar"></div>
                </div>
                  <div class="card-body pt-5">
                    <div class="row mb-6">
                      <label class="col-lg-4 col-form-label fw-semibold fs-6">Message</label>
                      <div class="col-lg-8">
                        <div class="row">
                          <div class="col-lg-12 fv-row">
                            <textarea type="textarea" maxlength="500" rows="6" name="busy" class="form-control form-control-lg form-control-solid" placeholder="Sorry there are currently no available representatives."><?php if (isset($copuloo_saveData[0]->busy) && $copuloo_saveData[0]->busy != null) { echo esc_html($copuloo_saveData[0]->busy); } ?></textarea>
                          </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" id="account_profile_details_submit">Save Changes</button>
                  </div>
              </div>
            </div>
            <div class="tab-pane fade" id="timeline_widget_2_tab_4" 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">Outside of Business Hours Message</span>
                    <span class="text-muted mt-1 fw-semibold fs-7">Run a tex to speach prompt when someone calls outside of your specified work hours. Leave blank to disable this feature.</span>
                  </h3>
                  <div class="card-toolbar"></div>
                </div>
                  <div class="card-body pt-5">
                    <div class="row mb-6">
                      <label class="col-lg-4 col-form-label fw-semibold fs-6">Message</label>
                      <div class="col-lg-8">
                        <div class="row">
                          <div class="col-lg-12 fv-row">
                            <textarea type="textarea" maxlength="500" rows="6" name="outside_hours_message" class="form-control form-control-lg form-control-solid" placeholder="Sorry you are calling outside of business hours, we are available between nine A.M and five P.M, monday to friday."><?php if (isset($copuloo_saveData[0]->outside_hours_message) && $copuloo_saveData[0]->outside_hours_message != null) { echo esc_html($copuloo_saveData[0]->outside_hours_message); } ?></textarea>
                          </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" id="account_profile_details_submit">Save Changes</button>
                  </div>
              </div>
            </div>
          </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" tabindex="-1" id="call_verify">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header pb-0 border-0 d-flex justify-content-end">
        <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
          <i class="fs-1">
            <span class="fas fa-times"></span>
          </i>
        </div>
      </div>
      <div class="modal-body">
        <div class="text-center mb-5">
          <h1 class="d-flex justify-content-center align-items-center mb-6">Call the number below</h1>
          <h3 class="d-flex justify-content-center align-items-center mb-6">
            <?php if (isset($copuloo_saveData[0]->managed_number) && isset($copuloo_saveData[0]->managed_number_code) && strlen(trim($copuloo_saveData[0]->managed_number)) > 3)
                  { echo esc_html($copuloo_saveData[0]->managed_number_code . ' ' . copuloo_formatNumber($copuloo_saveData[0]->managed_number)); }
                  else { echo 'You don\'t have a number setup yet'; }
                  ?> </h3>
          <div class="text-muted fw-semibold fs-5 mb-6">You must call your Copuloo number with the phone number you are trying to verify. Once you do so, your number will be verified during the call.</div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
