<?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 h-lg-100" id="contacts_main">
    <div class="card-header" id="chat_messenger_header">
      <div class="card-title">
        <i class="fs-1 me-2">
          <span class="fas fa-user"></span>
        </i>
        <h2><?php echo esc_html( isset($copuloo_contact[0]->name) ? $copuloo_contact[0]->name : copuloo_formatNumber(sanitize_text_field(wp_unslash($_GET['phone'] ?? ''))) ); ?></h2>
      </div>
      <div class="card-toolbar">
        <?php if ($copuloo_contact == null) {
            echo '<a class="me-4" href="' . esc_url(
                add_query_arg(
                    array(
                        'dashboardpage' => 'contacts',
                        'contact' => 'new',
                        'newnumber' => sanitize_text_field(wp_unslash($_GET['phone'] ?? '')),
                        'newcountrycode' => sanitize_text_field(wp_unslash($_GET['countrycode'] ?? '')),
                        'user_nonce'    => sanitize_text_field(wp_unslash($_GET['user_nonce']))
                    ),
                    admin_url('admin.php?page=copuloo_dashboard')
                )
            ) . '">Add Contact</a>';
        } ?>
        <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#remove_messages">Remove</button>
      </div>
    </div>
    <div class="card-body pt-5">
      <div style="overflow: auto; display: flex; flex-direction: column-reverse;" class="scroll-y me-n5 pe-5 h-500px" style="max-height: 496px;">
        <?php foreach ($copuloo_opened_item as $copuloo_item)
            {
              // Set messages to read
              $copuloo_data = array();
              $copuloo_data['reading'] = 1;
              // Direct database query used below – $wpdb->prepare() is always used to prevent SQL injection.
              $wpdb->update($copuloo_messages,$copuloo_data,array('user' => wp_get_current_user()->ID,'id' => sanitize_text_field($copuloo_item->id)), null, array('%d', '%s')); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
							// check if it's the client or user talking
							if ($copuloo_item->from_number == sanitize_text_field(wp_unslash($_GET['phone'])))
							{
								// user
								echo '<div class="d-flex justify-content-start mb-10">';
	              echo '<div class="d-flex flex-column align-items-start">';
	              echo '<div class="d-flex align-items-center mb-2">';
	              echo '<div class="">';
	              if ($copuloo_contact != null) { echo '<a class="fs-5 fw-bold text-gray-900 me-1">'.esc_html($copuloo_contact[0]->name).'</a>'; }
                else { echo '<a class="fs-5 fw-bold text-gray-900 me-1">'.esc_html(copuloo_formatNumber(sanitize_text_field(wp_unslash($_GET['phone'] ?? '')))).'</a>'; }
	              echo '<span class="text-muted fs-7 mb-1">'.esc_html(copuloo_timeElapsed($copuloo_item->created_at)).'</span>';
	              echo '</div>';
	              echo '</div>';
	              echo '<div class="p-5 rounded bg-light-info text-gray-900 fw-semibold mw-lg-400px text-start" data-element="message-text">'.esc_html($copuloo_item->message).'</div>';
	              echo '</div>';
	              echo '</div>';
							}
		        	else
							{
								// client
								echo '<div class="d-flex justify-content-end mb-10">';
								echo '<div class="d-flex flex-column align-items-end">';
								echo '<div class="d-flex align-items-center mb-2">';
								echo '<div class="me-3">';
								echo '<span class="text-muted fs-7 mb-1">'.esc_html(copuloo_timeElapsed($copuloo_item->created_at)).'</span>';
								if (substr($copuloo_item->id, -3) == 'you' && strlen($copuloo_item->id) > 13) { echo '<a class="fs-5 fw-bold text-gray-900 ms-1">You</a>'; }
								else { echo '<a class="fs-5 fw-bold text-gray-900 ms-1">You</a>'; }
								echo '</div>';
								echo '</div>';
								echo '<div class="p-5 rounded bg-light-primary text-gray-900 fw-semibold mw-lg-400px text-end" data-element="message-text">'.esc_html($copuloo_item->message).'</div>';
								echo '</div>';
								echo '</div>';
							}
            }
            ?>
          </div>
    </div>
    <div class="card-footer pt-4" id="chat_messenger_footer">
      <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_send_text"></input>
        <input type="hidden" name="phoneNumber" value="<?php echo esc_attr( sanitize_text_field( wp_unslash($_GET['phone'] ?? '' )) ); ?>">
        <input type="hidden" name="countrycode" value="+<?php echo esc_attr( preg_replace('/[^0-9]/', '', sanitize_text_field(wp_unslash($_GET['countrycode'] ?? '')) ) ); ?>">

        <textarea name="textMessage" class="form-control form-control-flush mb-3" rows="1" data-element="input" placeholder="Type a message"></textarea>
        <div class="d-flex flex-stack">
          <div class="d-flex align-items-center me-2"></div>
          <button class="btn btn-primary" type="submit" data-element="send">Send</button>
        </div>
      </form>
    </div>
  </div>
</div>
<div class="modal fade" tabindex="-1" id="remove_messages">
  <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">Delete Messages?</h1>
          <div class="text-muted fw-semibold fs-5">Are you sure you want to delete all messages associated with this phone number.</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_messages"></input>
          <input type="hidden" name="phone" value="<?php echo esc_attr( sanitize_text_field( wp_unslash($_GET['phone'] ?? '' )) ); ?>">
          </input>
          <button type="submit" class="btn btn-danger">Delete</button>
        </form>
      </div>
    </div>
  </div>
</div>
