{% extends "base.html" %}
{% load static %}
{% block title %}Edit Garment{% 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 Garment</h2>
    <form method="post" class="row g-3">
        {% csrf_token %}
        <div class="col-md-4">
            <label for="name" class="form-label">Name of Garment</label>
            <input type="text" class="form-control" id="name" name="name" value="{{ garment.name }}" required>
        </div>
        <div class="col-md-4">
            <label for="category" class="form-label">Category</label>
            <select class="form-select" id="category" name="category">
                <option value="">Select Category</option>
                {% for category in categories %}
                    <option value="{{ category.id }}" {% if garment.category and garment.category.id == category.id %}selected{% endif %}>{{ category.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-4">
            <label for="status" class="form-label">Status</label>
            <select class="form-select" id="status" name="status">
                <option value="active" {% if garment.status == 'active' %}selected{% endif %}>Active</option>
                <option value="inactive" {% if garment.status == 'inactive' %}selected{% endif %}>Inactive</option>
            </select>
        </div>
        {% comment %} <div class="col-md-4">
            <label for="garment_type" class="form-label">Garment Type</label>
            <select class="form-select" id="garment_type" name="garment_type">
                <option value="normal" {% if garment.garment_type == 'normal' %}selected{% endif %}>Normal</option>
                <option value="premium" {% if garment.garment_type == 'premium' %}selected{% endif %}>Premium</option>
                <option value="luxury" {% if garment.garment_type == 'luxury' %}selected{% endif %}>Luxury</option>
            </select>
        </div> {% endcomment %}
        <div class="col-12">
            <label for="description" class="form-label">Description</label>
            <textarea class="form-control summernote" id="description" name="description" rows="3">{{ garment.description }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label">Service/Price</label>
            <div id="service-price-list">
                {% for sp in garment.service_prices %}
                <div class="row mb-2 service-price-row">
                    <div class="col-md-5">
                        <select class="form-select" name="service">
                            <option value="">Select Service</option>
                            {% for service in services %}
                                <option value="{{ service.id }}" {% if service.id == sp.service_id %}selected{% endif %}>{{ service.service_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-5">
                        <input type="number" step="0.01" class="form-control" name="price" value="{{ sp.price }}" placeholder="Price">
                    </div>
                    <div class="col-md-2">
                        <!-- Button will be set by JS -->
                    </div>
                </div>
                {% empty %}
                <div class="row mb-2 service-price-row">
                    <div class="col-md-5">
                        <select class="form-select" name="service">
                            <option value="">Select Service</option>
                            {% for service in services %}
                                <option value="{{ service.id }}">{{ service.service_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-5">
                        <input type="number" step="0.01" class="form-control" name="price" placeholder="Price">
                    </div>
                    <div class="col-md-2">
                        <!-- Button will be set by JS -->
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="col-12">
            <button type="submit" class="btn btn-primary">Update Garment</button>
            <a href="{% url 'garment-management' %}" class="btn btn-secondary">Back</a>
        </div>
    </form>
</div>
{% endblock %}
{% block extra_js %}
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.js"></script>
    <script>
            function updateServicePriceButtons() {
                var rows = $('#service-price-list .service-price-row');
                rows.each(function(i) {
                    var btnCol = $(this).find('.col-md-2');
                    btnCol.empty();
                    if (rows.length === 1) {
                        btnCol.append('<button type="button" class="btn btn-danger remove-service-price">-</button> <button type="button" class="btn btn-success add-service-price">+</button>');
                    } else if (i === rows.length - 1) {
                        btnCol.append('<button type="button" class="btn btn-success add-service-price">+</button> <button type="button" class="btn btn-danger remove-service-price">-</button>');
                    } else {
                        btnCol.append('<button type="button" class="btn btn-danger remove-service-price">-</button>');
                    }
                });
            }
        $(function() {
            $('.summernote').summernote({
                height: 150
            });
            updateServicePriceButtons();
            $(document).on('click', '.add-service-price', function() {
                var row = $(this).closest('.service-price-row').clone();
                row.find('input, select').val('');
                $('#service-price-list').append(row);
                updateServicePriceButtons();
            });
            $(document).on('click', '.remove-service-price', function() {
                $(this).closest('.service-price-row').remove();
                updateServicePriceButtons();
            });
        });
    </script>
{% endblock %}