{% extends "base.html" %}

{% load static %}

{% block title %}Dashboard | My Value Trip{% endblock %}

{% block sidebar %}

{% block content %}
<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>

<!-- jQuery for AJAX -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

  document.addEventListener('DOMContentLoaded', function () {
    $('#global-search').on('input', function () {
        const searchValue = $(this).val().trim();

        if (searchValue.length >= 3) {
            $.ajax({
                url: '{% url "search_records" %}',  // Adjust to your URL name
                type: 'POST',
                data: {
                    'search': searchValue,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                success: function (response) {
                    if (response.status && response.data) {
                        $('#global-search-results').html(response.data).slideDown();
                    } else {
                        $('#global-search-results').html("<p>No results found.</p>").slideDown();
                    }
                },
                error: function () {
                    $('#global-search-results').html("<p>Error occurred while searching.</p>").slideDown();
                }
            });
        } else {
            $('#global-search-results').slideUp().empty();  // Hide if too short
        }
    });
});

  {% comment %} $(document).ready(function() {
    $("#search-input").on("keyup", function() {
      let query = $(this).val().trim();

      if (query.length > 2) { // Only search after 3+ characters
        $.ajax({
          url: "{% url 'search_records' %}",  // Django URL name
          type: "POST",
          dataType: 'json',
          headers: { "X-CSRFToken": "{{ csrf_token }}" },
          data: {
            search: query
          },
          success: function(response) {
            if (response.status && response.data !== '') {
              $("#dynamic-results").html(response.data);
            } else {
              $("#dynamic-results").html('<p class="text-center text-muted">No results found</p>');
            }
          },
          error: function() {
            $("#dynamic-results").html('<p class="text-center text-danger">Error loading results</p>');
          }
        });
      } else {
        $("#dynamic-results").html('<p class="text-center text-muted">Start typing to search...</p>');
      }
    });
  }); {% endcomment %}
</script>
{% endblock %}

{% endblock %}