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

{% block title %}{% if app.request.get('id') %}{{'Edit product'|trans}}{% else %}{{'New product'|trans}}{% endif %}{% endblock %}
{% block page_title %}{% if app.request.get('id') %}{{'Edit product'|trans}}{% else %}{{'New product'|trans}}{% endif %}{% endblock %}
{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{{ path('products') }}">{{'Products'|trans}}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{% if app.request.get('id') %}{{'Edit product'|trans}}{% else %}{{'New product'|trans}}{% endif %}</li>
{% endblock %}

{% block body %}

    <div class="card bg-white border-0 rounded-3 mb-4">
        <div class="card-body p-4">

            {{ form_start(form) }}

                {{ form_errors(form) }}

                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <button class="nav-link active" id="config-tab" data-bs-toggle="tab" data-bs-target="#config" type="button" role="tab" aria-controls="config" aria-selected="true">{{'Configuration'|trans}}</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" id="images-tab" data-bs-toggle="tab" data-bs-target="#images" type="button" role="tab" aria-controls="images" aria-selected="true">{{'Images'|trans}}</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" id="price-tab" data-bs-toggle="tab" data-bs-target="#price" type="button" role="tab" aria-controls="price" aria-selected="false">{{'Price'|trans}}</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" id="stock-tab" data-bs-toggle="tab" data-bs-target="#stock" type="button" role="tab" aria-controls="stock" aria-selected="false">{{'Stock'|trans}}</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    
                    <div class="tab-pane fade show active" id="config" role="tabpanel" aria-labelledby="config-tab">                
                        <div class="form-floating mb-3">
                            {{ form_widget(form.name) }}
                            {{ form_label(form.name) }}            
                        </div> 
                        <div class="form-floating mb-3">
                            {{ form_widget(form.reference) }}
                            {{ form_label(form.reference) }}            
                        </div> 
                        <div class="form-floating mb-3">
                            {{ form_widget(form.ean) }}
                            {{ form_label(form.ean) }}            
                        </div>          
                        {{ form_row(form.short_description) }}<br />
                        {{ form_row(form.description) }}<br /> 
                    </div>
                    <div class="tab-pane fade" id="images" role="tabpanel" aria-labelledby="images-tab">
                        {% if form.image.vars.data %}
                            <div class="form-group">
                                <label>Image actuelle :</label>
                                <img src="/uploads/products/{{ form.image.vars.data }}" alt="Image actuelle" style="max-width: 200px; max-height: 200px;">
                            </div>
                        {% endif %}
                        {{ form_row(form.image) }}<br />
                    </div>
                    <div class="tab-pane fade" id="price" role="tabpanel" aria-labelledby="price-tab">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.price) }}
                            {{ form_label(form.price) }}            
                        </div> 
                        <h4>{{'OR Prices by Store'|trans}}</h4>

                        {% for magasin in magasins %}
                            <div class="form-floating mb-3">
                                <input tabindex="0" type="text" id="products_price{{ magasin.id }}" name="price[{{ magasin.id }}]" class="form-control" placeholder="Prix" value="{{magasin.price}}">
                                <label for="products_price{{ magasin.id }}">{{ magasin.name }}</label>            
                            </div> 
                        {% endfor %}
                    </div>

                    <div class="tab-pane fade" id="stock" role="tabpanel" aria-labelledby="stock-tab">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.supplier) }}
                            {{ form_label(form.supplier) }}  
                        </div>
                        <div class="form-floating mb-3">
                            {{ form_widget(form.stock) }}
                            {{ form_label(form.stock) }}            
                        </div> 
                    </div>
                    
                    <div class="FixedBottom px-5">     
                        <div class="col-md-offset-right-2 col-sm-offset-right-3 d-flex float-end">
                            <div class="d-flex" style="gap:.9375rem;">        
                                <a href="{{ path('products') }}" class="btn btn-outline-secondary mt-2"><i class="bi bi-arrow-bar-left"></i>&nbsp;&nbsp;{{'Return'|trans}}</a> 
                                <div class="can-toggle mt-2">      
                                    {{ form_widget(form.status) }}              
                                    <label for="products_status">     
                                        <div class="can-toggle__label-text">En ligne</div>                   
                                        <div class="can-toggle__switch" data-checked="Oui" data-unchecked="Non"></div>                      
                                    </label>
                                </div>
                            </div>
                            <div class="d-flex" style="gap:.9375rem;">
                                {{ form_row(form.save) }}   
                                {% if app.request.get('id') %}
                                    <a href="{{ path('duplicate_product', {'id': app.request.get('id')}) }}" class="btn btn-outline-secondary mt-2"><i class="bi bi-copy"></i>&nbsp;&nbsp;{{'Duplicate'|trans}}</a> 
                                {% endif %}
                                <a href="{{ path('product') }}" class="btn btn-outline-secondary mt-2"><i class="bi bi-plus-square"></i>&nbsp;&nbsp;{{'Add new product'|trans}}</a> 
                            </div>
                        </div>
                    </div>            
                </div>
            {{ form_end(form) }}

        </div>
    </div>
{% endblock %}