{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/popup.html.twig" as popup %}

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

{% block head %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('externalJS/datepicker-fr.js') }}"></script>
    <script type="text/javascript"
            src="{{ asset('install-bois/initDateTimeFormatDatatable.js') ~ "?rnd=" ~ random() }}"></script>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js">
{% endblock %}

{% block javascripts %}
    {#    <script src="{{ asset('install-bois/app.js') }}"></script> #}
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Administration | Gérer les marques
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid">
        <div class="row rubrique">
            <div class="rubrique_titre">
                <span>Créer une nouvelle marque
                </span>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12">
                <form id="formNewBrand" method="post" action="{{ path('brand_add_or_update') }}" novalidate>
                    <input type="hidden" id="formMethod" name="formMethod" value="INSERT">
                    <input type="hidden" id="brandId" name="brandId" value="null">
                    <div class="modal-body">
                        <div class="form-group requiredInput">
                            <label for="brandName">Nom de la marque<span class="asterix">*</span></label>
                            <input required class="form-control" type="text" id="brandName" name="brandName">
                        </div>
                        <div class="form-group requiredInput">
                            <label for="manufacturer">Nom du fabricant<span class="asterix">*</span></label>
                            <select required id="manufacturer" name="manufacturer" class="form-control">
                                <option value="null" style="color:#d2d6de">-- Sélectionnez le fabricant --</option>
                                {% for manufacturer in manufacturers %}
                                    <option value="{{ manufacturer.rowid }}">{{ manufacturer.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group requiredInput">
                            <label for="brandType">Type de produits<span class="asterix">*</span></label>
                            <div>
                                <select required id="brandType" name="brandType" class="form-control">
                                    <option value="null" style="color:#d2d6de">-- Sélectionnez le type de produit --
                                    </option>
                                    <option value="Appareils">Appareils</option>
                                    <option value="Conduits">Conduits</option>
                                    <option value="Appareils et conduits">Appareils et conduits</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12" style="margin-top: 5px;padding:0">
                            <input class="checkbox" type="checkbox" id="isOnline" name="isOnline"
                                   style="transform: scale(1.2);cursor: pointer;margin-bottom: -15px;">
                            <label for="isOnline" class="control-label control-checkbox-label"
                                   style="margin-left: 25px;">
                                Rendre la marque public
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button data-toggle="modal" data-target="#confirm-popup-danger" name="closeModalBtn"
                                type="button"
                                class="boutonRetour pull-right" data-dismiss="modal">
                            Annuler
                        </button>
                        <button id="createBrandBtn" type="submit" class="boutonAction">Enregistrer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {#    <div class="col-sm-12 col-md-12 col-lg-12"> #}
    {#    </div> #}
    <script type="application/javascript">
        $(document).ready(function () {
            $("#formNewBrand select:required").select2({
                width: '100%',
                allowClear: false,
                language: "fr",
            });

            for (let input of $("#formNewBrand input:required")) {
                if (input.required) {
                    input.addEventListener("keyup", function (element) {
                        if (element.target.value.length > 0) {
                            $("#" + element.target.id).parent().removeClass('errorInput');
                        } else {
                            $("#" + element.target.id).parent().addClass("errorInput");
                        }
                    });
                }
            }

            for (let input of $("#formNewBrand select:required")) {
                if (input.required) {
                    $('#' + input.id).on('select2:select', function (e) {
                        let targetElement = e.target;
                        let data = e.params.data;
                        if (data.id === "null") {
                            $('#' + input.id).parent().addClass("errorInput");
                        } else {
                            $('#' + input.id).parent().removeClass("errorInput");
                        }
                    });
                }
            }

            $("#createBrandBtn").on("click", function (e) {
                if ($("#brandName").val().length === 0) {
                    $("#brandName").parent().addClass('errorInput')
                    e.preventDefault()
                } else {
                    $("#brandName").parent().removeClass('errorInput')
                    let brandName = $("#brandName").val().replace(/\s+/g, ' ').trim().toUpperCase()
                    $("#brandName").val(brandName);
                }
                if ($("#brandType").val() == "null") {
                    $("#brandType").parent().addClass('errorInput')
                    e.preventDefault()
                } else {
                    $("#brandType").parent().removeClass('errorInput')

                }
                if ($("#manufacturer").val() == "null") {
                    $("#manufacturer").parent().addClass('errorInput')
                    e.preventDefault()
                } else {
                    $("#manufacturer").parent().removeClass('errorInput')
                }
            })

            $("#boutonOui").on("click", function (e) {
                window.history.back();
            });
        });
    </script>
    </div>
    <div id="reservedPopupDiv">
        {{ popup.simple_popup("danger", "L’annulation va entrainer la perte des données saisies, êtres-vous certain de vouloir annuler ?") }}
    </div>
{% endblock %}