<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tambah Koleksi ATK | wyn</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .glass {
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body class="bg-[#fff5f7] min-h-screen flex items-center justify-center p-6 text-slate-800">

    <div class="max-w-2xl w-full">
        <a href="{{ route('admin.products.index') }}" class="inline-flex items-center text-pink-400 hover:text-pink-600 mb-6 transition font-bold group">
            <div class="bg-white p-2 rounded-xl shadow-sm mr-3 group-hover:-translate-x-1 transition-transform">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
            </div>
            Kembali ke ATK
        </a>

        <div class="glass rounded-[48px] shadow-2xl shadow-pink-100/50 p-8 md:p-12 border-white">
            <div class="mb-10 text-center md:text-left">
                <h1 class="text-3xl font-extrabold text-slate-900 tracking-tight">
                    Tambah <span class="text-pink-500">Koleksi ATK</span>
                </h1>
                <p class="text-slate-400 mt-2 text-sm italic font-medium">
                    Masukkan detail ATK terbaru toko kamu.
                </p>
            </div>

            {{-- NOTIF ERROR VALIDATION --}}
            @if ($errors->any())
                <div class="mb-6 bg-red-50 border border-red-200 text-red-600 px-6 py-4 rounded-2xl shadow-sm">
                    <div class="font-bold mb-2">Ups! Gagal menyimpan ATK 😢</div>
                    <ul class="list-disc list-inside text-sm space-y-1">
                        @foreach ($errors->all() as $error)
                            <li>• {{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

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

                <div>
                    <label class="block text-xs font-black text-pink-400 uppercase tracking-widest mb-2 ml-1">
                        Nama ATK
                    </label>
                    <input type="text" name="name"
                        class="w-full px-6 py-4 rounded-[24px] border border-pink-50 focus:border-pink-300 focus:ring-4 focus:ring-pink-400/10 transition outline-none bg-white/50"
                        placeholder="Contoh: Pulpen Gel Hitam 0.5mm" required>
                </div>

                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-xs font-black text-pink-400 uppercase tracking-widest mb-2 ml-1">
                            Kategori
                        </label>
                        <select name="category_id"
                            class="w-full px-6 py-4 rounded-[24px] border border-pink-50 focus:border-pink-300 focus:ring-4 focus:ring-pink-400/10 transition outline-none bg-white/50 appearance-none cursor-pointer"
                            required>
                            <option value="" disabled selected>Pilih Kategori</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-black text-pink-400 uppercase tracking-widest mb-2 ml-1">
                            Jumlah Stok
                        </label>
                        <input type="number" name="stock"
                            class="w-full px-6 py-4 rounded-[24px] border border-pink-50 focus:border-pink-300 focus:ring-4 focus:ring-pink-400/10 transition outline-none bg-white/50"
                            placeholder="0" required>
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-black text-pink-400 uppercase tracking-widest mb-2 ml-1">
                        Harga Retail
                    </label>
                    <div class="relative">
                        <span class="absolute left-6 top-4 text-pink-300 font-bold">Rp</span>
                        <input type="number" name="price"
                            class="w-full pl-14 pr-6 py-4 rounded-[24px] border border-pink-50 focus:border-pink-300 focus:ring-4 focus:ring-pink-400/10 transition outline-none bg-white/50 font-bold text-slate-700"
                            placeholder="0" required>
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-black text-pink-400 uppercase tracking-widest mb-2 ml-1">
                        Visual ATK
                    </label>
                    <div class="relative group">
                        <input type="file" name="image" id="imageInput" class="hidden" accept="image/*" required>
                        <label for="imageInput"
                            class="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-pink-200 rounded-[32px] cursor-pointer bg-white/30 group-hover:border-pink-400 group-hover:bg-pink-50/50 transition-all overflow-hidden">
                            <div id="placeholderContent" class="flex flex-col items-center">
                                <div class="w-12 h-12 bg-pink-100 text-pink-500 rounded-2xl flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                </div>
                                <p class="text-xs font-bold text-pink-400 uppercase tracking-tighter">
                                    Klik untuk unggah foto ATK
                                </p>
                            </div>
                            <img id="imagePreview" class="hidden w-full h-full object-cover">
                        </label>
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-black text-pink-400 uppercase tracking-widest mb-2 ml-1">
                        Catatan Deskripsi (Opsional)
                    </label>
                    <textarea name="description" rows="3"
                        class="w-full px-6 py-4 rounded-[24px] border border-pink-50 focus:border-pink-300 focus:ring-4 focus:ring-pink-400/10 transition outline-none bg-white/50 resize-none"
                        placeholder="Ceritakan spesifikasi ATK ini, seperti merk, ukuran, warna, dll..."></textarea>
                </div>

                <button type="submit"
                    class="w-full bg-gradient-to-r from-pink-400 to-pink-500 text-white font-black py-5 rounded-[28px] text-lg hover:from-pink-500 hover:to-pink-600 hover:scale-[1.02] active:scale-95 transition transform shadow-xl shadow-pink-200 uppercase tracking-widest">
                    Simpan Koleksi ATK ✨
                </button>
            </form>
        </div>
    </div>

    <script>
        const imageInput = document.getElementById('imageInput');
        const imagePreview = document.getElementById('imagePreview');
        const placeholderContent = document.getElementById('placeholderContent');

        imageInput.onchange = evt => {
            const [file] = imageInput.files;
            if (file) {
                imagePreview.src = URL.createObjectURL(file);
                imagePreview.classList.remove('hidden');
                placeholderContent.classList.add('hidden');
            }
        }
    </script>
</body>
</html>