<?php if($errors->any()): ?>
    <div class="alert">
        <h3>Terdapat kesalahan pada input Anda:</h3>
        <ul>
            <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <li><?php echo e($error); ?></li>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </ul>
    </div>
<?php endif; ?>

<div class="form-layout">
    <div class="form-main">
        <div class="form-section">
            <div class="section-head">
                <h3 class="section-title">Informasi Utama</h3>
                <span class="section-dot" aria-hidden="true"></span>
            </div>

            <div class="form-grid">
                <div class="form-group">
                    <label class="label" for="short_name">Nama Singkatan <span class="text-red-500">*</span></label>
                    <input
                        id="short_name"
                        type="text"
                        name="short_name"
                        value="<?php echo e(old('short_name', $requestItem->short_name ?? '')); ?>"
                        placeholder="Contoh: Kabel LAN"
                        class="input"
                        required>
                </div>

                <div class="form-group">
                    <label class="label" for="full_name">Nama Lengkap <span class="text-red-500">*</span></label>
                    <input
                        id="full_name"
                        type="text"
                        name="full_name"
                        value="<?php echo e(old('full_name', $requestItem->full_name ?? '')); ?>"
                        placeholder="Contoh: Local Area Network"
                        class="input"
                        required>
                </div>

                <div class="form-group">
                    <label class="label" for="unit">Satuan <span class="text-red-500">*</span></label>
                    <?php
                        $selectedUnit = old('unit', $requestItem->unit ?? 'pcs');
                        $unitOptions = [
                            'pcs',
                            'unit',
                            'buah',
                            'set',
                            'paket',
                            'box',
                            'dus',
                            'karton',
                            'rim',
                            'lembar',
                            'roll',
                            'meter',
                            'kg',
                            'gram',
                            'liter',
                            'ml',
                            'botol',
                            'kaleng',
                            'tube',
                            'pack',
                            'sachet',
                            'pasang',
                            'lusin',
                            'batang',
                            'keping',
                        ];
                    ?>
                    <select id="unit" name="unit" class="select" required>
                        <?php $__currentLoopData = $unitOptions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $unitOption): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($unitOption); ?>" <?php echo e($selectedUnit == $unitOption ? 'selected' : ''); ?>><?php echo e($unitOption); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>

                <div class="form-group">
                    <label class="label">Status Barang</label>
                    <label class="toggle-card cursor-pointer">
                        <span>
                            <span class="block text-sm font-black text-slate-900">Barang aktif</span>
                            <span class="block text-xs text-slate-500 mt-1">Bisa dipilih user saat membuat permintaan.</span>
                        </span>
                        <input
                            type="checkbox"
                            name="is_active"
                            value="1"
                            class="toggle-input"
                            <?php echo e(old('is_active', $requestItem->is_active ?? true) ? 'checked' : ''); ?>>
                    </label>
                </div>

                <div class="form-group span-2">
                    <label class="label" for="description">Deskripsi</label>
                    <textarea
                        id="description"
                        name="description"
                        rows="4"
                        placeholder="Tuliskan deskripsi singkat barang..."
                        class="textarea"><?php echo e(old('description', $requestItem->description ?? '')); ?></textarea>
                </div>
            </div>
        </div>

        <div class="form-section">
            <div class="section-head">
                <h3 class="section-title">Stok</h3>
                <span class="section-dot" aria-hidden="true"></span>
            </div>

            <div class="stock-grid">
                <div class="stock-card">
                    <label class="label" for="stock">Stok <span class="text-red-500">*</span></label>
                    <input
                        id="stock"
                        type="number"
                        step="0.01"
                        min="0"
                        name="stock"
                        value="<?php echo e(old('stock', $requestItem->stock ?? 0)); ?>"
                        placeholder="Masukkan jumlah stok"
                        class="input"
                        required>
                    <p class="hint">Jumlah barang yang tersedia untuk permintaan.</p>
                </div>

                <div class="stock-card">
                    <label class="label" for="min_stock">Stok Minimum <span class="text-red-500">*</span></label>
                    <input
                        id="min_stock"
                        type="number"
                        step="0.01"
                        min="0"
                        name="min_stock"
                        value="<?php echo e(old('min_stock', $requestItem->min_stock ?? 0)); ?>"
                        placeholder="Batas minimum stok"
                        class="input"
                        required>
                    <p class="hint">Sistem menandai barang saat stok menyentuh batas ini.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="aside-stack">
        <div class="form-section photo-section">
            <div class="section-head">
                <h3 class="section-title">Foto Barang</h3>
                <span class="section-dot" aria-hidden="true"></span>
            </div>

            <div class="upload-grid">
                <div class="preview-box">
                    <?php $currentImage = old('image_url', $requestItem->image_url ?? null); ?>

                    <img
                        id="image_preview"
                        src="<?php echo e($currentImage ?: ''); ?>"
                        data-default-src="<?php echo e($currentImage ?: ''); ?>"
                        alt="Preview Gambar"
                        class="<?php echo e($currentImage ? '' : 'hidden'); ?>"
                        onerror="this.classList.add('hidden');document.getElementById('image_preview_placeholder')?.classList.remove('hidden');">

                    <div id="image_preview_placeholder" class="preview-placeholder <?php echo e($currentImage ? 'hidden' : ''); ?>">
                        <i data-lucide="image" class="w-10 h-10"></i>
                        <div>
                            <div class="font-semibold text-slate-600">Preview</div>
                            <div class="hint">Belum ada foto.</div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="label" for="image_file">Unggah Foto</label>
                    <input
                        type="file"
                        id="image_file"
                        name="image_file"
                        accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
                        class="file-input">
                    <p class="hint">Gunakan JPG, PNG, JPEG, atau WEBP. Ukuran foto tidak boleh lebih dari 2MB agar upload tetap cepat.</p>
                </div>
            </div>
        </div>

        <div class="form-section">
            <div class="section-head">
                <h3 class="section-title">Preview Nama</h3>
                <span class="section-dot" aria-hidden="true"></span>
            </div>
            <div class="side-note">
                <div class="side-label">Nama Tampil</div>
                <div id="display_name_preview" class="side-value">
                    <?php echo e(old('short_name', $requestItem->short_name ?? 'Nama Singkatan')); ?>

                    (<?php echo e(old('full_name', $requestItem->full_name ?? 'Nama Lengkap')); ?>)
                </div>
            </div>
        </div>
    </div>
