{% 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="icon-saudi_riyal" value="SAR">
                            <span class="icon-saudi_riyal"></span>
                        </option>
                    </select>
                    <label for="id_currency">
                        <span class="icon-saudi_riyal"></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 %}