@extends('layouts.app')

@section('content')
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Liste des Réponses</title>
</head>
<body class="container py-4">
    <h1 class="mb-4 text-center">📋 Liste des Réponses</h1>

    <!--<a href="/forms_list" class="btn btn-primary mb-3">Retour à la liste des formulaires</a>-->

    <!-- Barre de recherche -->
    <input type="text" id="searchInput" class="form-control mb-3" placeholder="🔍 Rechercher une réponse...">
    
    <a href="/forms_list" class="btn btn-primary mb-3">Retour à la liste des formulaires</a>
<button class="btn btn-success mb-3" onclick="exportToPDF()">📄 Exporter en PDF</button>


  <table class="table table-hover table-bordered">
    <thead class="table-dark">
        <tr>
            <th class="col-id">ID</th>
            <th class="col-reponses">Réponses</th>
            <th class="col-date">Date de Soumission</th>
            <th class="col-date">Actions</th>
        </tr>
    </thead>
    <tbody id="responsesTable">
    @foreach(App\Models\Reponse::all() as $reponse)
        @php
            $data = json_decode($reponse->reponse, true); // Décode en tableau associatif
        @endphp
        <tr>
            <td class="col-id">{{ $reponse->id }}</td>
            <td class="col-reponses">
                @if(is_array($data) && !empty($data))
                    @foreach($data as $key => $value)
                        <span class="badge bg-primary d-block mb-1">
                            <strong>{{ $key }}:</strong> {{ $value }}
                        </span>
                    @endforeach
                @else
                    <span class="text-danger">Données invalides ou format incorrect</span>
                @endif
            </td>
            <td class="col-date">{{ $reponse->updated_at }}</td>
            <td>
                <!-- Bouton de modification -->
                <a href="{{ route('edit.response', $reponse->id) }}" class="btn btn-warning btn-sm">Modifier</a>
                
                <!-- Bouton de suppression -->
                <form action="{{ route('delete.response', $reponse->id) }}" method="POST" style="display:inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette réponse ?')">Supprimer</button>
                </form>
            </td>
        </tr>
    @endforeach
</tbody>

</table>
  
<!-- Ajout des styles CSS pour augmenter la taille des champs et de la police -->
<style>
    table {
        width: 100%; /* S'assurer que le tableau prend toute la largeur du conteneur */
        font-size: 16px; /* Taille de la police globale du tableau */
    }

    th, td {
        font-size: 20px; /* Taille de la police dans les cellules du tableau */
        padding: 10px; /* Espacement dans les cellules */
    }

    .col-id {
        width: 150px; /* Ajuste la largeur de la colonne ID */
    }

    .col-reponses {
        width: 500px; /* Ajuste la largeur de la colonne Réponses */
    }

    .col-date {
        width: 200px; /* Ajuste la largeur de la colonne Date de Soumission */
    }

    .badge {
        font-size: 16px; /* Taille de la police dans les badges */
    }
</style>


    <script>
        document.getElementById('searchInput').addEventListener('input', function () {
            let query = this.value.toLowerCase();
            let rows = document.querySelectorAll("#responsesTable tr");

            rows.forEach(row => {
                let text = row.innerText.toLowerCase();
                row.style.display = text.includes(query) ? "" : "none";
            });
        });
    </script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>

<script>
    function exportToPDF() {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();

        doc.setFont("helvetica", "bold");
        doc.setFontSize(16);
        doc.text("Liste des Réponses", 14, 15);

        // Récupérer les données du tableau
        let tableData = [];
        let tableHeaders = ["ID", "Réponses", "Date de Soumission"];

        document.querySelectorAll("#responsesTable tr").forEach(row => {
            let columns = row.querySelectorAll("td");
            if (columns.length > 0) {
                let id = columns[0].innerText.trim();
                let reponses = columns[1].innerText.trim().replace(/\n/g, " | "); // Mettre sur une seule ligne
                let date = columns[2].innerText.trim();
                tableData.push([id, reponses, date]);
            }
        });

        // Générer le tableau dans le PDF
        doc.autoTable({
            head: [tableHeaders],
            body: tableData,
            startY: 25,
            theme: "striped",
            styles: {
                fontSize: 10,
                cellPadding: 3,
            },
            columnStyles: {
                0: { cellWidth: 20 }, // ID
                1: { cellWidth: 100 }, // Réponses
                2: { cellWidth: 40 }, // Date
            },
        });

        // Sauvegarder le fichier
        doc.save("liste_reponses.pdf");
    }
</script>

</body>
</html>
@endsection