@extends('layouts.base2')
@section('title', "Interface de Faq")
@push('styles')
    <style>
        .faq-question {
            cursor: pointer;
        }
        .faq-reponse {
            border-left: 3px solid #007bff;
            padding-left: 10px;
        }
    </style>
@endpush
@section('content')
    @section('titlePage')
        @adminbarreau
            <h1 class="mb-0 color-ico-barreau"><i class="fas fa-list-alt color-ico-barreau"></i> Liste de FAQs</h1>
        @endadminbarreau
        @avocatuser
            <h1 class="mb-0 color-ico-barreau"><i class="fas fa-question-circle color-ico-barreau"></i> Foire aux questions</h1>
        @endavocatuser
    @stop
    <div class="container" style="padding-bottom: 2em; padding-top: 1em">

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="card card-primary card-tabs">
                            <div class="card-header p-0 pt-1">
                                <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                                    @adminbarreau
                                        <li class="nav-item">
                                            <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home"
                                            role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Liste des Questions/Réponses</a>
                                        </li>
                                    @endadminbarreau

                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-one-tabContent">
                                    <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                        @adminbarreau
                                            <div class="row" style="padding-top:1em">
                                                <div class="col-sm-2">
                                                    <button type="button" style="background-color:  #18528d; color: #fff" class="btn btn-primary" data-toggle="modal" data-target="#modal-default"><i class="fa-solid fa-plus"></i></button>
                                                </div>
                                            </div>

                                            <br>
                                            <div class="row">
                                                <table class="table table-striped nowrap" id="liste_faq">
                                                    <thead>
                                                        <tr>
                                                            <th><span class="color-ico-barreau"> N°</span></th>
                                                            <th><i class="fas fa-question-circle color-ico-barreau"></i> <span class="color-ico-barreau">QUESTION</span></th>
                                                            <th><i class="fas fa-comment-dots color-ico-barreau"></i> <span class="color-ico-barreau">REPONSE</span></th>
                                                            <th><i class="fas fa-calendar-plus color-ico-barreau"></i> <span class="color-ico-barreau">DATE D'AJOUT</span></th>
                                                            <th><i class="fas fa-cogs color-ico-barreau"></i> <span class="color-ico-barreau">ACTIONS</span></th>
                                                        </tr>
                                                    </thead>

                                                    <tbody></tbody>
                                                </table>
                                            </div>
                                        @endadminbarreau
                                        @avocatuser
                                            <div class="faq-section">
                                                                                                @foreach($question as $q)
                                                    <div class="faq-item mb-3 p-3 border rounded shadow-sm">
                                                        <div class="faq-question d-flex justify-content-between align-items-center">
                                                            <span><i class="fas fa-comment-dots text-primary"></i> <strong>{{ $i++ }}. {{ $q->question }} ?</strong></span>
                                                            <a href="#" class="btn btn-sm btn-outline-primary toggle-reponse">Voir la réponse</a>
                                                        </div>
                                                        <div class="faq-reponse mt-2 text-muted" style="display: none;">
                                                            {{ $q->reponse }}
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endavocatuser

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    {{-- Modal --}}
    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content shadow-lg rounded-lg">
                <div class="modal-header text-white" style="background-color: #18528d;">
                    <h4 class="modal-title"><i class="fa-solid fa-circle-question"></i> Ajouter une FAQ</h4>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form method="POST" action="{{ route('faq.create') }}">
                    @csrf
                    <div class="modal-body">
                        <div class="card-body">
                            <div class="form-group">
                                <label for="question" class="form-label fw-bold">
                                    ❓ Question
                                </label>
                                <input type="text" class="form-control" name="question" id="question" placeholder="Saisir une question">
                            </div>
                            <br>
                            <div class="form-group">
                                <label for="reponse" class="form-label fw-bold">
                                    💬 Réponse
                                </label>
                                <textarea name="reponse" id="reponse" rows="5" class="form-control" placeholder="Saisir la réponse à la question"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-danger px-4" data-dismiss="modal">
                            <i class="fa fa-reply"></i> Fermer
                        </button>
                        <button type="submit" class="btn btn-success px-4">
                            <i class="fa-solid fa-floppy-disk"></i> Enregistrer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- /.modal -->
@stop
@section('footer')
    <script>

        $(document).ready(function(){
            {{-- Gestion de la Foire --}}
            $('.toggle-reponse').on('click', function (e) {
                e.preventDefault();
                const btn = $(this);
                const reponse = btn.closest('.faq-item').find('.faq-reponse');

                if (btn.text().trim() === 'Voir la réponse') {
                    reponse.slideDown();
                    btn.text('Cacher la réponse');
                } else {
                    reponse.slideUp();
                    btn.text('Voir la réponse');
                }
            });
            {{-- End Foire --}}

            if ($.fn.DataTable.isDataTable('#liste_faq')) {
                $('#liste_faq').DataTable().destroy();
            }
            var oTable = $('#liste_faq').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{!! route('charger.liste.faq') !!}",
                columns: [
                    {data: 'numero',name: 'numero'},
                    {data: 'question', name: 'question', searchable: true},
                    {
                        data: 'reponse',
                        name: 'reponse',
                        render: function(data, type, row) {
                            return data.replace(/\n/g, '<br>');
                        }
                    },
                    {data: 'dateAjout', name: 'dateAjout', searchable: true},
                    {data: 'action', name: 'action', searchable: false}
                ]
            });

            //cacher les reponses au chargement de la page
            // $(".reponse").hide();

            // $("a").on('click', function(e){
            //     e.preventDefault();
            //     // $(".reponse").show();
            //     $(this).parent().slideToggle();//


            //     if($(this).html() == "Voir la réponse"){
            //         $(this).html("Cacher la réponse");
            //     }else{
            //         $(this).html("Voir la réponse");
            //     }

            // });
        });


        //Gestion des erreurs
        $(function() {
            var Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3500
            });

            $('.swalDefaultWarning').ready(function() {
                @if (session('warning'))
                    Toast.fire({
                        icon: 'warning',
                        title: '{{ session('warning') }}'
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('status'))
                    Toast.fire({
                        icon: 'success',
                        title: '{{ session('status') }}'
                    })
                @endif
            });

            $(document).ready(function() {

                @error('nom')
                    setTimeout(function() {
                        Toast.fire({
                            icon: 'error',
                            title: '{{ $message }}'
                        });
                    });
                @enderror

                @error('lieu')
                    setTimeout(function() {
                        Toast.fire({
                            icon: 'error',
                            title: '{{ $message }}'
                        });
                    }, 2000);
                @enderror

            });


        });

    </script>

@stop