<x-admin-layout>
    <x-slot name="header">
        <div class="flex items-center gap-4">
            <a href="{{ route('admin.products.index') }}" class="p-2 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 dark:bg-indigo-900/30 rounded-full transition-colors">
                <x-heroicon-o-arrow-left class="w-6 h-6" />
            </a>
            <h2 class="font-bold text-2xl text-gray-900 dark:text-white leading-tight">
                {{ __('Tambah Produk') }}
            </h2>
        </div>
    </x-slot>

    <div class="max-w-5xl">
        <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Main Info -->
                <div class="lg:col-span-2 space-y-6">
                    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden p-8 space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-100 dark:border-slate-700 pb-4 mb-4">Informasi Dasar</h3>
                        
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Nama Produk <span class="text-red-500">*</span></label>
                            <input type="text" name="name" id="name" value="{{ old('name') }}" required
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white dark:border-slate-600"
                                placeholder="Contoh: Template Landing Page SaaS">
                            @error('name') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Deskripsi Singkat</label>
                            <textarea id="description" name="description" rows="3" 
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white dark:border-slate-600" 
                                placeholder="Jelaskan secara singkat maksimal 2-3 kalimat...">{{ old('description') }}</textarea>
                            @error('description') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Deskripsi Lengkap Produk</label>
                            <textarea id="content" name="content" rows="12" 
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white dark:border-slate-600" 
                                placeholder="Tuliskan spesifikasi lengkap, fitur, dan detail produk di sini...">{{ old('content') }}</textarea>
                            @error('content') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <!-- Spesifikasi & Garansi -->
                    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden p-8 space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-100 dark:border-slate-700 pb-4 mb-4">Informasi Spesifikasi & Garansi</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <label for="version" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Versi Produk</label>
                                <input type="text" name="version" id="version" value="{{ old('version') }}" 
                                    class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white dark:border-slate-600"
                                    placeholder="Contoh: v1.0.0">
                                @error('version') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>

                            <div>
                                <label for="format" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Format File</label>
                                <input type="text" name="format" id="format" value="{{ old('format') }}" 
                                    class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white dark:border-slate-600"
                                    placeholder="Contoh: .ZIP">
                                @error('format') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>

                            <div>
                                <label for="framework" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Framework</label>
                                <input type="text" name="framework" id="framework" value="{{ old('framework') }}" 
                                    class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white dark:border-slate-600"
                                    placeholder="Contoh: Laravel 11">
                                @error('framework') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div>
                            <label for="warranty_info" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Deskripsi Garansi Produk</label>
                            <textarea id="warranty_info" name="warranty_info" rows="6" 
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white dark:border-slate-600" 
                                placeholder="Jelaskan garansi produk (opsional, gunakan tag HTML standar jika perlu format list, dsb)...">{{ old('warranty_info') }}</textarea>
                            @error('warranty_info') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden p-8 space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-100 dark:border-slate-700 pb-4 mb-4">File Akses & Harga</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="category_id" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Kategori <span class="text-red-500">*</span></label>
                                <select id="category_id" name="category_id" required class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border bg-white dark:bg-slate-800">
                                    <option value="">Pilih Kategori...</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @error('category_id') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>

                            <div>
                                <label for="price" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Harga (Rp) <span class="text-red-500">*</span></label>
                                <div class="relative rounded-md shadow-sm">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <span class="text-gray-500 dark:text-gray-400 sm:text-sm">Rp</span>
                                    </div>
                                    <input type="number" name="price" id="price" value="{{ old('price', 0) }}" required min="0" step="1000"
                                        class="block w-full pl-10 rounded-lg border-gray-300 dark:border-slate-600 focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white dark:border-slate-600">
                                </div>
                                @error('price') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div>
                            <label for="drive_link" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Link Google Drive (File Produk) <span class="text-red-500">*</span></label>
                            <div class="relative rounded-md shadow-sm">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <x-heroicon-o-link class="h-5 w-5 text-gray-400" />
                                </div>
                                <input type="url" name="drive_link" id="drive_link" value="{{ old('drive_link') }}" required
                                    class="block w-full pl-10 rounded-lg border-gray-300 dark:border-slate-600 focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white dark:border-slate-600"
                                    placeholder="https://drive.google.com/file/d/...">
                            </div>
                            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Link ini hanya akan diberikan kepada user setelah pesanan berstatus paid.</p>
                            @error('drive_link') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>

                <!-- Sidebar form -->
                <div class="space-y-6">
                    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden p-6 space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-100 dark:border-slate-700 pb-3">Thumbnail Produk</h3>
                        <div>
                            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-slate-600 border-dashed rounded-lg bg-gray-50 dark:bg-slate-700/50 relative">
                                <div class="space-y-1 text-center relative z-10">
                                    <x-heroicon-o-photo class="mx-auto h-12 w-12 text-gray-400" />
                                    <div class="flex text-sm text-gray-600 dark:text-gray-300 justify-center">
                                        <label for="thumbnail" class="relative cursor-pointer bg-white dark:bg-slate-800 rounded-md font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500 px-2 py-1">
                                            <span>Upload a file</span>
                                            <input id="thumbnail" name="thumbnail" type="file" class="sr-only dark:bg-slate-700 dark:text-white dark:border-slate-600" accept="image/*">
                                        </label>
                                    </div>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">PNG, JPG, GIF up to 2MB</p>
                                </div>
                            </div>
                            @error('thumbnail') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden p-6 space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-100 dark:border-slate-700 pb-3">Publikasi</h3>
                        <div>
                            <label class="inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="is_active" id="is_active" value="1" class="sr-only peer dark:bg-slate-700 dark:text-white dark:border-slate-600" {{ old('is_active', true) ? 'checked' : '' }}>
                                <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white dark:bg-slate-800 after:border-gray-300 dark:border-slate-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                <span class="ms-3 text-sm font-medium text-gray-700 dark:text-gray-200">Tampilkan ke Publik</span>
                            </label>
                        </div>
                        <div class="pt-4 border-t border-gray-100 dark:border-slate-700 flex flex-col gap-3">
                            <button type="submit" class="w-full flex justify-center items-center px-4 py-2.5 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-lg shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                <x-heroicon-s-check class="w-4 h-4 mr-2" /> Simpan Produk
                            </button>
                            <a href="{{ route('admin.products.index') }}" class="w-full flex justify-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg shadow-sm hover:bg-gray-50 dark:hover:bg-slate-700/50 dark:bg-slate-700/50">
                                Batal
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</x-admin-layout>
