@extends('layouts.app')

@section('title', 'Tambah Produk')

@section('content')
<div class="container mx-auto px-4 py-6">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Tambah Produk</h1>
            <p class="text-sm text-gray-600 mt-1">Tambahkan produk baru ke dalam sistem</p>
        </div>
        <a href="{{ route('products.index') }}" 
           class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition duration-200 flex items-center">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Kembali
        </a>
    </div>

    <!-- Form -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data" class="p-6">
            @csrf
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Left Column -->
                <div class="space-y-6">
                    <!-- Basic Information -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Informasi Dasar</h3>
                        
                        <!-- Product Name -->
                        <div class="mb-4">
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Nama Produk *</label>
                            <input type="text" 
                                   id="name" 
                                   name="name" 
                                   value="{{ old('name') }}"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 @error('name') border-red-500 @enderror"
                                   placeholder="Masukkan nama produk"
                                   required>
                            @error('name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- SKU -->
                        <div class="mb-4">
                            <label for="sku" class="block text-sm font-medium text-gray-700 mb-2">SKU *</label>
                            <input type="text" 
                                   id="sku" 
                                   name="sku" 
                                   value="{{ old('sku') }}"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 @error('sku') border-red-500 @enderror"
                                   placeholder="Masukkan SKU produk"
                                   required>
                            @error('sku')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Barcode -->
                        <div class="mb-4">
                            <label for="barcode" class="block text-sm font-medium text-gray-700 mb-2">Barcode</label>
                            <div class="flex gap-2">
                                <input type="text" 
                                       id="barcode" 
                                       name="barcode" 
                                       value="{{ old('barcode') }}"
                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 @error('barcode') border-red-500 @enderror"
                                       placeholder="Masukkan barcode produk">
                                <button type="button" 
                                        id="scanBarcodeBtn"
                                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition duration-200 flex items-center">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    </svg>
                                    Scan
                                </button>
                            </div>
                            @error('barcode')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Category -->
                        <div class="mb-4">
                            <label for="category_id" class="block text-sm font-medium text-gray-700 mb-2">Kategori *</label>
                            <select id="category_id" 
                                    name="category_id" 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 @error('category_id') border-red-500 @enderror"
                                    required>
                                <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-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div class="mb-4">
                            <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Deskripsi</label>
                            <textarea id="description" 
                                      name="description" 
                                      rows="3"
                                      class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 @error('description') border-red-500 @enderror"
                                      placeholder="Masukkan deskripsi produk">{{ old('description') }}</textarea>
                            @error('description')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Right Column -->
                <div class="space-y-6">
                    <!-- Pricing & Stock -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Harga & Stok</h3>
                        
                        <!-- Price -->
                        <div class="mb-4">
                            <label for="price" class="block text-sm font-medium text-gray-700 mb-2">Harga *</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <span class="text-gray-500 sm:text-sm">Rp</span>
                                </div>
                                <input type="text" 
                                       id="price" 
                                       name="price" 
                                       value="{{ old('price') }}"
                                       class="w-full pl-12 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 @error('price') border-red-500 @enderror"
                                       placeholder="0"
                                       required>
                                <input type="hidden" id="price_raw" name="price_raw" value="{{ old('price') }}">
                            </div>
                            @error('price')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Stock -->
                        <div class="mb-4" id="stock-field">
                            <label for="stock" class="block text-sm font-medium text-gray-700 mb-2">Stok *</label>
                            <input type="number" 
                                   id="stock" 
                                   name="stock" 
                                   value="{{ old('stock') }}"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 @error('stock') border-red-500 @enderror"
                                   placeholder="0"
                                   min="0">
                            @error('stock')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Min Stock -->
                        <div class="mb-4" id="min-stock-field">
                            <label for="min_stock" class="block text-sm font-medium text-gray-700 mb-2">Stok Minimum *</label>
                            <input type="number" 
                                   id="min_stock" 
                                   name="min_stock" 
                                   value="{{ old('min_stock', 5) }}"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 @error('min_stock') border-red-500 @enderror"
                                   placeholder="5"
                                   min="0">
                            @error('min_stock')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Unit -->
                        <div class="mb-4">
                            <label for="unit" class="block text-sm font-medium text-gray-700 mb-2">Satuan *</label>
                            <select id="unit" 
                                    name="unit" 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 @error('unit') border-red-500 @enderror"
                                    required>
                                <option value="">Pilih Satuan</option>
                                <option value="pcs" {{ old('unit') == 'pcs' ? 'selected' : '' }}>Pcs</option>
                                <option value="kg" {{ old('unit') == 'kg' ? 'selected' : '' }}>Kg</option>
                                <option value="gram" {{ old('unit') == 'gram' ? 'selected' : '' }}>Gram</option>
                                <option value="liter" {{ old('unit') == 'liter' ? 'selected' : '' }}>Liter</option>
                                <option value="ml" {{ old('unit') == 'ml' ? 'selected' : '' }}>ML</option>
                                <option value="box" {{ old('unit') == 'box' ? 'selected' : '' }}>Box</option>
                                <option value="pack" {{ old('unit') == 'pack' ? 'selected' : '' }}>Pack</option>
                            </select>
                            @error('unit')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Image & Status -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Gambar & Status</h3>
                        
                        <!-- Image Upload -->
                        <div class="mb-4">
                            <label for="image" class="block text-sm font-medium text-gray-700 mb-2">Gambar Produk</label>
                            
                            <!-- Upload Area -->
                            <div id="upload-area" class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-gray-400 transition-colors cursor-pointer">
                                <div class="space-y-1 text-center">
                                    <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <div class="flex text-sm text-gray-600">
                                        <label for="image" class="relative cursor-pointer bg-white rounded-md font-medium text-primary-600 hover:text-primary-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary-500">
                                            <span>Upload gambar</span>
                                            <input id="image" name="image" type="file" class="sr-only" accept="image/*">
                        </label>
                        <p class="pl-1">atau drag and drop</p>
                    </div>
                    <p class="text-xs text-gray-500">PNG, JPG, GIF hingga 2MB</p>
                </div>
            </div>
            

                            
                            <!-- Preview Area (Hidden by default) -->
                            <div id="preview-area" class="mt-1 hidden">
                                <div class="relative">
                                    <img id="image-preview" class="w-full h-48 object-cover rounded-lg border border-gray-300" src="" alt="Preview">
                                    <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center">
                                        <div class="flex space-x-2">
                                            <button type="button" id="change-image" class="bg-white text-gray-700 px-3 py-1 rounded text-sm hover:bg-gray-100 transition-colors">
                                                Ganti
                                            </button>
                                            <button type="button" id="remove-image" class="bg-red-500 text-white px-3 py-1 rounded text-sm hover:bg-red-600 transition-colors">
                                                Hapus
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-2 text-sm text-gray-600 text-center">
                                    <div class="flex justify-between items-center">
                                        <span id="image-name"></span>
                                        <span id="image-size" class="text-xs bg-gray-100 px-2 py-1 rounded"></span>
                                    </div>
                                    <div id="image-dimensions" class="text-xs text-gray-500 mt-1"></div>
                                </div>
                            </div>
                            
                            @error('image')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
            

                        </div>

                        <!-- Status -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                            <div class="flex items-center">
                                <input type="checkbox" 
                                       id="is_active" 
                                       name="is_active" 
                                       value="1"
                                       {{ old('is_active', true) ? 'checked' : '' }}
                                       class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
                                <label for="is_active" class="ml-2 block text-sm text-gray-900">
                                    Produk Aktif
                                </label>
                            </div>
                            <p class="mt-1 text-xs text-gray-500">Produk aktif akan muncul dalam pencarian dan dapat dijual</p>
                        </div>

                        <!-- Track Stock -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Tracking Stok</label>
                            <div class="flex items-center">
                                <input type="checkbox" 
                                       id="track_stock" 
                                       name="track_stock" 
                                       value="1"
                                       {{ old('track_stock', true) ? 'checked' : '' }}
                                       class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
                                       onchange="toggleStockFields()">
                                <label for="track_stock" class="ml-2 block text-sm text-gray-900">
                                    Lacak Stok Produk
                                </label>
                            </div>
                            <p class="mt-1 text-xs text-gray-500">Jika diaktifkan, sistem akan melacak dan mengurangi stok saat terjadi transaksi</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200 mt-6">
                <a href="{{ route('products.index') }}" 
                   class="bg-gray-300 hover:bg-gray-400 text-gray-700 px-6 py-2 rounded-lg transition duration-200">
                    Batal
                </a>
                <button type="submit" 
                        class="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition duration-200 flex items-center justify-center">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    Simpan Produk
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Barcode Scanner Modal -->
<div id="barcodeScannerModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">Scan Barcode</h3>
                <button id="closeScannerBtn" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div id="scanner-container" class="relative">
                <div id="interactive" class="viewport w-full h-64 bg-gray-100 rounded-lg overflow-hidden"></div>
                <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                    <div class="border-2 border-red-500 w-48 h-32 rounded-lg opacity-50"></div>
                </div>
            </div>
            <div class="mt-4 text-center">
                <p class="text-sm text-gray-600">Arahkan kamera ke barcode untuk melakukan scan</p>
                <div id="scanResult" class="mt-2 text-green-600 font-medium hidden"></div>
            </div>
            <div class="flex justify-end mt-6 space-x-3">
                <button id="cancelScanBtn" class="bg-gray-300 hover:bg-gray-400 text-gray-700 px-4 py-2 rounded-lg transition duration-200">
                    Batal
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Image preview functionality
const imageInput = document.getElementById('image');
const uploadArea = document.getElementById('upload-area');
const previewArea = document.getElementById('preview-area');
const imagePreview = document.getElementById('image-preview');
const imageName = document.getElementById('image-name');
const changeImageBtn = document.getElementById('change-image');
const removeImageBtn = document.getElementById('remove-image');

// Handle file selection
function handleFileSelect(file) {
    if (file && file.type.startsWith('image/')) {
        // Check file size (max 2MB)
        const maxSize = 2 * 1024 * 1024; // 2MB in bytes
        if (file.size > maxSize) {
            showFileSizeError(file.size, maxSize);
            return;
        }
        
        const reader = new FileReader();
        reader.onload = function(e) {
            imagePreview.src = e.target.result;
            imageName.textContent = file.name;
            
            // Display file size
            const fileSize = formatFileSize(file.size);
            const imageSizeElement = document.getElementById('imageSize');
            if (imageSizeElement) {
                imageSizeElement.textContent = fileSize;
                
                // Color code based on file size
                if (file.size > maxSize * 0.8) { // > 1.6MB
                    imageSizeElement.className = 'text-xs bg-orange-100 text-orange-700 px-2 py-1 rounded';
                } else if (file.size > maxSize * 0.5) { // > 1MB
                    imageSizeElement.className = 'text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded';
                } else {
                    imageSizeElement.className = 'text-xs bg-green-100 text-green-700 px-2 py-1 rounded';
                }
            }
            
            // Get image dimensions
            const img = new Image();
            img.onload = function() {
                const imageDimensionsElement = document.getElementById('imageDimensions');
                if (imageDimensionsElement) {
                    imageDimensionsElement.textContent = `${this.width} × ${this.height} pixels`;
                }
            };
            img.src = e.target.result;
            
            uploadArea.classList.add('hidden');
            previewArea.classList.remove('hidden');
        };
        reader.readAsDataURL(file);
    } else {
        showFileTypeError();
    }
}

// Show file size error
function showFileSizeError(fileSize, maxSize) {
    const errorDiv = document.createElement('div');
    errorDiv.className = 'fixed top-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded z-50 max-w-sm';
    errorDiv.innerHTML = `
        <div class="flex items-start">
            <svg class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
            <div>
                <strong>File terlalu besar!</strong><br>
                <span class="text-sm">
                    Ukuran file: <strong>${formatFileSize(fileSize)}</strong><br>
                    Maksimal: <strong>${formatFileSize(maxSize)}</strong><br>
                    Silakan pilih gambar yang lebih kecil atau kompres terlebih dahulu.
                </span>
            </div>
        </div>
    `;
    
    document.body.appendChild(errorDiv);
    
    // Remove error message after 8 seconds
    setTimeout(() => {
        if (errorDiv.parentNode) {
            errorDiv.parentNode.removeChild(errorDiv);
        }
    }, 8000);
}

// Show file type error
function showFileTypeError() {
    const errorDiv = document.createElement('div');
    errorDiv.className = 'fixed top-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded z-50';
    errorDiv.innerHTML = `
        <div class="flex items-center">
            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
            <div>
                <strong>Format file tidak didukung!</strong><br>
                <span class="text-sm">Silakan pilih file gambar (JPG, PNG, GIF, WebP)</span>
            </div>
        </div>
    `;
    
    document.body.appendChild(errorDiv);
    
    setTimeout(() => {
        if (errorDiv.parentNode) {
            errorDiv.parentNode.removeChild(errorDiv);
        }
    }, 5000);
}

// Format file size helper function
function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// File input change event
imageInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        handleFileSelect(file);
    }
});

