@extends('admin.layouts.app')

@section('title', 'Gérer les Fonctionnalités')
@section('header', 'Fonctionnalités: ' . $tenant->id)

@section('content')
    <div class="max-w-4xl mx-auto">
        <div class="mb-6">
            <a href="{{ route('admin.tenants.index') }}" class="text-slate-500 hover:text-brand-600 dark:text-slate-400 dark:hover:text-white transition-colors flex items-center">
                <i class="fas fa-arrow-left mr-2"></i> Retour à la liste
            </a>
        </div>

        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-white/10 p-8 transition-colors">
            <div class="mb-8">
                <h2 class="text-lg font-bold text-slate-800 dark:text-white">Configuration des Modules</h2>
                <p class="text-slate-500 dark:text-slate-400 text-sm mt-1">Activez ou désactivez les fonctionnalités spécifiques pour cette agence.</p>
            </div>

            <form action="{{ route('admin.tenants.features.update', $tenant->id) }}" method="POST">
                @csrf
                
                <div class="space-y-6">
                    @php
                        $features = [
                            'Produits' => ['products', 'products.create', 'products.edit', 'products.delete'],
                            'Questionnaires' => ['questionnaires', 'questionnaires.create', 'questionnaires.edit', 'questionnaires.delete'],
                            'Clients' => ['clients', 'clients.create', 'clients.edit', 'clients.delete'],
                            'Utilisateurs' => ['users', 'users.create', 'users.edit', 'users.delete'],
                        ];
                    @endphp

                    @foreach($features as $module => $keys)
                        <div class="border border-slate-100 dark:border-white/10 rounded-lg p-5 bg-slate-50/50 dark:bg-white/5 hover:bg-slate-50 dark:hover:bg-white/10 transition-colors">
                            <h3 class="font-semibold text-slate-800 dark:text-white mb-4 flex items-center">
                                <span class="w-1.5 h-6 bg-brand-500 rounded-full mr-3"></span>
                                {{ $module }}
                            </h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                @foreach($keys as $key)
                                    <label class="inline-flex items-center group cursor-pointer">
                                        <input type="checkbox" name="features[]" value="{{ $key }}" 
                                               {{ in_array($key, $tenant->features ?? []) ? 'checked' : '' }}
                                               class="rounded border-slate-300 dark:border-white/10 bg-white dark:bg-black/20 text-brand-600 shadow-sm focus:border-brand-500 focus:ring-brand-500 transition-all">
                                        <span class="ml-2 text-sm text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">
                                            {{ $key }}
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-8 pt-6 border-t border-slate-50 dark:border-white/5 flex justify-end space-x-3">
                    <a href="{{ route('admin.tenants.index') }}" class="bg-white dark:bg-slate-800 border border-slate-300 dark:border-white/10 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 font-medium py-2 px-4 rounded-lg shadow-sm transition-all">
                        Annuler
                    </a>
                    <button type="submit" class="bg-brand-600 hover:bg-brand-700 text-white font-medium py-2 px-6 rounded-lg shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
                        Sauvegarder les configurations
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection