@extends('adminlte::page')

@section('title', 'Liste des announces')
@section('content_header')
    <h1>policy et privacy FAQ</h1>
@stop
@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs4.min.css" integrity="sha512-ngQ4IGzHQ3s/Hh8kMyG4FC74wzitukRMIcTOoKT3EyzFZCILOPF0twiXOQn75eDINUfKBYmzYn2AA8DkAk8veQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@stop
@section('content')
    @if (session()->has('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div>
    @endif
    @if (session()->has('error'))
        <div class="alert alert-danger">
            {{ session()->get('error') }}
        </div>
    @endif
    <form class="form" method="POST" action="{{ route('faq.update') }}">
    @csrf
    <input type="hidden" name="config_key" value="faq_config">
 <!-- faq.blade.php -->
 <div id="configs">
    @foreach ($content as $config)
        @if (!empty($config->question) && !empty($config->value))
        <div class="config-item" id="config-item-{{ $loop->index }}">
            <div class="form-group">
                <label>Question</label>
                <input type="text" class="form-control" name="configs[{{ $loop->index }}][question]" value="{{ $config->question }}" required>
            </div>
            <div class="form-group">
                <label>Réponse</label>
                <textarea class="form-control editor" name="configs[{{ $loop->index }}][content]" required>{{ $config->value }}</textarea>
            </div>
            <input type="hidden" name="configs[{{ $loop->index }}][delete]" value="0">
            <button type="button" class="btn btn-danger" onclick="markForDeletion({{ $loop->index }})">
                <i class="fas fa-trash"></i> Supprimer
            </button>
        </div>
        @endif
    @endforeach
</div>

<div class="d-flex gap2">
    <div class="mt-3 text-end mr-3">
        <button type="submit" class="btn btn-primary">Mettre à jour</button>
    </div>
    <button type="button" class="btn btn-primary" onclick="addConfig()">Ajouter une autre question/réponse</button>
    </div>
</form>


@stop
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote.min.js" referrerpolicy="origin"></script>
    <script>
    // Initialiser Summernote pour tous les éléments avec la classe 'editor'
    function initializeSummernote() {
        $('.editor').summernote({
            height: 200 // Ajustez la hauteur selon vos besoins
        });
    }

    $(document).ready(function() {
        initializeSummernote(); // Initialiser Summernote au chargement de la page
    });

    function addConfig() {
    const configsContainer = document.getElementById('configs');
    const index = configsContainer.children.length; // Obtenez l'index actuel

    const newConfig = document.createElement('div');
    newConfig.className = 'config-item';
    newConfig.id = `config-item-${index}`;
    newConfig.innerHTML = `
        <div class="form-group">
            <label for="question">Question</label>
            <input type="text" class="form-control" name="configs[${index}][question]" required>
        </div>
        <div class="form-group">
            <label for="content">Réponse</label>
            <textarea class="form-control editor" name="configs[${index}][content]" required></textarea>
        </div>

  <button type="button" class="btn btn-danger" onclick="markForDeletion(${index})">
        <i class="fas fa-trash"></i> Supprimer
    </button>

    `;

    configsContainer.appendChild(newConfig);
    initializeSummernote(); // Initialiser Summernote pour la nouvelle instance
}
function markForDeletion(index) {
    const deleteField = document.querySelector(`input[name="configs[${index}][delete]"]`);
    if (deleteField) {
        deleteField.value = '1'; // Marque cette entrée pour suppression
    }
    // Optionnel : cacher visuellement l'élément
    const configItem = document.getElementById(`config-item-${index}`);
    if (configItem) {
        configItem.style.display = 'none'; // Cache l'élément supprimé
    }
}

</script>
@stop