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

{% 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') ~ "?rnd=" ~ random() }}"></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 conduit
        </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="productDuctDivStep"
                     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;">Classification</h4>
                </div>
                <div id="productDuctDetailsDivStep"
                     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="productDuctAccessoriesDivStep"
                     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;">Accessoires</h4>
                </div>
            </div>
        </div>
        <div id="addOrUpdateProductInfoDiv" class="col-sm-12 col-md-12 col-lg-12" style="display: block">
            <div>
                {{ include('products/_block/_add_update_products_informations.html.twig') }}
            </div>
        </div>
        <div id="productDuctDiv" class="col-sm-12 col-md-12 col-lg-12" style="display: none">
            <div>
                {{ include('products_ducts/_block/_add_update_products_duct_informations.html.twig') }}
            </div>
        </div>
        <div id="productDuctDetailsDiv" class="col-sm-12 col-md-12 col-lg-12" style="display: none">
            <div>
                {{ include('products_ducts/_block/_add_update_products_duct_details_informations.html.twig') }}
            </div>
        </div>
        <div id="productDuctAccessoriesDiv" class="col-sm-12 col-md-12 col-lg-12" style="display: none">
            <div>
                {{ include('products_ducts/_block/_add_update_products_duct_accessories.html.twig') }}
            </div>
        </div>
    </div>
    <div id="reservedPopupDiv">
        {{ popup.simple_popup("danger") }}
    </div>
    <div id="productParametersArray" style="display: none"
         data-productParameters="{{ productParametersProvider|json_encode()|convert_encoding('UTF-8', 'UTF-8') }}"></div>
    <div id="productJSObject" style="display: none"
         data-product="{{ product is defined and product.productsDucts is not null ? product.productsDucts.toArray|json_encode()|convert_encoding('UTF-8', 'UTF-8') : 'null' }}"></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 productDuctListingURI = "{{ path('products_ducts_validation',{id:"00"}) }}";

        let typeAction = "{{ typeAction }}";
        let productType = "{{ productType }}";
        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 productDuctObject = $('#productJSObject').data('product');

        // PRODUCTS URI AND VARS
        let currentProductId = {{ typeAction == "update" ? product.id : "null" }};
        let saveGeneralProductInfoURI = "{{ path('products_add_update') }}";

        // PRODUCTS DUCTS URI
        let currentProductDuctID = {{ product.productsDucts is defined and product.productsDucts is not null ? product.productsDucts.id : "null" }};
        let typeProductDuctAction = "{{ product.productsDucts is defined and product.productsDucts is not null ? "update" : "create" }}";
        let saveProductDuctInfoURI = "{{ path('products_ducts_add_update') }}";

        // PRODUCTS DUCTS DETAILS URI
        let currentProductDuctDetails = null;
        let typeProductDuctDetailsAction = "create";
        let getProductDuctDetailsInfoURI = "{{ path('products_ducts_details_get_one', { id : "00" }) }}";
        let saveProductDuctDetailsInfoURI = "{{ path('products_ducts_details_add_update') }}";
        let deleteProductDetailsURI = "{{ path('products_ducts_details_delete') }}";

        // PRODUCTS DUCTS ACCESSORIES URI
        let currentProductDuctAccessories = null;
        let typeProductDuctAccessoriesAction = "create";
        let getProductDuctAccessoriesInfoURI = "{{ path('products_ducts_accessories_get_one', { id : "00" }) }}";
        let saveProductDuctAccessoriesInfoURI = "{{ path('products_ducts_accessories_add_update') }}";
        let deleteProductAccessoriesURI = "{{ path('products_ducts_accessories_delete') }}";
        const favoriteBrandURI = "{{ path('brand_favorite', { "brandId" : "00"}) }}";

        $(document).ready(function () {
            $('#type').val('duct'); // Change the value or make some change to the internal state
            $('#type').trigger('change.select2'); // Notify only Select2 of changes
        });
    </script>
    <script type="text/javascript"
            src="{{ asset('install-bois/products/main_products.js') ~ "?rnd=" ~ random() }}"></script>
{% endblock %}