@extends('admin.layouts.app')

@section('title', 'Nouveau Produit')
@section('header', 'Créer un Produit')

@section('content')
    <div class="max-w-4xl mx-auto">
        <div class="mb-6">
            <a href="{{ route('admin.products.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 aux produits
            </a>
        </div>

        <form action="{{ route('admin.products.store') }}" method="POST">
            @csrf
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Left Column: Product Info -->
                <div class="lg:col-span-2 space-y-6">
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-white/10 p-8 transition-colors">
                        <h2 class="text-lg font-bold text-slate-800 dark:text-white mb-6 pb-4 border-b border-slate-50 dark:border-white/5">Informations Générales</h2>
                        
                        <div class="space-y-6">
                            <div>
                                <label for="name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Nom du Produit <span class="text-rose-500">*</span></label>
                                <input type="text" name="name" id="name" value="{{ old('name') }}" 
                                       class="block w-full rounded-lg border-slate-300 dark:border-white/10 bg-white dark:bg-black/20 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2.5 px-3 transition-colors" required>
                            </div>

                            <div>
                                <label for="slug" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Slug (URL) <span class="text-rose-500">*</span></label>
                                <input type="text" name="slug" id="slug" value="{{ old('slug') }}" 
                                       class="block w-full rounded-lg border-slate-300 dark:border-white/10 bg-white dark:bg-black/20 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2.5 px-3 transition-colors" required>
                                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Identifiant unique utilisé dans les URLs.</p>
                            </div>

                            <div>
                                <label for="description" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Description</label>
                                <textarea name="description" id="description" rows="3" 
                                          class="block w-full rounded-lg border-slate-300 dark:border-white/10 bg-white dark:bg-black/20 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2.5 px-3 transition-colors">{{ old('description') }}</textarea>
                            </div>

                            <div>
                                <label for="icon" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Icône (FontAwesome Class)</label>
                                <input type="text" name="icon" id="icon" value="{{ old('icon', 'fas fa-shield-alt') }}" 
                                       class="block w-full rounded-lg border-slate-300 dark:border-white/10 bg-white dark:bg-black/20 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2.5 px-3 transition-colors">
                                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Exemple: fas fa-car, fas fa-home</p>
                            </div>

                             <div class="pt-4">
                                <div class="flex items-start">
                                    <div class="flex items-center h-5">
                                        <input id="is_active" name="is_active" type="checkbox" value="1" {{ old('is_active', true) ? 'checked' : '' }} 
                                               class="focus:ring-brand-500 h-4 w-4 text-brand-600 border-slate-300 dark:border-white/10 bg-white dark:bg-black/20 rounded transition-colors">
                                    </div>
                                    <div class="ml-3 text-sm">
                                        <label for="is_active" class="font-medium text-slate-700 dark:text-slate-300">Produit Actif</label>
                                        <p class="text-slate-500 dark:text-slate-400">Rendre ce produit disponible globalement.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column: Tenant Assignment -->
                <div class="lg:col-span-1">
                     <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-white/10 p-8 sticky top-6 transition-colors">
                        <h2 class="text-lg font-bold text-slate-800 dark:text-white mb-4">Assignation aux Agences</h2>
                        <p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Sélectionnez les agences qui auront accès à ce produit.</p>
                        
                        <div class="space-y-3 max-h-96 overflow-y-auto pr-2">
                             @foreach($tenants as $tenant)
                                <label class="flex items-center p-3 rounded-lg border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5 cursor-pointer transition-colors">
                                    <input type="checkbox" name="tenants[]" value="{{ $tenant->id }}" 
                                           class="h-4 w-4 text-brand-600 focus:ring-brand-500 border-slate-300 dark:border-white/10 bg-white dark:bg-black/20 rounded">
                                    <div class="ml-3">
                                        <span class="block text-sm font-medium text-slate-900 dark:text-white">{{ $tenant->id }}</span>
                                        <span class="block text-xs text-slate-500 dark:text-slate-400">
                                            @foreach($tenant->domains as $d) {{ $d->domain }} @endforeach
                                        </span>
                                    </div>
                                </label>
                            @endforeach
                            @if($tenants->isEmpty())
                                <p class="text-sm text-slate-400 italic">Aucune agence active trouvée.</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8 flex justify-end space-x-3">
                <a href="{{ route('admin.products.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">
                    Créer le Produit
                </button>
            </div>
        </form>
    </div>
@endsection