</div>

<div class="footer-actions">
    <a href="<?php echo e(route('admin.request-items.index')); ?>" class="action-btn soft">Batal</a>
    <button type="submit" class="submit-btn">
        <i data-lucide="save" class="w-4 h-4"></i>
        Simpan Barang
    </button>
</div>

<script>
    function initRequestItemPreview() {
        const imageFileInput = document.getElementById('image_file');
        const imagePreview = document.getElementById('image_preview');
        const imagePreviewPlaceholder = document.getElementById('image_preview_placeholder');
        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');
                imagePreview.classList.toggle('hidden', !imagePreview.src);
                imagePreviewPlaceholder?.classList.toggle('hidden', !!imagePreview.src);
                return;
            }

            if (!file.type || file.type.indexOf('image/') !== 0) {
                imagePreview.src = '';
                imagePreview.classList.add('hidden');
                imagePreviewPlaceholder?.classList.remove('hidden');
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                imagePreview.classList.remove('hidden');
                imagePreviewPlaceholder?.classList.add('hidden');
            };
            reader.readAsDataURL(file);
        }

        imageFileInput?.addEventListener('change', updateImagePreviewFromFile);
        shortNameInput?.addEventListener('input', updateDisplayNamePreview);
        fullNameInput?.addEventListener('input', updateDisplayNamePreview);

        updateDisplayNamePreview();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initRequestItemPreview);
    } else {
        initRequestItemPreview();
    }
</script>
<?php /**PATH /Users/Afifudin/Downloads/Magang/SIpian_2026-05-06/resources/views/admin/request-items/_form.blade.php ENDPATH**/ ?>