// Click upload area to trigger file input
uploadArea.addEventListener('click', function() {
    imageInput.click();
});

// Drag and drop functionality
uploadArea.addEventListener('dragover', function(e) {
    e.preventDefault();
    uploadArea.classList.add('border-primary-500', 'bg-primary-50');
});

uploadArea.addEventListener('dragleave', function(e) {
    e.preventDefault();
    uploadArea.classList.remove('border-primary-500', 'bg-primary-50');
});

uploadArea.addEventListener('drop', function(e) {
    e.preventDefault();
    uploadArea.classList.remove('border-primary-500', 'bg-primary-50');
    
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        imageInput.files = files;
        handleFileSelect(files[0]);
    }
});

// Change image button
changeImageBtn.addEventListener('click', function() {
    imageInput.click();
});

// Remove image button
removeImageBtn.addEventListener('click', function() {
    imageInput.value = '';
    imagePreview.src = '';
    imageName.textContent = '';
    previewArea.classList.add('hidden');
    uploadArea.classList.remove('hidden');
});

// Auto-generate SKU from product name
document.getElementById('name').addEventListener('input', function(e) {
    const name = e.target.value;
    const skuField = document.getElementById('sku');
    
    if (name && !skuField.value) {
        // Generate SKU from first 3 characters + random number
        const prefix = name.substring(0, 3).toUpperCase().replace(/[^A-Z]/g, '');
        const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
        skuField.value = prefix + random;
    }
});

