{% extends BASE_TEMPLATE %}
{% load crispy_forms_filters custom_filters%}
{% load i18n %}
{% load static %}

{% block customCSS %}

{% endblock %}

{% block content %}
    {% translate "Confirm Deletion" as modal_title %}
                {% translate "Delete" as delete_btn_modal %}
        <div class="row">
            <div class="col-6">
                <h3 class="mb-3">{{ page_title }}</h3>
                <form class="form" method="post" enctype="multipart/form-data">
                    {% csrf_token %}

        <!-- Name Field -->
        <div class="form-floating mb-3">
            {{ form.name|add_class:"form-control form-control-sm" }}
            <label for="{{ form.name.id_for_label }}">{{ _("Name") }}</label>
            {% if form.name.errors %}
                <div class="alert alert-danger mt-2">
                    {{ form.name.errors }}
                </div>
            {% endif %}
        </div>

        <!-- Description Field -->
        <div class="form-floating mb-3">
            {{ form.description|add_class:"form-control form-control-sm" }}
            <label for="{{ form.description.id_for_label }}">{{ _("Description") }}</label>
            {% if form.description.errors %}
                <div class="alert alert-danger mt-2">
                    {{ form.description.errors }}
                </div>
            {% endif %}
        </div>

        <!-- Duration Field -->
        <div class="form-floating mb-3">
            {{ form.duration|add_class:"form-control form-control-sm" }}
            <label for="{{ form.duration.id_for_label }}">{{ _("Duration") }}</label>
            {% if form.duration.errors %}
                <div class="alert alert-danger mt-2">
                    {{ form.duration.errors }}
                </div>
            {% endif %}
        </div>

        <!-- Price Field -->
        <div class="form-floating mb-3">
            {{ form.price|add_class:"form-control form-control-sm" }}
            <label for="{{ form.price.id_for_label }}">{{ _("Price") }}</label>
            {% if form.price.errors %}
                <div class="alert alert-danger mt-2">
                    {{ form.price.errors }}
                </div>
            {% endif %}
        </div>

        <!-- Down Payment Field -->
        <div class="form-floating mb-3">
            {{ form.down_payment|add_class:"form-control form-control-sm" }}
            <label for="{{ form.down_payment.id_for_label }}">{{ _("Down Payment")}}</label>
            {% if form.down_payment.errors %}
                <div class="alert alert-danger mt-2">
                    {{ form.down_payment.errors }}
                </div>
            {% endif %}
        </div>

        <!-- Image Field -->
        <div class="mb-3">
            <label for="{{ form.image.id_for_label }}" class="form-label">{{ _("Image") }}</label>
            {{ form.image }}
            {% if form.image.errors %}
                <div class="alert alert-danger mt-2">
                    {{ form.image.errors }}
                </div>
            {% endif %}
        </div>

        <!-- Currency Field -->
         <div class="form-floating mb-3">
            <select name="currency" id="id_currency" class="form-select form-control-sm" >
                <option class="currency" value="SAR">{{ CURRENCY }}</option>
            </select>
            <label for="id_currency"><span class="currency"> {{ CURRENCY }}</span></label>
            {% if form.currency.errors %}
                <div class="alert alert-danger mt-2">
                    {{ form.currency.errors }}
                </div>
            {% endif %}
        </div>

        <!-- Background Color Field -->
        <div class="form-floating mb-3">
        <input type="color" value="#000000" id="{{ form.background_color.id_for_label }}" class="form-control form-control-sm" >
            <label for="{{ form.background_color.id_for_label }}">{{ _("Background Color")}}</label>
            {% if form.background_color.errors %}
                <div class="alert alert-danger mt-2">
                    {{ form.background_color.errors }}
                </div>
            {% endif %}
        </div>


                    {% if btn_text %}
                        <button type="submit" class="btn btn-sm btn-phoenix-primary">{{ btn_text }}</button>
                    {% else %}
                        {% if request.user.is_superuser and service.id %}
{% translate "Are you sure you want to delete this service?" as d_modal_message %}
                            <div class="service-btn-container">
                                <a href="{% url 'appointment:update_service' service_id=service.id %}"
                                   class="btn btn-sm btn-phoenix-primary">
                                    <i class="fas fa-pen"></i>
                                </a>
                                <a href="javascript:void(0)"
                                   onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_service' service_id=service.id %}', null)"
                                   class="btn btn-sm btn-phoenix-danger">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </div>
                        {% endif %}
                    {% endif %}
                </form>

            </div>
        </div>
    {% include 'modal/confirm_modal.html' %}
{% endblock %}

{% block customJS %}
    <script src="{% static 'js/modal/show_modal.js' %}"></script>

    <script src="{% static 'js/js-utils.js' %}"></script>
{% endblock %}