@extends('layouts.admin')

@section('title', 'Modifier : '.$product->name)
@section('page-title', 'Modifier le produit')

@section('content')

<div class="max-w-3xl mx-auto">

    <div class="mb-6">
        <a href="{{ route('admin.products.index') }}"
           class="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-primary transition-colors">
            <i class="fas fa-arrow-left"></i> Retour aux produits
        </a>
    </div>

    {{-- Affichage global des erreurs --}}
    @if($errors->any())
    <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-6">
        <div class="flex items-center gap-2 mb-2">
            <i class="fas fa-exclamation-circle text-red-500"></i>
            <p class="font-semibold text-red-700 text-sm">Veuillez corriger les erreurs suivantes :</p>
        </div>
        <ul class="list-disc list-inside space-y-1">
            @foreach($errors->all() as $error)
            <li class="text-red-600 text-sm">{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50 flex items-center justify-between">
            <h2 class="font-semibold text-gray-800 flex items-center gap-2">
                <i class="fas fa-edit text-primary"></i> {{ $product->name }}
            </h2>
            <span class="{{ $product->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}
                          px-3 py-0.5 rounded-full text-xs font-medium">
                {{ $product->is_active ? 'Actif' : 'Inactif' }}
            </span>
        </div>

        <form action="{{ route('admin.products.update', $product) }}" method="POST"
              enctype="multipart/form-data" class="p-6 space-y-6">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <div class="sm:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Nom du produit <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="name" required
                           value="{{ old('name', $product->name) }}"
                           class="w-full border rounded-xl px-4 py-2.5 text-sm outline-none transition
                                  focus:ring-2 focus:ring-primary focus:border-transparent
                                  {{ $errors->has('name') ? 'border-red-400 bg-red-50' : 'border-gray-200' }}">
                    @error('name')
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i class="fas fa-circle-exclamation"></i> {{ $message }}
                    </p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Catégorie <span class="text-red-500">*</span>
                    </label>
                    <select name="category_id" required
                            class="w-full border rounded-xl px-4 py-2.5 text-sm bg-white outline-none transition
                                   focus:ring-2 focus:ring-primary focus:border-transparent
                                   {{ $errors->has('category_id') ? 'border-red-400 bg-red-50' : 'border-gray-200' }}">
                        @foreach($categories as $cat)
                        <option value="{{ $cat->id }}"
                            {{ old('category_id', $product->category_id) == $cat->id ? 'selected' : '' }}>
                            {{ $cat->name }}
                        </option>
                        @endforeach
                    </select>
                    @error('category_id')
                    <p class="text-red-500 text-xs mt-1"><i class="fas fa-circle-exclamation"></i> {{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Prix (FCFA) <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input type="number" name="price" required min="0" step="0.01"
                               value="{{ old('price', $product->price) }}"
                               class="w-full border rounded-xl pl-4 pr-12 py-2.5 text-sm outline-none transition
                                      focus:ring-2 focus:ring-primary focus:border-transparent
                                      {{ $errors->has('price') ? 'border-red-400 bg-red-50' : 'border-gray-200' }}">
                        <span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm font-medium">FCFA</span>
                    </div>
                    @error('price')
                    <p class="text-red-500 text-xs mt-1"><i class="fas fa-circle-exclamation"></i> {{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Nouvelle image
                        <span class="text-gray-400 font-normal">(laisser vide pour garder l'actuelle)</span>
                    </label>
                    @if($product->image)
                    <div class="flex items-center gap-3 mb-2 p-2 bg-gray-50 rounded-xl border border-gray-100">
                        <img src="{{ $product->image_url }}" alt=""
                             class="w-12 h-12 rounded-lg object-cover border border-gray-200">
                        <span class="text-xs text-gray-500">Image actuelle</span>
                    </div>
                    @endif
                    <input type="file" name="image" accept="image/jpeg,image/png,image/webp,image/jpg"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm outline-none transition
                                  focus:ring-2 focus:ring-primary focus:border-transparent
                                  file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0
                                  file:text-xs file:font-medium file:bg-primary file:text-white hover:file:bg-primary-dark">
                    @error('image')
                    <p class="text-red-500 text-xs mt-1"><i class="fas fa-circle-exclamation"></i> {{ $message }}</p>
                    @enderror
                </div>

                <div class="sm:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Description courte</label>
                    <input type="text" name="short_description" maxlength="500"
                           value="{{ old('short_description', $product->short_description) }}"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm outline-none transition
                                  focus:ring-2 focus:ring-primary focus:border-transparent">
                </div>

                <div class="sm:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Description complète <span class="text-red-500">*</span>
                    </label>
                    <textarea name="description" required rows="5"
                              class="w-full border rounded-xl px-4 py-2.5 text-sm outline-none transition resize-none
                                     focus:ring-2 focus:ring-primary focus:border-transparent
                                     {{ $errors->has('description') ? 'border-red-400 bg-red-50' : 'border-gray-200' }}">{{ old('description', $product->description) }}</textarea>
                    @error('description')
                    <p class="text-red-500 text-xs mt-1"><i class="fas fa-circle-exclamation"></i> {{ $message }}</p>
                    @enderror
                </div>
            </div>

            {{-- Options toggle --}}
            <div class="bg-gray-50 rounded-xl p-4 border border-gray-100">
                <p class="text-sm font-semibold text-gray-700 mb-3">Options de visibilité</p>
                <div class="flex flex-col sm:flex-row gap-4">
                    <label class="flex items-center gap-3 cursor-pointer select-none">
                        <div class="relative">
                            <input type="checkbox" name="is_active" value="1"
                                   {{ old('is_active', $product->is_active) ? 'checked' : '' }}
                                   class="sr-only peer">
                            <div class="w-10 h-6 bg-gray-200 rounded-full peer-checked:bg-primary transition-colors"></div>
                            <div class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform peer-checked:translate-x-4"></div>
                        </div>
                        <div>
                            <span class="text-sm font-medium text-gray-700">Produit actif</span>
                            <p class="text-xs text-gray-400">Visible sur le site public</p>
                        </div>
                    </label>

                    <label class="flex items-center gap-3 cursor-pointer select-none">
                        <div class="relative">
                            <input type="checkbox" name="is_featured" value="1"
                                   {{ old('is_featured', $product->is_featured) ? 'checked' : '' }}
                                   class="sr-only peer">
                            <div class="w-10 h-6 bg-gray-200 rounded-full peer-checked:bg-yellow-400 transition-colors"></div>
                            <div class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform peer-checked:translate-x-4"></div>
                        </div>
                        <div>
                            <span class="text-sm font-medium text-gray-700">Produit vedette</span>
                            <p class="text-xs text-gray-400">Affiché sur la page d'accueil</p>
                        </div>
                    </label>
                </div>
            </div>

            <div class="flex gap-3 pt-2 border-t border-gray-100">
                <a href="{{ route('admin.products.index') }}"
                   class="flex-1 sm:flex-none px-6 py-3 border border-gray-200 rounded-xl text-sm font-medium
                          text-gray-600 hover:bg-gray-50 transition-colors text-center">
                    Annuler
                </a>
                <button type="submit"
                        class="flex-1 sm:flex-none px-8 py-3 bg-primary text-white rounded-xl text-sm font-bold
                               hover:bg-primary-dark transition-all shadow-sm hover:shadow-md
                               flex items-center justify-center gap-2">
                    <i class="fas fa-save"></i> Enregistrer les modifications
                </button>
            </div>
        </form>
    </div>
</div>

@endsection