// Validasi client-side sebelum submit
document.querySelector('form').addEventListener('submit', function(e) {
    const requiredFields = [
        { id: 'name', label: 'Nama Produk' },
        { id: 'sku', label: 'SKU' },
        { id: 'barcode', label: 'Barcode' },
        { id: 'price', label: 'Harga' },
        { id: 'category_id', label: 'Kategori' }
    ];
    
    let hasError = false;
    let errorMessages = [];
    
    // Reset previous error styles
    requiredFields.forEach(field => {
        const input = document.getElementById(field.id);
        if (input) {
            input.classList.remove('border-red-500');
        }
    });
    
    // Validate required fields
    requiredFields.forEach(field => {
        const input = document.getElementById(field.id);
        if (input && !input.value.trim()) {
            hasError = true;
            input.classList.add('border-red-500');
            errorMessages.push(field.label);
        }
    });
    
    // Validate price is positive number
    const priceInput = document.getElementById('price');
    if (priceInput && priceInput.value && (isNaN(priceInput.value) || parseFloat(priceInput.value) <= 0)) {
        hasError = true;
        priceInput.classList.add('border-red-500');
        if (!errorMessages.includes('Harga')) {
            errorMessages.push('Harga (harus berupa angka positif)');
        }
    }
    
    // Validate stock if track_stock is enabled
    const trackStockCheckbox = document.querySelector('input[name="track_stock"]');
    const stockInput = document.getElementById('stock');
    if (trackStockCheckbox && trackStockCheckbox.checked && stockInput && !stockInput.value.trim()) {
        hasError = true;
        stockInput.classList.add('border-red-500');
        errorMessages.push('Stok (wajib diisi jika pelacakan stok diaktifkan)');
    }
    
    if (hasError) {
        e.preventDefault();
        
        // Show error message
        const errorDiv = document.createElement('div');
        errorDiv.className = 'fixed top-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded z-50';
        errorDiv.innerHTML = `
            <div class="flex items-center">
                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                </svg>
                <div>
                    <strong>Mohon lengkapi field berikut:</strong><br>
                    ${errorMessages.join(', ')}
                </div>
            </div>
        `;
        
        document.body.appendChild(errorDiv);
        
        // Remove error message after 5 seconds
        setTimeout(() => {
            if (errorDiv.parentNode) {
                errorDiv.parentNode.removeChild(errorDiv);
            }
        }, 5000);
        
        // Scroll to first error field
        const firstErrorField = document.querySelector('.border-red-500');
        if (firstErrorField) {
            firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
            firstErrorField.focus();
        }
    }
});

