{% extends "base.html" %}
{% load static %}
{% block title %}Create 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>Create 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" 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 }}">{{ 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">Active</option>
                <option value="inactive">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">Normal</option>
                <option value="premium">Premium</option>
                <option value="luxury">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"></textarea>
        </div>
        <div class="col-12">
            <label class="form-label">Service/Price</label>
            <div id="service-price-list">
                {% for service in services %}
                    {% if service.service_name|lower == 'dry cleaning' or service.service_name|lower == 'laundry' or service.service_name|lower == 'steam iron' %}
                    <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 s in services %}
                                    <option value="{{ s.id }}" {% if s.id == service.id %}selected{% endif %}>{{ s.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>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        <div class="col-12">
            <button type="submit" class="btn btn-primary">Create 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 %}