{% 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>


<!-- 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="col-md-12 mb-4 mt-2">
                        <label for="societe" class="form-label">Société</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa-regular fa-building"></i></span>
                            <select class="form-select" id="societe" required="">
                                <option value=""></option>
                                {% for  societe in societes %}
                                    <option value="{{ societe.getId() }}">{{ societe.getNom() }}</option>
                                {% endfor %}
                            </select>
                            <div class="invalid-feedback">
                                Please select a valid country.
                            </div>
                        </div>
                    </div>
               

                    <div class="col-md-12 mb-5 annonce" style="display:none">
                        <label for="annonce" class="form-label">Annonce</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa-solid fa-scroll"></i></span>
                            <select class="form-select" id="annonce" required="">
                            </select>
                            <div class="invalid-feedback">
                                Please select a valid Annonce.
                            </div>
                        </div>
                    </div>
                

                    <div class="row mb-5 largeur" style="display:none">
                        <div class="col-md-8">
                            Dimension: <b><span id="largeur"></span></b>
                        </div>
                    </div>


               
                    <div class="col-md-8 mb-5 ligne" style="display:none">
                        <label for="ligne" class="form-label">Ligne d'affichage sur la Page d'accueil</label>
                        <select class="form-select" id="ligne" required=""></select>
                        <div class="invalid-feedback">
                            Please select a valid country.
                        </div>
                    </div>


                    <div class="intervalle-date mb-5" style="display:none">
                        <div class="row mb-3">
                            <div class="col-md-5">
                                <label for="dateDebut" class="form-label">Date Début</label>
                                <input type="date" class="form-control" id="dateDebut" placeholder="" value="" required="">
                                <div class="invalid-feedback">
                                    Valid first name is required.
                                </div>
                            </div>

                            <div class="offset-1 col-md-5 dateFin">
                                <label for="dateFin" class="form-label">Date Fin</label>
                                <input type="date" class="form-control" id="dateFin" placeholder="" value="" required="">
                                <div class="invalid-feedback">
                                    Valid last name is required.
                                </div>
                            </div>

                        </div>
                    </div>

                    <br>

                    <div class="row mb-5 valOperation" style="display:none">
                        <div class="col-md-5 offset-4">
                            <button type="button" class="btn btn-outline-secondary" id="valOperation">valider</button>
                        </div>
                    </div>

                </div>


                <div class="col-md-6 offset-1" >
                    
                    <div id="loading-data"></div>
                    
                    <div id="annonce-ligne"></div>

                </div>

                
                <div class="save-operation" style="display:none">
                    <div class="col-md-6 offset-3 " >
                        <hr class="my-4 mb-4">
                        <center>
                            <button class="w-5 btn btn-primary btn-lg" id="save-operation">
                                <i class="fa-regular fa-floppy-disk"></i>
                                enregister
                            </button>
                        </center>
                    </div>
                </div>

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

{% endblock %}

{% block javascripts %}
    <script>
        var pathReservation = "{{ path('backend_admin_position_creer') }}";
        var pathTestReservation = "{{ path('backend_admin_position_disponibilite') }}";
        var pathLigneDetail = "{{ path('backend_admin_position_ligne_detail') }}";
        var pathSave = "{{ path('backend_admin_position_save') }}";
        var pathPositionDetail = "{{ path('backend_admin_position_detail') }}";
    </script>

    {{ parent() }}
    {{ encore_entry_script_tags('app_backend_annonce') }}
{% endblock %}