@extends('layouts.admin')

@section('title', 'Gestion des Modules')
@section('header', 'Gestion des Modules - Vue Matricielle')

@section('content')
<div class="bg-white shadow rounded-lg">
    <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">Configuration des modules</h3>
                <p class="text-sm text-gray-500 mt-1">Vue matricielle pour gérer les propriétés des modules</p>
            </div>
            <div class="flex items-center gap-4">
                @include('partials.save-button')
                <div class="text-sm text-gray-500">
                    <span class="inline-flex items-center">
                        <span class="h-2.5 w-2.5 rounded-full bg-green-500 mr-1.5"></span>
                        Activé
                    </span>
                    <span class="inline-flex items-center ml-3">
                        <span class="h-2.5 w-2.5 rounded-full bg-gray-300 mr-1.5"></span>
                        Désactivé
                    </span>
                </div>
                <a href="{{ route('admin.modules.list') }}"
                   class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <i class="fas fa-list mr-2"></i> Vue Liste
                </a>
                <a href="{{ route('admin.modules.list') }}?action=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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <i class="fas fa-plus mr-2"></i> Créer
                </a>
            </div>
        </div>
    </div>

    <!-- Filtres par statut -->
    <div class="border-b border-gray-200 px-6 py-3">
        <div class="flex items-center gap-2">
            <button data-filter="all"
               class="filter-btn whitespace-nowrap px-4 py-2 rounded-md text-sm font-medium transition-colors bg-indigo-100 text-indigo-700">
                <i class="fas fa-list mr-1"></i> Tous
            </button>
            <button data-filter="active"
               class="filter-btn whitespace-nowrap px-4 py-2 rounded-md text-sm font-medium transition-colors text-gray-600 hover:bg-gray-100">
                <i class="fas fa-check-circle mr-1"></i> Actifs
            </button>
            <button data-filter="inactive"
               class="filter-btn whitespace-nowrap px-4 py-2 rounded-md text-sm font-medium transition-colors text-gray-600 hover:bg-gray-100">
                <i class="fas fa-times-circle mr-1"></i> Inactifs
            </button>
        </div>
    </div>

    <div class="p-6">
        <div class="overflow-auto" style="max-height: calc(100vh - 340px);">
            <table class="min-w-full divide-y divide-gray-200 text-xs">
                <thead class="bg-gray-50 sticky top-0 z-10" style="box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
                <tr>
                    <th scope="col" class="px-2 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider sticky left-0 bg-gray-50 z-20 w-[40px]">
                        <i class="fas fa-grip-vertical text-gray-400"></i>
                    </th>
                    <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider sticky left-[40px] bg-gray-50 z-20 min-w-[200px]">
                        Module
                    </th>
                    @foreach($tinyintFields as $field => $label)
                        <th scope="col" class="px-2 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[80px]">
                            <div class="flex flex-col items-center">
                                <span class="whitespace-nowrap">{{ $label }}</span>
                            </div>
                        </th>
                    @endforeach
                </tr>
            </thead>
            <tbody id="sortable-tbody" class="bg-white divide-y divide-gray-200">
                @foreach($modules as $module)
                    <tr class="hover:bg-gray-50 transition-colors sortable-row" data-module-id="{{ $module->id }}" data-is-active="{{ $module->is_active ? '1' : '0' }}">
                        <td class="px-2 py-2 text-center cursor-move drag-handle sticky left-0 bg-white z-10">
                            <i class="fas fa-grip-vertical text-gray-400"></i>
                        </td>
                        <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900 sticky left-[40px] bg-white z-10">
                            <div>
                                <div class="font-semibold">{{ $module->name }}</div>
                                <div class="text-xs text-gray-500">{{ $module->label }}</div>
                                @if($module->source)
                                    <div class="text-xs text-purple-600 mt-1">
                                        <i class="fas fa-database text-xs mr-1"></i>Source: {{ $module->source }}
                                    </div>
                                @endif
                                <div class="text-xs text-indigo-600 mt-1">
                                    <i class="fas fa-sort text-xs mr-1"></i>Séquence: {{ $module->sequence }}
                                </div>
                            </div>
                        </td>
                        @foreach($tinyintFields as $field => $label)
                            <td class="px-2 py-2 text-center">
                                <div class="flex items-center justify-center">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input
                                            type="checkbox"
                                            class="module-toggle sr-only peer"
                                            data-module-id="{{ $module->id }}"
                                            data-field="{{ $field }}"
                                            {{ $module->{$field} ? 'checked' : '' }}
                                        >
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 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-4 after:w-4 after:transition-all peer-checked:bg-green-500"></div>
                                    </label>
                                </div>
                            </td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
            </table>
        </div>
    </div>
</div>

@include('partials.toast')
@endsection

@push('styles')
@include('partials.save-button-styles')
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script src="{{ asset('js/batch-save.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Filtres
    const filterButtons = document.querySelectorAll('.filter-btn');
    const rows = document.querySelectorAll('.sortable-row');

    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            const filter = this.dataset.filter;

            filterButtons.forEach(btn => {
                btn.classList.remove('bg-indigo-100', 'text-indigo-700', 'bg-green-100', 'text-green-700', 'bg-red-100', 'text-red-700');
                btn.classList.add('text-gray-600', 'hover:bg-gray-100');
            });

            if (filter === 'all') {
                this.classList.remove('text-gray-600', 'hover:bg-gray-100');
                this.classList.add('bg-indigo-100', 'text-indigo-700');
            } else if (filter === 'active') {
                this.classList.remove('text-gray-600', 'hover:bg-gray-100');
                this.classList.add('bg-green-100', 'text-green-700');
            } else if (filter === 'inactive') {
                this.classList.remove('text-gray-600', 'hover:bg-gray-100');
                this.classList.add('bg-red-100', 'text-red-700');
            }

            rows.forEach(row => {
                const isActive = row.dataset.isActive;
                if (filter === 'all') row.style.display = '';
                else if (filter === 'active') row.style.display = isActive === '1' ? '' : 'none';
                else if (filter === 'inactive') row.style.display = isActive === '0' ? '' : 'none';
            });
        });
    });

    new BatchSave({
        toggleSelector: '.module-toggle',
        batchUrl: '{{ route('admin.modules.batchUpdate') }}',
        csrfToken: '{{ csrf_token() }}',
        buildChange: function(toggle) {
            return { id: parseInt(toggle.dataset.moduleId), field: toggle.dataset.field, value: toggle.checked ? 1 : 0 };
        },
        changeKey: function(toggle) {
            return toggle.dataset.moduleId + '_' + toggle.dataset.field;
        }
    });

    // Drag & drop
    const tbody = document.getElementById('sortable-tbody');
    new Sortable(tbody, {
        animation: 150,
        handle: '.drag-handle',
        draggable: '.sortable-row',
        ghostClass: 'bg-indigo-100',
        dragClass: 'opacity-50',
        onEnd: async function() {
            const rows = tbody.querySelectorAll('.sortable-row');
            const moduleIds = Array.from(rows).map(row => row.dataset.moduleId);
            try {
                const response = await fetch('{{ route('admin.modules.reorder') }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ module_ids: moduleIds })
                });
                const data = await response.json();
                if (data.success) {
                    showToast(data.message, 'success');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    throw new Error(data.message);
                }
            } catch (error) {
                console.error('Erreur:', error);
                showToast('Erreur lors du réordonnancement', 'error');
            }
        }
    });
});
</script>
@endpush