{% extends "base.html" %}
{% load static %}
{% block title %}Edit Service{% endblock %}

{% block extra_css %}
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.css" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2>Edit Service</h2>
    <form method="post" enctype="multipart/form-data" class="row g-3">
        {% csrf_token %}
        <div class="col-md-6">
            <label for="service_name" class="form-label">Service Name</label>
            <input type="text" class="form-control" id="service_name" name="service_name" value="{{ service.service_name }}" required>
        </div>
        <div class="col-md-6">
            <label for="status" class="form-label">Status</label>
            <select class="form-select" id="status" name="status">
                <option value="active" {% if service.status == 'active' %}selected{% endif %}>Active</option>
                <option value="inactive" {% if service.status == 'inactive' %}selected{% endif %}>Inactive</option>
            </select>
        </div>
        <div class="col-12">
            <label for="description" class="form-label">Description</label>
            <textarea class="form-control summernote" id="description" name="description" rows="3" required>{{ service.description|safe }}</textarea>
        </div>

        <div class="col-12">
            <label class="form-label">Conditions</label>
            <div id="conditions-list">
                {% for cond in service.conditions %}
                <div class="row mb-2 condition-row">
                    <div class="col-md-5">
                        <input type="text" class="form-control" name="condition_key[]" placeholder="Key" value="{{ cond.key }}">
                    </div>
                    <div class="col-md-5">
                        <input type="text" class="form-control" name="condition_value[]" placeholder="Value" value="{{ cond.value }}">
                    </div>
                    <div class="col-md-2"></div>
                </div>
                {% endfor %}
                {% if not service.conditions or service.conditions|length == 0 %}
                <div class="row mb-2 condition-row">
                    <div class="col-md-5">
                        <input type="text" class="form-control" name="condition_key[]" placeholder="Key">
                    </div>
                    <div class="col-md-5">
                        <input type="text" class="form-control" name="condition_value[]" placeholder="Value">
                    </div>
                    <div class="col-md-2"></div>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="col-12">
            <label for="image" class="form-label">Image</label>
            {% if service.image %}
                <img src="{{ service.image.url }}" width="120" class="mb-2"><br>
            {% endif %}
            <input type="file" class="form-control" id="image" name="image">
        </div>

        <div class="col-12">
            <button type="submit" class="btn btn-primary">Update Service</button>
            <a href="{% url 'service-management' %}" class="btn btn-secondary">Back</a>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.summernote').summernote({
        height: 150
      });

      function updateConditionButtons() {
        var rows = $('#conditions-list .condition-row');
        rows.find('.add-condition').remove();
        rows.find('.remove-condition').remove();
        rows.each(function(i) {
          if (i === rows.length - 1) {
            $(this).find('.col-md-2').append('<button type="button" class="btn btn-success add-condition">+</button>');
          } else {
            $(this).find('.col-md-2').append('<button type="button" class="btn btn-danger remove-condition">-</button>');
          }
        });
      }

      updateConditionButtons();

      $('#conditions-list').on('click', '.add-condition', function() {
        var row = `<div class="row mb-2 condition-row">
            <div class="col-md-5">
                <input type="text" class="form-control" name="condition_key[]" placeholder="Key">
            </div>
            <div class="col-md-5">
                <input type="text" class="form-control" name="condition_value[]" placeholder="Value">
            </div>
            <div class="col-md-2"></div>
        </div>`;
        $('#conditions-list').append(row);
        updateConditionButtons();
      });

      $('#conditions-list').on('click', '.remove-condition', function() {
        $(this).closest('.condition-row').remove();
        updateConditionButtons();
      });
    });
  </script>
{% endblock %}