@extends('admin.layouts.app')

@section('title', 'Modifier Produit')
@section('header', 'Modifier: ' . $product->name)

@section('content')
    <div class="max-w-5xl mx-auto">
        <div class="mb-6">
            <a href="{{ route('admin.products.index') }}" class="text-slate-500 hover:text-blue-600 dark:text-slate-400 dark:hover:text-blue-400 transition-colors flex items-center group">
                <i class="fas fa-arrow-left mr-2 group-hover:-translate-x-1 transition-transform"></i> Retour aux produits
            </a>
        </div>

        <form action="{{ route('admin.products.update', $product->id) }}" method="POST">
            @csrf
            @method('PUT')
            
            <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="glass rounded-xl shadow-lg p-8">
                        <h2 class="text-lg font-bold text-slate-800 dark:text-white mb-6 pb-4 border-b border-slate-100 dark:border-white/10">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-2">Nom du Produit <span class="text-rose-500">*</span></label>
                                <input type="text" name="name" id="name" value="{{ old('name', $product->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-blue-500 focus:ring-blue-500 sm:text-sm py-3 px-4 transition-colors placeholder-slate-400 dark:placeholder-slate-500" required>
                            </div>

                            <div>
                                <label for="slug" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Slug (URL) <span class="text-rose-500">*</span></label>
                                <div class="flex rounded-lg shadow-sm">
                                    <span class="inline-flex items-center px-3 rounded-l-lg border border-r-0 border-slate-300 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-500 dark:text-slate-400 sm:text-sm">
                                        /produits/
                                    </span>
                                    <input type="text" name="slug" id="slug" value="{{ old('slug', $product->slug) }}" 
                                           class="flex-1 block w-full rounded-none rounded-r-lg border-slate-300 dark:border-white/10 bg-white dark:bg-black/20 text-slate-900 dark:text-white focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-3 px-4 transition-colors" required>
                                </div>
                            </div>

                            <div>
                                <label for="description" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Description</label>
                                <textarea name="description" id="description" rows="4" 
                                          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-blue-500 focus:ring-blue-500 sm:text-sm py-3 px-4 transition-colors placeholder-slate-400 dark:placeholder-slate-500">{{ old('description', $product->description) }}</textarea>
                            </div>

                            <div>
                                <label for="icon" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Icône (FontAwesome Class)</label>
                                <div class="flex">
                                    <input type="text" name="icon" id="icon" value="{{ old('icon', $product->icon) }}" placeholder="fas fa-box"
                                           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-blue-500 focus:ring-blue-500 sm:text-sm py-3 px-4 transition-colors">
                                    @if($product->icon)
                                        <div class="ml-3 h-11 w-11 rounded-lg bg-blue-500/10 text-blue-600 dark:text-blue-400 flex items-center justify-center border border-blue-500/20">
                                            <i class="{{ $product->icon }}"></i>
                                        </div>
                                    @endif
                                </div>
                            </div>

                             <div class="pt-4 border-t border-slate-100 dark:border-white/10 mt-6">
                                <label class="flex items-center cursor-pointer group">
                                    <div class="relative">
                                        <input id="is_active" name="is_active" type="checkbox" value="1" {{ old('is_active', $product->is_active) ? 'checked' : '' }} class="sr-only peer">
                                        <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 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 dark:border-gray-600 peer-checked:bg-blue-600"></div>
                                    </div>
                                    <span class="ml-3 text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">Produit Actif</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column: Tenant Assignment -->
                <div class="lg:col-span-1">
                     <div class="glass rounded-xl shadow-lg p-6 sticky top-6">
                        <h2 class="text-lg font-bold text-slate-800 dark:text-white mb-2">Assignation aux Agences</h2>
                        <p class="text-sm text-slate-500 dark:text-slate-400 mb-6 pb-4 border-b border-slate-100 dark:border-white/10">Sélectionnez les agences qui peuvent accéder à ce produit.</p>
                        
                        <div class="flex items-center justify-between mb-3">
                             <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Agences Dispo.</span>
                             <span class="bg-blue-100 dark:bg-blue-500/20 text-blue-800 dark:text-blue-300 text-xs font-bold px-2 py-0.5 rounded-full">{{ $product->tenants->count() }} Accès</span>
                        </div>

                        <div class="space-y-2 max-h-[400px] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-slate-300 dark:scrollbar-thumb-slate-600">
                             @foreach($tenants as $tenant)
                                <label class="flex items-start p-3 rounded-lg border cursor-pointer transition-all {{ $product->tenants->contains($tenant->id) ? 'border-blue-500/30 bg-blue-50/50 dark:bg-blue-500/10' : 'border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5' }}">
                                    <div class="flex items-center h-5 mt-0.5">
                                        <input type="checkbox" name="tenants[]" value="{{ $tenant->id }}" 
                                            {{ $product->tenants->contains($tenant->id) ? 'checked' : '' }}
                                            class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                    </div>
                                    <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 mt-0.5">
                                            @foreach($tenant->domains as $d) {{ $d->domain }} @endforeach
                                        </span>
                                    </div>
                                </label>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8 flex justify-end space-x-4 pt-6 border-t border-slate-200 dark:border-slate-700">
                <a href="{{ route('admin.products.index') }}" class="px-5 py-2.5 rounded-lg border border-slate-300 dark:border-white/20 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-white/5 font-medium transition-colors shadow-sm">
                    Annuler
                </a>
                <button type="submit" class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-medium py-2.5 px-6 rounded-lg shadow-lg shadow-blue-500/30 transition-all transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Enregistrer les modifications
                </button>
            </div>
        </form>
    </div>
@endsection