{% extends 'base.html' %}
{% block title %}Book Services{% endblock %}

{% block content %}
<div class="flex min-h-screen bg-gray-100">

  <!-- Sidebar -->
  <aside class="w-64 bg-white shadow-md p-6">
    <h2 class="text-xl font-bold mb-6">Welcome, {{ request.user.first_name }}</h2>
    <nav class="space-y-3">
      <a href="/customer/dashboard/" class="block px-4 py-2 rounded hover:bg-blue-100 text-gray-700 {% if request.path == '/customer/dashboard/' %}bg-blue-200 font-semibold text-blue-800{% else %}text-gray-700{% endif %}">Dashboard Home</a>
      <a href="{% url 'my_bookings' %}" class="block px-4 py-2 rounded hover:bg-blue-100 text-gray-700">My Bookings</a>
	  <a href="{% url 'book_services' %}" class="block px-4 py-2 rounded hover:bg-blue-100 text-gray-700 {% if request.path == '/book-services/' %}bg-blue-200 font-semibold text-blue-800{% else %}text-gray-700{% endif %}">Book Services</a>
      <a href="{% url 'customer_profile_update' %}" class="block px-4 py-2 rounded hover:bg-blue-100 text-gray-700">Profile</a>
      <a href="{% url 'handlelogout' %}" class="block px-4 py-2 rounded text-red-600 hover:bg-red-100">Logout</a>
    </nav>
  </aside>

  <!-- Main Content -->
  <main class="flex-1 p-8">
    <h1 class="text-2xl font-bold mb-4">Edit Book Services</h1>
   <form method="post" id="booking-form">
  {% csrf_token %}

  <label>Select Vertical</label>
  <select id="vertical-select" name="vertical" class="w-full p-2 border rounded mb-4">
    <option value="">-- Select Vertical --</option>
    {% for vertical in form.fields.vertical.queryset %}
      <option value="{{ vertical.id }}" {% if form.initial.vertical.id == vertical.id %}selected{% endif %}>{{ vertical.name }}</option>
    {% endfor %}
  </select>

  <label>Select SubCategory</label>
  <select id="subcategory-select" name="subcategory" class="w-full p-2 border rounded mb-4">
    {% if form.fields.subcategory.queryset %}
      {% for sub in form.fields.subcategory.queryset %}
        <option value="{{ sub.id }}" {% if form.initial.subcategory.id == sub.id %}selected{% endif %}>{{ sub.name }}</option>
      {% endfor %}
    {% else %}
      <option value="">-- Select SubCategory --</option>
    {% endif %}
  </select>

  <div id="services-checkboxes" class="mb-4">
    <label>Select Services</label>
    <div id="services-list">
      {% if form.fields.services.queryset %}
        {% for service in form.fields.services.queryset %}
          <label><input type="checkbox" name="services" value="{{ service.id }}"
           {% if service.id == selected_service_id %}checked{% endif %}>
            {{ service.name }}</label><br>
        {% endfor %}
      {% endif %}
    </div>
  </div>

  <label>Add Comment</label>
  <textarea name="comments" class="w-full p-2 border rounded mb-4">{{ booking.comments }}</textarea>

  <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Update Booking</button>
</form>

   
  </main>

</div>

<script>
  document.getElementById('vertical-select').addEventListener('change', function () {
    let verticalId = this.value;
    fetch(`/ajax/load-subcategories/?vertical_id=${verticalId}`)
      .then(res => res.json())
      .then(data => {
        const subcategorySelect = document.getElementById('subcategory-select');
        subcategorySelect.innerHTML = '<option value="">-- Select SubCategory --</option>';
        data.forEach(item => {
          subcategorySelect.innerHTML += `<option value="${item.id}">${item.name}</option>`;
        });        
        document.getElementById('services-list').innerHTML = '';
        document.getElementById('services-checkboxes').classList.add('hidden');
      });
  });
</script>
<script>
  document.getElementById('subcategory-select').addEventListener('change', function () {
    let subcategoryId = this.value;
    fetch(`/ajax/load-services/?subcategory_id=${subcategoryId}`)
      .then(res => res.json())
      .then(data => {
        const serviceList = document.getElementById('services-list');
        serviceList.innerHTML = '';
        data.forEach(service => {
          serviceList.innerHTML += `<label class="flex items-center space-x-2"><input type="checkbox" name="services" value="${service.id}" class="form-checkbox"><span>${service.name}</span></label>`;
        });
        document.getElementById('services-checkboxes').classList.remove('hidden');
      });
  });
</script>
<script>
  const selectedServiceIds = {{ selected_service_ids|safe }};
  selectedServiceIds.forEach(id => {
    const checkbox = document.querySelector(`input[type="checkbox"][value="${id}"]`);
    if (checkbox) {
      checkbox.checked = true;
    }
  });
</script>
{% endblock %}