{% extends 'admin/layout.html.twig' %}

{% form_theme form _self %}

{% block _material_thicknesses_entry_row %}
    <div class="grid grid-cols-1 md:grid-cols-2 py-2 mt-2">
        <div class="form-group mt-2 mb-2 md:mb-0 md:mt-0">
            {{ form_widget(form.value, { 'attr': {'class': 'w-full md:w-32 h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
            <div class="text-xs text-red-400">
                {{ form_errors(form.value)}}
            </div>
        </div>
        <div class="form-group mb-2 md:mb-0">
            {{ form_widget(form.price, { 'attr': {'class': 'w-full md:w-32 h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
            <div class="text-xs text-red-400">
                {{ form_errors(form.price)}}
            </div>
        </div>
    </div>
{% endblock %}

{% block body %}

<h2 class="text-2xl font-bold">Matériaux</h2> 

<section class="material-list mt-12">
    <h3 class="text-xl font-bold">Liste des matériaux</h3>
    <table class="table-auto mt-12">
        <thead>
            <tr>
                <th class="px-12 text-left border-b border-gray-300">Nom</th>
                <th class="px-12 text-left border-b border-gray-300">Colori</th>
                <th class="px-12 text-left border-b border-gray-300">Finition</th>
                <th class="px-12 text-left border-b border-gray-300">Epaisseur</th>
                <th class="px-12 text-left border-b border-gray-300">Prix(Euros)</th>
                <th class="px-12 text-left border-b border-gray-300">Action</th>
                
            </tr>
        </thead>
        <tbody>
            {% for material in materialsPerPage %}
                {% for thickness in material.thicknesses %}
                    <tr>                    
                        <th class="px-12 py-2 font-light text-sm text-left border-b border-gray-300">{{ material.name }}</th>
                        <th class="px-12 py-2 font-light text-sm text-left border-b border-gray-300">{{ material.colour }}</th>
                        <th class="px-12 py-2 font-light text-sm text-left border-b border-gray-300">{{ material.finish }}</th>
                        <th class="px-12 py-2 font-light text-sm text-left border-b border-gray-300">{{ thickness.value }}</th>
                        <th class="px-12 py-2 font-light text-sm text-left border-b border-gray-300">{{ thickness.price | format_currency('EUR') }}</th> 
                        <th class="px-12 py-2 border-b border-gray-300" >
                        <a href="{{ path('material_delete', {'id': material.id}) }}"><span class="material-symbols-outlined hover:text-red-400">delete</span></a></th>                       
                    </tr>
                {% endfor %}
            {% endfor %}
        </tbody>
    </table>
    {# display navigation #}
    <div class="navigation">
        {{ knp_pagination_render(materialsPerPage) }}
    </div>

</section> 

<h3 class="my-20 text-xl font-bold">Mise à jour</h3>

<div class="grid gap-4 grid-cols-2 my-10">
    <!-- Add Material -->
    <section class="add-material border border-gray-200 p-4 rounded">
        <h4 class="text-lg mb-4 font-bold">Ajouter un matériau</h4>
        {{ form_start(form) }}
            <div class="form-group my-2">
                <div class="w-[20%] inline-block">{{ form_label(form.name) }}</div>
                    {{ form_widget(form.name, {'attr':{'class': 'w-full md:w-48 h-10 text-xs border-slate-200 rounded bg-slate-100'}}) }}
                <div class="text-xs text-red-400">
                    {{ form_errors(form.name) }}
                </div>
            </div>
            <div class="form-group my-2">
                <div class="w-[20%] inline-block">{{ form_label(form.colour) }}</div>
                    {{ form_widget(form.colour, {'attr':{'class': 'w-full md:w-48 h-10 text-xs border-slate-200 rounded bg-slate-100'}}) }}
                <div class="text-xs text-red-400">
                    {{ form_errors(form.colour) }}
                </div>
            </div>
            <div class="form-group my-2">
                <div class="w-[20%] inline-block">{{ form_label(form.finish) }}</div>
                    {{ form_widget(form.finish, {'attr':{'class': 'w-full md:w-48 h-10 text-xs border-slate-200 rounded bg-slate-100'}}) }}
                <div class="text-xs text-red-400">
                    {{ form_errors(form.finish) }}
                </div>
            </div>
            <p class="mt-10">Epaisseur du matériau</p>
            <span class="text-sm">Ce matériau peux avoir plusieurs épaisseurs</span>
            <button type="button" class="px-2 py-1 bg-gray-400 hover:bg-gray-500 text-white text-xs shadow" onclick="addThicknessForm()" data-form=1>Ajouter</button>

            <span class="form-group my-2" id="material-thickness" data-form=1></span>

            <button type="submit" class="mt-5 px-2 py-1 bg-gray-400 hover:bg-gray-500 text-white shadow">Valider</button>
        {{ form_end(form) }}
    </section>
    <!-- Add Material -->

    <!-- csv file update -->
    <section class="add-csvfilel border border-gray-200 p-4 rounded">
        <h4 class="text-lg mb-4 font-bold">Mettre à jour à l'aide d'un fichier excel</h4>
        <p class="flex items-start mb-5">
            <span class="material-symbols-outlined text-red-600 text-3xl mr-2">warning</span>
            <span>Les données actuelles seront perdues et seront mises à jour.Cette action est irréversible.</span>
        </p>
            {{ form_start(csvFileForm)}}
                <div class="form-group my-2">
                    <div class="w-[20%] inline-block">{{ form_label(csvFileForm.file) }}</div>
                        {{ form_widget(csvFileForm.file) }}
                    <div class="text-xs text-red-400">
                        {{ form_errors(csvFileForm.file) }}
                    </div>
                </div>
            {{ form_end(csvFileForm) }}
    </section>
    <!-- csv file update -->
</div>


{% endblock %}
{% block javascripts %}

<script>
    const addThicknessForm = function () {
        const collectionHolder = document.getElementById(`material_thicknesses`);
        let formCounter = document.getElementById(`material-thickness`).dataset.form;
        const newForm = collectionHolder.dataset.prototype.replace(/__name__/g, formCounter);
        formCounter++;
        document.getElementById(`material-thickness`).dataset.form = formCounter;

        collectionHolder.dataset.dataForm
        document.getElementById(`material-thickness`).insertAdjacentHTML('afterend', newForm);
    }

    addThicknessForm();
</script>
{% endblock %}