<?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> <?php echo esc_html($copuloo_opened_item[0]->name); ?> </h2>
      </div>
      <form>
        <input style="display:none;" id="country-code-outbound" value="<?php echo esc_html($copuloo_opened_item[0]->countrycode); ?>" type="text">
        <input style="display:none;" id="phone-number" value="<?php echo esc_html($copuloo_opened_item[0]->phone); ?>" type="text">
        <button id="button-call" type="submit" class="btn btn-primary btn" data-bs-toggle="modal" data-bs-target="#during_call">Call</button>
      </form>
    </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_update_contact"></input>
        <input type="hidden" name="idValue" value="<?php echo esc_html($copuloo_opened_item[0]->id); ?>">
        </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" <?php if ($copuloo_opened_item[0]->icon == 1) { echo "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" <?php if ($copuloo_opened_item[0]->icon == 2) { echo "checked"; } ?> 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" <?php if ($copuloo_opened_item[0]->icon == 3) { echo "checked"; } ?> 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" <?php if ($copuloo_opened_item[0]->icon == 4) { echo "checked"; } ?> 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" <?php if ($copuloo_opened_item[0]->icon == 5) { echo "checked"; } ?> 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" <?php if ($copuloo_opened_item[0]->icon == 6) { echo "checked"; } ?> 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="">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="<?php echo esc_html($copuloo_opened_item[0]->name); ?>">
          <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="<?php echo esc_html($copuloo_opened_item[0]->company); ?>">
        </div>
        <div class="fv-row mb-7">
          <label class="fs-6 fw-semibold form-label mt-3">
            <span class="">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 echo copuloo_country_code($copuloo_opened_item[0]->countrycode, "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($copuloo_opened_item[0]->phone); ?>">
            </div>
          </div>
        </div>
        <div class="fv-row mb-7">
          <label class="fs-6 fw-semibold form-label mt-3">
            <span class="">Status Badge</span>
            <span class="ms-1" data-bs-toggle="tooltip" title="A small status badge displayed on contacts to help you easily identify the contact e.g. lead, new, qualified">
              <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">
              <input type="text" maxlength="12" class="form-control form-control-solid" name="status" placeholder="Status" value="<?php echo esc_html($copuloo_opened_item[0]->status); ?>">
            </div>
            <div class="col-lg-8 fv-row">
              <select name="statuscolor" aria-label="Select a Color" data-placeholder="Select A Color" class="form-select form-select-solid form-select-lg fw-semibold mb-0 mb-lg-0">
                <option <?php if (isset($copuloo_opened_item[0]->statuscolor) && $copuloo_opened_item[0]->statuscolor == 'primary') { echo 'selected'; } ?> value="primary">Blue</option>
                <option <?php if (isset($copuloo_opened_item[0]->statuscolor) && $copuloo_opened_item[0]->statuscolor == 'success') { echo 'selected'; } ?> value="success">Green</option>
                <option <?php if (isset($copuloo_opened_item[0]->statuscolor) && $copuloo_opened_item[0]->statuscolor == 'info') { echo 'selected'; } ?> value="info">Purple</option>
                <option <?php if (isset($copuloo_opened_item[0]->statuscolor) && $copuloo_opened_item[0]->statuscolor == 'danger') { echo 'selected'; } ?> value="danger">Red</option>
                <option <?php if (isset($copuloo_opened_item[0]->statuscolor) && $copuloo_opened_item[0]->statuscolor == 'warning') { echo 'selected'; } ?> value="warning">Yellow</option>
                <option <?php if (isset($copuloo_opened_item[0]->statuscolor) && $copuloo_opened_item[0]->statuscolor == 'secondary') { echo 'selected'; } ?> value="secondary">Light Gray</option>
              </select>
            </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"><?php echo esc_html($copuloo_opened_item[0]->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" <?php if ($copuloo_opened_item[0]->blocked == 1) { echo "checked"; } ?> />
            <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="button" class="btn btn-danger me-3" data-bs-toggle="modal" data-bs-target="#remove_contact">Remove</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>
<div class="modal fade" tabindex="-1" id="remove_contact">
  <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-3">Remove Contact?</h1>
          <div class="text-muted fw-semibold fs-5">This action cannot be undon and the contact will be deleted forever.</div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
        <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_remove_contact"></input>
          <input type="hidden" name="idValue" value="<?php echo esc_html($copuloo_opened_item[0]->id); ?>">
          </input>
          <button type="submit" class="btn btn-danger">Remove</button>
        </form>
      </div>
    </div>
  </div>
</div>
