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

{% block title %}Hello DistributeursController!{% endblock %}

{% block content %}

    <div class="container">
        <h3>Liste des distributeurs en attente de validation : </h3>

        <div class="row row-cols-4 d-flex justify-content-center border mb-4">
        {% for distrib in distribsPending %}
           
            <div class="col border border-1 m-2">
                <div class="header">
                <div class="row">
                    <div class="col">
                    {% if distrib.data.articleType == 'Boulanger' %}
                        <img src="{{asset('build/images/icons/type/boulanger.png')}}" alt="" class="icon-distrib">
                    {% elseif distrib.data.articleType == 'Mer' %}
                        <img src="{{asset('build/images/icons/type/poisson.png')}}" alt="" class="icon-distrib">
                    {% elseif distrib.data.articleType == 'Boucherie' %}
                        <img src="{{asset('build/images/icons/type/meat.png')}}" alt="" class="icon-distrib">
                    {% elseif distrib.data.articleType == 'Pizza' %}
                        <img src="{{asset('build/images/icons/type/pizza.png')}}" alt="" class="icon-distrib"> 
                    {% elseif distrib.data.articleType == 'Restaurant' %}
                        <img src="{{asset('build/images/icons/type/plat.png')}}" alt="" class="icon-distrib">
                    {% elseif distrib.data.articleType == 'Agricole' %}
                        <img src="{{asset('build/images/icons/type/apple.png')}}" alt="" class="icon-distrib">
                    {% else %}
                        <img src="{{asset('build/images/icons/type/unknow.png')}}" alt="" class="icon-distrib">
                    {% endif %}
                    <span class=" text-bold">{{distrib.data.articleType}}</span>
                    </div>

                    <div class="col text-end p-1">
                        {% if distrib.data.isVisible %}
                        <button class="btn p-0 m-0">
                            <a href="{{path('activate_distributor', {'id': distrib.id})}}"><i class="fas fa-check-circle text-success" title="Visible"></i></a>
                        </button>
                        {% else %}
                        <button class="btn p-0 m-0">
                        <a href="{{path('activate_distributor', {'id': distrib.id})}}"><i class="fas fa-times-circle text-danger" title="Non Visible"></i></a>
                        </button>
                        {% endif %}
                    </div>
                </div>

                </div>

                <div class="card-body">
                    <div class="card-info">
                        <p class=".fs-6 fw-lighter"> {{distrib.data.adress}}</p>
                    </div>

                    <div class="card-technology">
                        <p>{{distrib.data.technology}}</p>
                    </div>

                    <div class="card-crud text-center">
                        <!-- Button trigger modal -->
                        <button type="button" class="btn bg-info p-0 m-0" data-bs-toggle="modal" data-bs-target="#exampleModal">
                             <small>Modifier</small>
                        </button>
                        <!-- Modal -->
                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">{{distrib.id}}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    {{distrib.data.adress}}
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                                </div>
                            </div>
                            </div>

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

        <h3>Liste des distributeurs visible : </h3>
        <div class="row row-cols-4 d-flex justify-content-center border">
        {% for distrib in distribsValidate %}
           
            <div class="col border border-1 m-2">
                <div class="header">
                <div class="row">
                    <div class="col">
                    {% if distrib.data.articleType == 'Boulanger' %}
                        <img src="{{asset('build/images/icons/type/boulanger.png')}}" alt="" class="icon-distrib">
                    {% elseif distrib.data.articleType == 'Mer' %}
                        <img src="{{asset('build/images/icons/type/poisson.png')}}" alt="" class="icon-distrib">
                    {% elseif distrib.data.articleType == 'Boucherie' %}
                        <img src="{{asset('build/images/icons/type/meat.png')}}" alt="" class="icon-distrib">
                    {% elseif distrib.data.articleType == 'Pizza' %}
                        <img src="{{asset('build/images/icons/type/pizza.png')}}" alt="" class="icon-distrib"> 
                    {% elseif distrib.data.articleType == 'Restaurant' %}
                        <img src="{{asset('build/images/icons/type/plat.png')}}" alt="" class="icon-distrib">
                    {% elseif distrib.data.articleType == 'Agricole' %}
                        <img src="{{asset('build/images/icons/type/apple.png')}}" alt="" class="icon-distrib">
                    {% else %}
                        <img src="{{asset('build/images/icons/type/unknow.png')}}" alt="" class="icon-distrib">
                    {% endif %}
                    <span class=" text-bold">{{distrib.data.articleType}}</span>
                    </div>

                    <div class="col text-end p-1">
                        {% if distrib.data.isVisible %}
                        <button class="btn p-0 m-0">
                            <a href="{{path('activate_distributor', {'id': distrib.id})}}"><i class="fas fa-check-circle text-success" title="Visible"></i></a>
                        </button>
                        {% else %}
                        <button class="btn p-0 m-0">
                        <a href="{{path('activate_distributor', {'id': distrib.id})}}"><i class="fas fa-times-circle text-danger" title="Non Visible"></i></a>
                        
                        </button>
                        {% endif %}
                    </div>
                </div>

                </div>

                <div class="card-body">
                   <div class="card-info">
                        <p class=".fs-6 fw-lighter"> {{distrib.data.adress}}</p>
                    </div>

                    <div class="card-technology">
                        <p>{{distrib.data.technology}}</p>
                    </div>

                    <div class="card-crud text-center">
                        <a href="#" class="badge bg-info">Modifier</a>
                    </div>
                </div>
            </div>
            
        {% endfor %}
        </div>
        <h3>Liste des distributeurs en corbeille</h3>
        <div class="row row-cols-4 d-flex justify-content-center border">
            <div class="col">1</div>
        </div>
    </div>

    {% verbatim %}
    <div id="app">
        {{message}}
    </div>
    {% endverbatim %}
{% endblock %}