@extends('layouts.admin')

@section('title', 'Nieuw Product Toevoegen | 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">Nieuw Product Toevoegen</h1>
        </div>
    </div>

    <!-- Create Form -->
    <form action="{{ route('admin.products.store') }}" method="POST" class="space-y-6">
        @csrf

        <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') }}" required placeholder="bijv. Articulated Mecha Robot" 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') == $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', '14.95') }}" 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 of URL</label>
                    <input type="text" name="image_url" value="{{ old('image_url', '/images/products/crystal-dragon.jpg') }}" placeholder="/images/products/naam.jpg of https://..." 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 overzichtskaarten)</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') }}</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="5" 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') }}</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', '15 x 10 x 8 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', '85') }}" 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', '4.5') }}" 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" checked class="w-4 h-4 rounded text-amber-400 bg-slate-950 border-slate-700">
                    <span>Direct 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" 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="plus" class="w-4 h-4"></i>
                <span>Product Publiceren</span>
            </button>
        </div>

    </form>
</div>
@endsection