@extends('layouts.admin')

@section('title', 'CHAPS - ' . ucfirst($modulename))
@section('header', ucfirst($modulename))

@section('content')
<div id="module-crud" x-data="moduleCrud('{{ $modulename }}', '{{ csrf_token() }}')">

    {{-- Chargement --}}
    <div x-show="loading" class="bg-white shadow rounded-lg p-12 text-center">
        <i class="fas fa-spinner fa-spin text-4xl text-indigo-600 mb-4"></i>
        <p class="text-gray-600">Chargement en cours...</p>
    </div>

    {{-- Carte unique --}}
    <div x-show="!loading" class="bg-white shadow rounded-lg">

        {{-- Header --}}
        <div class="border-b border-gray-200 px-6 py-4">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-medium text-gray-900 capitalize" x-text="moduleLabel"></h3>
                    <p class="text-sm text-gray-500 mt-1">Gestion des enregistrements</p>
                </div>
                <div class="flex items-center gap-3">
                    @if($modulename === 'metadatas')
                    <a href="{{ route('admin.metadatas.organizer') }}"
                       class="inline-flex items-center px-3 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-purple-600 hover:bg-purple-700">
                        <i class="fas fa-magic mr-2"></i> Organisateur
                    </a>
                    @endif
                    @if($modulename === 'menus')
                    <a href="{{ route('admin.menus.index') }}"
                       class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-th mr-2"></i> Vue Tabulaire
                    </a>
                    @endif
                    @if($modulename === 'ctas')
                    <a href="{{ route('admin.ctas.index') }}"
                       class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-th mr-2"></i> Vue Tabulaire
                    </a>
                    @endif
                    @if($modulename === 'blocs')
                    <a href="{{ route('admin.blocs.index') }}"
                       class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-th mr-2"></i> Vue Matricielle
                    </a>
                    @endif
                    <button @click="openPanel('create')"
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
                        <i class="fas fa-plus mr-2"></i> Creer
                    </button>
                </div>
            </div>
        </div>

        {{-- Filtres + Recherche --}}
        <div class="border-b border-gray-200 px-6 py-3 bg-gray-50">
            <div class="flex items-center justify-between gap-4">
                {{-- Filtres boutons style role-selector --}}
                <div class="flex items-center gap-3 overflow-x-auto">
                    <span class="text-sm font-medium text-gray-700 whitespace-nowrap">
                        <i class="fas fa-filter mr-1"></i> Filtre :
                    </span>
                    <div class="flex rounded-lg shadow-sm border border-gray-300 overflow-hidden">
                        <template x-for="(filterOption, index) in filterOptions" :key="index">
                            <button @click="activeFilter = filterOption.value; loadRecords();"
                                    :class="activeFilter === filterOption.value
                                        ? 'bg-indigo-600 text-white'
                                        : 'bg-white text-gray-700 hover:bg-gray-50'"
                                    class="px-3 py-1.5 text-sm font-medium border-r border-gray-300 last:border-r-0 transition-colors whitespace-nowrap"
                                    x-text="filterOption.label">
                            </button>
                        </template>
                    </div>
                </div>
                {{-- Recherche --}}
                <div class="flex items-center gap-2">
                    <input type="text"
                           x-model="search"
                           @input.debounce.500ms="loadRecords()"
                           placeholder="Rechercher..."
                           class="w-64 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
                    <button @click="loadRecords()"
                            class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                </div>
            </div>
        </div>

        {{-- Table --}}
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="sticky left-0 z-10 bg-gray-50 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-r border-gray-200" style="min-width: 120px; width: 120px;">
                            Actions
                        </th>
                        <template x-for="(field, index) in visibleFields" :key="field.name">
                            <th scope="col"
                                :class="{
                                    'sticky z-10 bg-gray-50 border-r border-gray-200': index < fixedColumnsCount,
                                    'bg-gray-50': index >= fixedColumnsCount
                                }"
                                :style="(index < fixedColumnsCount ? `left: ${getColumnLeftPosition(index)}px; ` : '') + 'min-width: 140px;'"
                                class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap"
                                x-text="field.displayName || field.label || field.name"></th>
                        </template>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <template x-for="record in records" :key="record.uuid || record.id">
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="sticky left-0 z-10 bg-white px-4 py-3 whitespace-nowrap text-sm border-r border-gray-200" style="min-width: 120px; width: 120px;">
                                <div class="flex gap-2 justify-center">
                                    <button @click="openPanel('detail', record)"
                                            class="text-gray-500 hover:text-gray-900 p-1" title="Voir">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button @click="openPanel('edit', record)"
                                            class="text-indigo-500 hover:text-indigo-900 p-1" title="Modifier">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button @click="deleteRecord(record)"
                                            class="text-red-500 hover:text-red-900 p-1" title="Supprimer">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                            <template x-for="(field, index) in visibleFields" :key="field.name">
                                <td :class="{
                                        'sticky z-10 bg-white border-r border-gray-200': index < fixedColumnsCount
                                    }"
                                    :style="(index < fixedColumnsCount ? `left: ${getColumnLeftPosition(index)}px; ` : '') + 'min-width: 140px;'"
                                    class="px-4 py-3 text-sm text-gray-900 whitespace-nowrap cursor-pointer"
                                    @click="openPanel('detail', record)">
                                    <template x-if="field.name === 'is_active'">
                                        <span class="inline-flex items-center">
                                            <span :class="record[field.name] == 1 ? 'bg-green-500' : 'bg-gray-300'"
                                                  class="h-2.5 w-2.5 rounded-full mr-1.5"></span>
                                            <span x-text="record[field.name] == 1 ? 'Actif' : 'Inactif'" class="text-xs"></span>
                                        </span>
                                    </template>
                                    <template x-if="field.name !== 'is_active'">
                                        <span x-text="formatValue(record[field.name], field)"></span>
                                    </template>
                                </td>
                            </template>
                        </tr>
                    </template>

                    {{-- Empty state --}}
                    <tr x-show="records.length === 0">
                        <td :colspan="visibleFields.length + 1" class="px-6 py-12 text-center">
                            <i class="fas fa-inbox text-4xl text-gray-300 mb-4"></i>
                            <p class="text-gray-500">Aucun enregistrement trouve</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        {{-- Footer stats + pagination --}}
        <div class="border-t border-gray-200 px-6 py-3 bg-gray-50">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-6 text-sm text-gray-600">
                    <span>
                        <i class="fas fa-database mr-1"></i>
                        <strong x-text="pagination.total"></strong> enregistrement(s)
                    </span>
                    <span class="text-xs text-gray-400">
                        Page <span x-text="pagination.page"></span> / <span x-text="pagination.totalPages || 1"></span>
                    </span>
                </div>
                <div class="flex gap-2">
                    <button @click="prevPage()"
                            :disabled="pagination.page === 1"
                            class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                        <i class="fas fa-chevron-left mr-1"></i> Precedent
                    </button>
                    <button @click="nextPage()"
                            :disabled="pagination.page >= pagination.totalPages"
                            class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                        Suivant <i class="fas fa-chevron-right ml-1"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Panneaux lateraux superposables --}}
    <template x-for="(panel, index) in panels" :key="panel.id">
        <div x-show="panel.visible"
             x-transition:enter="transform transition ease-in-out duration-300"
             x-transition:enter-start="translate-x-full"
             x-transition:enter-end="translate-x-0"
             x-transition:leave="transform transition ease-in-out duration-300"
             x-transition:leave-start="translate-x-0"
             x-transition:leave-end="translate-x-full"
             class="fixed inset-y-0 right-0 flex max-w-full"
             :style="`z-index: ${1000 + index}; margin-right: ${index * 50}px;`"
             @click.self="closePanel(panel.id)">

            {{-- Overlay --}}
            <div x-show="index === 0"
                 class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
                 @click="closePanel(panel.id)"></div>

            {{-- Panel --}}
            <div class="relative w-screen max-w-2xl">
                <div class="h-full flex flex-col bg-white shadow-xl">

                    {{-- Header panel --}}
                    <div class="px-6 py-4 bg-indigo-600 text-white">
                        <div class="flex items-center justify-between">
                            <h2 class="text-lg font-medium" x-text="panel.title"></h2>
                            <button @click="closePanel(panel.id)" class="text-white hover:text-gray-200">
                                <i class="fas fa-times text-xl"></i>
                            </button>
                        </div>
                    </div>

                    {{-- Content --}}
                    <div class="flex-1 overflow-y-auto">
                        {{-- Panel Detail --}}
                        <template x-if="panel.type === 'detail'">
                            <div>
                                {{-- Actions bar --}}
                                <div class="px-6 py-3 bg-gray-50 border-b border-gray-200 flex justify-end gap-2">
                                    <button @click="openPanel('edit', panel.data)"
                                            class="inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                                        <i class="fas fa-edit mr-1.5"></i> Modifier
                                    </button>
                                    <button @click="deleteRecord(panel.data); closePanel(panel.id)"
                                            class="inline-flex items-center px-3 py-1.5 border border-red-300 rounded-md text-sm font-medium text-red-700 bg-white hover:bg-red-50">
                                        <i class="fas fa-trash mr-1.5"></i> Supprimer
                                    </button>
                                </div>

                                {{-- Header fields --}}
                                <template x-if="getDetailHeaderFields().length > 0">
                                    <div class="px-6 py-4 bg-gradient-to-r from-indigo-50 to-purple-50 border-b border-indigo-200">
                                        <div class="grid grid-cols-2 gap-4">
                                            <template x-for="field in getDetailHeaderFields()" :key="field.name">
                                                <div>
                                                    <dt class="text-xs font-medium text-indigo-600 uppercase tracking-wide" x-text="field.displayName || field.label || field.name"></dt>
                                                    <dd class="mt-1 text-lg font-semibold text-gray-900" x-text="formatValue(panel.data[field.name], field) || '-'"></dd>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </template>

                                {{-- Tous les champs en grille --}}
                                <div class="px-6 py-4">
                                    {{-- Blocs structures (si metadatas definies) --}}
                                    <template x-if="getDetailBlocs().length > 0">
                                        <div class="space-y-6">
                                            <template x-for="bloc in getDetailBlocs()" :key="bloc.id">
                                                <div class="border border-gray-200 rounded-lg overflow-hidden">
                                                    <div class="bg-gray-50 px-4 py-2.5 border-b border-gray-200">
                                                        <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
                                                            <i class="fas fa-folder-open text-indigo-500 mr-2"></i>
                                                            <span x-text="bloc.name"></span>
                                                        </h3>
                                                    </div>
                                                    <div class="p-4">
                                                        <dl class="grid grid-cols-2 gap-x-6 gap-y-4">
                                                            <template x-for="field in getDetailBlocFields(bloc.id)" :key="field.name">
                                                                <div>
                                                                    <dt class="text-xs font-medium text-gray-500 uppercase tracking-wide" x-text="field.displayName || field.label || field.name"></dt>
                                                                    <dd class="mt-1 text-sm text-gray-900">
                                                                        <template x-if="isBooleanField(field.name)">
                                                                            <span class="inline-flex items-center">
                                                                                <span :class="panel.data[field.name] == 1 ? 'bg-green-500' : 'bg-gray-300'" class="h-2.5 w-2.5 rounded-full mr-1.5"></span>
                                                                                <span x-text="panel.data[field.name] == 1 ? 'Actif' : 'Inactif'"></span>
                                                                            </span>
                                                                        </template>
                                                                        <template x-if="!isBooleanField(field.name)">
                                                                            <span x-text="formatValue(panel.data[field.name], field) || '-'"></span>
                                                                        </template>
                                                                    </dd>
                                                                </div>
                                                            </template>
                                                        </dl>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </template>

                                    {{-- Fallback : grille simple (modules CHAPS internes sans blocs) --}}
                                    <template x-if="getDetailBlocs().length === 0">
                                        <dl class="grid grid-cols-2 gap-x-6 gap-y-4">
                                            <template x-for="field in getAllDetailFields()" :key="field.name">
                                                <div class="py-2 border-b border-gray-100">
                                                    <dt class="text-xs font-medium text-gray-500 uppercase tracking-wide" x-text="field.displayName || field.label || field.name"></dt>
                                                    <dd class="mt-1 text-sm text-gray-900">
                                                        <template x-if="isBooleanField(field.name)">
                                                            <span class="inline-flex items-center">
                                                                <span :class="panel.data[field.name] == 1 ? 'bg-green-500' : 'bg-gray-300'" class="h-2.5 w-2.5 rounded-full mr-1.5"></span>
                                                                <span x-text="panel.data[field.name] == 1 ? 'Actif' : 'Inactif'"></span>
                                                            </span>
                                                        </template>
                                                        <template x-if="!isBooleanField(field.name)">
                                                            <span x-text="formatValue(panel.data[field.name], field) || '-'"></span>
                                                        </template>
                                                    </dd>
                                                </div>
                                            </template>
                                        </dl>
                                    </template>
                                </div>
                            </div>
                        </template>

                        {{-- Panel Creation --}}
                        <template x-if="panel.type === 'create'">
                            <form @submit.prevent="saveRecord(panel)">
                                <div class="px-6 py-4 space-y-5">
                                    <template x-for="bloc in getCreateBlocs()" :key="bloc.id">
                                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                                            <div class="bg-gray-50 px-4 py-2.5 border-b border-gray-200">
                                                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
                                                    <i class="fas fa-folder-open text-indigo-500 mr-2"></i>
                                                    <span x-text="bloc.name"></span>
                                                </h3>
                                            </div>
                                            <div class="p-4 space-y-4">
                                                <template x-for="(field, fieldIndex) in getCreateBlocFields(bloc.id)" :key="`create-${bloc.id}-${fieldIndex}`">
                                                    <div>
                                                        <label class="block text-xs font-medium text-gray-700 uppercase tracking-wide mb-1.5" x-text="field.displayName || field.label || field.name"></label>
                                                        {{-- Toggle pour boolean --}}
                                                        <template x-if="isBooleanField(field.name)">
                                                            <label class="relative inline-flex items-center cursor-pointer">
                                                                <input type="checkbox"
                                                                       :checked="panel.formData[field.name] == 1"
                                                                       @change="panel.formData[field.name] = $event.target.checked ? 1 : 0"
                                                                       class="sr-only peer">
                                                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
                                                                <span class="ml-3 text-sm text-gray-700" x-text="panel.formData[field.name] == 1 ? 'Actif' : 'Inactif'"></span>
                                                            </label>
                                                        </template>
                                                        {{-- Autocomplete pour FK --}}
                                                        <template x-if="!isBooleanField(field.name) && isForeignKeyField(field.name)">
                                                            <div class="relative" @click.outside="panel.fkOpen[field.name] = false">
                                                                <div class="flex">
                                                                    <input type="text"
                                                                           :value="panel.fkLabels[field.name] || ''"
                                                                           @input="panel.fkLabels[field.name] = $event.target.value; searchFk(panel, field.name, $event.target.value)"
                                                                           @focus="if (panel.fkLabels[field.name]) searchFk(panel, field.name, panel.fkLabels[field.name])"
                                                                           placeholder="Rechercher..."
                                                                           class="block w-full shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                                                                           :class="panel.formData[field.name] ? 'rounded-l-md border-gray-300' : 'rounded-md border-gray-300'">
                                                                    <button type="button"
                                                                            x-show="panel.formData[field.name]"
                                                                            @click="clearFkValue(panel, field.name)"
                                                                            class="px-2 border border-l-0 border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100 text-gray-400 hover:text-red-500">
                                                                        <i class="fas fa-times text-xs"></i>
                                                                    </button>
                                                                </div>
                                                                <div x-show="panel.fkOpen[field.name] && (panel.fkResults[field.name] || []).length > 0"
                                                                     class="absolute z-50 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5">
                                                                    <template x-for="result in (panel.fkResults[field.name] || [])" :key="result.id || result.uuid">
                                                                        <div @mousedown.prevent="selectFkValue(panel, field.name, result)"
                                                                             class="cursor-pointer px-3 py-2 text-sm text-gray-900 hover:bg-indigo-600 hover:text-white flex items-center justify-between">
                                                                            <span x-text="result.name || result.label || result.id"></span>
                                                                            <span class="text-xs opacity-50" x-text="'#' + result.id"></span>
                                                                        </div>
                                                                    </template>
                                                                </div>
                                                                <p x-show="panel.formData[field.name]" class="mt-1 text-xs text-gray-400">
                                                                    ID: <span x-text="panel.formData[field.name]"></span>
                                                                </p>
                                                            </div>
                                                        </template>
                                                        {{-- Select pour picklist --}}
                                                        <template x-if="!isBooleanField(field.name) && !isForeignKeyField(field.name) && field.type === 'picklist' && field.options">
                                                            <select x-model="panel.formData[field.name]"
                                                                    :required="field.mandatory"
                                                                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                                                <option value="">-- Selectionner --</option>
                                                                <template x-for="opt in field.options" :key="opt.value || opt">
                                                                    <option :value="opt.value || opt" x-text="opt.label || opt.name || opt"></option>
                                                                </template>
                                                            </select>
                                                        </template>
                                                        {{-- Input standard --}}
                                                        <template x-if="!isBooleanField(field.name) && !isForeignKeyField(field.name) && !(field.type === 'picklist' && field.options)">
                                                            <input x-model="panel.formData[field.name]"
                                                                   :type="getInputType(field)"
                                                                   :required="field.mandatory"
                                                                   class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                                        </template>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                                <div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-end gap-3 sticky bottom-0">
                                    <button type="button" @click="closePanel(panel.id)"
                                            class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        Annuler
                                    </button>
                                    <button type="submit"
                                            class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
                                        <i class="fas fa-save mr-1.5"></i> Creer
                                    </button>
                                </div>
                            </form>
                        </template>

                        {{-- Panel Edition --}}
                        <template x-if="panel.type === 'edit'">
                            <form @submit.prevent="updateRecord(panel)">
                                <div class="px-6 py-4 space-y-5">
                                    <template x-for="bloc in getUpdateBlocs()" :key="bloc.id">
                                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                                            <div class="bg-gray-50 px-4 py-2.5 border-b border-gray-200">
                                                <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wider flex items-center">
                                                    <i class="fas fa-folder-open text-indigo-500 mr-2"></i>
                                                    <span x-text="bloc.name"></span>
                                                </h3>
                                            </div>
                                            <div class="p-4 space-y-4">
                                                <template x-for="(field, fieldIndex) in getUpdateBlocFields(bloc.id)" :key="`edit-${bloc.id}-${fieldIndex}`">
                                                    <div>
                                                        <label class="block text-xs font-medium text-gray-700 uppercase tracking-wide mb-1.5" x-text="field.displayName || field.label || field.name"></label>
                                                        {{-- Toggle pour boolean --}}
                                                        <template x-if="isBooleanField(field.name)">
                                                            <label class="relative inline-flex items-center cursor-pointer">
                                                                <input type="checkbox"
                                                                       :checked="panel.formData[field.name] == 1"
                                                                       @change="panel.formData[field.name] = $event.target.checked ? 1 : 0"
                                                                       class="sr-only peer">
                                                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
                                                                <span class="ml-3 text-sm text-gray-700" x-text="panel.formData[field.name] == 1 ? 'Actif' : 'Inactif'"></span>
                                                            </label>
                                                        </template>
                                                        {{-- Autocomplete pour FK --}}
                                                        <template x-if="!isBooleanField(field.name) && isForeignKeyField(field.name)">
                                                            <div class="relative" @click.outside="panel.fkOpen[field.name] = false">
                                                                <div class="flex">
                                                                    <input type="text"
                                                                           :value="panel.fkLabels[field.name] || ''"
                                                                           @input="panel.fkLabels[field.name] = $event.target.value; searchFk(panel, field.name, $event.target.value)"
                                                                           @focus="if (panel.fkLabels[field.name]) searchFk(panel, field.name, panel.fkLabels[field.name])"
                                                                           placeholder="Rechercher..."
                                                                           class="block w-full shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                                                                           :class="panel.formData[field.name] ? 'rounded-l-md border-gray-300' : 'rounded-md border-gray-300'">
                                                                    <button type="button"
                                                                            x-show="panel.formData[field.name]"
                                                                            @click="clearFkValue(panel, field.name)"
                                                                            class="px-2 border border-l-0 border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100 text-gray-400 hover:text-red-500">
                                                                        <i class="fas fa-times text-xs"></i>
                                                                    </button>
                                                                </div>
                                                                <div x-show="panel.fkOpen[field.name] && (panel.fkResults[field.name] || []).length > 0"
                                                                     class="absolute z-50 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5">
                                                                    <template x-for="result in (panel.fkResults[field.name] || [])" :key="result.id || result.uuid">
                                                                        <div @mousedown.prevent="selectFkValue(panel, field.name, result)"
                                                                             class="cursor-pointer px-3 py-2 text-sm text-gray-900 hover:bg-indigo-600 hover:text-white flex items-center justify-between">
                                                                            <span x-text="result.name || result.label || result.id"></span>
                                                                            <span class="text-xs opacity-50" x-text="'#' + result.id"></span>
                                                                        </div>
                                                                    </template>
                                                                </div>
                                                                <p x-show="panel.formData[field.name]" class="mt-1 text-xs text-gray-400">
                                                                    ID: <span x-text="panel.formData[field.name]"></span>
                                                                </p>
                                                            </div>
                                                        </template>
                                                        {{-- Select pour picklist --}}
                                                        <template x-if="!isBooleanField(field.name) && !isForeignKeyField(field.name) && field.type === 'picklist' && field.options">
                                                            <select x-model="panel.formData[field.name]"
                                                                    :required="field.mandatory"
                                                                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                                                <option value="">-- Selectionner --</option>
                                                                <template x-for="opt in field.options" :key="opt.value || opt">
                                                                    <option :value="opt.value || opt" x-text="opt.label || opt.name || opt"></option>
                                                                </template>
                                                            </select>
                                                        </template>
                                                        {{-- Input standard --}}
                                                        <template x-if="!isBooleanField(field.name) && !isForeignKeyField(field.name) && !(field.type === 'picklist' && field.options)">
                                                            <input x-model="panel.formData[field.name]"
                                                                   :type="getInputType(field)"
                                                                   :required="field.mandatory"
                                                                   class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                                        </template>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                                <div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-end gap-3 sticky bottom-0">
                                    <button type="button" @click="closePanel(panel.id)"
                                            class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        Annuler
                                    </button>
                                    <button type="submit"
                                            class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
                                        <i class="fas fa-save mr-1.5"></i> Enregistrer
                                    </button>
                                </div>
                            </form>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </template>

