@extends('layouts.app')

@section('title', 'Edit 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">Edit Produk</h1>
            <p class="text-sm text-gray-600 mt-1">Edit informasi produk: {{ $product->name }}</p>
        </div>
        <div class="flex space-x-2">
            <a href="{{ route('products.show', $product) }}" 
               class="bg-blue-500 hover:bg-blue-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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                </svg>
                Detail
            </a>
            <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>
    </div>

    <!-- Form -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <form action="{{ route('products.update', $product) }}" method="POST" enctype="multipart/form-data" class="p-6">
            @csrf
            @method('PUT')
            
            <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', $product->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', $product->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', $product->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', $product->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', $product->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', number_format($product->price, 0, ',', '.')) }}"
                                       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_raw', $product->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', $product->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
                            @if($product->stock <= $product->min_stock)
                                <p class="mt-1 text-sm text-red-600">⚠️ Stok saat ini rendah! ({{ $product->stock }} {{ $product->unit }})</p>
                            @endif
                        </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', $product->min_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('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', $product->unit) == 'pcs' ? 'selected' : '' }}>Pcs</option>
                                <option value="kg" {{ old('unit', $product->unit) == 'kg' ? 'selected' : '' }}>Kg</option>
                                <option value="gram" {{ old('unit', $product->unit) == 'gram' ? 'selected' : '' }}>Gram</option>
                                <option value="liter" {{ old('unit', $product->unit) == 'liter' ? 'selected' : '' }}>Liter</option>
                                <option value="ml" {{ old('unit', $product->unit) == 'ml' ? 'selected' : '' }}>ML</option>
                                <option value="box" {{ old('unit', $product->unit) == 'box' ? 'selected' : '' }}>Box</option>
                                <option value="pack" {{ old('unit', $product->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>
                        
                        <!-- Current Image -->
                        @if($product->image)
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Gambar Saat Ini</label>
                                <div class="flex items-center space-x-4">
                                    <img src="{{ asset('storage/' . $product->image) }}" 
                                         alt="{{ $product->name }}" 
                                         class="h-20 w-20 object-cover rounded-lg border border-gray-300">
                                    <div>
                                        <p class="text-sm text-gray-600">{{ basename($product->image) }}</p>
                                        <label class="inline-flex items-center mt-2">
                                            <input type="checkbox" name="remove_image" value="1" class="rounded border-gray-300 text-red-600 shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50">
                                            <span class="ml-2 text-sm text-red-600">Hapus gambar ini</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Image Upload -->
                        <div class="mb-4">
                            <label for="image" class="block text-sm font-medium text-gray-700 mb-2">Gambar Produk</label>
                            
                            @if($product->image)
                                <!-- Current Image Preview -->
                                <div id="current-image-area" class="mb-4">
                                    <div class="relative">
                                        <img id="current-image-preview" class="w-full h-48 object-cover rounded-lg border border-gray-300" src="{{ asset('storage/' . $product->image) }}" alt="Current Image">
                                        <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-current-image" class="bg-white text-gray-700 px-3 py-1 rounded text-sm hover:bg-gray-100 transition-colors">
                                                    Ganti
                                                </button>
                                                <label class="flex items-center">
                                                    <input type="checkbox" name="remove_image" value="1" class="rounded border-gray-300 text-red-600 shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50 mr-2">
                                                    <span class="text-white text-sm">Hapus</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="mt-2 text-sm text-gray-600 text-center">{{ basename($product->image) }}</p>
                                </div>
                            @endif
                            
                            <!-- 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 {{ $product->image ? 'hidden' : '' }}">
                                <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>
                            
                            <!-- New Image 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>
                                <p class="mt-2 text-sm text-gray-600 text-center" id="image-name"></p>
                            </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', $product->is_active) ? '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', $product->track_stock) ? '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.show', $product) }}" 
                   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>
                    Update 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');
const currentImageArea = document.getElementById('current-image-area');
const changeCurrentImageBtn = document.getElementById('change-current-image');

// Handle file selection
function handleFileSelect(file) {
    if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function(e) {
            imagePreview.src = e.target.result;
            imageName.textContent = file.name;
            uploadArea.classList.add('hidden');
            if (currentImageArea) currentImageArea.classList.add('hidden');
            previewArea.classList.remove('hidden');
        };
        reader.readAsDataURL(file);
    }
}

// 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();
});

// Change current image button
if (changeCurrentImageBtn) {
    changeCurrentImageBtn.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 (for new preview)
if (changeImageBtn) {
    changeImageBtn.addEventListener('click', function() {
        imageInput.click();
    });
}

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

// Stock warning
const stockInput = document.getElementById('stock');
const minStockInput = document.getElementById('min_stock');

function checkStockWarning() {
    const stock = parseInt(stockInput.value) || 0;
    const minStock = parseInt(minStockInput.value) || 0;
    
    // Remove existing warning
    const existingWarning = document.querySelector('.stock-warning');
    if (existingWarning) {
        existingWarning.remove();
    }
    
    if (stock <= minStock && stock > 0) {
        const warning = document.createElement('p');
        warning.className = 'mt-1 text-sm text-red-600 stock-warning';
        warning.textContent = '⚠️ Stok akan menjadi rendah!';
        stockInput.parentElement.appendChild(warning);
    }
}

stockInput.addEventListener('input', checkStockWarning);
minStockInput.addEventListener('input', checkStockWarning);

// 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