{% extends 'base.html.twig' %}

{% block title %}Len's Backoffice - Stock

{% endblock %}


{% block stylesheets %}

    <link rel="stylesheet" href="{{ asset('css/stock.css') }}">

{% endblock %}


{% block header %}


    <div
            class="mx-3">
        <!-- Button trigger modal -->

        <div class="d-flex justify-content-between align-items-center action-dropdown">
            <div class="btn-group">
                <button class="btn btn-success  dropdown-toggle my-3" type="button" data-bs-toggle="dropdown"
                        aria-expanded="false">

                    <img src="img/plus.svg" alt="" width="30">

                    Creer
                </button>

                <ul class="dropdown-menu">

                    <li>

                        <button type="button" class="dropdown-item" data-bs-toggle="modal"
                                data-bs-target="#createComposantModal">


                            Composants

                        </button>


                    </li>

                    <li>

                        <button type="button" class="dropdown-item" data-bs-toggle="modal"
                                data-bs-target="#createPcModal">

                            PC

                        </button>


                    </li>
                    <li>

                        <button type="button" class="dropdown-item" data-bs-toggle="modal"
                                data-bs-target="#createLaptopModal">

                            Laptop

                        </button>


                    </li>

                    <li>


                        <button type="button" class="dropdown-item" data-bs-toggle="modal"
                                data-bs-target="#modalCreationCategorie">

                            Categorie

                        </button>


                    </li>


                    <li>


                        <button type="button" class="dropdown-item" data-bs-toggle="modal"
                                data-bs-target="#duplicatePcModal">

                            Dupliquer un Pc

                        </button>


                    </li>


                    <li>


                        <button type="button" class="dropdown-item" data-bs-toggle="modal"
                                data-bs-target="#createEmplacement">

                            Emplacement

                        </button>


                    </li>

                </ul>
            </div>
            <!-- Dropdown Modifier -->
            <div class="btn-group mx-3">
                <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
                        aria-expanded="false">
                    <i class="far fa-edit"></i>
                    <span>Modifier</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ path('categorie_index') }}">Catégorie</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#editCatIconeModal">Modfier
                            l'icone
                            d'une catégorie
                        </button>
                    </li>
                </ul>

            </div>


            {# delete input group #}
            <button class="btn btn-danger dropdown-toggle my-3" type="button" data-bs-toggle="dropdown"
                    aria-expanded="false">

                <img src="img/trash.svg" alt="" width="30">

                Supprimer
            </button>

            <ul class="dropdown-menu">

                <li>

                    <button type="button" class="dropdown-item" data-bs-toggle="modal"
                            data-bs-target="#deleteComposantModal">


                        Composants

                    </button>


                </li>

                <li>

                    <button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#deletePcModal">

                        PC

                    </button>


                </li>


                <li>

                    <button type="button" class="dropdown-item" data-bs-toggle="modal"
                            data-bs-target="#deleteCategorieModal">Categorie
                    </button>

                </li>
                <li>


                    <button type="button" class="dropdown-item" data-bs-toggle="modal"
                            data-bs-target="#deleteEmplacement">

                        Emplacement

                    </button>


                </li>

            </ul>

            <div class="mx-3">
                <a href="{{ path('stock.export') }}" class="btn btn-primary">Exporter le stock</a>
            </div>
        </div>


        <div class="my-3">


            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ajoutComposantModal">Ajouter des
                composants
            </button>

        </div>


        <div class="rounded shadow p-3 menu-container">
            <div class="d-flex">
                <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#searchModal">

                    <img src="/img/magnify.svg" alt="" width="30">

                    <span>Rechercher</span>

                </button>

                <a href="#" class=" btn btn-dark text-decoration-none ms-3">

                    <i class="fal fa-long-arrow-up"></i>

                    <span>Haut de page</span>

                </a>
            </div>
            <div class="shortcut-container mt-3">
                <a href="#PC" class="text-dark text-decoration-none shortcut-item"
                   onclick="showCategorie('pc_container')">PC ({{ pcs|length }})</a>
                <a href="#laptop" class="text-dark text-decoration-none shortcut-item"
                   onclick="showCategorie('laptop')">Laptops ({{ laptops|length }}
                    )</a>

                {% for cat in categorie %}

                    {% if cat.id not in [16,34] %}

                        <a href="#{{ cat.getLibelle() | replace({' ' : '_'}) }}"
                           class="text-dark text-decoration-none shortcut-item"
                           onclick="showCategorie('{{ cat.getLibelle() | replace({' ' : '_'}) }}')">

                            {% if cat.icone != null %}

                                <img src="/img/categorie/{{ cat.icone }}" alt="" width="40">

                            {% endif %}

                            {{ cat.getLibelle() }}


                            ({{ cat.getComposants()|length }})</a>

                    {% endif %}


                {% endfor %}

            </div>
        </div>


    </div>


{% endblock %}

{% block drawer_button %}
    <div id="shortcut_button">
        <button id="drawer_button" class="btn btn-info m-3" onclick="openSubmenuDrawer()">
            Rechercher
        </button>
    </div>
{% endblock %}

{% block body %}

    <a href="#" class="rounded-circle btn btn-white shadow" id="toTopBtn">
        <img src="{{ asset('img/arrow-up.svg') }}" alt="To Top" width="30">
    </a>

    <datalist id="compo">

        {% for compo in composants %}

            <option value="{{ compo }}">{{ compo }}</option>

        {% endfor %}

    </datalist>

    <datalist id="pc">

        {% for pc in pcs %}

            <option value="{{ pc }}">{{ pc }}</option>

        {% endfor %}

    </datalist>


    <div id="drawer">


        <div>

            <div class="shadow mx-3 p-3 d-flex flex-column cat-shortcut" id="cat_shortcut">

                <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#searchModal">

                    <img src="/img/magnify.svg" alt="" width="30">

                    <span>Rechercher</span>

                </button>

                <a href="#" class="text-dark text-decoration-none">

                    <img src="/img/arrow-up.svg" alt="arrow">

                    <span>Haut de page</span>

                </a>

                <a href="#PC" class="text-dark text-decoration-none shortcut-item"
                   onclick="showCategorie('pc_container')">PC ({{ pcs|length }})</a>
                <a href="#laptop" class="text-dark text-decoration-none shortcut-item"
                   onclick="showCategorie('laptop')">Laptops ({{ laptops|length }}
                    )</a>

                {% for cat in categorie %}

                    {% if cat.id not in [16,34] %}

                        <a href="#{{ cat.getLibelle() | replace({' ' : '_'}) }}" class="text-dark text-decoration-none"
                           onclick="showCategorie('{{ cat.getLibelle() | replace({' ' : '_'}) }}')">

                            {% if cat.icone != null %}

                                <img src="/img/categorie/{{ cat.icone }}" alt="" width="40">

                            {% endif %}

                            {{ cat.getLibelle() }}


                            ({{ cat.getComposants()|length }})</a>

                    {% endif %}


                {% endfor %}

            </div>

        </div>
    </div>

    <div class="d-flex justify-content-center mb-5">


        <div class="mx-3">


            <div class="container-fluid tbl-stock" id="tbl_stock">

                <div id="pc_container" class="hide">
                    <div class="d-flex justify-content-between  ">

                        <div class="d-flex">

                            <h2 id="PC">PC ({{ pcs|length }})</h2>

                            <button class="btn btn-success mx-3" data-bs-toggle="modal" data-bs-target="#createPcModal">
                                <img
                                        src="/img/plus.svg" alt="plus" width="30"></button>

                        </div>

                        <div class="d-flex justify-content-around align-items-center w-50">

                            <div>

                                <b>Nombre de pc :</b>

                                {{ pcRepo.sumQuantite() }}</div>

                            <div>

                                <b>Montant du stock :</b>

                                {{ pcRepo.prixStock() }}

                                €
                            </div>

                        </div>

                    </div>


                    <div class="row fw-bold fs-5 border-bottom text-center">

                        <div class="col"></div>

                        <div class="col">

                            Image

                        </div>

                        <div class="col">Modèle</div>

                        <div class="col">SKU</div>
                        <div class="col">Benchmark</div>

                        <div class="col">Emplacement</div>

                        <div class="col">
                            {% set url = 'arrow-down.svg' %}

                            {% set tmp = 'ASC' %}

                            {% if sort == 'pc_qte' %}

                                {% if order == 'ASC' %}

                                    {% set tmp = 'DESC' %}

                                    {% set url = 'arrow-down-fill.svg' %}

                                {% else %}

                                    {% set tmp = 'ASC' %}

                                    {% set url = 'arrow-up-fill.svg' %}

                                {% endif %}


                            {% endif %}
                            <span>Stock Réel</span>
                            <a href="?sort=pc_qte&order={{ tmp }}"><img src="/img/{{ url }}" alt="" width="30"></a>
                        </div>

                        <div class="col">Capacité de fabrication</div>

                        <div class="col">Prix</div>

                        <div class="col">Simulation</div>

                    </div>


                    <div class="pc_container">

                        {% for pc in pcRepo.getPcOrderBy('pc_qte','DESC') %}


                            <div class="border-bottom">

                                <div class="row align-items-center text-center line-pc">

                                    <div class="col ">


                                        <img src="/img/carte-right.svg" alt="arrow"
                                             onclick="displayComponent('{{ pc.sku }}')">

                                    </div>

                                    <div class="col">

                                        <div class="d-flex align-items-center py-2">

                                            {% if pc.hasFiche() %}
                                                <a href="{{ pc.getPathFiche() }}" target="_blank" class="mx-2">
                                                    <img src="/img/file.svg" alt="fiche" width="30">
                                                </a>
                                            {% endif %}

                                            <img src="img/pc/{{ pc.getDisplayImg() }}" alt="img" width="70"
                                                 data-bs-toggle="modal" data-bs-target="#displayImgModal"
                                                 data-id="{{ pc.id }}">

                                            <button class="btn btn-white" data-bs-toggle="modal"
                                                    data-bs-target="#editImagePc" data-id="{{ pc.sku }}">

                                                <img src="img/edit.svg" alt="edit">

                                            </button>

                                        </div>

                                    </div>

                                    <div class="col">
                                        <div id="pcModele_{{ pc.sku }}">

                                            {{ pc.modele }}

                                            <button onclick='editPcModele("{{ pc.sku }}")' class="btn btn-white"><img
                                                        src="{{ asset('img/edit.svg') }}" alt="edit"></button>


                                        </div>

                                        {% include "stock/component/input.html.twig" with {'id' : 'editPcModele_'~pc.sku , 'input_value' : pc.modele, 'function' : 'updatePcModele("'~pc.sku~'","'~path('stock.edit.pc')~'")'} %}
                                    </div>


                                    <div class="col sku">

                                        <div id="pcSku_{{ pc.sku }}">

                                            {{ pc.sku }}

                                            <button onclick='editPcSku("{{ pc.sku }}")' class="btn btn-white"><img
                                                        src="{{ asset('img/edit.svg') }}" alt="edit"></button>


                                        </div>


                                        {% include "stock/component/input.html.twig" with {'id' : 'editPcSku_'~pc.sku , 'input_value' : pc.sku, 'function' : 'updatePcSku("'~pc.sku~'","'~path('stock.edit.pc')~'")'} %}
                                    </div>
                                    <div class="col">
                                        <div id="pcBenchmark_{{ pc.sku }}">

                                            {{ pc.benchmark }}

                                            <button onclick='editPcBenchmark("{{ pc.sku }}")' class="btn btn-white"><img
                                                        src="{{ asset('img/edit.svg') }}" alt="edit"></button>


                                        </div>


                                        {% include "stock/component/input.html.twig" with {'id' : 'editPcBenchmark_'~pc.sku , 'input_value' : pc.benchmark, 'function' : 'updatePcBenchmark("'~pc.sku~'","'~path('stock.edit.pc')~'")'} %}

                                    </div>
                                    <div class="col">

                                        <div id="pcEmplacement_{{ pc.sku }}">

                                            <span>{{ pc.getEmplacement() }}</span>


                                            <img src="/img/edit.svg" alt="edit"
                                                 onclick="showEmplacementEdit('{{ pc.sku }}')"></div>


                                        <div style="display:none" id="editPcEmplacement_{{ pc.sku }}">


                                            <select name="emplacement" class="form-select"
                                                    id="selectPcEmplacement_{{ pc.sku }}">

                                                {% for item in emplacement %}

                                                    <option value="{{ item.id }}">{{ item.name }}</option>

                                                {% endfor %}

                                            </select>

                                            <button class="btn btn-success"><img src="/img/check.svg" alt="check"
                                                                                 onclick="updateEmplacement('{{ pc.sku }}','{{ path('stock.edit.pc') }}')">
                                            </button>


                                        </div>


                                    </div>

                                    <div class="col">

                                        <div id="pcStock_{{ pc.sku }}">

                                            {{ pc.quantite }}

                                            <button onclick='editPcStock("{{ pc.sku }}")' class="btn btn-white"><img
                                                        src="{{ asset('img/edit.svg') }}" alt="edit"></button>


                                        </div>


                                        {% include "stock/component/input.html.twig" with {'id' : 'editPcStock_'~pc.sku , 'input_value' : pc.quantite, 'function' : 'updatePcStock("'~pc.sku~'","'~path('stock.edit.pc')~'")'} %}

                                    </div>

                                    <div class="col">{{ pc.getQteFab() }}</div>

                                    <div class="col">

                                        <div id="price_{{ pc.getSku() }}">

                                            {{ pc.prix }}

                                            €

                                            <button onclick='editPrice("{{ pc.getSku() }}")' class="btn btn-white"><img
                                                        src="{{ asset('img/edit.svg') }}" alt="edit"></button>


                                        </div>


                                        {% include "stock/component/input.html.twig" with {'id' : 'editPrice_'~pc.getSku() , 'input_value' : pc.prix, 'function' : 'newPrice(\''~pc.getSku()~'\',"'~path('stock.edit.pc')~'")'} %}


                                    </div>

                                    <div class="col">

                                        <form action="{{ path('stock.simulation') }}" method="POST">

                                            <div class="my-2">

                                                <button type="button" class="btn btn-light border"
                                                        onclick="removeSimu('{{ pc.sku }}')"><img src="/img/dash.svg"
                                                                                                  alt="moins"></button>

                                                <span id='simulation_{{ pc.sku }}' class="mx-2">0</span>

                                                <input type="hidden" name="qte" value="0">

                                                <input type="hidden" name="sku" value="{{ pc.sku }}">

                                                <button type="button" class="btn btn-light border"
                                                        onclick="addSimu('{{ pc.sku }}')"><img src="/img/plus.svg"
                                                                                               alt="plus"></button>

                                            </div>

                                            <button type="submit" class='btn btn-dark mb-2'>CONFIRMER</button>

                                        </form>

                                    </div>


                                </div>


                                <div id="component_{{ pc.getSku() }}" style="display:none">
                                    <hr>
                                    <div class="d-flex">

                                        <input type="text" class="form-control " name='search' autocomplete="off"
                                               list="compo">
                                        <button class="btn btn-success mx-3"
                                                onclick="addCompoToPc('{{ pc.getSku() }}')">
                                            Ajouter
                                        </button>


                                    </div>


                                    <table class="table table-striped  text-center">

                                        <thead>

                                        <th>Stock</th>

                                        <th>Composant</th>

                                        <th>Requis</th>

                                        <th></th>

                                        </thead>

                                        <tbody id="componentList_{{ pc.getSku() }}">


                                        {% for pcComposant in pc.getPcComposants() %}

                                            {% set item = pcComposant.getComposant() %}


                                            {% set bg = 'bg-white' %}

                                            {% if item.quantite <= 0 %}

                                                {% set bg = 'bg-danger text-white' %}

                                            {% elseif pcComposant in pc.getCompoLimitant() %}

                                                {% set bg = 'bg-warning' %}

                                            {% endif %}

                                            <tr class="{{ bg }} rounded p-1" id="{{ pc.sku }}_{{ item.id }}">

                                                <td>{{ item.quantite }}</td>

                                                <td>{{ item }}</td>

                                                <td>{{ pcComposant.quantite }}</td>

                                                <td>

                                                    <button class="btn btn-white"
                                                            onclick="deleteCompoFromPc('{{ pc.getSku() }}','{{ item.getId() }}')">
                                                        <img width="20" src='/img/trash.svg' alt="supprimer"/></button>

                                                </td>

                                            </tr>


                                        {% endfor %}

                                        </tbody>

                                    </table>


                                </div>

                            </div>

                        {% endfor %}</div>
                </div>


                <div id="laptop" class="laptop-container my-5 hide">
                    {% set catName = 'laptop' %}
                    <div class="d-flex">
                        <h2>Laptops ({{ laptops|length }})</h2>
                        <div>
                            <button class="btn btn-success mx-3" data-bs-toggle="modal"
                                    data-bs-target="#createLaptopModal">
                                <span>Créer</span>
                                <img src="{{ asset('img/plus.svg') }}" width="30" alt="">
                            </button>
                        </div>
                    </div>
                    <table class="table table-striped">
                        <tr>
                            <th></th>
                            <th>{% set url = 'arrow-down.svg' %}

                                {% set tmp = 'ASC' %}

                                {% if sort == 'marque' %}

                                    {% if order == 'ASC' %}

                                        {% set tmp = 'DESC' %}

                                        {% set url = 'arrow-down-fill.svg' %}

                                    {% else %}

                                        {% set tmp = 'ASC' %}

                                        {% set url = 'arrow-up-fill.svg' %}

                                    {% endif %}


                                {% endif %}


                                <span>Marque</span>

                                <a href="?sort=marque&section={{ catName }}&order={{ tmp }}&section=laptop#laptop"><img
                                            src="/img/{{ url }}" alt="" width="30"></a>
                            </th>
                            <th>{% set url = 'arrow-down.svg' %}

                                {% set tmp = 'ASC' %}

                                {% if sort == 'modele' %}

                                    {% if order == 'ASC' %}

                                        {% set tmp = 'DESC' %}

                                        {% set url = 'arrow-down-fill.svg' %}

                                    {% else %}

                                        {% set tmp = 'ASC' %}

                                        {% set url = 'arrow-up-fill.svg' %}

                                    {% endif %}


                                {% endif %}


                                <span>Modele</span>

                                <a href="?sort=modele&section={{ catName }}&order={{ tmp }}#laptop"><img
                                            src="/img/{{ url }}" alt="" width="30"></a>
                            </th>
                            <th>SKU</th>
                            <th>Fournisseur</th>

                            <th>Specs</th>
                            <th>{% set url = 'arrow-down.svg' %}

                                {% set tmp = 'ASC' %}

                                {% if sort == 'prix' %}

                                    {% if order == 'ASC' %}

                                        {% set tmp = 'DESC' %}

                                        {% set url = 'arrow-down-fill.svg' %}

                                    {% else %}

                                        {% set tmp = 'ASC' %}

                                        {% set url = 'arrow-up-fill.svg' %}

                                    {% endif %}


                                {% endif %}


                                <span>Prix</span>

                                <a href="?sort=prix&section={{ catName }}&order={{ tmp }}#laptop"><img
                                            src="/img/{{ url }}" alt="" width="30"></a>
                            </th>
                            <th></th>

                        </tr>
                        <tbody>
                        {% for laptop in laptops %}
                            <tr>
                                <td>{% if laptop.images != null %}

                                        <img src="/img/laptop/{{ laptop.images | first }}" alt="" width="50"
                                             data-bs-toggle="modal" data-bs-target="#displayImgModal"
                                             data-id="laptop_{{ laptop.id }}">


                                    {% else %}

                                        <img src="/img/composant/default.svg" alt="" width="50">


                                    {% endif %}</td>
                                <td>{{ laptop.marque }}</td>
                                <td>{{ laptop.modele }}</td>
                                <td>{{ laptop.sku }}</td>
                                <td>
                                    {% for item in laptop.fournisseur %}
                                        {{ item }} <br>
                                    {% endfor %}

                                </td>

                                <td>{{ laptop.specs }}</td>
                                <td>{{ laptop.prix }} €</td>
                                <td>
                                    {% if laptop.hasFiche %}
                                        <a href="{{ laptop.getPathFiche() }}" target="_blank" class="mx-2">
                                            <img src="/img/file.svg" alt="fiche" width="30">
                                        </a>

                                    {% endif %}
                                    {% if laptop.hasImage() %}{% endif %}
                                </td>
                            </tr>
                        {% endfor %}

                        </tbody>
                    </table>
                </div>

                {% for cat in categorie %}


                    {% if cat.id not in [16,34] %}
                        {% if section is defined and section == cat | replace({' ': '_'})  %}
                            {% set class = "" %}
                            {% else %}
                                {% set class = 'hide' %}
                        {% endif %}

                        <div id="{{ cat | replace({' ': '_'}) }}" class="{{ class  }}">

                            <div class="d-flex mt-5 justify-content-between">

                                <div class="d-flex">

                                    {% if cat.icone != null %}

                                        <img src="/img/categorie/{{ cat.icone }}" alt="" width="40" class="me-2">

                                    {% endif %}

                                    <h2 id="{{ cat.getLibelle() |replace({' ' : '_'}) }}">{{ cat.getLibelle() }}

                                        ({{ cat.getComposants()|length }})</h2>

                                    <button class="btn btn-success mx-3" data-bs-toggle="modal"
                                            data-bs-target="#createComposantModal" data-id="{{ cat.id }}"><img
                                                src="/img/plus.svg" alt="plus" width="30"></button>

                                </div>

                                <div class="d-flex align-items-center">

                                    <div>

                                        <b>Nombre de

                                            {{ cat }}

                                            :</b>

                                        {{ cat.sumQuantiteCompo() }}</div>
                                    <button onclick="ConfirmReset('{{ path('stock.categorie.reset',{id : cat.id}) }}')"
                                            class="btn btn-danger mx-3">Reset
                                    </button>
                                    <div class="d-flex mx-3">

                                        <b>Montant du stock :</b>

                                        {{ cat.prixStock() }}

                                        €
                                    </div>

                                </div>

                            </div>


                            <div class="row fw-bold text-center">
                                <div class="col"></div>
                                <div class="col">

                                    Image

                                </div>

                                <div class="col">

                                    {% set url = 'arrow-down.svg' %}

                                    {% set tmp = 'ASC' %}

                                    {% if sort == 'marque' %}

                                        {% if order == 'ASC' %}

                                            {% set tmp = 'DESC' %}

                                            {% set url = 'arrow-down-fill.svg' %}

                                        {% else %}

                                            {% set tmp = 'ASC' %}

                                            {% set url = 'arrow-up-fill.svg' %}

                                        {% endif %}


                                    {% endif %}


                                    <span>Marque</span>
{% set catName  = cat.getLibelle() | replace({' ':'_'})  %}
                                    <a href="?sort=marque&order={{ tmp }}&section={{ catName }}#{{ catName }}"><img
                                                src="/img/{{ url }}" alt="" width="30"></a>


                                </div>

                                <div class="col">

                                    {% set url = 'arrow-down.svg' %}

                                    {% if sort == 'model' %}

                                        {% if order == 'ASC' %}

                                            {% set tmp = 'DESC' %}

                                            {% set url = 'arrow-down-fill.svg' %}

                                        {% else %}

                                            {% set tmp = 'ASC' %}

                                            {% set url = 'arrow-up-fill.svg' %}

                                        {% endif %}


                                    {% endif %}


                                    <span>Modele</span>


                                    <a href="?sort=model&section={{ catName }}&order={{ tmp }}#{{ cat.getLibelle() | replace({' ':'_'}) }}"><img
                                                src="/img/{{ url }}" alt="" width="30"></a>


                                </div>

                                <div class="col">

                                    {% set url = 'arrow-down.svg' %}

                                    {% if sort == 'specs' %}

                                        {% if order == 'ASC' %}

                                            {% set tmp = 'DESC' %}

                                            {% set url = 'arrow-down-fill.svg' %}

                                        {% else %}

                                            {% set tmp = 'ASC' %}

                                            {% set url = 'arrow-up-fill.svg' %}

                                        {% endif %}


                                    {% endif %}


                                    <span>Specs</span>

                                    <a href="?sort=specs&section={{ catName }}&order={{ tmp }}#{{ cat.getLibelle() | replace({' ':'_'}) }}"><img
                                                src="/img/{{ url }}" alt="" width="30"></a>


                                </div>


                                <div class="col">EAN</div>

                                <div class="col">

                                    {% set url = 'arrow-down.svg' %}

                                    {% if sort == 'prix' %}

                                        {% if order == 'ASC' %}

                                            {% set tmp = 'DESC' %}

                                            {% set url = 'arrow-down-fill.svg' %}

                                        {% else %}

                                            {% set tmp = 'ASC' %}

                                            {% set url = 'arrow-up-fill.svg' %}

                                        {% endif %}


                                    {% endif %}


                                    <span>Prix</span>

                                    <a href="?sort=prix&section={{ catName }}&order={{ tmp }}#{{ cat.getLibelle() | replace({' ':'_'}) }}"><img
                                                src="/img/{{ url }}" alt=" " width=" 30"></a>


                                </div>

                                <div class="col">
                                    Fiche
                                </div>

                                <div class="col">

                                    {% set url = 'arrow-down.svg' %}

                                    {% if sort == 'quantite' %}

                                        {% if order == 'ASC' %}

                                            {% set tmp = 'DESC' %}

                                            {% set url = 'arrow-down-fill.svg' %}

                                        {% else %}

                                            {% set tmp = 'ASC' %}

                                            {% set url = 'arrow-up-fill.svg' %}

                                        {% endif %}


                                    {% endif %}

                                    <span>Quantité</span>

                                    <a href="?sort=quantite&section={{ catName }}&order={{ tmp }}#{{ cat.getLibelle() | replace({' ':'_'}) }}"><img
                                                src="/img/{{ url }}" alt="" width="30"></a>

                                </div>

                                <div class="col">Modifier la quantité</div>

                            </div>

                            <div class="compo_container">

                                {% for composant in cat.getComposantsOrderBy(sort | default('quantite'),order | default('DESC')) %}



                                    <div class="row border-bottom align-items-center text-center line-compo"
                                         id="compo_{{ composant.id }}">

                                        <div class="col">
                                            <a href="{{ path('composant_edit',{id : composant.id}) }}"
                                               class="btn btn-info my-3">Modifier</a>

                                            <button class="btn btn-danger"
                                                    onclick="ConfirmDeleteCompo('{{ composant.id }}')">
                                                Supprimer
                                            </button>
                                        </div>

                                        <div class="col">

                                            {% if composant.hasImage() %}

                                                <img src="/img/composant/{{ composant.image }}" alt="" width="100"
                                                     data-bs-toggle="modal" data-bs-target="#displayImgModal"
                                                     data-id="composant/{{ composant.image }}">


                                            {% else %}

                                                <img src="/img/composant/default.svg" alt="" width="50">


                                            {% endif %}

                                            <img src="/img/edit.svg" alt="" width="25" data-bs-toggle="modal"
                                                 data-bs-target="#editImgCompoModal" data-id="{{ composant.id }}">


                                        </div>

                                        <div class="col">

                                            <div id="marque_{{ composant.id }}">

                                                {{ composant.marque }}

                                                <button onclick='editMarque("{{ composant.id }}")'
                                                        class="btn btn-white">
                                                    <img src="{{ asset('img/edit.svg') }}" alt="edit"></button>


                                            </div>


                                            {% include "stock/component/input.html.twig" with {'id' : 'editMarque_'~composant.id , 'input_value' : composant.marque, 'function' : 'updateMarque("'~composant.id~'","'~path('stock.compo.edit')~'")'} %}


                                        </div>

                                        <div class="col">


                                            <div id="modele_{{ composant.id }}" class="d-flex">

                                                {{ composant.model }}

                                                <button onclick='editModele("{{ composant.id }}")'
                                                        class="btn btn-white">
                                                    <img src="{{ asset('img/edit.svg') }}" alt="edit"></button>


                                            </div>


                                            {% include "stock/component/input.html.twig" with {'id' : 'editModele_'~composant.id , 'input_value' : composant.model, 'function' : 'updateModele("'~composant.id~'","'~path('stock.compo.edit')~'")'} %}


                                        </div>

                                        <div class="col">

                                            <div id="specs_{{ composant.id }}">

                                                {{ composant.specs }}

                                                <button onclick='editSpecs("{{ composant.id }}")' class="btn btn-white">
                                                    <img
                                                            src="{{ asset('img/edit.svg') }}" alt="edit"></button>


                                            </div>


                                            {% include "stock/component/input.html.twig" with {'id' : 'editSpecs_'~composant.id , 'input_value' : composant.specs, 'function' : 'updateSpecs("'~composant.id~'","'~path('stock.compo.edit')~'")'} %}


                                        </div>


                                        <div class="col">

                                            <div id="EAN_{{ composant.id }}">

                                                {{ composant.isbn }}

                                                <button onclick='editEAN("{{ composant.id }}")' class="btn btn-white">
                                                    <img
                                                            src="{{ asset('img/edit.svg') }}" alt="edit"></button>


                                            </div>


                                            {% include "stock/component/input.html.twig" with {'id' : 'editEAN_'~ composant.id , 'input_value' : composant.isbn, 'function' : 'updateEAN("'~composant.id~'","'~path('stock.compo.edit')~'")'} %}


                                        </div>

                                        <div class="col">

                                            <div id="prix_{{ composant.id }}">

                                                {{ composant.prix }}

                                                <button onclick='editPrix("{{ composant.id }}")' class="btn btn-white">
                                                    <img
                                                            src="{{ asset('img/edit.svg') }}" alt="edit"></button>


                                            </div>


                                            {% include "stock/component/input.html.twig" with {'id' : 'editPrix_'~composant.id , 'input_value' : composant.prix, 'function' : 'updatePrix("'~composant.id~'","'~path('stock.compo.edit')~'")'} %}


                                        </div>

                                        <div class="col">
                                            {% if composant.hasFiche() %}
                                                <a href="{{ composant.getPathFiche() }}" target="_blank" class="mx-2">
                                                    <img src="/img/file.svg" alt="fiche" width="30">
                                                </a>
                                            {% endif %}
                                        </div>

                                        <div class="col my-4">

                                            {% if composant.quantite > limiteQteCompo.value %}

                                                {% set warning = 'success text-white' %}

                                            {% elseif composant.quantite > 0 %}

                                                {% set warning = 'warning' %}

                                            {% else %}

                                                {% set warning = 'danger text-white' %}

                                            {% endif %}


                                            <span class="bg-{{ warning }} p-3 rounded" id="qteCompo_{{ composant.id }}">

										{{ composant.quantite }}

									</span>

                                        </div>

                                        <div class="col">

                                            <img src="/img/dash.svg" alt="moins" onclick="removeQte({{ composant.id }})"
                                                 width="30">

                                            <span class="">0</span>

                                            <img src="/img/plus.svg" alt="plus" onclick="addQte()" width="30">

                                            <button class="btn btn-success mx-3"
                                                    onclick="submitQteCompo('{{ composant.id }}')">OK
                                            </button>

                                        </div>

                                    </div>

                                {% endfor %}
                            </div>

                        </div>


                    {% endif %}


                {% endfor %}

            </div>

        </div>


    </div>

    {% include "stock/component/modals.html.twig" %}


    <script src="/js/sticky.js"></script>

    <script src="{{ asset('js/stock.js') }}"></script>


    <script>


        const addComposantPc = document.getElementById('addComposantPc');

        const createPc = addComposantPc.parentNode;

        var counter = 0;


        addComposantPc.addEventListener('click', () => {

            let container = document.getElementById('pc_components');


            let div = document.createElement('div');

            div.setAttribute('id', 'component_' + counter);


            let input = document.createElement('input');

            input.setAttribute('type', 'text');

            input.setAttribute('class', 'form-control my-3');

            input.setAttribute('autocomplete', 'off');

            input.setAttribute('placeholder', 'Search');

            input.setAttribute('name', 'searchCompo' + counter);

            input.setAttribute('list', 'compo');


            let div2 = document.createElement('div');

            div2.appendChild(input);


            div.appendChild(div2);


            container.appendChild(div);


            counter++;

        });


        const deleteCompoCat = document.getElementById('deleteCompoCat');

        const deleteCompoItem = document.getElementById('deleteCompoItem');


    </script>
{% endblock %}
{% block javascripts %}{% endblock %}