@extends('layouts.admin')

@section('title', 'Product Bewerken: ' . $product->name . ' | Jouwdriedee Beheer')

@section('content')
<div class="space-y-6 max-w-4xl mx-auto">

    <!-- Header -->
    <div class="flex items-center justify-between pb-6 border-b border-slate-800">
        <div>
            <a href="{{ route('admin.products.index') }}" class="text-xs text-amber-400 font-bold hover:underline inline-flex items-center space-x-1 mb-1">
                <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
                <span>Terug naar Producten</span>
            </a>
            <h1 class="font-heading text-2xl font-black text-white">Product Bewerken: {{ $product->name }}</h1>
        </div>

        <a href="{{ route('product.show', $product->slug) }}" target="_blank" class="px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-xs font-bold transition flex items-center space-x-1.5 border border-slate-700">
            <span>Bekijk Live</span>
            <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
        </a>
    </div>

    <!-- Edit Form -->
    <form action="{{ route('admin.products.update', $product) }}" method="POST" class="space-y-6">
        @csrf
        @method('PUT')

        <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 space-y-5">
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="md:col-span-2 space-y-1.5">
                    <label class="block text-xs font-bold text-slate-300">Productnaam *</label>
                    <input type="text" name="name" value="{{ old('name', $product->name) }}" required class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white font-bold focus:outline-none focus:ring-2 focus:ring-amber-400">
                </div>

                <div class="space-y-1.5">
                    <label class="block text-xs font-bold text-slate-300">Categorie *</label>
                    <select name="category_id" required class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3 py-2.5 text-xs text-white font-bold">
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ old('category_id', $product->category_id) == $cat->id ? 'selected' : '' }}>
                                {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="space-y-1.5">
                    <label class="block text-xs font-bold text-slate-300">Basisprijs (€) *</label>
                    <input type="number" step="0.01" name="base_price" value="{{ old('base_price', $product->base_price) }}" required class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white font-bold">
                </div>

                <div class="md:col-span-2 space-y-1.5">
                    <label class="block text-xs font-bold text-slate-300">Afbeelding Pad / URL</label>
                    <input type="text" name="image_url" value="{{ old('image_url', $product->image_url) }}" class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white">
                </div>
            </div>

            <div class="space-y-1.5">
                <label class="block text-xs font-bold text-slate-300">Korte Omschrijving (voor catalogus cards)</label>
                <textarea name="short_description" rows="2" class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3.5 py-2 text-xs text-white">{{ old('short_description', $product->short_description) }}</textarea>
            </div>

            <div class="space-y-1.5">
                <label class="block text-xs font-bold text-slate-300">Volledige Productbeschrijving *</label>
                <textarea name="description" rows="6" required class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white leading-relaxed">{{ old('description', $product->description) }}</textarea>
            </div>

            <!-- Print Specs -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-3 border-t border-slate-800">
                <div class="space-y-1.5">
                    <label class="block text-xs font-bold text-slate-300">Afmetingen (LxBxH)</label>
                    <input type="text" name="dimensions" value="{{ old('dimensions', $product->dimensions) }}" placeholder="bijv. 12 x 8 x 10 cm" class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3 py-2 text-xs text-white">
                </div>

                <div class="space-y-1.5">
                    <label class="block text-xs font-bold text-slate-300">Gewicht (gram)</label>
                    <input type="number" name="weight_grams" value="{{ old('weight_grams', $product->weight_grams) }}" class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3 py-2 text-xs text-white">
                </div>

                <div class="space-y-1.5">
                    <label class="block text-xs font-bold text-slate-300">Printtijd (uren)</label>
                    <input type="number" step="0.1" name="print_time_hours" value="{{ old('print_time_hours', $product->print_time_hours) }}" class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3 py-2 text-xs text-white">
                </div>
            </div>

            <!-- Toggles -->
            <div class="pt-3 border-t border-slate-800 flex items-center space-x-6">
                <label class="flex items-center space-x-2 cursor-pointer text-xs font-bold text-slate-200">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $product->is_active) ? 'checked' : '' }} class="w-4 h-4 rounded text-amber-400 bg-slate-950 border-slate-700">
                    <span>Zichtbaar in webshop (Actief)</span>
                </label>

                <label class="flex items-center space-x-2 cursor-pointer text-xs font-bold text-slate-200">
                    <input type="checkbox" name="is_featured" value="1" {{ old('is_featured', $product->is_featured) ? 'checked' : '' }} class="w-4 h-4 rounded text-amber-400 bg-slate-950 border-slate-700">
                    <span>Uitlichten op homepage</span>
                </label>
            </div>

        </div>

        <div class="flex items-center justify-end space-x-3">
            <a href="{{ route('admin.products.index') }}" class="px-4 py-2.5 rounded-xl bg-slate-800 text-slate-300 hover:text-white text-xs font-bold transition">
                Annuleren
            </a>
            <button type="submit" class="px-6 py-2.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs transition flex items-center space-x-1.5">
                <i data-lucide="save" class="w-4 h-4"></i>
                <span>Wijzigingen Opslaan</span>
            </button>
        </div>

    </form>
</div>
@endsection