// Remove error styling when user starts typing
const watchedFields = ['name', 'sku', 'barcode', 'price', 'category_id', 'stock'];
watchedFields.forEach(fieldId => {
    const field = document.getElementById(fieldId);
    if (field) {
        field.addEventListener('input', function() {
            this.classList.remove('border-red-500');
        });
        field.addEventListener('change', function() {
            this.classList.remove('border-red-500');
        });
    }
});



// Toggle stock fields based on track_stock checkbox
function toggleStockFields() {
    const trackStockCheckbox = document.getElementById('track_stock');
    const stockField = document.getElementById('stock-field');
    const minStockField = document.getElementById('min-stock-field');
    const stockInput = document.getElementById('stock');
    const minStockInput = document.getElementById('min_stock');
    
    if (trackStockCheckbox.checked) {
        stockField.style.display = 'block';
        minStockField.style.display = 'block';
        stockInput.required = true;
        minStockInput.required = true;
    } else {
        stockField.style.display = 'none';
        minStockField.style.display = 'none';
        stockInput.required = false;
        minStockInput.required = false;
        stockInput.value = '0';
        minStockInput.value = '0';
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleStockFields();
});

// Barcode Scanner Functions
let scannerActive = false;

document.getElementById('scanBarcodeBtn').addEventListener('click', function() {
    document.getElementById('barcodeScannerModal').classList.remove('hidden');
    startBarcodeScanner();
});

