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

{% block title %} Position {% endblock %}

{% block content %}
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Position et affichage</h1>
    <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item active">Position et affichage</li>
    </ol>
</div>

{% include 'backend_admin/basic/notice.html.twig' %}

<!-- Content Row -->
<div class="row">
    <div class="card shadow mb-4"  >
        <!-- Card Header - Dropdown -->
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-bold text-primary">Afficher l'annonce sur la page d'acceuil</h6>
        </div>
        <!-- Card Body -->
        <div class="card-body" style="min-height: 700px">

             
            
            <div class="row">
                <div class="col-md-5">
                
                    <div class="mb-4">
                        <div class="card border-left-primary shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col-10">
                                        <div class="font-weight-bold text-primary text-uppercase mb-1">
                                            Annonce:
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ position.getAnnonce().getTitre() }}</div>
                                    </div>
                                    <div class="col-1 offset-1">
                                        <i class="fa-solid fa-scroll fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="mb-4">
                        <div class="card border-left-success shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col-5">
                                        <div class="font-weight-bold text-success text-uppercase mb-1">
                                            Date Début
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ position.getDateAdd()|date("d/m/Y")  }}</div>
                                    </div>
                                    <div class="col-5">
                                        <div class="font-weight-bold text-success text-uppercase mb-1">
                                            Date Fin
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ position.getDateFin()|date("d/m/Y") }}</div>
                                    </div>
                                    <div class="col-1 offset-1">
                                        <i class="fas fa-comments fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    
                    <div class="mb-4">
                        <div class="card border-left-success shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col-5">
                                        <div class="font-weight-bold text-success text-uppercase mb-1">
                                            Ligne d'affichage
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ ligne.getRang() }}</div>
                                    </div>
                                    <div class="col-5">
                                        <div class="font-weight-bold text-success text-uppercase mb-1">
                                            Dimension
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ position.getAnnonce().getDimension() }}</div>
                                    </div>
                                    <div class="col-1 offset-1">
                                        <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <div class="card border-left-danger shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="font-weight-bold text-danger text-uppercase mb-1">
                                            Prix Total d'annonce:
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ position.getTotalPrix()}} DT</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-comments fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="mb-4">
                        <div class="card border-left-warning shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col-7">
                                        <div class="font-weight-bold text-warning text-uppercase mb-1">
                                            Créer par:
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ position.getCreateBy().getFirstname() }} {{ position.getCreateBy().getLastname() }}</div>
                                    </div>
                                    <div class="col-3">
                                        <div class="font-weight-bold text-warning text-uppercase mb-1">
                                             date:
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ position.getDateAdd()|date("d/m/Y") }}</div>
                                    </div>
                                    <div class="col-1 offset-1">
                                        <i class="fa-solid fa-scroll fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>


                <div class="col-md-6 offset-1" >
                    <div id="annonce-ligne"> <div class="col-md-12 col-lg-12 order-md-last">
                        <h4 class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Affichage d'annonce sur la Ligne <b>{{ position.getLigneRange() }}</b></span>
                            <span class="badge bg-secondary rounded-pill"> {{ position.getAffichages()|length }} Jour</span>
                        </h4>
                        <div class="overflow-scroll p-3 bg-light" style="height: 550px;">
                            <ul class="list-group mb-3">
                           
                                {% for affichage in position.getAffichages() %}
                                    <li class="list-group-item d-flex justify-content-between lh-sm">
                                        <div>
                                            <h6 class="my-0"> {{ affichage.getDateShow()|date("d/m/Y") }}</h6>
                                        </div>
                                        <small class="text-muted">Ligne {{ affichage.getLigneRange() }}</small>
                                        <span class="text-muted">{{ affichage.getPrix() }} DT</span>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>

                

            </div>
            
        </div>
    </div>
</div>

{% endblock %}