{% extends '@InstallBois/index.html.twig' %}

{% block title %}
    INSTALL-BOIS
{% endblock %}

{% block head %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('externalJS/datepicker-fr.js') }}"></script>

{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Administration | Fiche CG
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    {{ form_start(form, {'attr': {'novalidate':'true', 'id':'cgForm' }}) }}
    <div class="container-fluid">
        <div class="row rubrique">
            <div class="rubrique_titre">
                <span>Informations CG
                </span>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12">
                <div>
                    <div class="box-body">
                        <div class="form-group requiredInput">
                            <label>Libellé<span class="asterix">*</span></label>
                            {{ form_widget(form.name) }}
                        </div>
                        <div class="form-group requiredInput">
                            <label>Type<span class="asterix">*</span></label>
                            {{ form_widget(form.type) }}
                        </div>
                        <div class="form-group requiredInput" id="containerVersion">
                            <label>Date de la version<span class="asterix">*</span></label>
                            {{ form_widget(form.versionDate) }}
                        </div>
                        <div class="form-error">
                            {{ form_errors(form.versionDate) }}
                        </div>
                        <div style="margin-top: 2%;position: relative;width: 400px;">
                            <label>Fichier<span class="asterix">*</span></label>
                            <div id="containerFile" style="width: 100%;">
                                {% set fileName = cg.filePath|split('/')|last %}
                                <span id="nameFile">{{ fileName ? fileName : "Non renseigné" }}</span>
                                <div>
                                    <a id="btnVisualiserFile" class="txtlibre txtUnderline"
                                            {% if fileName %}
                                        href="{{ asset(cg.filePath) }}"
                                    {% else %}
                                        style="display: none"
                                            {% endif %}>
                                        <span>Visualiser</span>
                                    </a>
                                    {% if not is_granted('ROLE_LECTURE_SEULE') %}
                                        <a
                                                id="removeFileBtn"
                                                type="button"
                                                class="txtlibre txtUnderline"
                                                style="cursor:pointer;padding-left: 10px{{ fileName ?"" : ';display: none' }}">
                                            <span>Supprimer</span>
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div style="display: flex; flex-direction: row;margin-top: 10px">
                            <label for="cg_filePath" class="boutonAction"
                                   style="padding-top: 2px">
                                Parcourir...
                            </label>
                            <small style="color: red;margin-top: 10px"><b>Veuillez selectionner un document de type PDF.
                                    La taille maximale autorisée est de
                                    10Mo</b></small>
                        </div>
                        {{ form_widget(form.filePath, { 'attr' : { 'style' : 'opacity:0','accept':'application/pdf'}}) }}
                        <br>
                        <div class="modal-footer" style="float: right">
                            <a href="javascript:history.back()">
                                <button type="button" class="boutonRetour pull-right">Annuler
                                </button>
                            </a>
                            <button id="btnSubmitFile" type="submit"
                                    class="boutonAction"
                            >
                                {{ button_label|default('Enregistrer') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{ form_end(form) }}
        {{ include('cg/modal/_new_cg_alert.html.twig') }}
        <script type="text/javascript" src="{{ asset('install-bois/datepickerCompanyConfig.js') }}"></script>
        <script type="text/javascript">

            $(document).ready(function () {
                $("#cg_filePath").value = "{{ cg.filePath }}";

                $('#btnSubmitFile').click(function (e) {
                    let valid = false;

                    if ($('#cg_filePath').val().length === 0 && $('#nameFile').text() === "Non renseigné") {
                        $('#containerFile').addClass("errorInput")
                        valid = false;
                    } else {
                        $('#containerFile').removeClass("errorInput")
                        valid = true
                    }

                    if (!valid) {
                        e.preventDefault();
                    }
                })

            });

            initDatePicker("0d", null);

            Filevalidation = () => {
                let extAllowed = ['application/pdf', 'application/x-pdf', 'application/octet-stream'];
                let fi = document.getElementById('cg_filePath');
                // Check if any file is selected.
                if (fi.files.length > 0) {
                    for (let i = 0; i <= fi.files.length - 1; i++) {

                        let ftype = fi.files.item(i).type;

                        let fsize = fi.files.item(i).size;
                        let file = Math.round((fsize / 1024));

                        if (extAllowed.includes(ftype)) {
                            // The size of the file.
                            if (file >= 10240) {
                                alert(
                                    "Attention votre document doit être inférieur à 10 Mo");
                                document.getElementById('cg_filePath').value = "";
                                document.getElementById("cg_filePath").style.cssText = "border:1px solid red;";
                            } else {
                                document.getElementById("cg_filePath").style.cssText = "border:1px solid #d2d6de;";
                            }
                        } else {
                            alert(
                                "Attention votre document doit être au format PDF");
                            document.getElementById('cg_filePath').value = "";
                            document.getElementById("cg_filePath").style.cssText = "border:1px solid red;";
                        }

                    }
                } else {
                    document.getElementById('cg_filePath').value = "";
                    document.getElementById("cg_filePath").style.cssText = "border:1px solid red;";
                }
            }

            document.getElementById("cg_name").addEventListener("keyup", function () {
                if ($("#cg_name").val().length > 0) {
                    document.getElementById("cg_name").style.cssText = "border:1px solid #d2d6de;";
                } else {
                    document.getElementById("cg_name").style.cssText = "border:1px solid red;";
                }
            });

            document.getElementById("cg_versionDate").addEventListener("change", function () {
                if ($("#cg_versionDate").val().length > 0) {
                    document.getElementById("cg_versionDate").style.cssText = "border:1px solid #d2d6de;";
                } else {
                    document.getElementById("cg_versionDate").style.cssText = "border:1px solid red;";
                }
            });
            document.getElementById("cg_versionDate").addEventListener("keyup", function () {
                if ($("#cg_versionDate").val().length > 0) {
                    document.getElementById("cg_versionDate").style.cssText = "border:1px solid #d2d6de;";
                } else {
                    document.getElementById("cg_versionDate").style.cssText = "border:1px solid red;";
                }
            });

            document.getElementById("cg_filePath").addEventListener("change", function () {
                Filevalidation();
            });

            // file
            $('#cg_filePath').change(function (e) {
                var fileName = e.target.files[0].name;
                $('#nameFile').text(fileName)
                $('#removeFileBtn').show()
                $('#cg_filePath').hide()
            })
            $('#removeFileBtn').click(function () {
                $('#cg_filePath').val('');
                $('#nameFile').text("Non renseigné")
                $('#btnVisualiserFile').hide()
                $('#removeFileBtn').hide()
            })


            $("form").submit(function (e) {
                let valid = false;

                if ($('#cg_filePath')[0].value === "") {
                    $('#containerFile').addClass('errorInput')
                    $('#containerFile').change(function () {
                        if ($('#cg_filePath')[0].value !== "") {
                            $('#containerFile').parent().removeClass('errorInput')
                        } else {
                            $('#containerFile').parent().addClass('errorInput')
                        }
                    })
                    valid = false
                } else {
                    valid = true
                    $('#containerFile').removeClass('errorInput')
                }
                if ($('#cg_versionDate').val().length === 0) {
                    $('#cg_versionDate').parent().addClass("errorInput")
                    valid = false
                } else if (checkDate()) {
                    $('#cg_versionDate').parent().addClass('errorInputDate')
                    valid = false
                } else {
                    valid = true
                    $('#cg_versionDate').parent().removeClass("errorInput")
                    $('#cg_versionDate').parent().removeClass("errorInputDate")
                }
                if ($('#cg_name').val().length === 0) {
                    $('#cg_name').parent().addClass("errorInput")
                    valid = false
                } else {
                    $('#cg_name').parent().removeClass('errorInput')
                    valid = true
                }

                if (!valid) {
                    e.preventDefault();
                } else {
                    e.preventDefault();
                    $("#cgName")[0].textContent = '"' + $("#cg_name").val() + '"';
                    $("#cgVersionDate")[0].textContent = '"' + $("#cg_versionDate").val() + '"';
                    $('#modal-new-cg').modal("show");
                }
            })

            function checkDate() {
                let today = new Date();
                let dd = String(today.getDate()).padStart(2, '0').toString();
                let mm = String(today.getMonth() + 1).padStart(2, '0').toString();
                let yyyy = today.getFullYear().toString();

                let dateSplit = $('#cg_versionDate').val().split('/');
                let regex = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;

                let check = false;

                if (dateSplit[2] < yyyy) {
                    check = true;
                } else if (dateSplit[2] === yyyy && dateSplit[1] < mm) {
                    check = true;
                } else if (dateSplit[2] === yyyy && dateSplit[1] === mm && dateSplit[0] < dd) {
                    check = true;
                } else if (!regex.test($('#cg_versionDate').val())) {
                    check = true;
                }

                return check
            }
        </script>
    </div>
{% endblock %}