<!-- Sparepart Form Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 relative">
    <button type="button"
        class="absolute top-4 right-4 bg-red-500 hover:bg-red-600 text-white rounded-lg w-8 h-8 flex items-center justify-center transition-colors duration-200"
        onclick="removeItem(this)">
        <i class="fas fa-times text-sm"></i>
    </button>

    <!-- Header Card -->
    <div class="flex items-center mb-5">
        <h3 class="text-base font-semibold text-gray-800 dark:text-white">Informasi Sparepart</h3>
    </div>

    <!-- Basic Information -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mb-5">
        <!-- Kode Sparepart -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Kode Sparepart</label>
            <input type="text" name="spareparts[<?php echo e($index); ?>][part_code]"
                class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition duration-200 text-sm"
                placeholder="Jika kosong, otomatis dibuat unik">
        </div>

        <!-- Nama Sparepart -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Nama Sparepart <span class="text-red-500">*</span>
            </label>
            <input type="text" name="spareparts[<?php echo e($index); ?>][name]" required
                class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition duration-200 text-sm"
                placeholder="Masukkan nama sparepart">
        </div>

        <!-- Brand -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Brand</label>
            <input type="text" name="spareparts[<?php echo e($index); ?>][brand]"
                class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition duration-200 text-sm"
                placeholder="Merk / brand">
        </div>
    </div>

    <!-- Additional Information -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mb-5">
        <!-- Tipe -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tipe</label>
            <input type="text" name="spareparts[<?php echo e($index); ?>][type]"
                class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition duration-200 text-sm"
                placeholder="Tipe sparepart">
        </div>

        <!-- Part Number -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Part Number</label>
            <input type="text" name="spareparts[<?php echo e($index); ?>][part_number]"
                class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition duration-200 text-sm"
                placeholder="Nomor part">
        </div>

        <!-- Stok -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Stok <span class="text-red-500">*</span>
            </label>
            <input type="number" name="spareparts[<?php echo e($index); ?>][stock]" min="0" required
                class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition duration-200 text-sm"
                placeholder="0">
        </div>
    </div>

    <!-- Stock & Pricing -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-5">
        <!-- Satuan -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Satuan</label>
            <input type="text" name="spareparts[<?php echo e($index); ?>][unit]"
                class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition duration-200 text-sm"
                placeholder="cth: pcs, unit, set">
        </div>

        <!-- Harga -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Harga Satuan (Rp)</label>
            <input type="number" name="spareparts[<?php echo e($index); ?>][price]" min="0" step="0.01"
                class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition duration-200 text-sm"
                placeholder="cth: 50000">
        </div>

        <!-- Status -->
        <div class="flex items-center">
            <input type="checkbox" name="spareparts[<?php echo e($index); ?>][is_active]" value="1" checked
                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700">
            <label class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-300">Aktif</label>
        </div>
    </div>

    <!-- Description & Image -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-5">
        <!-- Deskripsi -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Deskripsi</label>
            <textarea name="spareparts[<?php echo e($index); ?>][description]" rows="4"
                class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition duration-200 resize-none text-sm"
                placeholder="Tuliskan deskripsi sparepart jika perlu..."></textarea>
        </div>

        <!-- Gambar -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Gambar</label>
            <div class="space-y-3">
                <input type="file" name="spareparts[<?php echo e($index); ?>][image]" accept="image/*" onchange="previewImage(this)"
                    class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition duration-200 text-sm">
                
                <!-- Image Preview -->
                <div class="relative inline-block w-full max-w-xs">
                    <img src="" alt="Preview" 
                        class="w-full h-48 object-contain rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/50 hidden"
                        style="background: transparent;">
                    
                    <!-- Remove Button -->
                    <button type="button" onclick="removeImage(this)"
                        class="absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-lg w-8 h-8 flex items-center justify-center transition-colors duration-200 hidden">
                        <i class="fas fa-times text-sm"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<?php /**PATH /home/mikr8192/public_html/poljamtech.mikromart.org/poljamtech/resources/views/admin/master/materials/partials/sparepart-form.blade.php ENDPATH**/ ?>