document.getElementById('closeScannerBtn').addEventListener('click', function() {
    stopBarcodeScanner();
    document.getElementById('barcodeScannerModal').classList.add('hidden');
});

document.getElementById('cancelScanBtn').addEventListener('click', function() {
    stopBarcodeScanner();
    document.getElementById('barcodeScannerModal').classList.add('hidden');
});

function startBarcodeScanner() {
    if (scannerActive) return;
    
    scannerActive = true;
    
    Quagga.init({
        inputStream: {
            name: "Live",
            type: "LiveStream",
            target: document.querySelector('#interactive'),
            constraints: {
                width: 640,
                height: 480,
                facingMode: "environment"
            }
        },
        locator: {
            patchSize: "medium",
            halfSample: true
        },
        numOfWorkers: 2,
        decoder: {
            readers: [
                // Format Retail/Perdagangan
                "ean_reader",        // EAN-13 (GTIN-13): 13 digit standar internasional
                "ean_8_reader",      // EAN-8: 8 digit untuk produk retail kecil
                "upc_reader",        // UPC-A: 12 digit standar Amerika Utara
                "upc_e_reader",      // UPC-E: 6 digit versi kompak UPC-A
                
                // Format Industri/Logistik
                "code_128_reader",   // Code 128: Alfanumerik lengkap untuk supply chain
                "codabar_reader",    // Codabar (NW-7): Perpustakaan, bank darah, kurir
                "i2of5_reader",      // Matrix 2 of 5 (Industrial 2 of 5): Aplikasi industri
                
                // Format Tambahan 1D
                "code_39_reader",    // Code 39: Alfanumerik untuk automotive dan defense
                "code_39_vin_reader", // Code 39 VIN: Khusus untuk Vehicle Identification Number
                "code_93_reader",    // Code 93: Versi lebih efisien dari Code 39
                
                // Format Khusus
                "2of5_reader",       // Standard 2 of 5: Format numerik standar
                "code_11_reader"     // Code 11: Aplikasi telekomunikasi
            ]
        },
        // Konfigurasi tambahan untuk Scanner Barcode X 101 U
        locator: {
            patchSize: "medium",
            halfSample: true
        },
        numOfWorkers: 2,
        frequency: 10,
        locate: true
    }, function(err) {
        if (err) {
            console.log(err);
            alert('Error starting camera: ' + err.message);
            return;
        }
        console.log("Initialization finished. Ready to start");
        Quagga.start();
    });
    
    Quagga.onDetected(function(data) {
        const code = data.codeResult.code;
        document.getElementById('barcode').value = code;
        document.getElementById('scanResult').textContent = 'Barcode detected: ' + code;
        document.getElementById('scanResult').classList.remove('hidden');
        
        // Auto close after 2 seconds
        setTimeout(function() {
            stopBarcodeScanner();
            document.getElementById('barcodeScannerModal').classList.add('hidden');
        }, 2000);
    });
}

