{% 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 document
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    {{ form_start(form, {'attr': {'novalidate':'true'}}) }}
    <div class="container-fluid">
        <div class="row rubrique">
            <div class="rubrique_titre">
                <span>Informations utilisateur
                </span>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12">
                <div>
                    <div class="box-body">
                        <div class="form-group requiredInput">
                            <label>Nom<span class="asterix">*</span></label>
                            {{ form_widget(form.name) }}
                        </div>
                        <div class="form-group" id="containerType">
                            <label>Cible de publication<span class="asterix">*</span></label>
                            {{ form_widget(form.type) }}
                        </div>
                        <div class="form-group requiredInput">
                            <label>Rubrique<span class="asterix">*</span></label>
                            {{ form_widget(form.section) }}
                        </div>
                        <div id="containerFile" style="margin-top: 2%;position: relative;width: 400px;">
                            {% set fileName = file.filePath|split('/')|last %}
                            <span id="nameFile">{{ fileName ? fileName : "Non renseigné" }}</span>
                            <div>
                                <a id="btnVisualiserFile" class="txtlibre txtUnderline"
                                    {% if fileName %}
                                   href="{{ asset(file.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 style="display: flex; flex-direction: row;margin-top: 10px">
                            <label for="file_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="form-group requiredInput">
                            <label>Visible à partir du<span class="asterix">*</span></label>
                            {{ form_widget(form.publicationDate) }}
                        </div>
                        <div class="form-error">
                            {{ form_errors(form.publicationDate) }}
                        </div>
                        <div style="margin-top: 1%;">
                            {{ form_row(form.isVisible) }}
                        </div>
                        <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>
    </div>
    {{ form_end(form) }}
    <script type="text/javascript" src="{{ asset('install-bois/datepickerCompanyConfig.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#file_filePath").value = "{{ file.filePath }}";

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

                if ($('#file_type').val().length === 0) {
                    $('#containerType').addClass("errorInput")
                    valid = false
                } else {
                    $('#containerType').removeClass("errorInput")
                    valid = true
                }

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

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


            // Init select2 for manufacturer selectBox
            $("#file_type").select2({
                width: '100%',
                allowClear: false,
                language: "fr",
            });
            $("#file_section").select2({
                width: '100%',
                allowClear: false,
                language: "fr",
            });
            $("#file_isVisible").select2({
                width: '100%',
                allowClear: false,
                language: "fr",
            });
        });

        initDatePicker("0d", null);

        Filevalidation = () => {
            let extAllowed = ['application/pdf', 'application/x-pdf', 'application/octet-stream'];
            let fi = document.getElementById('file_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('file_filePath').value = "";
                            document.getElementById("file_filePath").style.cssText = "border:1px solid red;";
                        } else {
                            document.getElementById("file_filePath").style.cssText = "border:1px solid #d2d6de;";
                        }
                    } else {
                        alert(
                            "Attention votre document doit être au format PDF");
                        document.getElementById('file_filePath').value = "";
                        document.getElementById("file_filePath").style.cssText = "border:1px solid red;";
                    }

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

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

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

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

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


        $("form").submit(function (e) {
            let valid = false;
            if ($('#file_filePath')[0].value === "") {
                $('#containerFile').addClass('errorInput')
                $('#containerFile').change(function () {
                    if ($('#file_filePath')[0].value !== "") {
                        $('#containerFile').parent().removeClass('errorInput')
                    } else {
                        $('#containerFile').parent().addClass('errorInput')
                    }
                })
                valid = false
            } else {
                valid = true
                $('#containerFile').removeClass('errorInput')
            }
            if ($('#file_type').val().length === 0) {
                $('#containerType').addClass("errorInput")
                valid = false
            } else {
                $('#containerType').removeClass("errorInput")
                valid = true
            }
            if (!valid) {
                e.preventDefault();
            }
        })
    </script>
{% endblock %}