<?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_user_id = get_current_user_id();
      $copuloo_table = $wpdb->prefix . 'copuloo_contacts';
      // Direct database query used below – $wpdb->prepare() is always used to prevent SQL injection.
      $copuloo_numberOfContacts = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM {$wpdb->prefix}copuloo_contacts WHERE user = %d", $copuloo_user_id)); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
      // Direct database query used below – $wpdb->prepare() is always used to prevent SQL injection.
      $copuloo_numberOfBlocked = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM {$wpdb->prefix}copuloo_contacts WHERE user = %d AND blocked = 1", $copuloo_user_id)); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
      // Defaults
      if ($copuloo_numberOfContacts === null) { $copuloo_numberOfContacts = 0; }
      if ($copuloo_numberOfBlocked === null) { $copuloo_numberOfBlocked = 0; }
      // Pagination
      $copuloo_resultsPage = 1;
      $copuloo_limit = '12';
      $copuloo_limit_offset = 0;
      $copuloo_limit_count = 12;
      // Handle pagination
      if (isset($_GET['resultsPage']) && is_numeric($_GET['resultsPage']) && intval($_GET['resultsPage']) > 1) {
          $copuloo_resultsPage = intval($_GET['resultsPage']);
          $copuloo_limit_offset = ($copuloo_resultsPage - 1) * $copuloo_limit_count;
      }
      ?>

      <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-address-book 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">Address Book</a>
											</div>
											<div class="d-flex flex-wrap fw-semibold mb-4 fs-5 text-gray-400">Keep yourself organized by keeping track of repeat callers</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-3">
												<div class="d-flex align-items-center">
                          <i class="fs-1 me-2">
                            <span class="fas fa-user"></span>
                          </i>
													<div class="fs-4 fw-bold"><?php echo esc_html($copuloo_numberOfContacts); ?></div>
												</div>
												<div class="fw-semibold fs-6 text-gray-400"><?php if (strlen($copuloo_numberOfContacts) < 2) { echo 'Contact'; } else { echo 'Contacts'; } ?></div>
											</div>
											<div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
												<div class="d-flex align-items-center">
                          <i class="fs-1 text-danger me-2">
                            <span class="fas fa-user"></span>
                          </i>
													<div class="fs-4 fw-bold counted"><?php echo esc_html($copuloo_numberOfBlocked); ?></div>
												</div>
												<div class="fw-semibold fs-6 text-gray-400">Blocked</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" href="<?php echo esc_url(wp_nonce_url($copulooDashboardUrl.'&dashboardpage=contacts', 'Copuloo', 'user_nonce')); ?>">Contacts</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" href="<?php echo esc_url(wp_nonce_url($copulooDashboardUrl.'&dashboardpage=messages', 'Copuloo', 'user_nonce')); ?>">Messages</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" href="<?php echo esc_url(wp_nonce_url($copulooDashboardUrl.'&dashboardpage=calendar', 'Copuloo', 'user_nonce')); ?>">Timetable</a>
              </li>
						</ul>
						<a href="#" data-bs-toggle="modal" data-bs-target="#new_contact" class="btn btn-primary fw-bold fs-8 fs-lg-base">Create Contact</a>
					</div>
				</div>
			</div>

      <?php
      if (isset($_GET['contact'])) {
        $copuloo_contact = sanitize_text_field(wp_unslash($_GET['contact'] ?? ''));

        if ($copuloo_contact === 'new') {
            include('new.php');
        } else {
            $copuloo_user_id = (int) wp_get_current_user()->ID;
            $copuloo_table = $wpdb->prefix . 'copuloo_contacts';
            // Direct database query used below – $wpdb->prepare() is always used to prevent SQL injection.
            $copuloo_opened_item = $wpdb->get_results($wpdb->prepare("SELECT * FROM {$wpdb->prefix}copuloo_contacts WHERE id = %s AND user = %d LIMIT 1", $copuloo_contact, $copuloo_user_id)); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
            if (!empty($copuloo_opened_item)) {
                include('view.php');
            } else {
                include('default.php');
            }
        }
        } else {
            include('default.php');
        }
      ?>
    </div>
</div>

<!-- New Contact MODAL -->
<div class="modal fade" id="new_contact" tabindex="-1" aria-hidden="true" style="display: none;">
			<div class="modal-dialog mw-650px">
				<div class="modal-content">
					<div class="modal-header pb-0 border-0 justify-content-end">
						<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
              <i class="fs-1">
                <span class="fas fa-times"></span>
              </i>
						</div>
					</div>
					<div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
						<div class="text-center mb-13">
							<h1 class="mb-3">Add New Contact</h1>
							<div class="text-muted fw-semibold fs-5">Organize your client list</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_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("none", "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">
                  </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>
		</div>
