@extends('layouts.details')

@section('content')
<div class="container mx-auto px-4">
    <div class="flex justify-between items-center my-4">
        <h1 class="text-2xl font-bold">Documents</h1>
        <a href="{{ route('dashboard') }}" target="_parent" class="btn btn-primary mb-3">Menu Principal</a>
        <a href="{{ route('document.create') }}" class="btn btn-primary mb-3">Ajouter un enregistrement</a>
    </div>

    <!-- Recherche avancée avec QueryBuilder -->
    <div class="mt-4">
        <h2 class="text-xl font-semibold mb-4">Recherche avancée</h2>
        <div id="builder"></div>
        <div class="mt-4">
            <button onclick="applyQuery()" class="btn btn-secondary">Appliquer le Filtre</button>
            <button onclick="resetQuery()" class="btn btn-warning">Réinitialiser</button>
        </div>
    </div>
    
    <!-- Sélecteur de pagination -->
    <div class="mb-4">
        <label for="pagination" class="mr-2">Afficher</label>
        <select id="pagination" class="border px-2 py-1" onchange="changePagination(this.value)">
            <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
            <option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>20</option>
            <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
            <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
        </select>
        <span>enregistrements par page</span>
    </div>
    <!-- Ajouter un bouton d'import/export Excel -->
    <div class="mb-4 flex items-center">
        <form action="{{ route('document.importExcel') }}" method="POST" enctype="multipart/form-data" class="flex items-center">
            @csrf
            <input type="file" name="file" accept=".xlsx, .xls" required class="mr-2" />
            <button type="submit" class="btn btn-primary">Importer Excel</button>
        </form>
        &nbsp; | &nbsp; Exporter Excel &nbsp;
        <button id="exportExcel" class="text-green-600">
            <i class="fas fa-file-excel fa-1.2x"></i>
        </button>
    </div>     
    
    <table class="table-auto w-full bg-white shadow-lg rounded">
        <thead>
            <tr class="bg-gray-200 text-left">
                <th class="px-4 py-2">ID</th>
                <th class="px-4 py-2">TYPE DOCUMENT</th>
                <th class="px-4 py-2">DOSSIER</th>
                <th class="px-4 py-2">DESCRIPTION</th>
                <th class="px-4 py-2">FICHIER</th>
                <th class="px-4 py-2">COMMENTAIRES</th>

                <th class="px-4 py-2">Statut</th>
                <th class="px-4 py-2">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($records as $record)
            <tr class="border-b">
                <td class="px-4 py-2">{{ $record->id }}</td>
                <td class="px-4 py-2">{{ $record->typedoc_id }}</td>
                <td class="px-4 py-2">{{ $record->dossier_id }}</td>
                <td class="px-4 py-2">{{ $record->description }}</td>
                <td class="px-4 py-2">{{ $record->fichier }}</td>
                <td class="px-4 py-2">{{ $record->commentaires }}</td>
				
                <td class="px-4 py-2">{{ $record->enabled_flag ? 'Actif' : 'Inactif' }}</td>
                <td class="px-4 py-2 space-x-2">
                    <button class="text-blue-500 hover:underline" onclick="visualiserDocument('{{ $record->fichier }}')">Visualiser</button>
                    <a href="{{ $record->fichier }}" target="_blank" class="text-green-500 hover:underline" download>Télécharger</a>
                    <button class="text-blue-500 hover:underline" onclick="showModal({{ json_encode($record) }})">Afficher</button>
                    <form action="{{ route('document.duplicate', $record->id) }}" method="POST" class="inline-block">
                        @csrf
                        <button type="submit" class="text-purple-500 hover:underline">
                            Dupliquer
                        </button>
                    </form>
                    <a href="{{ route('document.edit', $record->id) }}" class="text-blue-500 hover:underline">Modifier</a>
                    <form action="{{ route('document.delete', $record->id) }}" method="POST" class="inline-block">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-red-500 hover:underline" onclick="return confirm('Voulez-vous vraiment supprimer cet enregistrement ?')">
                            Supprimer
                        </button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="px-4 py-2 text-center">Aucune donnée disponible.</td>
            </tr>
            @endforelse
        </tbody>
    </table>

    <div class="my-4">
		<!-- Pagination -->
		<div class="flex justify-center items-center space-x-4">
			<p>
				Affichage de {{ $records->firstItem() }} à {{ $records->lastItem() }}
				sur un total de {{ $records->total() }} enregistrements.
			</p>
			<div class="inline-flex space-x-2">
				<!-- Pagination horizontale -->
				{{ $records->appends(request()->except('page'))->links('pagination::custom') }}
			</div>
		</div>
	</div>
    
</div>

<!-- Modale de visualisation -->
<div id="modal" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden flex items-center justify-center">
    <div class="bg-white p-5 rounded-lg shadow-lg max-w-3xl w-full">
        <div class="flex justify-between items-center mb-3">
            <h2 class="text-lg font-semibold">Aperçu du Document</h2>
            <button onclick="fermerModal()" class="text-red-500 font-bold text-xl">&times;</button>
        </div>
        <div id="preview-container" class="h-96 overflow-auto bg-gray-100 flex items-center justify-center">
            <p class="text-gray-500">Chargement...</p>
        </div>
    </div>
</div>

