{% extends 'base.html' %}
{% load static %}
{% block page_scripts %}
    <script src="{% static 'projects/fyw/app/tonal/greg/js/update_record.js' %}"></script>
    <script src="{% static 'projects/fyw/app/tonal/greg/js/sales_documents_edit.js' %}"></script>
{% endblock %}
{% block content %}
    {% if user.is_authenticated %}

        <style>
            /* jquery-editable-select css at https://www.aisln.cn/static/assets/global/plugins/jquery.editable-select/jquery.editable-select.min.css*/
           input.es-input {

               border: 1px solid #dee2e6;
               border-radius: 7px;
               height: 38px;
               padding-left: 11px !important;
               padding-right: 20px !important;
               background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) right center no-repeat
           }

            input.es-input:focus {
                outline: 4px solid #c9dbfc;
                border: 1px solid #8eb7f8;
                opacity: 0.9;
                border-radius: 7px;
                /*
                -webkit-border-bottom-left-radius: 0;
                -moz-border-radius-bottomleft: 0;
                border-bottom-left-radius: 0;
                -webkit-border-bottom-right-radius: 0;
                -moz-border-radius-bottomright: 0;
                border-bottom-right-radius: 0;
                 */
            }

            .es-list {
                border-radius: 7px;
                display: block;
                position: absolute;
                padding: 0;
                margin: 0;
                border: 1px solid #d1d1d1;
                display: none;
                z-index: 1000;
                background: #fff;
                max-height: 160px;
                overflow-y: auto;
                -moz-box-shadow: 0 2px 3px #ccc;
                -webkit-box-shadow: 0 2px 3px #ccc;
                box-shadow: 0 2px 3px #ccc
            }

            .es-list li {
                display: block;
                padding: 5px 10px;
                margin: 0
            }

            .es-list li.selected {
                background: lightgrey;
            }

        </style>
        <style>
            /* Style the tab */
            .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
            }

            /* Style the buttons that are used to open the tab content */
            .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            }

            /* Change background color of buttons on hover */
            .tab button:hover {
            background-color: #ddd;
            }

            /* Create an active/current tablink class */
            .tab button.active {
            background-color: #ccc;
            }

            /* Style the tab content */
            .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
            }
        </style>
        <style>
          /* The container must be positioned relative: */
            .custom-select {
                position: relative;
                font-family: Arial;
                font-size: 16px;
            }

            .custom-select select {
                display: none; /*hide original SELECT element: */
            }

            .select-selected {
                height:20px;
                /*background-color: red;*/
                border: 0px solid green;
                border-radius: 0px;

            }

            /* Style the arrow inside the select element: */
            .select-selected:after {
              position: relative;
              content: "";
              top: 0px;
              right: 0px;
              width: 0;
              height: 0;
              border: 0px solid transparent;
              border-color: #FFF transparent transparent transparent;
            }

            /* Point the arrow upwards when the select box is open (active): */
            .select-selected.select-arrow-active:after {
              border-color: transparent transparent #FFF transparent;
              top: 0px;
            }

            /* style the items (options), including the selected item: */
            .select-items div,.select-selected {
                height:25px;
                line-height: 25px;

              color: white;
              padding: 0px 0px;
              border: 0px solid blue;
              cursor: pointer;

            }

            /* Style items (options): */
            .select-items {
              position: absolute;

              left: 0;
              right: 0;
              z-index: 999;
            }

            /* Hide the items when the select box is closed: */
            .select-hide {
              display: none;
            }

            .same-as-selected {
              height: 0px !important;
            }
       </style>


        <div id="div_update_record_upper_container" style="gap:4px; display:flex; flex-direction:row; border:5px solid red;">

            <div id="div_update_record_contact" style="width:30vw;border:5px solid blue;">

                <div id="contact_num_b" class="select-items , select-hide" style="background-color: black;top: 118px;border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;  line-height: 30px; justify-content: center; align-items: center; margin-left: 5px; margin-right: 5px;padding-left: 5px; padding-right: 5px;"></div>
                <div id="contact_num_div_1"> <!-- word-spacing to force linebreak on select options when space between words-->
                    <div id="contact_num_div" class="custom-select , custom-select_1" >
                        <select name="contact_num" id="contact_num" onchange="update_selectbox_company();load_contacts();" autocomplete="off"> <!-- onchange is handled by JS on the custom select box for prefilter script -->
                            {% for option in selectbox_members %}
                                <option value="{{ option.id_contact}}"{% if option.id_contact == default_selected_member_id  %}selected{% endif %}>{{option.last_name}} {{ option.first_name }}|{{ option.id_contact}}</option> <!-- | characters between first name and last name important for linebreak-->
                                <!-- id_contact on linebreak so its invisible on the selectbox, use to avoid non triggering function in case of homonymie so the event onchange always see a change with id instead of just name-->
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div id="div_form_update_record_contact_container" style="display: inline"></div>
            </div>

            <div id="div_update_record_company" style="width:30vw;border:5px solid blue;">
                <div id="company_num_b" class="select-items , select-hide" style="background-color: black;top: 118px;border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;  line-height: 30px; justify-content: center; align-items: center; margin-left: 5px; margin-right: 5px;padding-left: 5px; padding-right: 5px;"></div>
                <div id="company_num_div_1" >
                        <div id="company_num_div" class="custom-select , custom-select_2">
                            <select name="company_num" id="company_num" onchange="update_selectbox_contact();update_selectbox_project();load_company();" autocomplete="off"> <!-- onchange is handled by JS on the custom select box for prefilter script -->
                                {% for option in selectbox_all_companies %}
                                    <option value="{{ option.id_company}}" {% if option.id_company == selectbox_most_recent_company_members_id  %}selected{% endif %}>{{ option.company_name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                </div>
                <div id="div_form_update_record_company_container">

                </div>
            </div>

            <div id="div_update_record_interaction" style="width:30vw;border:5px solid purple;">
                <div id="div_form_update_record_interaction_container">
                    Interaction
                </div>

            </div>
        </div>

        <div id="div_update_record_lower_container">
            <div id="project_num_b" class="select-items , select-hide" style="border:1px solid black; border-top: 0px solid transparent; background-color: black;  border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;  line-height: 30px; justify-content: center; align-items: center; margin-left: 5px; margin-right: 5px;padding-left: 5px; padding-right: 5px;"></div>
            <div id="project_num_div_1">
                <div id="project_num_div" class="custom-select , custom-select_3">
                    <select name="project_num" id="project_num" onchange="update_selectbox_sales_documents_edit();apply_selectbox_css()" autocomplete="off"> <!-- onchange is handled by JS on the custom select box for prefilter script -->
                        {% for option in selectbox_company_project %}
                            <option value="{{ option.id_project}}">{{ option.project_type}} </option> <!-- selectbox_company_project is already filtered by most recent in views.py -->
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div id="div_form_update_record_project_container">

            </div>
        </div>

    {% endif %}
{% endblock %}