@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">Types de Dossiers</h1>
        <a href="{{ route('dashboard') }}" target="_parent" class="btn btn-primary mb-3">Menu Principal</a>
        <a href="{{ route('typedossier.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('typedossier.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">CODE</th>
                <th class="px-4 py-2">DESCRIPTION</th>
                <th class="px-4 py-2">TYPE DOSSIER PARENT</th>
                <th class="px-4 py-2">CHEMIN</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->code }}</td>
                <td class="px-4 py-2">{{ $record->description }}</td>
                <td class="px-4 py-2">{{ $record->typedossier_parent_id }}</td>
                <td class="px-4 py-2">{{ $record->chemin }}</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-green-500 hover:underline" onclick="showModal({{ json_encode($record) }})">Afficher</button>
                    <form action="{{ route('typedossier.duplicate', $record->id) }}" method="POST" class="inline-block">
                        @csrf
                        <button type="submit" class="text-purple-500 hover:underline">
                            Dupliquer
                        </button>
                    </form>
                    <a href="{{ route('typedossier.edit', $record->id) }}" class="text-blue-500 hover:underline">Modifier</a>
                    <form action="{{ route('typedossier.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>

<!-- 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('typedossier.exportExcel') }}?filters=" + filters;
    });
</script>

<script>
    $(document).ready(function() {
        $('#builder').queryBuilder({
            filters: [
                { id: 'id', label: 'ID', type: 'integer' },
                { id: 'code', label: 'CODE', type: 'string' },
                { id: 'description', label: 'DESCRIPTION', type: 'string' },
                { id: 'typedossier_parent_id', label: 'TYPE DOSSIER PARENT', type: 'integer' },
                { id: 'chemin', label: 'CHEMIN', 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('typedossier.filter') }}",
            type: "POST",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
            },
            data: { rules: rules },
            dataType: "json",
            success: function(response) {
                updateTable(response.typedossier);
            },
            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(typedossier => {
            let statut = typedossier.enabled_flag ? 'Actif' : 'Inactif';
            tbody.append(`
                <tr class="border-b">
                    <td class="px-4 py-2">${typedossier.id}</td>
                    <td class="px-4 py-2">${typedossier.code}</td>
                    <td class="px-4 py-2">${typedossier.description}</td>
                    <td class="px-4 py-2">${typedossier.typedossier_parent_id}</td>
                    <td class="px-4 py-2">${typedossier.chemin}</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(typedossier)})">Afficher</button>
                        <form action="{{ route('typedossier.duplicate', '') }}/${typedossier.id}" method="POST" class="inline-block">
                            @csrf
                            <button type="submit" class="text-purple-500 hover:underline">Dupliquer</button>
                        </form>
                        <a href="{{ route('typedossier.edit', '') }}/${typedossier.id}" class="text-blue-500 hover:underline">Modifier</a>
                        <form action="{{ route('typedossier.delete', '') }}/${typedossier.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(typedossier) {
        alert(`ID: ${typedossier.id} \nCODE: ${typedossier.code}\nDESCRIPTION: ${typedossier.description}\nTYPE DOSSIER PARENT: ${typedossier.typedossier_parent_id}\nCHEMIN: ${typedossier.chemin} \nSTATUT: ${typedossier.enabled_flag ? 'Actif' : 'Inactif'}`);
    }
</script>
@endsection

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