{% extends 'base.html.twig' %}

{% block title %}admin - CompanyInformation{% endblock %}

{% block body %}

    <div id="loader">
        <div class="loader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div id="management" class="Page">
        <div>
            {% include '/management/top_menu.html.twig' %}
        </div>
        {% for message in app.flashes('success') %}
            <div class="alert alert-success position-absolute" style="width: 100% !important; z-index: 3000">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('warning') %}
            <div class="alert alert-warning position-absolute" style="width: 100% !important; z-index: 3000">
                {{ message }}
            </div>
        {% endfor %}
        <div class="container-fluid h-100">
            <div class="row h-100">
                {% include '/management/Admin/vertical_menu.html.twig' %}
                <div class="col-10" style="background: var(--color-grey-light)">
                    <div class="container-fluid p-2 w-100 h-100">
                        {{ form_start(form) }}
                        <div class="row"><!-- invoice list -->
                            <div class="col-12">
                                <div class="Text mt-2 mb-2">
                                    <div class="Size-2 Bold">
                                        Informations
                                        <button class="btn btn-primary ml-2" id="btnEditMode" onclick="getEditionMode()">Modifier</button>
                                        <button style="display: none;" class="btn btn-primary float-right" id="btnSave">Enregistrer</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="Text">
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Dénomination ou raison sociale</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.name) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Forme juridique</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.legalForm) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Siret</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.SIRET) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Date d'immatriculation</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.dateRegistration) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Capital</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.capital) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>N°TVA Intracommunautaire</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.VAT) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Code APE/NAF</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.code) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="row Text">
                                    <div class="col-6 text-center fit-content">
                                        <div style="height: 10rem">
                                            <div class="center-vertical">
                                                <div class="avatar" id="company_icon">
                                                    <div class="avatar-content">
                                                        <i class="bx bx-user"></i>
                                                    </div>
                                                </div>
                                                <div id="company_image" class="h-auto w-auto" style="display: none">
                                                    <img id="company_logo" src="#" alt="your image"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="height: 3rem">
                                            <div class="btn BtnLogo ">
                                                {{ form_widget(form.file) }}
                                                {{ form_label(form.file, null, {'label_attr': {'class': 'Size-3 Black font-weight-bold', 'style': 'text-transform : none' }}) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 text-center fit-content">
                                        {% if me.company.getLastRank() != null or me.company.getLastRank() != null %}
                                            <div style="height: 10rem">
                                                <div class="center-vertical">
                                                    <div class="avatar">
                                                        <div class="avatar-content">
                                                            {{ me.company.getLastRank() }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div style="height: 3rem">
                                                <div class="Size-3 font-weight-bold">
                                                    Scoring de la société
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="Text">
                                    <p class="Size-3 Black">Adresse du siège social</p>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Voie</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.address) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Code Postal</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.postcode) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Ville</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.city) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Pays</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.country) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="Text">
                                    <p class="Size-3 Black">Information du dirigeant</p>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Nom</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.managerLastname) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Prénom</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.managerFirstname) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Téléphone</div>
                                        <div class="ml-auto mr-0">
                                            {{ form_widget(form.managerPhoneNumber) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
            <div id="dialog" title="Confirmation" class="jquery_dialog">
                <p>Souhaitez-vous annuler les modifications ?</p>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script>
        let readonly = true;
        readOnly();

        function readOnly() {
            $("#company_information_update_name").attr("readonly", true);
            $("#company_information_update_legalForm").attr("readonly", readonly);
            $("#company_information_update_SIRET").attr("readonly", readonly);
            $("#company_information_update_dateRegistration").attr("readonly", readonly);
            $("#company_information_update_capital").attr("readonly", readonly);
            $("#company_information_update_VAT").attr("readonly", readonly);
            $("#company_information_update_code").attr("readonly", readonly);
            $("#company_information_update_address").attr("readonly", readonly);
            $("#company_information_update_postcode").attr("readonly", readonly);
            $("#company_information_update_country").attr("readonly", readonly);
            $("#company_information_update_city").attr("readonly", readonly);
            $("#company_information_update_managerLastname").attr("readonly", readonly);
            $("#company_information_update_managerFirstname").attr("readonly", readonly);
            $("#company_information_update_managerPhoneNumber").attr("readonly", readonly);
        }

        function getEditionMode() {
            event.preventDefault(); // prevent page from redirecting
            readonly = !readonly;
            if ($("#btnEditMode").text() == "Annuler") {
                $("#dialog").css("display", "block");
                $("#dialog").dialog({
                    resizable: false,
                    height: "auto",
                    width: 400,
                    modal: true,
                    buttons: {
                        "Oui": function () {
                            $(this).dialog("close");
                            $("#btnEditMode").text("Modifier");
                            if (readonly == false)
                                $("#btnSave").css('display', "block");
                            else
                                $("#btnSave").css('display', "none");
                            readOnly();
                            $("#company_information_update_legalForm").val("{{ form.vars.value.legalForm }}");
                            $("#company_information_update_SIRET").val("{{ form.vars.value.SIRET }}");
                            $("#company_information_update_dateRegistration").val("{{ form.vars.value.dateRegistration|date("Y-m-d") }}");
                            $("#company_information_update_capital").val("{{ form.vars.value.capital }}");
                            $("#company_information_update_VAT").val("{{ form.vars.value.VAT }}");
                            $("#company_information_update_code").val("{{ form.vars.value.code }}");
                            $("#company_information_update_address").val("{{ form.vars.value.address }}");
                            $("#company_information_update_postcode").val("{{ form.vars.value.postcode }}");
                            $("#company_information_update_country").val("{{ form.vars.value.country }}");
                            $("#company_information_update_city").val("{{ form.vars.value.city }}");
                            $("#company_information_update_managerLastname").val("{{ form.vars.value.managerLastname }}");
                            $("#company_information_update_managerFirstname").val("{{ form.vars.value.managerFirstname }}");
                            $("#company_information_update_managerPhoneNumber").val("{{ form.vars.value.managerPhoneNumber }}");
                            $("#company_information_update_file").val("{{ form.vars.value.file }}")
                            {% if company.getLogo() != null %}
                            $('#company_logo').attr('src', "{{ "/" ~ company.getLogo().getPath() ~ company.getLogo().getFilename() }}");
                            document.getElementById("company_icon").style.display = "none";
                            document.getElementById("company_image").style.display = "block";
                            {% else %}
                            document.getElementById("company_icon").style.display = "block";
                            document.getElementById("company_image").style.display = "none";
                            {% endif %}
                        },
                        "Non": function () {
                            $(this).dialog("close");
                        }
                    }
                });
            } else {
                $("#btnEditMode").text("Annuler");
                if (readonly == false)
                    $("#btnSave").css('display', "block");
                else
                    $("#btnSave").css('display', "none");
                readOnly();
            }
        }

        function readURL(input) {
            if (input.files && input.files[0]) {
                let reader = new FileReader();

                reader.onload = function (e) {
                    $('#company_logo').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]); // convert to base64 string
                document.getElementById("company_icon").style.display = "none";
                document.getElementById("company_image").style.display = "block";
            }
        }

        $("#company_information_update_file").change(function () {
            readURL(this);
        });

        function displayOn() {
            document.getElementById("loader").style.display = "none";
            document.getElementById("management").style.display = "flex";
        }

        $(document).ready(function () {
            {% if company.getLogo() != null %}
            console.log("{{ company.getLogo().getPath() ~ company.getLogo().getFilename() }}");
            $('#company_logo').attr('src', "{{ "/" ~ company.getLogo().getPath() ~ company.getLogo().getFilename() }}");
            document.getElementById("company_icon").style.display = "none";
            document.getElementById("company_image").style.display = "block";
            {% endif %}
            displayOn();
        });
    </script>

{% endblock %}