@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">Utilisateurs</h1>
        <a href="{{ route('dashboard') }}" target="_parent" class="btn btn-primary mb-3">Menu Principal</a>
        <a href="{{ route('utilisateur.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('utilisateur.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">NAME</th>
                <th class="px-4 py-2">EMAIL</th>
                <th class="px-4 py-2">EMAIL VERIFIED AT</th>
                <!--th class="px-4 py-2">PASSWORD</th-->
                <th class="px-4 py-2">PHONE</th>
                <th class="px-4 py-2">TWO FACTOR CODE</th>
                <th class="px-4 py-2">FWO FACTOR EXPIRES AT</th>
                <th class="px-4 py-2">TWO FACTOR ENABLED</th>
                <th class="px-4 py-2">REMEMBER TOKEN</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->name }}</td>
                <td class="px-4 py-2">{{ $record->email }}</td>
                <td class="px-4 py-2">{{ $record->email_verified_at }}</td>
                <!--td class="px-4 py-2">{{ $record->password }}</td-->
                <td class="px-4 py-2">{{ $record->phone }}</td>
                <td class="px-4 py-2">{{ $record->two_factor_code }}</td>
                <td class="px-4 py-2">{{ $record->fwo_factor_expires_at }}</td>
                <td class="px-4 py-2">{{ $record->two_factor_enabled }}</td>
                <td class="px-4 py-2">{{ $record->remember_token }}</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('utilisateur.duplicate', $record->id) }}" method="POST" class="inline-block">
                        @csrf
                        <button type="submit" class="text-purple-500 hover:underline">
                            Dupliquer
                        </button>
                    </form>
                    <a href="{{ route('utilisateur.edit', $record->id) }}" class="text-blue-500 hover:underline">Modifier</a>
                    <form action="{{ route('utilisateur.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('utilisateur.exportExcel') }}?filters=" + filters;
    });
</script>

<script>
    $(document).ready(function() {
        $('#builder').queryBuilder({
            filters: [
                { id: 'id', label: 'ID', type: 'integer' },
                { id: 'name', label: 'NAME', type: 'string' },
                { id: 'email', label: 'EMAIL', type: 'string' },
                { id: 'email_verified_at', label: 'EMAIL VERIFIED AT', type: 'string' },
                /* { id: 'password', label: 'PASSWORD', type: 'string' }, */
                { id: 'phone', label: 'PHONE', type: 'string' },
                { id: 'two_factor_code', label: 'TWO FACTOR CODE', type: 'integer' },
                { id: 'fwo_factor_expires_at', label: 'FWO FACTOR EXPIRES AT', type: 'string' },
                { id: 'two_factor_enabled', label: 'TWO FACTOR ENABLED', type: 'integer' },
                { id: 'remember_token', label: 'REMEMBER TOKEN', type: 'string' },
        });
    });

    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('utilisateur.filter') }}",
            type: "POST",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
            },
            data: { rules: rules },
            dataType: "json",
            success: function(response) {
                updateTable(response.utilisateur);
            },
            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(utilisateur => {
            tbody.append(`
                <tr class="border-b">
                    <td class="px-4 py-2">${utilisateur.id}</td>
                    <td class="px-4 py-2">${utilisateur.name}</td>
                    <td class="px-4 py-2">${utilisateur.email}</td>
                    <td class="px-4 py-2">${utilisateur.email_verified_at}</td>
                    <!--td class="px-4 py-2">${utilisateur.password}</td-->
                    <td class="px-4 py-2">${utilisateur.phone}</td>
                    <td class="px-4 py-2">${utilisateur.two_factor_code}</td>
                    <td class="px-4 py-2">${utilisateur.fwo_factor_expires_at}</td>
                    <td class="px-4 py-2">${utilisateur.two_factor_enabled}</td>
                    <td class="px-4 py-2">${utilisateur.remember_token}</td>

                    <td class="px-4 py-2 space-x-2">
                        <button class="text-green-500 hover:underline" onclick="showModal(${JSON.stringify(utilisateur)})">Afficher</button>
                        <form action="{{ route('utilisateur.duplicate', '') }}/${utilisateur.id}" method="POST" class="inline-block">
                            @csrf
                            <button type="submit" class="text-purple-500 hover:underline">Dupliquer</button>
                        </form>
                        <a href="{{ route('utilisateur.edit', '') }}/${utilisateur.id}" class="text-blue-500 hover:underline">Modifier</a>
                        <form action="{{ route('utilisateur.delete', '') }}/${utilisateur.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(utilisateur) {
        alert(`ID: ${utilisateur.id} \nNAME: ${utilisateur.name}\nEMAIL: ${utilisateur.email}\nEMAIL VERIFIED AT: ${utilisateur.email_verified_at}\nPHONE: ${utilisateur.phone}\nTWO FACTOR CODE: ${utilisateur.two_factor_code}\nFWO FACTOR EXPIRES AT: ${utilisateur.fwo_factor_expires_at}\nTWO FACTOR ENABLED: ${utilisateur.two_factor_enabled}\nREMEMBER TOKEN: ${utilisateur.remember_token}`);
    }
</script>
@endsection

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