<!-- QueryBuilder et Script -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder/dist/js/query-builder.standalone.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder/dist/css/query-builder.default.min.css">

<script>
    document.getElementById('exportExcel').addEventListener('click', function () {
        let rules = $('#builder').queryBuilder('getRules');

        if (!rules || !rules.rules || rules.rules.length === 0) {
            alert("Aucun filtre appliqué. La table sera exportée entièrement...");
            //return;
        }

        // Transformer les règles en JSON et les encoder pour les passer en URL
        let filters = encodeURIComponent(JSON.stringify(rules));

        // Rediriger vers l'export en ajoutant les filtres
        window.location.href = "{{ route('document.exportExcel') }}?filters=" + filters;
    });
</script>

<script>
    $(document).ready(function() {
        $('#builder').queryBuilder({
            filters: [
                { id: 'id', label: 'ID', type: 'integer' },
                { id: 'typedoc_id', label: 'TYPE DOCUMENT', type: 'integer' },
                { id: 'dossier_id', label: 'DOSSIER', type: 'integer' },
                { id: 'description', label: 'DESCRIPTION', type: 'string' },
                { id: 'fichier', label: 'FICHIER', type: 'string' },
                { id: 'commentaires', label: 'COMMENTAIRES', type: 'string' },

                { id: 'enabled_flag', label: 'STATUT', type: 'boolean', input: 'radio', values: { 1: 'Actif', 0: 'Inactif' } }]
        });
    });

    function applyQuery() {
        let rules = $('#builder').queryBuilder('getRules');
        if (!rules || !rules.rules || rules.rules.length === 0) {
            alert("Veuillez ajouter au moins un filtre.");
            return;
        }

        $.ajax({
            url: "{{ route('document.filter') }}",
            type: "POST",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
            },
            data: { rules: rules },
            dataType: "json",
            success: function(response) {
                updateTable(response.document);
            },
            error: function(xhr) {
                console.error("Erreur AJAX :", xhr.status, xhr.responseText);
            }
        });
    }

    function updateTable(data) {
        let tbody = $("tbody");
        tbody.empty();

        if (data.length === 0) {
            tbody.append('<tr><td colspan="4" class="px-4 py-2 text-center">Aucune donnée trouvée.</td></tr>');
            return;
        }

        data.forEach(document => {
            let statut = document.enabled_flag ? 'Actif' : 'Inactif';
            tbody.append(`
                <tr class="border-b">
                    <td class="px-4 py-2">${document.id}</td>
                    <td class="px-4 py-2">${document.typedoc_id}</td>
                    <td class="px-4 py-2">${document.dossier_id}</td>
                    <td class="px-4 py-2">${document.description}</td>
                    <td class="px-4 py-2">${document.fichier}</td>
                    <td class="px-4 py-2">${document.commentaires}</td>

				
                    <td class="px-4 py-2">${statut}</td>
                    <td class="px-4 py-2 space-x-2">
                        <button class="text-green-500 hover:underline" onclick="showModal(${JSON.stringify(document)})">Afficher</button>
                        <form action="{{ route('document.duplicate', '') }}/${document.id}" method="POST" class="inline-block">
                            @csrf
                            <button type="submit" class="text-purple-500 hover:underline">Dupliquer</button>
                        </form>
                        <a href="{{ route('document.edit', '') }}/${document.id}" class="text-blue-500 hover:underline">Modifier</a>
                        <form action="{{ route('document.delete', '') }}/${document.id}" method="POST" class="inline-block">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-500 hover:underline" onclick="return confirm('Voulez-vous vraiment supprimer cet enregistrement ?')">Supprimer</button>
                        </form>
                    </td>
                </tr>
            `);
        });
    }

    function resetQuery() {
        $('#builder').queryBuilder('reset');
        location.reload();
    }

    function changePagination(value) {
        let url = new URL(window.location.href);
        url.searchParams.set('per_page', value);
        window.location.href = url.toString();
    }
    
    function showModal(document) {
        alert(`ID: ${document.id} \nTYPE DOCUMENT: ${document.typedoc_id}\nDOSSIER: ${document.dossier_id}\nDESCRIPTION: ${document.description}\nFICHIER: ${document.fichier}\nCOMMENTAIRES: ${document.commentaires} \nSTATUT: ${document.enabled_flag ? 'Actif' : 'Inactif'}`);
    }

    function visualiserDocument(url) {
        const modal = document.getElementById('modal');
        const previewContainer = document.getElementById('preview-container');

        let extension = url.split('.').pop().toLowerCase();

        // Générer un aperçu selon le type de fichier
        if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
            previewContainer.innerHTML = `<img src="${url}" class="max-h-96">`;
        } else if (['pdf'].includes(extension)) {
            previewContainer.innerHTML = `<iframe src="${url}" class="w-full h-96"></iframe>`;
        } else {
            previewContainer.innerHTML = `<p class="text-gray-500">Aperçu non disponible. Téléchargez le fichier.</p>`;
        }

        modal.classList.remove('hidden');
    }

    function fermerModal() {
        document.getElementById('modal').classList.add('hidden');
    }
    
</script>
@endsection

@if(session('success'))
    <div class="bg-green-100 text-green-800 p-4 rounded-md mb-4">
        {{ session('success') }}
    </div>
@endif