@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">PleniTable Columns</h1>
        <a href="{{ route('dashboard') }}" target="_parent" class="btn btn-primary mb-3">Menu Principal</a>
        <a href="{{ route('plenitablecolumn.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('plenitablecolumn.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">PLENITABLE ID</th>
                <th class="px-4 py-2">COLUMN NAME</th>
                <th class="px-4 py-2">DESCRIPTION</th>
                <th class="px-4 py-2">COLUMN COMMENT</th>
                <th class="px-4 py-2">ORDINAL POSITION</th>
                <th class="px-4 py-2">COLUMN TYPE</th>
                <th class="px-4 py-2">COLUMN CONDITIONS</th>
                <th class="px-4 py-2">COLUMN KEY</th>
                <th class="px-4 py-2">COLUMN INDEX</th>
                <th class="px-4 py-2">COLUMN RELATED TABLE</th>
                <th class="px-4 py-2">COLUMN RELATED COLUMN</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->plenitable_id }}</td>
                <td class="px-4 py-2">{{ $record->column_name }}</td>
                <td class="px-4 py-2">{{ $record->description }}</td>
                <td class="px-4 py-2">{{ $record->column_comment }}</td>
                <td class="px-4 py-2">{{ $record->ordinal_position }}</td>
                <td class="px-4 py-2">{{ $record->column_type }}</td>
                <td class="px-4 py-2">{{ $record->column_conditions }}</td>
                <td class="px-4 py-2">{{ $record->column_key }}</td>
                <td class="px-4 py-2">{{ $record->column_index }}</td>
                <td class="px-4 py-2">{{ $record->column_rel_tab }}</td>
                <td class="px-4 py-2">{{ $record->column_rel_col }}</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('plenitablecolumn.duplicate', $record->id) }}" method="POST" class="inline-block">
                        @csrf
                        <button type="submit" class="text-purple-500 hover:underline">
                            Dupliquer
                        </button>
                    </form>
                    <a href="{{ route('plenitablecolumn.edit', $record->id) }}" class="text-blue-500 hover:underline">Modifier</a>
                    <form action="{{ route('plenitablecolumn.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('plenitablecolumn.exportExcel') }}?filters=" + filters;
    });
</script>

<script>
    $(document).ready(function() {
        $('#builder').queryBuilder({
            filters: [
                { id: 'id', label: 'ID', type: 'integer' },
                { id: 'plenitable_id', label: 'PLENITABLE ID', type: 'integer' },
                { id: 'column_name', label: 'COLUMN NAME', type: 'string' },
                { id: 'description', label: 'DESCRIPTION', type: 'string' },
                { id: 'column_comment', label: 'COLUMN COMMENT', type: 'string' },
                { id: 'ordinal_position', label: 'ORDINAL POSITION', type: 'integer' },
                { id: 'column_type', label: 'COLUMN TYPE', type: 'string' },
                { id: 'column_conditions', label: 'COLUMN CONDITIONS', type: 'string' },
                { id: 'column_key', label: 'COLUMN KEY', type: 'string' },
                { id: 'column_index', label: 'COLUMN INDEX', type: 'string' },
                { id: 'column_rel_tab', label: 'COLUMN RELATED TABLE', type: 'string' },
                { id: 'column_rel_col', label: 'COLUMN RELATED COLUMN', 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('plenitablecolumn.filter') }}",
            type: "POST",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
            },
            data: { rules: rules },
            dataType: "json",
            success: function(response) {
                updateTable(response.plenitablecolumn);
            },
            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(plenitablecolumn => {
            let statut = plenitablecolumn.enabled_flag ? 'Actif' : 'Inactif';
            tbody.append(`
                <tr class="border-b">
                    <td class="px-4 py-2">${plenitablecolumn.id}</td>
                    <td class="px-4 py-2">${plenitablecolumn.plenitable_id}</td>
                    <td class="px-4 py-2">${plenitablecolumn.column_name}</td>
                    <td class="px-4 py-2">${plenitablecolumn.description}</td>
                    <td class="px-4 py-2">${plenitablecolumn.column_comment}</td>
                    <td class="px-4 py-2">${plenitablecolumn.ordinal_position}</td>
                    <td class="px-4 py-2">${plenitablecolumn.column_type}</td>
                    <td class="px-4 py-2">${plenitablecolumn.column_conditions}</td>
                    <td class="px-4 py-2">${plenitablecolumn.column_key}</td>
                    <td class="px-4 py-2">${plenitablecolumn.column_index}</td>
                    <td class="px-4 py-2">${plenitablecolumn.column_rel_tab}</td>
                    <td class="px-4 py-2">${plenitablecolumn.column_rel_col}</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(plenitablecolumn)})">Afficher</button>
                        <form action="{{ route('plenitablecolumn.duplicate', '') }}/${plenitablecolumn.id}" method="POST" class="inline-block">
                            @csrf
                            <button type="submit" class="text-purple-500 hover:underline">Dupliquer</button>
                        </form>
                        <a href="{{ route('plenitablecolumn.edit', '') }}/${plenitablecolumn.id}" class="text-blue-500 hover:underline">Modifier</a>
                        <form action="{{ route('plenitablecolumn.delete', '') }}/${plenitablecolumn.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(plenitablecolumn) {
        alert(`ID: ${plenitablecolumn.id} \nPLENITABLE ID: ${plenitablecolumn.plenitable_id}\nCOLUMN NAME: ${plenitablecolumn.column_name}\nDESCRIPTION: ${plenitablecolumn.description}\nCOLUMN COMMENT: ${plenitablecolumn.column_comment}\nORDINAL POSITION: ${plenitablecolumn.ordinal_position}\nCOLUMN TYPE: ${plenitablecolumn.column_type}\nCOLUMN CONDITIONS: ${plenitablecolumn.column_conditions}\nCOLUMN KEY: ${plenitablecolumn.column_key}\nCOLUMN INDEX: ${plenitablecolumn.column_index}\nCOLUMN RELATED TABLE: ${plenitablecolumn.column_rel_tab}\nCOLUMN RELATED COLUMN: ${plenitablecolumn.column_rel_col} \nSTATUT: ${plenitablecolumn.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