{% extends 'menu/navigation_admin.html.twig' %}
{% set side_nav = 'manage_produits' %}
{% block content %}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-12 position-relative z-index-2">
                <div class="card card-plain mb-4">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-header">
                                    <h4 class="font-weight-bolder">{% if mode == "edition" %} Édition {% else %} Création {% endif %}
                                        d'un produit</h4>
                                    <p class="mb-0">{% if mode == "edition" %} Éditer {% else %} Entrer {% endif %} les
                                        informations du produit</p>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="card card-plain">
                                    <div class="card-body">
                                        {{ form_start(form, { 'attr': { 'class': 'm-form m-form--label-align-left- m-form--state-', 'id': 'm_form', 'autocomplete' : 'off' }}) }}

                                        {# Product details #}
                                        <div class="input-group input-group-outline mb-3">
                                            {{ form_label(form.label) }}
                                            {{ form_widget(form.label) }}
                                        </div>
                                        <div class="input-group input-group-outline mb-3">
                                            {{ form_label(form.price) }}
                                            {{ form_widget(form.price) }}
                                        </div>
                                        <div class="input-group input-group-outline mb-3">
                                            {{ form_label(form.quantity) }}
                                            {{ form_widget(form.quantity) }}
                                        </div>

                                        {# Categories and brand #}
                                        <div class="input-group input-group-outline mb-3">
                                            {{ form_label(form.categoryId) }}
                                            {{ form_widget(form.categoryId) }}
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="card card-plain">
                                    <div class="card-body">
                                        {{ form_start(form, { 'attr': { 'class': 'm-form m-form--label-align-left- m-form--state-', 'id': 'm_form', 'autocomplete' : 'off' }}) }}

                                        <div class="input-group input-group-outline mb-3">
                                            {{ form_label(form.subCategoryId) }}
                                            {{ form_widget(form.subCategoryId) }}
                                        </div>
                                        <div class="input-group input-group-outline mb-3">
                                            {{ form_label(form.brandId) }}
                                            {{ form_widget(form.brandId) }}
                                        </div>
                                        <div class="input-group input-group-outline mb-3">
                                            {{ form_label(form.criteria) }}
                                            {{ form_widget(form.criteria) }}
                                        </div>
                                        <div class="input-group input-group-outline mb-3">
                                            {{ form_label(form.images) }}
                                            {{ form_widget(form.images) }}
                                            <div id="image-preview"></div>
                                        </div>

                                        {% if mode == "edition" %}
                                            <h2>Images</h2>
                                            {% if noImg %}
                                                <p>Aucune image importée pour cet article.</p>
                                            {% else %}
                                                <div style="display: inline-block;">
                                                    {% for image in images %}
                                                        {% if image is not empty %}
                                                            <div style="display: inline-block;">
                                                                <a href="#"
                                                                   data-delete data-token="{{ csrf_token('delete') }}"><i class="fa text-danger fa-trash"></i> </a>
                                                                <img src="{{ asset(image) }}"
                                                                     alt="Image" width="150">
                                                            </div>
                                                        {% endif %}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        {% endif %}


                                        {# Images #}
                                        {# <div class="input-group input-group-outline mb-3">
                {{ form_label(form.images, 'Images', {'label_attr': {'class': 'form-label'}}) }}
                    <div class="row">
                        <div class="col-md-8">
                            <input type="text" class="form-control" readonly placeholder="Select images">
                        </div>
                        <div class="col-md-8">
                            <div class="input-group">
                                {{ form_widget(form.images, {'attr': {'style': 'display:none;' }}) }}
                                <label class="btn btn-outline-primary w-100" for="{{ form.images.vars.id }}">
                                    Browse
                                </label>
                            </div>
                        </div>
                    </div>
                </div> #}


                                    </div>
                                </div>
                            </div>
                            {# Buttons #}
                            <div class="float-end">
                                <button type="button" class="btn btn-outline-info bg-gradient-info"
                                        onclick="window.location.href ='{{ path('admin_products') }}'">
                                    <span>
                                        <span><i class="material-icons opacity-10">arrow_back</i> Annuler</span>&nbsp;&nbsp;
                                    </span>
                                </button>
                                {% if mode == "edition" %}
                                    <a href="{{ path('admin_delete_product', {'product': id }) }}">
                                        <button type="button" class="btn btn-outline-primary bg-gradient-primary"><i
                                                    class="material-icons opacity-10">delete</i> Supprimer
                                        </button>
                                    </a>
                                {% endif %}
                                <button type="submit" class="btn btn-outline-success bg-gradient-success"><i
                                            class="material-icons opacity-10">save</i> Enregistrer
                                </button>
                                {{ form_end(form) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('listManagers') }}

    <script>
        function previewImage(event) {
            var reader = new FileReader();
            reader.onload = function () {
                var output = document.getElementById('image-preview');
                output.innerHTML = '<img src="' + reader.result + '" />';
            }
            reader.readAsDataURL(event.target.files[0]);
        }

        document.addEventListener('DOMContentLoaded', function () {
            var input = document.getElementById('form_images');
            input.addEventListener('change', previewImage);
        });
    </script>
{% endblock %}