<?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="col-12">
  <div class="card card-flush h-lg-100" id="contacts_main">
    <div class="card-header pt-7" id="chat_contacts_header">
      <div class="card-title">
        <i class="fs-1 me-2">
          <span class="fas fa-user"></span>
        </i>
        <h2>Add New Contact</h2>
      </div>
    </div>
    <div class="card-body pt-5">
      <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_new_contact"></input>
        <div class="mb-7">
          <label class="fs-6 fw-semibold mb-3">
            <span>Avatar</span>
            <span class="ms-1" data-bs-toggle="tooltip" title="Change the look of the contacts avatar.">
              <i class="text-gray-500 fs-6">
                <span class="fas fa-info-circle"></span>
              </i>
            </span>
          </label>
          <div class="mt-1">
            <div class="row g-6 g-xl-9 mb-5" data-kt-buttons="true" data-kt-buttons-target=".form-check-image, .form-check-input">
              <div class="col-6 col-md-4">
                <label class="form-check-image">
                  <div class="form-check-wrapper symbol symbol-40px symbol-circle">
                    <span class="symbol-label bg-light-primary text-primary fs-6 fw-bolder">A</span>
                  </div>
                  <div class="form-check form-check-custom form-check-solid">
                    <input class="form-check-input" type="radio" checked value="1" name="icon" />
                    <div class="form-check-label me-1">Blue</div>
                  </div>
                </label>
              </div>
              <div class="col-6 col-md-4">
                <label class="form-check-image">
                  <div class="form-check-wrapper symbol symbol-40px symbol-circle">
                    <span class="symbol-label bg-light-success text-success fs-6 fw-bolder">A</span>
                  </div>
                  <div class="form-check form-check-custom form-check-solid me-10">
                    <input class="form-check-input" type="radio" value="2" name="icon" />
                    <div class="form-check-label me-1">Green</div>
                  </div>
                </label>
              </div>
              <div class="col-6 col-md-4">
                <label class="form-check-image">
                  <div class="form-check-wrapper symbol symbol-40px symbol-circle">
                    <span class="symbol-label bg-light-info text-info fs-6 fw-bolder">A</span>
                  </div>
                  <div class="form-check form-check-custom form-check-solid me-10">
                    <input class="form-check-input" type="radio" value="3" name="icon" />
                    <div class="form-check-label me-1">Purple</div>
                  </div>
                </label>
              </div>
              <div class="col-6 col-md-4">
                <label class="form-check-image">
                  <div class="form-check-wrapper symbol symbol-40px symbol-circle">
                    <span class="symbol-label bg-light-danger text-danger fs-6 fw-bolder">A</span>
                  </div>
                  <div class="form-check form-check-custom form-check-solid me-10">
                    <input class="form-check-input" type="radio" value="4" name="icon" />
                    <div class="form-check-label me-1">Red</div>
                  </div>
                </label>
              </div>
              <div class="col-6 col-md-4">
                <label class="form-check-image">
                  <div class="form-check-wrapper symbol symbol-40px symbol-circle">
                    <span class="symbol-label bg-light-warning text-warning fs-6 fw-bolder">A</span>
                  </div>
                  <div class="form-check form-check-custom form-check-solid me-10">
                    <input class="form-check-input" type="radio" value="5" name="icon" />
                    <div class="form-check-label me-1">Yellow</div>
                  </div>
                </label>
              </div>
              <div class="col-6 col-md-4">
                <label class="form-check-image">
                  <div class="form-check-wrapper symbol symbol-40px symbol-circle">
                    <span class="symbol-label bg-secondary text-dark fs-6 fw-bolder">A</span>
                  </div>
                  <div class="form-check form-check-custom form-check-solid me-10">
                    <input class="form-check-input" type="radio" value="6" name="icon" />
                    <div class="form-check-label me-1">Light Gray</div>
                  </div>
                </label>
              </div>
            </div>
          </div>
        </div>
        <div class="fv-row mb-7 fv-plugins-icon-container">
          <label class="fs-6 fw-semibold form-label mt-3">
            <span class="required">Name</span>
            <span class="ms-1" data-bs-toggle="tooltip" title="Enter the contact's name.">
              <i class="text-gray-500 fs-6">
                <span class="fas fa-info-circle"></span>
              </i>
            </span>
          </label>
          <input type="text" maxlength="250" required class="form-control form-control-solid" name="name" value="">
          <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
        </div>
        <div class="fv-row mb-7">
          <label class="fs-6 fw-semibold form-label mt-3">
            <span>Company</span>
            <span class="ms-1" data-bs-toggle="tooltip" title="Enter the contact's company (optional).">
              <i class="text-gray-500 fs-6">
                <span class="fas fa-info-circle"></span>
              </i>
            </span>
          </label>
          <input type="text" maxlength="250" class="form-control form-control-solid" name="company" value="">
        </div>
        <div class="fv-row mb-7">
          <label class="fs-6 fw-semibold form-label mt-3">
            <span class="required">Phone</span>
            <span class="ms-1" data-bs-toggle="tooltip" title="Enter the contact'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(sanitize_text_field(wp_unslash($_GET['newnumbercountrycode'] ?? '')), "countrycode"); // phpcs:ignore WordPress.Security.EscapeOutput ?>
            </div>
            <div class="col-lg-8 fv-row">
              <input id="phoneNumber" type="number" maxlength="16" required class="form-control form-control-solid" name="phone" value="<?php echo esc_html(sanitize_text_field(wp_unslash($_GET['newnumber'] ?? ''))); ?>">
            </div>
          </div>
        </div>
        <div class="fv-row mb-7">
          <label class="fs-6 fw-semibold form-label mt-3">
            <span>Notes</span>
            <span class="ms-1" data-bs-toggle="tooltip" title="Enter any additional notes about the contact (optional).">
              <i class="text-gray-500 fs-6">
                <span class="fas fa-info-circle"></span>
              </i>
            </span>
          </label>
          <textarea class="form-control form-control-solid" rows="5" maxlength="2500" name="notes"></textarea>
        </div>
        <div class="fv-row mb-7">
          <div class="form-check form-check-custom form-check-solid">
            <input class="form-check-input" name="blocked" type="checkbox" value="1" id="flexCheckDefault" />
            <label class="form-check-label" for="flexCheckDefault"> Block Contact </label>
          </div>
        </div>
        <div class="separator mb-6"></div>
        <div class="d-flex justify-content-end">
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>
