{% extends "registration/base.html" %}

{% load static %}

<div class="card mb-3">
  <div class="card-body p-lg-3 p-sm-5">
    <h5 class="mb-0">My Value Trip</h5>
    <small>Search client or company details here</small>

    <!-- Dropdown Wrapper -->
    <div class="dropdown mt-3">
      <input id="search-input" class="form-control search-input dropdown-toggle" type="search" placeholder="Search..." aria-label="Search" data-bs-toggle="dropdown" aria-expanded="false" autocomplete="off">

      <!-- Dropdown Menu -->
      <div id="search-results" class="dropdown-menu w-100">
        <div id="dynamic-results">
          <p class="text-center text-muted mb-0">Start typing to search...</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row align-items-center d-none">
  <div class="col-xxl-4">
    <div class="card m-0 p-0">
      <div class="card-header d-flex flex-between-center py-2 border-bottom">
        <h6 class="mb-0">Customers Status</h6>
      </div>
      <div class="card-body d-flex flex-column justify-content-between">
        <canvas id="client_status" style="width: auto;"></canvas>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {
    $("#search-input").on("keyup", function() {
      let query = $(this).val().trim();

      if (query.length > 2) { // Only search after 3+ characters
        $.ajax({
          url: '<?= base_url('searchRecords') ?>',
          type: "POST",
          dataType: 'json',
          data: {
            search: query
          },
          success: function(response) {
            console.log(response.Data);
            if (response.status && response.Data != '') {
              $("#dynamic-results").html(response.Data);
            } else {
              $("#dynamic-results").html('<p class="text-center text-muted">No results found</p>');
            }

          }
        });
      } else {
        $("#dynamic-results").html('<p class="text-center text-muted">Start typing to search...</p>');
      }
    });
  });
</script>