function stopBarcodeScanner() {
    if (scannerActive) {
        Quagga.stop();
        scannerActive = false;
        document.getElementById('scanResult').classList.add('hidden');
    }
}

// Close modal when clicking outside
document.getElementById('barcodeScannerModal').addEventListener('click', function(e) {
    if (e.target === this) {
        stopBarcodeScanner();
        this.classList.add('hidden');
    }
});

// Format nominal dengan pemisah ribuan
function formatNumber(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}

function unformatNumber(str) {
    return str.replace(/\./g, '');
}

// Event listener untuk format harga
const priceInput = document.getElementById('price');
const priceRawInput = document.getElementById('price_raw');

priceInput.addEventListener('input', function(e) {
    let value = e.target.value;
    // Hapus semua karakter non-digit
    value = value.replace(/[^0-9]/g, '');
    
    if (value) {
        // Format dengan pemisah ribuan
        const formatted = formatNumber(value);
        e.target.value = formatted;
        priceRawInput.value = value;
    } else {
        e.target.value = '';
        priceRawInput.value = '';
    }
});

// Auto-generate barcode
function generateBarcode() {
    const timestamp = Date.now().toString();
    const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
    
    // Coba gunakan awalan 'shr' terlebih dahulu
    let barcode = 'shr' + timestamp.slice(-6) + random;
    
    // Jika tidak mendukung huruf, gunakan awalan '99999'
    if (!/^[a-zA-Z0-9]+$/.test(barcode)) {
        barcode = '99999' + timestamp.slice(-6) + random;
    }
    
    return barcode;
}

// Event listener untuk auto-generate barcode
const barcodeInput = document.getElementById('barcode');
const nameInput = document.getElementById('name');

// Generate barcode saat form akan disubmit jika barcode kosong
document.querySelector('form').addEventListener('submit', function(e) {
    if (!barcodeInput.value.trim()) {
        barcodeInput.value = generateBarcode();
    }
    
    // Pastikan price_raw terisi dengan nilai yang benar
    if (priceInput.value) {
        priceRawInput.value = unformatNumber(priceInput.value);
    }
});

// Optional: Generate barcode saat nama produk diisi (untuk preview)
barcodeInput.addEventListener('focus', function() {
    if (!this.value.trim() && nameInput.value.trim()) {
        this.placeholder = 'Akan di-generate otomatis jika dikosongkan';
    }
});
</script>
@endsection