{% include 'partials/header.html.twig' %}
<div class="body-wrapper">
    <div class="container-fluid">

        <div class="card bg-primary-subtle shadow-none position-relative overflow-hidden mb-4">
            <div class="card-body px-4 py-3">
                <div class="row align-items-center">
                    <div class="col-9">
                        <h4 class="fw-semibold mb-8">Commentaires Clients</h4>
                        
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body px-4 py-3">
                <ul class="nav nav-pills user-profile-tab  sticky-top" id="pills-tab" role="tablist" style="top: 80px;z-index: 1020;background-color: white;">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link position-relative rounded-0 active d-flex align-items-center justify-content-center bg-transparent fs-3 py-4" id="pills-nonlus-tab" data-bs-toggle="pill" data-bs-target="#pills-nonlus" type="button" role="tab" aria-controls="pills-nonlus" aria-selected="true">
                            <i class="ti ti-building-skyscraper me-2 fs-6"></i>
                            <span class="d-none d-md-block">Commentaires non lus</span> 
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link position-relative rounded-0 d-flex align-items-center justify-content-center bg-transparent fs-3 py-4" id="pills-lus-tab" data-bs-toggle="pill" data-bs-target="#pills-lus" type="button" role="tab" aria-controls="pills-lus" aria-selected="false">
                            <i class="ti ti-mood-smile me-2 fs-6"></i>
                            <span class="d-none d-md-block">Commentaires lus</span> 
                        </button>
                    </li>
                </ul>
                <div class="card-body">
                    <div class="tab-content" id="pills-tabContent">
                        
                        <div class="tab-pane fade show active" id="pills-nonlus" role="tabpanel" aria-labelledby="pills-nonlus-tab" tabindex="0">
                            
                            <div id="note-full-container" class="note-has-grid row">

                                {% if commentairesnonlus|length == 0 %}
                                    
                                    <div class="alert alert-warning text-warning" role="alert">
                                        Vous n'avez aucun nouveau commentaire
                                    </div>

                                {% else %}
                                    <div class="row">
                                        
                                        {% for commentaire in commentairesnonlus %}

                                            <div class="col-lg-12">
                                                <div class="card">
                                                    <div class="card-header"><h4>{{commentaire.chambre.nom}}</h4></div>
                                                    <div class="card-body">
                                                        <h4 class="card-title">{{commentaire.commentaire}}</h4>
                                                        <p class="card-text">
                                                            {{commentaire.date|date('d/m/Y H:i:s')}}
                                                        </p>
                                                        {% if not commentaire.lu %}
                                                            <button id="btnmarquelu" class="btn btn-primary" onclick="marqueLu({{commentaire.id}})">Marquer comme lu</button>
                                                        {% endif  %}
                                                    </div>
                                                </div>
                                            </div>

                                            
                                        {% endfor  %}

                                    </div>

                                {% endif  %}
                            
                            </div>

                        </div>

                        <div class="tab-pane fade" id="pills-lus" role="tabpanel" aria-labelledby="pills-lus-tab" tabindex="0">
                            
                            <div id="note-full-container" class="note-has-grid row">

                                {% if commentaireslus|length == 0 %}
                                    
                                    <div class="alert alert-warning text-warning" role="alert">
                                        Vous n'avez aucun commentaire
                                    </div>

                                {% else %}
                                    <div class="row">
                                        
                                        {% for commentaire in commentaireslus %}

                                            <div class="col-lg-12">
                                                <div class="card">
                                                    <div class="card-header"><h4>{{commentaire.chambre.nom}}</h4></div>
                                                    <div class="card-body">
                                                        <h4 class="card-title">{{commentaire.commentaire}}</h4>
                                                        <p class="card-text">
                                                            {{commentaire.date|date('d/m/Y H:i:s')}}
                                                        </p>
                                                        {% if not commentaire.lu %}
                                                            <button id="btnmarquelu" class="btn btn-primary" onclick="marqueLu({{commentaire.id}})">Marquer comme lu</button>
                                                        {% endif  %}
                                                    </div>
                                                </div>
                                            </div>

                                            
                                        {% endfor  %}

                                    </div>

                                {% endif  %}
                            
                            </div>
                            
                        </div>

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

<script>

    function marqueLu(commentaire){
        // Envoyer la mise à jour au serveur avec fetch et AJAX
        fetch('{{ path('chambre_commentaire_client_lu') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token("chambre_commentaire_client_lu") }}'
            },
            body: JSON.stringify({
                commentaire: commentaire
            })
        })
        .then(response => response.json())
        .then(data => {
            // Afficher une notification toast lorsque la mise à jour est réussie
            if (data.success) {
                location.reload();
            } else {
                showToast('Erreur lors de la lecture des messages.', 'error');
            }
        })
        .catch(error => {
            showToast('Erreur lors de la génération des QRCodes.', 'error');
        })
    }


</script>

{% include 'partials/footer.html.twig' %}