{% extends "orders/base.html" %}
{% load crispy_forms_tags %}
{% load static %}
{% block content %}


<main>
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="mb-2">
                        {% if request.path != '/dx/order/create/' %}
                            <h1>Προβολή Παραγγελίας</h1>
                        {% else %}
                            <h1>Δημιουργία Παραγγελίας</h1>
                        {% endif %}

                        <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                            <ol class="breadcrumb pt-0">
                                <li class="breadcrumb-item">
                                    <a href="/dx">Πίσω</a>
                                </li>
                            </ol>
                        </nav>
                    </div>

                    <div class="separator mb-5"></div>
                {% if request.path != '/dx/order/create/' %}
                            <a href="/dx/order/delete/{{ request.path | cut:"/dx/order/update/" }}"><span class="float-right mb-1 mt-1 badge badge-pill badge-danger mb-1">Διαγραφή Παραγγελίας</span></a>
                            <a href="/dx/order/print/{{ request.path | cut:"/dx/order/update/" }}"><span class="float-left mb-1 mt-1 badge badge-pill badge-outline-info mb-1">Εκτύπωση Παραγγελίας</span></a>
                        {% endif %}
                {% if not user.is_authenticated %}
                <a href="/dx/order/create/"><span class="float-left mb-1 mt-1 badge badge-pill badge-outline-info mb-1">Ανανέωση Σελίδας</span></a>
                {% endif %}
                </div>
            </div>
            <div class="row mb-4">
                                 <div class="container">
 {% if messages %}
  <ul class="messages alert alert-primary">
    {% for message in messages %}
      <li class="{{ message.tags }}">{{ message|safe }}</li>
    {% endfor %}
  </ul>
{% endif %}
    <div class="card">
        {% if form.errors %}
            <p>{{ form.errors }}</p>
    {% for field in form %}
        {% for error in field.errors %}
            <div class="alert alert-danger">
                <strong>{{ field.name }} {{ error|escape }}</strong>
            </div>
        {% endfor %}
    {% endfor %}
    {% for error in form.non_field_errors %}
        <div class="alert alert-danger">
            <strong>{{ field.name }} {{ error|escape }}</strong>
        </div>
    {% endfor %}
{% endif %}
        <div class="card-body">
            <script>
                function showOtherFields(ele) {
                    if (ele.value === "ΆΛΛΟ"){
                        document.getElementById("div_"+ele.id+'_other').style.display = "block";
                        console.log("SHOW= "+ele.id+'_other' )
                    }
                    console.log(ele.id);
                    console.log(ele.value);
                }

                function getFields(f_num) {
                    const ret_array = [];
                    const id_str = 'div_id_orderproduct_set-';
                    const ids_lst = ['-cake_type', '-cake_type_num', '-cake_color', '-cake_color_other', '-fyt_color', '-fyt_color_other', '-cake_flavor', '-cake_img', '-cream_cake_3d', '-cream_cake_height', '-cream_cake_img', '-engagement_cake_type', '-engagement_cake_base', '-engagement_cake_pcs', '-engagement_cake_pcs_other', '-engagement_cake_glaze', '-cup_flavor', '-cup_color', '-cup_color_other', '-cup_type', '-candy_bar_type', '-candy_bar_decor', '-candy_bar_decor_other', '-candy_bar_wrap', '-info'];
                    for (const id_str2 of ids_lst) {
                        ret_array.push(id_str+f_num+id_str2)
                    }
                    return(ret_array)
                }

                function hideFields(f_names) {
                    for (const element of f_names) {
                        document.getElementById(element).style.display = "none";
                    }
                }

                function showFields(ele) {
                    if (ele.className === "add-row"){
                        const last_form = document.getElementById('id_orderproduct_set-TOTAL_FORMS').value
                        const field_names = getFields(last_form);
                        $(  document.querySelector('id_orderproduct_set-'+last_form+'-product') ).ready(function() {
                            hideFields(field_names);
                        });
                    } else {
                        const f_num = parseInt(ele.id.match(/(?<=-)(\d+)|(^\d+(?=,))/gi))
                        const field_names = getFields(f_num);
                        hideFields(field_names);

                        if (document.getElementById('id_orderproduct_set-'+f_num+'-product').value === "5") {
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-cake_type').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-cake_type_num').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-cake_color').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-fyt_color').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-cake_flavor').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-cake_img').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-info').style.display = "block";

                        } else if (document.getElementById('id_orderproduct_set-'+f_num+'-product').value === "16") {
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-cream_cake_img').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-cream_cake_height').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-cream_cake_3d').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-info').style.display = "block";

                        } else if (document.getElementById('id_orderproduct_set-'+f_num+'-product').value === "17") {
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-engagement_cake_type').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-engagement_cake_base').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-engagement_cake_pcs').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-engagement_cake_glaze').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-info').style.display = "block";

                        } else if (document.getElementById('id_orderproduct_set-'+f_num+'-product').value === "18") {
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-cup_flavor').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-cup_type').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-cup_color').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-candy_bar_type').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-candy_bar_decor').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-candy_bar_wrap').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-info').style.display = "block";

                        } else if (document.getElementById('id_orderproduct_set-'+f_num+'-product').value === "19") {
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-cup_color').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-candy_bar_type').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-candy_bar_decor').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-candy_bar_wrap').style.display = "block";
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-info').style.display = "block";

                        } else if (document.getElementById('id_orderproduct_set-'+f_num+'-product').value === "20") {
                            document.getElementById('div_id_orderproduct_set-'+f_num+'-info').style.display = "block";

                        } else {
                            hideFields(field_names);
                        }
                    }

                }
            </script>
            <form method="post" enctype="multipart/form-data">
            {% crispy form %}
             </form>
        </div>
</div>
{% endblock content %}
