@extends('layouts.admin')

@section('title', 'Gestion des CTAs')
@section('header', 'Gestion des CTAs - Modules × Actions')

@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">Activation des actions par module</h3>
                <p class="text-sm text-gray-500 mt-1">Vue matricielle pour activer/désactiver rapidement</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>
                        Actif
                    </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>
                        Inactif
                    </span>
                </div>
                <a href="{{ route('admin.ctas.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.ctas.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 bg-gray-50">
        <div class="flex items-center gap-2">
            <span class="text-sm font-medium text-gray-700 mr-2">
                <i class="fas fa-filter mr-1"></i> Filtrer :
            </span>
            <div class="flex rounded-lg shadow-sm border border-gray-300 overflow-hidden">
                <button data-filter="all" class="filter-btn px-4 py-2 text-sm font-medium bg-indigo-600 text-white border-r border-gray-300 transition-colors">
                    Tous
                </button>
                <button data-filter="active" class="filter-btn px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 border-r border-gray-300 transition-colors">
                    Actifs
                </button>
                <button data-filter="inactive" class="filter-btn px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 transition-colors">
                    Inactifs
                </button>
            </div>
        </div>
    </div>

    <div class="p-6 overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50 sticky top-0">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider sticky left-0 bg-gray-50 z-10">
                        Module \ Action
                    </th>
                    @foreach($actions as $action)
                        <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[140px]" data-is-active="{{ $action->is_active ? '1' : '0' }}">
                            <div class="flex flex-col items-center">
                                @if($action->icon)
                                    <i class="{{ $action->icon }} text-gray-400 mb-1"></i>
                                @endif
                                <span>{{ $action->label }}</span>
                                <span class="text-gray-400 font-normal normal-case text-xs mt-1">{{ $action->action }}</span>
                                <span class="mt-1">
                                    @if($action->is_active)
                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                                            <i class="fas fa-check-circle mr-1"></i> Actif
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                                            <i class="fas fa-times-circle mr-1"></i> Inactif
                                        </span>
                                    @endif
                                </span>
                            </div>
                        </th>
                    @endforeach
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @foreach($modules as $module)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 sticky left-0 bg-white">
                            <div>
                                <div>{{ $module->label }}</div>
                                <div class="text-xs text-gray-500 font-normal">{{ $module->name }}</div>
                            </div>
                        </td>
                        @foreach($actions as $action)
                            <td class="px-6 py-4 text-center action-cell" data-is-active="{{ $action->is_active ? '1' : '0' }}">
                                <div class="flex items-center justify-center">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input
                                            type="checkbox"
                                            class="cta-toggle sr-only peer"
                                            data-module-id="{{ $module->id }}"
                                            data-action="{{ $action->action }}"
                                            {{ isset($activeCtas["{$module->id}_{$action->action}"]) ? 'checked' : '' }}
                                        >
                                        <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>
                                    </label>
                                </div>
                            </td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@include('partials.toast')
@endsection

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

@push('scripts')
<script src="{{ asset('js/batch-save.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Filtres colonnes
    const filterButtons = document.querySelectorAll('.filter-btn');
    const actionHeaders = document.querySelectorAll('thead th[data-is-active]');

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

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

            actionHeaders.forEach((header, index) => {
                const isActive = header.dataset.isActive === '1';
                let shouldShow = filter === 'all' || (filter === 'active' && isActive) || (filter === 'inactive' && !isActive);

                header.style.display = shouldShow ? '' : 'none';

                const cellsForThisAction = document.querySelectorAll(`.action-cell:nth-child(${index + 2})`);
                cellsForThisAction.forEach(cell => {
                    cell.style.display = shouldShow ? '' : 'none';
                });
            });
        });
    });

    new BatchSave({
        toggleSelector: '.cta-toggle',
        batchUrl: '{{ route('admin.ctas.batchUpdate') }}',
        csrfToken: '{{ csrf_token() }}',
        buildChange: function(toggle) {
            return {
                module_id: parseInt(toggle.dataset.moduleId),
                action: toggle.dataset.action,
                value: toggle.checked ? 1 : 0
            };
        },
        changeKey: function(toggle) {
            return toggle.dataset.moduleId + '_' + toggle.dataset.action;
        }
    });
});
</script>
@endpush