{% extends "admin_panel/base.html" %} {% load static %} {% block header %}
<div class="tabs-list border-bottom">
    <nav>
        <div class="nav nav-underline" id="nav-tab" role="tablist">
            <button class="nav-link active" id="nav-application-tab" data-bs-toggle="tab"
                data-bs-target="#nav-application" type="button" role="tab" aria-controls="nav-application"
                aria-selected="true">
                Process form
            </button>
        </div>
    </nav>
</div>
<div class="table-row">
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-application" role="tabpanel"
            aria-labelledby="nav-application-tab" tabindex="0">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-4 col-xl-7">
                            <div class="d-flex align-items-center gap-3">
                                <a type="submit" class="save-btn p-2 w-auto" href="/process-form/{{process_id}}">
                                    <img src="{% static 'images/svg/back.svg' %}" width="20px" />
                                </a>
                                {% csrf_token %}
                                <h1 class="title mb-0" {% if data %}data-i={{process_id}}{% endif %}>
                                    {% if data %}                                        
                                        {% if data.language_type == 0  %}
                                            ગુજરાતી પ્રશ્ન અપડેટ
                                        {% elif data.language_type == 1 %}
                                            English Queastion Update
                                        {% endif %}
                                    {% else %}
                                        {% if language_code == "gu"  %}
                                            ગુજરાતી પ્રશ્ન ઉમેરો
                                        {% elif language_code == 'en' %}
                                            English Queastion Add
                                        {% endif %}
                                    {% endif %}
                                </h1>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="row">
                            <div class="col-12 table-row card-list">
                                <div class="card card-m-0">
                                    <div class="card-body p-3">
                                        <h6 class="fw-700 mb-3">
                                            {% if data %}
                                                {% if data.language_type == 0  %}
                                                    પ્રશ્ન
                                                {% elif data.language_type == 1 %}
                                                    Question
                                                {% endif %}
                                            {% else %}
                                                {% if language_code == "gu"  %}
                                                    પ્રશ્ન
                                                {% elif language_code == 'en' %}
                                                    Question
                                                {% endif %}
                                            {% endif %}
                                        </h6>
                                        <div class="mb-4">
                                            <input type="text" id="question" class="form-control p-2" placeholder="{% if language_code == "gu"  %}તમારો પ્રશ્ન દાખલ કરો{% elif language_code == 'en' %}Enter Your Question{% endif %}" {% if data %}value="{{data.title}}"{% endif %} >
                                        </div>
                                        <div class="mb-2 d-flex align-items-center gap-3">
                                            <h6 class="fw-700 mb-0 ">
                                                {% if data %}
                                                    {% if data.language_type == 0  %}
                                                        ક્ષેત્ર
                                                    {% elif data.language_type == 1 %}
                                                        Field
                                                    {% endif %}
                                                {% else %}
                                                    {% if language_code == "gu"  %}
                                                        ક્ષેત્ર
                                                    {% elif language_code == 'en' %}
                                                        Field
                                                    {% endif %}
                                                {% endif %}
                                            </h6>
                                            {% if data %}
                                                {% if data.language_type == 0  %}
                                                    <span class="mb-0 text-danger fw-bold" style="font-size: 13px;">*નવો ડ્રોપડાઉન વિકલ્પ પસંદ કરવાથી જૂનો રેકોર્ડ કાયમી ધોરણે બદલાઈ જાય છે.</span>
                                                {% elif data.language_type == 1 %}
                                                    <span class="mb-0 text-danger fw-bold" style="font-size: 13px;">*Selecting a new dropdown option replaces the old record permanently.</span>
                                                {% endif %}
                                            {% endif %}
                                            
                                        </div>

                                        <div class="mb-4 d-flex align-items-center gap-2">
                                            <select class="form-select select-field p-2" id="field" onchange="open_model_for_option(this)" aria-label="Default select example">
                                                <option value="">
                                                    {% if data %}
                                                        {% if data.language_type == 0  %}
                                                            તમારું ક્ષેત્ર પસંદ કરો
                                                        {% elif data.language_type == 1 %}
                                                            Select Your Field
                                                        {% endif %}
                                                    {% else %}
                                                        {% if language_code == "gu"  %}
                                                            તમારું ક્ષેત્ર પસંદ કરો
                                                        {% elif language_code == 'en' %}
                                                            Select Your Field
                                                        {% endif %}
                                                    {% endif %}
                                                </option>
                                                {% for Field in felids %}
                                                    <option value="{{Field.id}}" {% if current_felid == Field.id  %}selected{% endif %}>{{Field.name}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>

                                        {% if current_felid == 2 %}
                                            <div class="mb-4 d-flex align-items-center gap-2">
                                            {% for mapping_obj in data.mapping_form_detail.all  %}
                                                <ul>
                                                    {% if mapping_obj.input_id.id == 2 %}
                                                        {% for option in mapping_obj.option_felid_mapping.all %}    
                                                            <li>{{option.text}}</li>
                                                        {% endfor %}
                                                    {% endif %}
                                                </ul>
                                            {% endfor %}
                                            </div>
                                        {% endif %}

                                        <h6 class="fw-700">
                                            {% if data %}
                                                {% if data.language_type == 0  %}
                                                    વર્ણન
                                                {% elif data.language_type == 1 %}
                                                    Description
                                                {% endif %}
                                            {% else %}
                                                {% if language_code == "gu"  %}
                                                    વર્ણન
                                                {% elif language_code == 'en' %}
                                                    Description
                                                {% endif %}
                                            {% endif %}
                                        </h6>
                                        
                                        <div class="mb-4">
                                            <div class="form-floating mt-3">
                                                <textarea class="form-control" placeholder="Description"
                                                    id="question_description" style="height: 100px">{% if data %}{{data.description}}{% endif %}</textarea>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-end mt-3">
                                            <div class="mt-4 d-flex gap-3">
                                                <button type="button" class="save-btn px-5" data-language-code="{% if data %}{{data.language_type}}{% else %}{{language_code}}{% endif %}" onclick="{% if data %}update_question(this, {{data.id}}){% else %}add_process_form_question(this, {{process_id}}){% endif %}">
                                                    {% if data %}                                        
                                                        {% if data.language_type == 0  %}
                                                            અપડેટ
                                                        {% elif data.language_type == 1 %}
                                                            Update
                                                        {% endif %}
                                                    {% else %}
                                                        {% if language_code == "gu"  %}
                                                            સાચવો
                                                        {% elif language_code == 'en' %}
                                                        Save
                                                        {% endif %}
                                                    {% endif %}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="option_model" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="option_modelLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fw-700" id="option_modelLabel">No Of Select</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h6 class="fw-700">No Of Select</h6>
                <div class="mb-4">
                    <input type="number" class="form-control p-2" min="1" max="5" data-language-code={% if data %}{{data.language_type}}{% else %}{{language_code}}{% endif %}  placeholder="Enter Your No Of Select" oninput="create_select_option_tag(this)">
                </div>
                <div class="row row-cols-1 row-cols-lg-2 g-3" id="no_of_dropdown_div">
                    
                </div>
            </div>
            <div class="modal-footer">
                <div class="d-flex align-items-center gap-3 m-0">
                    <button type="button" class="cancel-btn px-4" data-bs-dismiss="modal">
                        {% if data %}
                            {% if data.language_type == 0  %}રદ કરો{% elif data.language_type == 1 %}Cancel{% endif %}
                        {% else %}
                            {% if language_code == "gu"  %}રદ કરો{% elif language_code == 'en' %}Cancel{% endif %}
                        {% endif %}
                    </button>
                    <a type="button" class="save-btn px-4 text-decoration-none" data-language-code={% if data %}{{data.language_type}}{% else %}{{language_code}}{% endif %}  onclick="option_create(this)">
                        {% if data %}
                            {% if data.language_type == 0  %}સાચવો{% elif data.language_type == 1 %}Save{% endif %}
                        {% else %}
                            {% if language_code == "gu"  %}સાચવો{% elif language_code == 'en' %}Save{% endif %}
                        {% endif %}
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}


{% block script %}
    <script src="{% static 'js/process.js' %}"></script>
{% endblock %}