</div>

@include('partials.toast')

@push('scripts')
<script>
const FIXED_COLUMNS_CONFIG = {
    'menus': 1,
    'metadatas': 0,
    'modules': 0,
    'domaines': 0,
    'default': 0
};

const FILTER_CONFIG = {
    'metadatas': { field: 'object', dynamic: true },
    'metadatas_generated': { field: 'object', dynamic: true },
    'domaines': { field: 'status', dynamic: true },
    'modules': { field: 'status', dynamic: true },
    'default': { preferredFields: ['status', 'is_active'], dynamic: true }
};

const STATIC_FILTER_OPTIONS = {
    'is_active': [
        { label: 'Tous', value: null },
        { label: 'Actifs', value: 1 },
        { label: 'Inactifs', value: 0 }
    ],
    'is_deleted': [
        { label: 'Tous', value: null },
        { label: 'Actifs', value: 0 },
        { label: 'Supprimes', value: 1 }
    ]
};

function moduleCrud(moduleName, csrfToken) {
    return {
        moduleName: moduleName,
        moduleLabel: moduleName,
        csrfToken: csrfToken,
        records: [],
        metadata: null,
        visibleFields: [],
        editableFields: [],
        search: '',
        loading: true,
        pagination: { page: 1, size: 50, total: 0, totalPages: 0 },
        panels: [],
        panelIdCounter: 0,
        filterOptions: [],
        activeFilter: null,
        filterField: null,
        fixedColumnsCount: 0,

        async init() {
            try {
                await this.loadMetadata();
                await this.setupFilters();
                await this.loadRecords();
                const urlParams = new URLSearchParams(window.location.search);
                if (urlParams.get('action') === 'create') {
                    this.openPanel('create');
                    window.history.replaceState({}, '', window.location.pathname);
                }
            } catch (error) {
                console.error('Erreur initialisation:', error);
                this.showError('Erreur lors du chargement du module');
            } finally {
                this.loading = false;
            }
        },

        async setupFilters() {
            const config = FILTER_CONFIG[this.moduleName] || FILTER_CONFIG['default'];
            if (config.field) {
                this.filterField = config.field;
            } else if (config.preferredFields) {
                const listeFields = this.metadata.ListeView?.list?.[0]?.fields || [];
                this.filterField = config.preferredFields.find(field =>
                    listeFields.some(f => f.name === field)
                ) || 'is_active';
            }
            if (config.dynamic) {
                await this.loadDynamicFilters();
            } else if (STATIC_FILTER_OPTIONS[this.filterField]) {
                this.filterOptions = STATIC_FILTER_OPTIONS[this.filterField];
            } else {
                this.filterOptions = [{ label: 'Tous', value: null }];
            }
            this.activeFilter = this.filterOptions[0]?.value || null;
        },

        async loadDynamicFilters() {
            try {
                const response = await fetch(`/api/admin/${this.moduleName}/distinct/${this.filterField}`, {
                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrfToken }
                });
                if (response.ok) {
                    const data = await response.json();
                    const uniqueValues = data.values || [];
                    this.filterOptions = [
                        { label: 'Tous', value: null },
                        ...uniqueValues.map(val => ({ label: this.formatFilterLabel(val), value: val }))
                    ];
                } else {
                    this.filterOptions = [{ label: 'Tous', value: null }];
                }
            } catch (error) {
                console.error('Erreur chargement filtres:', error);
                this.filterOptions = [{ label: 'Tous', value: null }];
            }
        },

        formatFilterLabel(value) {
            if (typeof value === 'string') return value.charAt(0).toUpperCase() + value.slice(1);
            if (typeof value === 'number') {
                if (this.filterField === 'is_active') return value === 1 ? 'Actif' : 'Inactif';
                return value.toString();
            }
            return String(value);
        },

        async loadMetadata() {
            const response = await fetch(`/api/metadata/${this.moduleName}`, {
                method: 'GET',
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrfToken }
            });
            if (!response.ok) {
                const errorText = await response.text();
                throw new Error(`Erreur chargement metadonnees (${response.status}): ${errorText}`);
            }
            const data = await response.json();
            const metadataContent = data.data || data;
            if (!metadataContent.ListeView || !metadataContent.ListeView.list || !metadataContent.ListeView.list[0]) {
                throw new Error('Structure de metadonnees invalide - ListeView manquante');
            }
            this.metadata = metadataContent;
            this.moduleLabel = this.moduleName;
            const listeViewDefault = metadataContent.ListeView.list[0];
            this.visibleFields = listeViewDefault.fields.filter(field => {
                return field.visible === true || field.visible === undefined || field.visible === 1 || field.visible === "1";
            });
            this.fixedColumnsCount = this.getFixedColumnsCount();
            const updateFields = metadataContent.UpdateView?.fields || metadataContent.CreateView?.fields || [];
            this.editableFields = updateFields.filter(f =>
                !['id', 'uuid', 'created_at', 'updated_at', 'is_deleted'].includes(f.name)
            );
        },

        async loadRecords() {
            this.loading = true;
            try {
                const params = new URLSearchParams({ page: this.pagination.page, size: this.pagination.size, search: this.search });
                if (this.activeFilter !== null && this.filterField) {
                    params.append(this.filterField, this.activeFilter);
                }
                if (this.moduleName === 'metadatas') {
                    params.append('include_deleted', 'true');
                }
                const response = await fetch(`/api/admin/${this.moduleName}?${params}`, {
                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrfToken }
                });
                if (!response.ok) {
                    throw new Error(`Erreur chargement donnees (${response.status})`);
                }
                const data = await response.json();
                this.records = data.data || data.records || [];
                this.pagination.total = data.totalRecords || data.total || this.records.length;
                this.pagination.totalPages = Math.ceil(this.pagination.total / this.pagination.size);
            } catch (error) {
                console.error('Erreur chargement records:', error);
                this.showError('Erreur lors du chargement des donnees');
            } finally {
                this.loading = false;
            }
        },

        openPanel(type, data = null) {
            const panelId = ++this.panelIdCounter;
            const titles = { 'detail': 'Details', 'create': 'Creer un enregistrement', 'edit': 'Modifier l\'enregistrement' };
            const formData = {};
            const fkLabels = {};
            const fkResults = {};
            const fkOpen = {};
            if (type === 'edit' && data) {
                if (this.metadata?.UpdateView?.fields && Array.isArray(this.metadata.UpdateView.fields)) {
                    this.metadata.UpdateView.fields.forEach(field => {
                        if (this.isForeignKeyField(field.name)) {
                            const val = data[field.name];
                            formData[field.name] = (typeof val === 'object' && val !== null) ? val.id : val;
                            fkLabels[field.name] = (typeof val === 'object' && val !== null) ? (val.name || val.label || String(val.id || '')) : '';
                        } else {
                            formData[field.name] = data[field.name];
                        }
                        fkResults[field.name] = [];
                        fkOpen[field.name] = false;
                    });
                }
            } else if (type === 'create') {
                if (this.metadata?.CreateView?.fields && Array.isArray(this.metadata.CreateView.fields)) {
                    this.metadata.CreateView.fields.forEach(field => {
                        if (this.isForeignKeyField(field.name)) {
                            formData[field.name] = '';
                            fkLabels[field.name] = '';
                        } else {
                            formData[field.name] = this.isBooleanField(field.name) ? 1 : (field.default || '');
                        }
                        fkResults[field.name] = [];
                        fkOpen[field.name] = false;
                    });
                }
            }
            this.panels.push({ id: panelId, type: type, title: titles[type], data: data, formData: formData, fkLabels: fkLabels, fkResults: fkResults, fkOpen: fkOpen, visible: true });
        },

        closePanel(panelId) {
            const index = this.panels.findIndex(p => p.id === panelId);
            if (index !== -1) {
                this.panels[index].visible = false;
                setTimeout(() => { this.panels.splice(index, 1); }, 300);
            }
        },

        cleanFormData(formData) {
            const cleaned = {};
            for (const [key, value] of Object.entries(formData)) {
                if (this.isForeignKeyField(key) && (value === '' || value === null || value === undefined)) {
                    cleaned[key] = null;
                } else {
                    cleaned[key] = value;
                }
            }
            return cleaned;
        },

        async extractError(response) {
            try {
                const data = await response.json();
                if (data.error) return typeof data.error === 'object' ? JSON.stringify(data.error) : data.error;
                if (data.message) return data.message;
                return `Erreur serveur (${response.status})`;
            } catch {
                return `Erreur serveur (${response.status})`;
            }
        },

        async saveRecord(panel) {
            try {
                const cleanData = this.cleanFormData(panel.formData);
                const response = await fetch(`/api/admin/${this.moduleName}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': this.csrfToken },
                    body: JSON.stringify({ element: cleanData })
                });
                const data = await response.json().catch(() => ({}));
                if (!response.ok || data.success === false) {
                    const errorMsg = data.error || data.message || `Erreur serveur (${response.status})`;
                    throw new Error(typeof errorMsg === 'object' ? JSON.stringify(errorMsg) : errorMsg);
                }
                this.showSuccess('Enregistrement cree avec succes');
                this.closePanel(panel.id);
                await this.loadRecords();
            } catch (error) {
                console.error('Erreur creation:', error);
                this.showError(error.message || 'Erreur lors de la creation');
            }
        },

        async updateRecord(panel) {
            const identifier = panel.data.uuid || panel.data.id;
            try {
                const cleanData = this.cleanFormData(panel.formData);
                const response = await fetch(`/api/admin/${this.moduleName}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': this.csrfToken },
                    body: JSON.stringify({ uuid: identifier, element: cleanData })
                });
                const data = await response.json().catch(() => ({}));
                if (!response.ok || data.success === false) {
                    const errorMsg = data.error || data.message || `Erreur serveur (${response.status})`;
                    throw new Error(typeof errorMsg === 'object' ? JSON.stringify(errorMsg) : errorMsg);
                }
                this.showSuccess('Enregistrement modifie avec succes');
                this.closePanel(panel.id);
                await this.loadRecords();
            } catch (error) {
                console.error('Erreur modification:', error);
                this.showError(error.message || 'Erreur lors de la modification');
            }
        },

        async deleteRecord(record) {
            const identifier = record.uuid || record.id;
            if (!confirm(`Supprimer cet enregistrement ${record.name || identifier} ?`)) return;
            try {
                const response = await fetch(`/api/admin/${this.moduleName}/${identifier}`, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': this.csrfToken }
                });
                const data = await response.json().catch(() => ({}));
                if (!response.ok || data.success === false) {
                    const errorMsg = data.error || data.message || `Erreur serveur (${response.status})`;
                    throw new Error(typeof errorMsg === 'object' ? JSON.stringify(errorMsg) : errorMsg);
                }
                this.showSuccess('Enregistrement supprime avec succes');
                await this.loadRecords();
            } catch (error) {
                console.error('Erreur suppression:', error);
                this.showError(error.message || 'Erreur lors de la suppression');
            }
        },

        getInputType(field) {
            if (field.type === 'integer' || field.type === 'decimal') return 'number';
            if (field.type === 'date') return 'date';
            if (field.type === 'datetime') return 'datetime-local';
            if (field.type === 'email') return 'email';
            if (field.type === 'url') return 'url';
            return 'text';
        },

        formatValue(value, field) {
            if (value === null || value === undefined) return '-';
            if (typeof value === 'object' && value !== null) return value.name || value.label || value.id || '-';
            if (typeof value === 'boolean') return value ? 'Oui' : 'Non';
            if (typeof value === 'string' && value.length > 50) return value.substring(0, 50) + '...';
            return value;
        },

        prevPage() { if (this.pagination.page > 1) { this.pagination.page--; this.loadRecords(); } },
        nextPage() { if (this.pagination.page < this.pagination.totalPages) { this.pagination.page++; this.loadRecords(); } },

        showError(message) { showToast(message, 'error'); },
        showSuccess(message) { showToast(message, 'success'); },

        getDetailHeaderFields() {
            if (!this.metadata?.DetailView?.headers) return [];
            return this.metadata.DetailView.headers;
        },

        getDetailBlocs() {
            if (!this.metadata?.DetailView?.fields || !Array.isArray(this.metadata.DetailView.fields)) return [];
            const blocs = [];
            this.metadata.DetailView.fields.forEach((blocObj, index) => {
                const blocName = Object.keys(blocObj)[0];
                blocs.push({ id: index, name: blocName });
            });
            return blocs;
        },

        getDetailBlocFields(blocId) {
            if (!this.metadata?.DetailView?.fields || !Array.isArray(this.metadata.DetailView.fields)) return [];
            const blocObj = this.metadata.DetailView.fields[blocId];
            if (!blocObj) return [];
            const blocName = Object.keys(blocObj)[0];
            return blocObj[blocName] || [];
        },

        getDetailFieldsWithoutBloc() { return []; },

        getUpdateBlocs() {
            if (!this.metadata?.UpdateView?.fields || !Array.isArray(this.metadata.UpdateView.fields)) return [];
            return [{ id: 0, name: 'Informations' }];
        },
        getUpdateBlocFields(blocId) {
            if (!this.metadata?.UpdateView?.fields || !Array.isArray(this.metadata.UpdateView.fields)) return [];
            return this.metadata.UpdateView.fields;
        },
        getCreateBlocs() {
            if (!this.metadata?.CreateView?.fields || !Array.isArray(this.metadata.CreateView.fields)) return [];
            return [{ id: 0, name: 'Informations' }];
        },
        getCreateBlocFields(blocId) {
            if (!this.metadata?.CreateView?.fields || !Array.isArray(this.metadata.CreateView.fields)) return [];
            return this.metadata.CreateView.fields;
        },

        getFixedColumnsCount() {
            return FIXED_COLUMNS_CONFIG[this.moduleName] || FIXED_COLUMNS_CONFIG['default'];
        },

        getColumnLeftPosition(columnIndex) {
            const actionsWidth = 120;
            const columnWidth = 140;
            if (columnIndex === 0) return actionsWidth;
            return actionsWidth + (columnIndex * columnWidth);
        },

        isBooleanField(fieldName) {
            const booleanFields = [
                'is_active', 'is_deleted', 'mandatory', 'enum', 'archived',
                'header', 'list', 'create', 'detail', 'update',
                'bloc_enabled', 'visible'
            ];
            return booleanFields.includes(fieldName);
        },

        isForeignKeyField(fieldName) {
            const excludedFks = ['account_id', 'created_by', 'updated_by', 'cancelled_by'];
            return fieldName.endsWith('_id') && !excludedFks.includes(fieldName);
        },

        getFkModuleName(fieldName) {
            // colors_id → colors, modules_id → modules, metadatas_id → metadatas
            return fieldName.replace(/_id$/, '');
        },

        _fkTimer: null,

        async searchFk(panel, fieldName, query) {
            clearTimeout(this._fkTimer);
            const moduleName = this.getFkModuleName(fieldName);
            if (!query || query.length < 1) {
                panel.fkResults[fieldName] = [];
                panel.fkOpen[fieldName] = false;
                return;
            }
            this._fkTimer = setTimeout(async () => {
                try {
                    const response = await fetch(`/api/admin/${moduleName}?search=${encodeURIComponent(query)}&size=10`, {
                        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrfToken }
                    });
                    if (response.ok) {
                        const data = await response.json();
                        panel.fkResults[fieldName] = data.data || data.records || [];
                        panel.fkOpen[fieldName] = panel.fkResults[fieldName].length > 0;
                    }
                } catch (error) {
                    console.error('FK search error:', error);
                    panel.fkResults[fieldName] = [];
                }
            }, 300);
        },

        selectFkValue(panel, fieldName, record) {
            panel.formData[fieldName] = record.id;
            panel.fkLabels[fieldName] = record.name || record.label || String(record.id);
            panel.fkResults[fieldName] = [];
            panel.fkOpen[fieldName] = false;
        },

        clearFkValue(panel, fieldName) {
            panel.formData[fieldName] = '';
            panel.fkLabels[fieldName] = '';
            panel.fkResults[fieldName] = [];
            panel.fkOpen[fieldName] = false;
        },

        getAllDetailFields() {
            // Fallback pour modules CHAPS internes sans blocs structures
            if (this.metadata?.DetailView?.fields && Array.isArray(this.metadata.DetailView.fields)) {
                // Aplatir les blocs en une liste de champs
                const allFields = [];
                this.metadata.DetailView.fields.forEach(blocObj => {
                    const blocName = Object.keys(blocObj)[0];
                    const fields = blocObj[blocName] || [];
                    fields.forEach(f => allFields.push(f));
                });
                if (allFields.length > 0) return allFields;
            }
            // Sinon retourner les champs visibles de la table
            return this.visibleFields;
        }
    }
}
</script>
@endpush
@endsection