<?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">

    <div class="card d-flex flex-center flex-column pt-12 p-9">
      <div class="card-body">
      <form>
        <div class="fv-row mb-7">
          <label class="fs-6 fw-semibold form-label mt-3">
            <span>Phone</span>
            <span class="ms-1" data-bs-toggle="tooltip" title="Enter the recipient's phone number.">
              <i class="text-gray-500 fs-6">
                <span class="fas fa-info-circle"></span>
              </i>
            </span>
          </label>
          <div class="row">
            <div class="col-lg-4 fv-row">
              <?php
              // Escaped inside the copuloo_country_code() function
              echo copuloo_country_code("none", "country-code-outbound"); // phpcs:ignore WordPress.Security.EscapeOutput ?>
            </div>
            <div class="col-lg-8 fv-row">
              <input id="phone-number" type="text" maxlength="25" required class="form-control form-control-solid">
            </div>
          </div>
        </div>
        <div class="fv-row mb-7">
          <div class="row g-3 mb-3">
            <div class="col-4"><div class="card d-flex flex-center flex-column p-2 hover-elevate-up shadow-sm parent-hover"><div class="card-body">
              <a class="card-block stretched-link text-decoration-none" type="button" onclick="document.getElementById('phone-number').value = document.getElementById('phone-number').value + '1';"><h1 class="card-title parent-hover-primary">1</h1></a>
            </div></div></div>
            <div class="col-4"><div class="card d-flex flex-center flex-column p-2 hover-elevate-up shadow-sm parent-hover"><div class="card-body">
              <a class="card-block stretched-link text-decoration-none" type="button" onclick="document.getElementById('phone-number').value = document.getElementById('phone-number').value + '2';"><h1 class="card-title parent-hover-primary">2</h1></a>
            </div></div></div>
            <div class="col-4"><div class="card d-flex flex-center flex-column p-2 hover-elevate-up shadow-sm parent-hover"><div class="card-body">
              <a class="card-block stretched-link text-decoration-none" type="button" onclick="document.getElementById('phone-number').value = document.getElementById('phone-number').value + '3';"><h1 class="card-title parent-hover-primary">3</h1></a>
            </div></div></div>
          </div>
          <div class="row g-3 mb-3">
            <div class="col-4"><div class="card d-flex flex-center flex-column p-2 hover-elevate-up shadow-sm parent-hover"><div class="card-body">
              <a class="card-block stretched-link text-decoration-none" type="button" onclick="document.getElementById('phone-number').value = document.getElementById('phone-number').value + '4';"><h1 class="card-title parent-hover-primary">4</h1></a>
            </div></div></div>
            <div class="col-4"><div class="card d-flex flex-center flex-column p-2 hover-elevate-up shadow-sm parent-hover"><div class="card-body">
              <a class="card-block stretched-link text-decoration-none" type="button" onclick="document.getElementById('phone-number').value = document.getElementById('phone-number').value + '5';"><h1 class="card-title parent-hover-primary">5</h1></a>
            </div></div></div>
            <div class="col-4"><div class="card d-flex flex-center flex-column p-2 hover-elevate-up shadow-sm parent-hover"><div class="card-body">
              <a class="card-block stretched-link text-decoration-none" type="button" onclick="document.getElementById('phone-number').value = document.getElementById('phone-number').value + '6';"><h1 class="card-title parent-hover-primary">6</h1></a>
            </div></div></div>
          </div>
          <div class="row g-3 mb-3">
            <div class="col-4"><div class="card d-flex flex-center flex-column p-2 hover-elevate-up shadow-sm parent-hover"><div class="card-body">
              <a class="card-block stretched-link text-decoration-none" type="button" onclick="document.getElementById('phone-number').value = document.getElementById('phone-number').value + '7';"><h1 class="card-title parent-hover-primary">7</h1></a>
            </div></div></div>
            <div class="col-4"><div class="card d-flex flex-center flex-column p-2 hover-elevate-up shadow-sm parent-hover"><div class="card-body">
              <a class="card-block stretched-link text-decoration-none" type="button" onclick="document.getElementById('phone-number').value = document.getElementById('phone-number').value + '8';"><h1 class="card-title parent-hover-primary">8</h1></a>
            </div></div></div>
            <div class="col-4"><div class="card d-flex flex-center flex-column p-2 hover-elevate-up shadow-sm parent-hover"><div class="card-body">
              <a class="card-block stretched-link text-decoration-none" type="button" onclick="document.getElementById('phone-number').value = document.getElementById('phone-number').value + '9';"><h1 class="card-title parent-hover-primary">9</h1></a>
            </div></div></div>
          </div>
          <div class="row g-3 mb-3">
            <div class="col-4"><div class="card d-flex flex-center flex-column p-2 hover-elevate-up shadow-sm parent-hover"><div class="card-body">
              <a class="card-block stretched-link text-decoration-none" type="button" onclick="document.getElementById('phone-number').value = document.getElementById('phone-number').value + '*';"><h1 class="card-title parent-hover-primary">*</h1></a>
            </div></div></div>
            <div class="col-4"><div class="card d-flex flex-center flex-column p-2 hover-elevate-up shadow-sm parent-hover"><div class="card-body">
              <a class="card-block stretched-link text-decoration-none" type="button" onclick="document.getElementById('phone-number').value = document.getElementById('phone-number').value + '0';"><h1 class="card-title parent-hover-primary">0</h1></a>
            </div></div></div>
            <div class="col-4"><div class="card d-flex flex-center flex-column p-2 hover-elevate-up shadow-sm parent-hover"><div class="card-body">
              <a class="card-block stretched-link text-decoration-none" type="button" onclick="document.getElementById('phone-number').value = document.getElementById('phone-number').value + '#';"><h1 class="card-title parent-hover-primary">#</h1></a>
            </div></div></div>
          </div>
        </div>
        <div class="separator mb-6"></div>
        <div class="d-flex justify-content-end">
          <button id="button-call" type="submit" class="btn btn-primary btn-lg mx-3" data-bs-toggle="modal" data-bs-target="#during_call">Call</button>
          <button type="button" onclick="document.getElementById('phone-number').value = document.getElementById('phone-number').value.substring(0, document.getElementById('phone-number').value.length - 1);" class="btn btn-light btn-lg"><i class="text-gray-500 fs-6"><span class="fas fa-trash"></span></i></button>
        </div>
      </form>
    </div>
    </div>

  </div>
</div>
