@extends('layouts.admin')
@section('title', 'Modifier un produit')
@section('page_title', 'Modifier un produit')

@section('content')
<div class="page-header">
    <h1><i class="fas fa-edit"></i> Modifier : {{ $produit->name }}</h1>
    <a href="{{ route('admin.produits.index') }}" class="btn btn-outline">
        <i class="fas fa-arrow-left"></i> Retour
    </a>
</div>

<form method="POST" action="{{ route('admin.produits.update', $produit->id) }}" enctype="multipart/form-data">
    @csrf @method('PUT')

    {{-- Bloc 1 : Informations générales --}}
    <div class="card" style="max-width:800px">
        <div class="card-title"><i class="fas fa-info-circle"></i> Informations générales</div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
            <div class="form-group">
                <label>Nom du produit *</label>
                <input type="text" name="name" class="form-control"
                       value="{{ old('name', $produit->name) }}" required>
            </div>
            <div class="form-group">
                <label>Catégorie *</label>
                <select name="category" class="form-control" required>
                    <option value="">Choisir...</option>
                    @foreach(['kraft'=>'Kraft','luxe'=>'Luxe','alimentaire'=>'Alimentaire','custom'=>'Personnalisé'] as $val=>$label)
                        <option value="{{ $val }}" {{ $produit->category == $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>Prix (TND)</label>
                <input type="text" name="price" class="form-control"
                       value="{{ old('price', $produit->price) }}" placeholder="0.45">
            </div>
            <div class="form-group">
                <label>Tailles / Dimensions</label>
                <input type="text" name="size" class="form-control"
                       value="{{ old('size', $produit->size) }}" placeholder="S / M / L / XL">
            </div>
            <div class="form-group">
                <label>Badge</label>
                <select name="badge" class="form-control">
                    <option value="">Aucun</option>
                    @foreach(['eco'=>'Eco','custom'=>'Custom','new'=>'Nouveau','bestseller'=>'Bestseller'] as $val=>$label)
                        <option value="{{ $val }}" {{ $produit->badge == $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="form-group">
            <label>Description *</label>
            <textarea name="description" class="form-control" required
                      style="min-height:120px">{{ old('description', $produit->description) }}</textarea>
        </div>
    </div>

    {{-- Bloc 2 : Galerie d'images --}}
    <div class="card" style="max-width:800px">
        <div class="card-title"><i class="fas fa-images"></i> Galerie d'images</div>

        {{-- Images existantes --}}
        @if($produit->images->count() > 0)
        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px">
            @foreach($produit->images as $img)
            <div style="border-radius:10px;overflow:hidden;border:2px solid {{ $img->is_main ? 'var(--green)' : 'var(--gray-200)' }}">
                <div style="position:relative;height:110px;background:var(--gray-50)">
                    <img src="{{ asset('storage/'.$img->path) }}"
                         alt="{{ $img->alt ?? $produit->name }}"
                         style="width:100%;height:100%;object-fit:cover">
                    @if($img->is_main)
                    <div style="position:absolute;top:6px;left:6px;background:var(--green);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px">
                        ★ Principale
                    </div>
                    @endif
                </div>
                <div style="padding:8px 6px;background:var(--gray-50);display:flex;flex-direction:column;gap:5px">
                    @if(!$img->is_main)
                    <button type="submit" name="set_main_image_id" value="{{ $img->id }}"
                            class="btn btn-primary" style="padding:4px 8px;font-size:10px;width:100%;justify-content:center">
                        <i class="fas fa-star"></i> Principale
                    </button>
                    @endif
                    <button type="submit" name="delete_image_id" value="{{ $img->id }}"
                            class="btn btn-danger" style="padding:4px 8px;font-size:10px;width:100%;justify-content:center"
                            onclick="return confirm('Supprimer cette image ?')">
                        <i class="fas fa-trash"></i> Supprimer
                    </button>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div style="background:var(--gold-light);border:1px solid var(--gold);border-radius:8px;padding:14px;font-size:13px;color:#633806;margin-bottom:20px">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            Aucune image dans la galerie. Ajoutez des images ci-dessous.
        </div>
        @endif

        {{-- Upload nouvelles images --}}
        <div class="form-group">
            <label>Ajouter des images à la galerie</label>
            <div id="upload-zone"
                 onclick="document.getElementById('new_images').click()"
                 style="border:2px dashed var(--gray-200);border-radius:10px;padding:28px;text-align:center;cursor:pointer;transition:0.2s"
                 onmouseover="this.style.borderColor='var(--green)'"
                 onmouseout="this.style.borderColor='var(--gray-200)'">
                <input type="file" id="new_images" name="new_images[]"
                       accept="image/jpeg,image/png,image/webp"
                       multiple style="display:none"
                       onchange="previewNewImages(this)">
                <i class="fas fa-cloud-upload-alt" style="font-size:2rem;color:var(--gray-400);margin-bottom:8px;display:block"></i>
                <p style="font-size:13px;color:var(--gray-600);margin:0">Cliquez pour sélectionner vos images</p>
                <small style="font-size:11px;color:var(--gray-400)">JPG, PNG, WebP · Max 5 Mo · Plusieurs fichiers possibles</small>
            </div>
            <div id="preview-new" style="display:none;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px"></div>
        </div>
    </div>

    {{-- Boutons --}}
    <div style="display:flex;gap:12px;max-width:800px">
        <button type="submit" class="btn btn-primary" style="padding:12px 28px">
            <i class="fas fa-save"></i> Enregistrer les modifications
        </button>
        <a href="{{ route('admin.produits.index') }}" class="btn btn-outline" style="padding:12px 20px">
            <i class="fas fa-times"></i> Annuler
        </a>
    </div>

</form>

@push('scripts')
<script>
function previewNewImages(input) {
    const container = document.getElementById('preview-new');
    container.innerHTML = '';
    const files = Array.from(input.files);
    container.style.display = files.length ? 'grid' : 'none';
    files.forEach(file => {
        const reader = new FileReader();
        reader.onload = e => {
            container.innerHTML += `
                <div style="border:1px solid var(--gray-200);border-radius:8px;overflow:hidden">
                    <img src="${e.target.result}" style="width:100%;height:80px;object-fit:cover;display:block">
                    <span style="display:block;background:var(--gray-50);padding:3px 6px;font-size:10px;color:var(--gray-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${file.name}</span>
                </div>`;
        };
        reader.readAsDataURL(file);
    });
}
</script>
@endpush

@endsection