<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
    <div class="xl:col-span-2">
        <div class="bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden">
            <div class="px-6 py-5 border-b border-slate-200">
                <h2 class="text-lg font-bold text-slate-900">Form Barang</h2>
                <p class="text-sm text-slate-500 mt-1">Lengkapi data barang yang bisa diminta oleh staff atau sekretariat.</p>
            </div>

            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Nama Singkatan</label>
                        <input
                            type="text"
                            name="short_name"
                            value="{{ old('short_name', $requestItem->short_name ?? '') }}"
                            placeholder="Contoh: Kabel LAN"
                            class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                            required>
                        @error('short_name')
                        <p class="text-rose-600 text-sm mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Nama Lengkap</label>
                        <input
                            type="text"
                            name="full_name"
                            value="{{ old('full_name', $requestItem->full_name ?? '') }}"
                            placeholder="Contoh: Local Area Network"
                            class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                            required>
                        @error('full_name')
                        <p class="text-rose-600 text-sm mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Satuan</label>
                        @php $selectedUnit = old('unit', $requestItem->unit ?? 'pcs'); @endphp
                        <select
                            name="unit"
                            class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                            required>
                            <option value="pcs" {{ $selectedUnit == 'pcs' ? 'selected' : '' }}>pcs</option>
                            <option value="unit" {{ $selectedUnit == 'unit' ? 'selected' : '' }}>unit</option>
                            <option value="meter" {{ $selectedUnit == 'meter' ? 'selected' : '' }}>meter</option>
                        </select>
                        @error('unit')
                        <p class="text-rose-600 text-sm mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Stok</label>
                        <input
                            type="number"
                            step="0.01"
                            min="0"
                            name="stock"
                            value="{{ old('stock', $requestItem->stock ?? 0) }}"
                            placeholder="Masukkan jumlah stok"
                            class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                            required>
                        @error('stock')
                        <p class="text-rose-600 text-sm mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Stok Minimum</label>
                        <input
                            type="number"
                            step="0.01"
                            min="0"
                            name="min_stock"
                            value="{{ old('min_stock', $requestItem->min_stock ?? 0) }}"
                            placeholder="Batas minimum stok"
                            class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                            required>
                        <p class="text-xs text-slate-500 mt-2">Saat stok menyentuh angka ini atau lebih rendah, barang akan ditandai untuk segera ditambah.</p>
                        @error('min_stock')
                        <p class="text-rose-600 text-sm mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Upload Gambar Barang</label>
                        <input
                            type="file"
                            id="image_file"
                            name="image_file"
                            accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
                            class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-slate-900 file:mr-4 file:rounded-xl file:border-0 file:bg-blue-600 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-white hover:file:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <p class="text-xs text-slate-500 mt-2">Format yang didukung: JPG, JPEG, PNG, WEBP. Maksimal 2 MB.</p>
                        @error('image_file')
                        <p class="text-rose-600 text-sm mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Deskripsi</label>
                        <textarea
                            name="description"
                            rows="4"
                            placeholder="Tuliskan deskripsi singkat barang..."
                            class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none">{{ old('description', $requestItem->description ?? '') }}</textarea>
                        @error('description')
                        <p class="text-rose-600 text-sm mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label class="inline-flex items-center gap-3 cursor-pointer">
                            <input
                                type="checkbox"
                                name="is_active"
                                value="1"
                                class="w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
                                {{ old('is_active', $requestItem->is_active ?? true) ? 'checked' : '' }}>
                            <span class="text-sm font-semibold text-slate-700">Barang aktif</span>
                        </label>
                    </div>
                </div>

                <div class="flex flex-col sm:flex-row gap-3 mt-8">
                    <button
                        type="submit"
                        class="inline-flex justify-center items-center gap-2 px-6 py-3 rounded-2xl bg-blue-600 text-white font-semibold hover:bg-blue-700 transition">
                        Simpan
                    </button>

                    <a
                        href="{{ route('admin.request-items.index') }}"
                        class="inline-flex justify-center items-center gap-2 px-6 py-3 rounded-2xl border border-slate-300 text-slate-700 font-semibold hover:bg-slate-50 transition">
                        Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="xl:col-span-1">
        <div class="bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden sticky top-6">
            <div class="px-6 py-5 border-b border-slate-200">
                <h2 class="text-lg font-bold text-slate-900">Preview Gambar</h2>
                <p class="text-sm text-slate-500 mt-1">Preview akan muncul otomatis saat file dipilih.</p>
            </div>

            <div class="p-6">
                <div class="rounded-3xl border border-dashed border-slate-300 bg-slate-50 p-4">
                    <img
                        id="image_preview"
                        src="{{ old('image_url', $requestItem->image_url ?? 'https://via.placeholder.com/500x320?text=Preview+Gambar') }}"
                        data-default-src="{{ old('image_url', $requestItem->image_url ?? 'https://via.placeholder.com/500x320?text=Preview+Gambar') }}"
                        alt="Preview Gambar"
                        class="w-full h-72 object-cover rounded-2xl bg-white"
                        onerror="this.onerror=null;this.src='https://via.placeholder.com/500x320?text=Gambar+Tidak+Valid';">
                </div>

                <div class="mt-4 space-y-3">
                    <div class="rounded-2xl bg-blue-50 border border-blue-100 p-4">
                        <div class="text-sm font-semibold text-blue-700 mb-1">Tips gambar</div>
                        <ul class="text-sm text-blue-600 space-y-1">
                            <li>• Upload gambar produk yang jelas</li>
                            <li>• Gunakan format .jpg, .png, atau .webp</li>
                            <li>• Gambar akan disimpan otomatis ke folder storage</li>
                        </ul>
                    </div>

                    <div class="rounded-2xl bg-slate-50 border border-slate-200 p-4">
                        <div class="text-sm font-semibold text-slate-700 mb-2">Contoh hasil nama</div>
                        <div id="display_name_preview" class="text-sm text-slate-600">
                            {{ old('short_name', $requestItem->short_name ?? 'Nama Singkatan') }}
                            ({{ old('full_name', $requestItem->full_name ?? 'Nama Lengkap') }})
                        </div>
                    </div>

                    <div class="rounded-2xl bg-rose-50 border border-rose-100 p-4">
                        <div class="text-sm font-semibold text-rose-700 mb-1">Mitigasi stok</div>
                        <div class="text-xs text-rose-600 leading-relaxed">
                            Tentukan stok minimum agar sistem memberi tanda saat persediaan mulai kritis dan perlu segera ditambah oleh sekretariat.
                        </div>
                    </div>

                    @if(!empty($requestItem?->image_url))
                    <div class="rounded-2xl bg-emerald-50 border border-emerald-100 p-4">
                        <div class="text-sm font-semibold text-emerald-700 mb-1">Gambar saat ini</div>
                        <div class="text-xs text-emerald-600 break-all">{{ $requestItem->image_url }}</div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function initRequestItemPreview() {
        const imageFileInput = document.getElementById('image_file');
        const imagePreview = document.getElementById('image_preview');
        const shortNameInput = document.querySelector('input[name="short_name"]');
        const fullNameInput = document.querySelector('input[name="full_name"]');
        const displayNamePreview = document.getElementById('display_name_preview');

        function updateDisplayNamePreview() {
            if (!displayNamePreview) return;
            const shortName = shortNameInput && shortNameInput.value
                ? shortNameInput.value.trim()
                : 'Nama Singkatan';
            const fullName = fullNameInput && fullNameInput.value
                ? fullNameInput.value.trim()
                : 'Nama Lengkap';

            displayNamePreview.textContent = shortName + ' (' + fullName + ')';
        }

        function updateImagePreviewFromFile() {
            if (!imageFileInput || !imagePreview) return;

            const file = imageFileInput.files[0];
            if (!file) {
                imagePreview.src = imagePreview.getAttribute('data-default-src');
                return;
            }

            if (!file.type || file.type.indexOf('image/') !== 0) {
                imagePreview.src = 'https://via.placeholder.com/500x320?text=Format+Tidak+Didukung';
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }

        if (imageFileInput) {
            imageFileInput.addEventListener('change', updateImagePreviewFromFile);
        }

        if (shortNameInput) {
            shortNameInput.addEventListener('input', updateDisplayNamePreview);
        }

        if (fullNameInput) {
            fullNameInput.addEventListener('input', updateDisplayNamePreview);
        }

        updateDisplayNamePreview();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initRequestItemPreview);
    } else {
        initRequestItemPreview();
    }
</script>
