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

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

{% block javascripts %}
    <script type="text/javascript"
            src="{{ asset('install-bois/initDateTimeFormatDatatable.js') ~ "?rnd=" ~ random() }}"></script>
    <script type="text/javascript" src="{{ asset('install-bois/products/httpServiceRequestProducts.js') }}"></script>
    {{ parent() }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('install-bois/products/main_products.css') }}">
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Paramètres | Créer un appareil
        </h4>
    </div>
{% endblock %}


{% block page_content %}
    <div class="container-fluid">
        <div style="width: 100%;margin-top: 60px;margin-bottom: -2%;margin-left: 2%;">
            <div class="page-title-h4" style="margin-bottom: 2%;width: 90%">
                <div id="addOrUpdateProductInfoDivStep"
                     class="col-sm-3 col-md-3 col-lg-3 titre_ecran_process titre_ecran_process_EncoursStart">
                    <h4 style="margin-top: 7px;">Choix initial</h4>
                </div>
                <div id="productDeviceDivStep"
                     class="col-sm-3 col-md-3 col-lg-3 titre_ecran_process titre_ecran_process_Arealisee">
                    <h4 style="margin-top: 7px;margin-left: 10px;">Caractéristiques</h4>
                </div>
                <div id="productDeviceDetailsDivStep"
                     class="col-sm-3 col-md-3 col-lg-3 titre_ecran_process titre_ecran_process_Arealisee"
                >
                    <h4 style="line-height: 1;margin-top: 4px;margin-left: -20px;text-align: center">Fonctionnement
                        performances</h4>
                </div>
            </div>
        </div>
        <div id="addOrUpdateProductInfoDiv" class="productForm" style="display: block">
            <div>
                {{ include('products/_block/_add_update_products_informations.html.twig') }}
            </div>
        </div>
        <div id="productDeviceDiv" class="productForm" style="display: none">
            <div>
                {{ include('products_devices/_block/_add_update_products_device_informations.html.twig') }}
            </div>
        </div>
        <div id="productDeviceDetailDiv" class="productForm" style="display: none">
            <div>
                {{ include('products_devices/_block/_add_update_products_device_details_informations.html.twig') }}
            </div>
        </div>
    </div>
    <div id="productParametersArray" style="display: none"
         data-productParameters="{{ productParametersProvider|json_encode()|convert_encoding('UTF-8', 'UTF-8') }}"></div>
    <div id="productObject" style="display: none"
         data-product="{{ product is defined ? product.toArray|json_encode()|convert_encoding('UTF-8', 'UTF-8') : 'null' }}"></div>

    <script type="application/javascript">

        // GLOBAL VARS
        let brandListURI = "{{ path('brand_list') }}";
        let typeAction = "{{ typeAction }}";
        let assetValidProductImg = "{{ asset('install-bois/icon/appareil_valideIB.png') }}";
        let assetNotValidProductImg = "{{ asset('install-bois/icon/appareil_non_valideIB.png') }}";
        let idMarque = {{ product is defined ?  product.idMarque : "null" }};
        let productObject = $('#productObject').data('product');
        let fromWindowOpen = {{ fromWindowOpen is defined and fromWindowOpen ? "true" : "null" }};
        let isfromValidation = {{ isfromValidation is defined and isfromValidation ? "true" : "false" }};
        let isTechOrLectureSeule = {{ is_granted('ROLE_TECHNICIEN') or is_granted('ROLE_REFERENT_TECHNICIEN') or is_granted('ROLE_LECTURE_SEULE') ? "true" : "false" }};

        // PRODUCTS URI AND VARS
        let productType = "{{ productType }}";
        let currentProductId = {{ typeAction == "update" ? product.id : "null" }};
        let saveGeneralProductInfoURI = "{{ path('products_add_update', {fromWindowOpen: fromWindowOpen is defined and fromWindowOpen ?"true":"false"}) }}";
        let isSimplified = {{ product is defined and product.isSimplified is not null ? (product.isSimplified ? 'true' : 'false') : 'null' }};
        {% if is_granted('ROLE_FABRICANT') or is_granted('ROLE_REFERENT_FABRICANT') %}
            isSimplified = false
            $('#formTypeDiv').remove()
        {% endif %}
        // PRODUCTS DEVICE URI
        let currentProductDeviceID = {{ product.productsDevices is defined and product.productsDevices is not null ? product.productsDevices.id : "null" }};
        let typeProductDeviceAction = "{{ product.productsDevices is defined and product.productsDevices is not null ? "update" : "create" }}";
        let saveProductDeviceInfoURI = "{{ path('products_devices_add_update') }}";
        let updateProductDeviceURI = "{{ path('products_devices_update', {id: "00"}) }}"

        //PRODUCT DEVICE DETAIL
        let productTypeDetail = "{{ product.productsDevices is defined and product.productsDevices is not null ? product.productsDevices.type : "null" }}";
        let typeProductDeviceDetailsAction = "{{ product is defined and product.productsDevices is not null and product.productsDevices.productsDevicesDetails is not null and product.productsDevices.productsDevicesDetails|length > 0 ? 'update' : 'create' }}";

        let saveProductDeviceDetailsURI = "{{ path('products_devices_details_add_update') }}";
        let combustibleToRegister = null;
        let deleteIdDeviceDetail = null;
        let deleteDeviceDetailDataURI = "{{ path('products_devices_details_delete') }}";
        let combustiblesDevice = {{ product.productsDevices is defined and product.productsDevices is not null? [product.productsDevices.combustible1,product.productsDevices.combustible2]| json_encode | raw : "null" }};
        let getProductDeviceDetailsInfoURI = "{{ path('products_devices_details_get_one',{id:"00"}) }}";
        {% if product is defined and product.productsDevices is defined and product.productsDevices is not null and product.productsDevices.productsDevicesDetails is not empty %}
            {% set productDeviceDetail = product.productsDevices.productsDevicesDetails.first() %}
            {% if productDeviceDetail is defined %}
                let currentProductDetailDeviceID = {{ productDeviceDetail.id }};
            {% endif %}
        {% else %}
            let currentProductDetailDeviceID = null;
        {% endif %}
        let productDevice = null
        let productDeviceDetail = null
        const favoriteBrandURI = "{{ path('brand_favorite', { "brandId" : "00"}) }}";

        $(document).ready(function () {
            $('#type').val('device'); // Change the value or make some change to the internal state
            if (fromWindowOpen) {
                $("#addBrandBtn").hide();
                $("#idMarque").prop("disabled", true);
            }

            if ($('#formType').val() === "1") {
                $('#productDeviceDetailsDivStep').hide()
                $('#productDeviceDivStep h4')
                    .text('Caractéristiques essentielles')
                    .css('font-size', '1.4rem')
                    .css('margin-top', '10px')
            } else {
                $('#productDeviceDetailsDivStep').show()
                $('#productDeviceDivStep h4')
                    .text('Caractéristiques')
                    .css('font-size', '18px')
                    .css('margin-top', '7px')
            }
            $('#formType').on('change', function () {
                if ($(this).val() === "1") {
                    $('#productDeviceDetailsDivStep').hide()
                    $('#productDeviceDivStep h4')
                        .text('Caractéristiques essentielles')
                        .css('font-size', '1.4rem')
                        .css('margin-top', '10px')
                } else {
                    $('#productDeviceDetailsDivStep').show()
                    $('#productDeviceDivStep h4')
                        .text('Caractéristiques')
                        .css('font-size', '18px')
                        .css('margin-top', '7px')
                }
            })
        });
    </script>
    <script type="text/javascript"
            src="{{ asset('install-bois/products/main_products.js') ~ "?rnd=" ~ random() }}"></script>
{% endblock %}