@extends('layouts.authenticated')

@section('title', 'Input Stok Harian - Scan Barcode')
@section('page-title', 'Input Stok Harian via Barcode')

@section('page-content')
<div class="space-y-6 animate-fade-in" x-data="barcodeStockManager()">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-xl font-semibold text-slate-900 dark:text-white">Input Stok Harian</h1>
            <p class="text-slate-500 dark:text-slate-400 mt-1 text-sm">
                @if(auth()->user()->role === 'partner')
                Input stok harian produk milik Anda
                @else
                Cari produk berdasarkan nama, SKU, atau barcode
                @endif
            </p>
        </div>
        <div class="flex items-center gap-2">
            <span class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-sm font-medium rounded-lg">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                {{ \Carbon\Carbon::parse($today)->format('d F Y') }}
            </span>
        </div>
    </div>

    @if(!empty($branches))
    <!-- Branch Selection -->
    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-5">
        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Cabang Input <span class="text-red-500">*</span></label>
        <select x-model="selectedBranch" @change="onBranchChange()" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white text-sm focus:border-blue-500 focus:ring-blue-500">
            <option value="">Pilih Cabang</option>
            @foreach($branches as $b)
            <option value="{{ $b->id }}">{{ $b->name }}</option>
            @endforeach
        </select>
    </div>
    @endif

    @if(auth()->user()->role !== 'partner')
    <!-- Search & Barcode Scanner -->
    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-5">
        <div class="flex flex-col gap-3">
            <div class="relative flex-1">
                <svg class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
                <input type="text"
                       x-model="barcode"
                       @input.debounce.300ms="searchProducts()"
                       @keydown.enter.prevent="findProduct()"
                       @keydown.escape="showDropdown = false"
                       @keydown.arrow-down.prevent="navigateResults(1)"
                       @keydown.arrow-up.prevent="navigateResults(-1)"
                       x-ref="barcodeInput"
                       autofocus
                       :disabled="!selectedBranch"
                       :placeholder="selectedBranch ? 'Cari produk (Nama, SKU, atau Barcode)...' : 'PILIH CABANG TERLEBIH DAHULU'"
                       class="w-full pl-10 pr-14 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all">
                <button type="button"
                        @click="toggleCamera()"
                        :disabled="!selectedBranch"
                        :class="cameraActive ? 'text-red-600 dark:text-red-400' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-300'"
                        class="absolute right-3 top-1/2 -translate-y-1/2 p-1 transition-colors">
                    <svg class="w-5 h-5" 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>
                </button>

                <!-- Search Dropdown -->
                <div x-show="showDropdown && searchResults.length > 0" 
                     x-cloak
                     @click.away="showDropdown = false"
                     class="absolute z-50 mt-2 w-full bg-white dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                    <template x-for="(product, index) in searchResults" :key="product.id">
                        <div @click="selectProduct(product)"
                             :class="{'bg-blue-50 dark:bg-blue-900/20': index === selectedIndex}"
                             class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-600 cursor-pointer border-b border-gray-100 dark:border-slate-600 last:border-b-0 transition-colors">
                            <p class="text-sm font-medium text-slate-900 dark:text-white" x-text="product.name"></p>
                            <div class="flex gap-3 mt-1">
                                <span class="text-xs text-slate-500 dark:text-slate-400">SKU: <span class="font-mono font-semibold" x-text="product.sku"></span></span>
                                <span class="text-xs text-slate-500 dark:text-slate-400">Mitra: <span class="font-semibold" x-text="product.partner_name"></span></span>
                            </div>
                        </div>
                    </template>
                </div>

                <!-- No Results -->
                <div x-show="showDropdown && searchResults.length === 0 && barcode.length >= 2" 
                     x-cloak
                     class="absolute z-50 mt-2 w-full bg-white dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-lg shadow-lg px-4 py-3">
                    <p class="text-sm text-slate-500 dark:text-slate-400 text-center">Tidak ada produk ditemukan</p>
                </div>
            </div>
        </div>

        <!-- Camera Scanner -->
        <div x-show="cameraActive" x-cloak class="mt-4">
            <div class="relative bg-black rounded-lg overflow-hidden" style="max-width: 500px; margin: 0 auto;">
                <div id="barcode-reader" style="width: 100%;"></div>
                <div class="absolute top-2 right-2">
                    <button type="button" @click="toggleCamera()" class="p-2 bg-red-600 hover:bg-red-700 text-white rounded-full transition-colors">
                        <svg class="w-5 h-5" 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>
            <p class="text-xs text-center text-slate-500 dark:text-slate-400 mt-2">📷 Arahkan barcode ke kamera</p>
        </div>

        <!-- Product Found Alert -->
        <div x-show="currentProduct" x-cloak class="mt-4 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                    <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-green-900 dark:text-green-300" x-text="currentProduct?.name"></p>
                    <div class="flex gap-3 mt-1">
                        <span class="text-xs text-green-700 dark:text-green-400">SKU: <span x-text="currentProduct?.sku" class="font-mono font-semibold"></span></span>
                        <span class="text-xs text-green-700 dark:text-green-400">Barcode: <span x-text="currentProduct?.barcode" class="font-mono font-semibold"></span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Stock Input List -->
    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
            <div>
                <h3 class="text-base font-semibold text-slate-900 dark:text-white">Daftar Stok Produk</h3>
                <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Produk yang akan diinput stok hariannya</p>
            </div>
            <span class="inline-flex items-center px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-sm font-medium rounded-full">
                <span x-text="stockEntries.length + ' produk'"></span>
            </span>
        </div>

        <!-- Empty State -->
        <div x-show="stockEntries.length === 0" class="text-center py-12">
            <div class="w-16 h-16 bg-gray-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            </div>
            <p class="text-sm font-medium text-slate-700 dark:text-slate-300">Belum ada produk</p>
            <p class="text-xs text-slate-400 mt-1">
                @if(auth()->user()->role === 'partner')
                Pilih cabang terlebih dahulu untuk menampilkan daftar produk Anda
                @else
                Cari produk menggunakan nama, SKU, atau barcode untuk menambahkan
                @endif
            </p>
        </div>

        <!-- Stock Entries Table -->
        <div x-show="stockEntries.length > 0" class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 dark:bg-slate-700/50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">No</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Produk</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">SKU</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Barcode</th>
                        <th class="px-6 py-3 text-center text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Stok Saat Ini</th>
                        <th class="px-6 py-3 text-center text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Tambah Stok</th>
                        <th class="px-6 py-3 text-center text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Total Setelah Simpan</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-slate-700">
                    <template x-for="(entry, index) in stockEntries" :key="entry.product_id">
                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50 transition-colors">
                            <td class="px-6 py-4">
                                <span class="text-sm text-slate-500 dark:text-slate-400" x-text="index + 1"></span>
                            </td>
                            <td class="px-6 py-4">
                                <p class="text-sm font-medium text-slate-900 dark:text-white" x-text="entry.name"></p>
                                <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5" x-text="entry.partner_name"></p>
                            </td>
                            <td class="px-6 py-4">
                                <code class="text-xs text-blue-600 dark:text-blue-400 font-mono font-semibold" x-text="entry.sku || '-'"></code>
                            </td>
                            <td class="px-6 py-4">
                                <code class="text-xs text-slate-500 dark:text-slate-400 font-mono" x-text="entry.barcode"></code>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="text-sm font-medium text-slate-600 dark:text-slate-300" x-text="entry.current_stock"></span>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <template x-if="isPartner && entry.has_pending_approval">
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300 text-xs font-semibold rounded-full" title="Pengajuan sedang menunggu persetujuan Admin">
                                        <svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                                        <span x-text="entry.today_stock > 0 ? 'Pending Revisi' : 'Pending Persetujuan'"></span>
                                    </span>
                                </template>
                                <template x-if="!isPartner || !entry.has_pending_approval">
                                    <input type="number"
                                           x-model.number="entry.quantity"
                                           min="0"
                                           placeholder="0"
                                           :disabled="isPartner && entry.has_daily_stock"
                                           class="w-24 mx-auto px-3 py-2 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-center text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">
                                </template>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="inline-flex items-center gap-1 text-sm font-semibold text-emerald-700 dark:text-emerald-400">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
                                    <span x-text="entry.current_stock + (entry.quantity || 0)"></span>
                                </span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button type="button"
                                        @click="removeEntry(entry.product_id)"
                                        :disabled="isPartner && (entry.has_daily_stock || entry.today_stock > 0)"
                                        :class="isPartner && (entry.has_daily_stock || entry.today_stock > 0) ? 'opacity-50 cursor-not-allowed bg-slate-100 dark:bg-slate-700 text-slate-400 dark:text-slate-500' : 'bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-400'"
                                        :title="isPartner && (entry.has_daily_stock || entry.today_stock > 0) ? 'Stok harian sudah diinput sebelumnya dan tidak dapat dihapus' : 'Hapus produk dari daftar'"
                                        class="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-lg transition-colors">
                                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                    </svg>
                                    Hapus
                                </button>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        <!-- Save Button -->
        <div x-show="stockEntries.length > 0" class="px-6 py-4 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/50">
            <button type="button"
                    @click="saveAllStocks()"
                    :disabled="stockEntries.length === 0 || saving"
                    class="w-full inline-flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-medium py-2.5 px-4 rounded-lg transition-colors">
                <template x-if="saving">
                    <svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                </template>
                <template x-if="!saving">
                    <svg class="w-5 h-5" 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>
                </template>
                <span x-text="saving ? 'Menyimpan...' : 'Simpan Semua Stok (' + stockEntries.length + ' produk)'"></span>
            </button>
        </div>
    </div>
</div>

<script>
function barcodeStockManager() {
    return {
        barcode: '',
        currentProduct: null,
        stockEntries: [],
        loading: false,
        saving: false,
        error: '',
        success: '',
        searchResults: [],
        showDropdown: false,
        selectedIndex: 0,
        selectedBranch: '{{ $branchId ?? '' }}',

        isPartner: {{ auth()->user()->role === 'partner' ? 'true' : 'false' }},

        onBranchChange() {
            this.stockEntries = [];
            this.clearBarcode();
            if (this.isPartner && this.selectedBranch) {
                this.loadPartnerProducts();
            }
        },

        init() {
            this.$nextTick(() => {
                this.$refs.barcodeInput?.focus();
            });

            if (this.isPartner && this.selectedBranch) {
                this.loadPartnerProducts();
            }

            // Cleanup camera on component destroy
            window.addEventListener('beforeunload', () => this.stopCamera());
        },

        async loadPartnerProducts() {
            if (!this.selectedBranch) return;
            this.loading = true;
            try {
                const response = await fetch(`{{ route('daily-stocks.partner-products') }}?branch_id=${this.selectedBranch}`);
                const result = await response.json();

                if (result.success && result.products.length > 0) {
                    this.stockEntries = result.products.map(p => ({
                        product_id: p.id,
                        name: p.name,
                        sku: p.sku,
                        barcode: p.barcode,
                        partner_name: p.partner_name,
                        current_stock: p.current_stock,
                        today_stock: p.today_stock || 0,
                        has_daily_stock: p.has_daily_stock || (p.today_stock > 0),
                        has_pending_approval: p.has_pending_approval || false,
                        quantity: 0,
                    }));
                }
            } catch (err) {
                console.error('Error loading partner products:', err);
            } finally {
                this.loading = false;
            }
        },

        async searchProducts() {
            if (!this.selectedBranch) return;
            if (this.barcode.length < 2) {
                this.showDropdown = false;
                this.searchResults = [];
                return;
            }

            try {
                const response = await fetch(`{{ route('daily-stocks.search') }}?query=${encodeURIComponent(this.barcode)}&branch_id=${this.selectedBranch}`);
                const result = await response.json();

                if (result.success) {
                    this.searchResults = result.products;
                    this.showDropdown = true;
                    this.selectedIndex = 0;
                } else {
                    this.searchResults = [];
                    this.showDropdown = true;
                }
            } catch (err) {
                console.error('Search error:', err);
                this.searchResults = [];
                this.showDropdown = true;
            }
        },

        selectProduct(product) {
            this.barcode = product.barcode;
            this.currentProduct = product;
            this.showDropdown = false;
            this.searchResults = [];

            // Check if product already in list
            const exists = this.stockEntries.find(e => e.product_id === product.id);
            if (exists) {
                // Increment quantity in existing entry
                exists.quantity = (exists.quantity || 0) + 1;
                this.showNotification('✓ Qty produk bertambah +1 (total: ' + exists.quantity + ')', 'success');
                this.clearBarcode();
                return;
            }

            // Add to stock entries with default quantity = 1
            this.stockEntries.push({
                product_id: product.id,
                name: product.name,
                sku: product.sku,
                barcode: product.barcode,
                partner_name: product.partner_name,
                current_stock: product.current_stock,
                today_stock: product.today_stock || 0,
                has_daily_stock: product.has_daily_stock || (product.today_stock > 0),
                quantity: 1,
            });

            this.showNotification('✓ Produk berhasil ditambahkan!', 'success');
            this.clearBarcode();
        },

        navigateResults(direction) {
            if (this.searchResults.length === 0) return;
            
            this.selectedIndex += direction;
            if (this.selectedIndex < 0) {
                this.selectedIndex = this.searchResults.length - 1;
            } else if (this.selectedIndex >= this.searchResults.length) {
                this.selectedIndex = 0;
            }
        },

        async findProduct() {
            if (!this.selectedBranch) return;
            if (!this.barcode) return;

            this.showDropdown = false;
            this.loading = true;

            try {
                const response = await fetch('{{ route('daily-stocks.find-product') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ barcode: this.barcode, branch_id: this.selectedBranch })
                });

                const result = await response.json();

                if (result.success) {
                    this.currentProduct = result.product;

                    // Check if product already in list
                    const exists = this.stockEntries.find(e => e.product_id === result.product.id);
                    if (exists) {
                        // Increment quantity in existing entry
                        exists.quantity = (exists.quantity || 0) + 1;
                        this.showNotification('✓ Qty produk bertambah +1 (total: ' + exists.quantity + ')', 'success');
                        this.clearBarcode();
                        return;
                    }

                    // Add to stock entries with default quantity = 1
                    this.stockEntries.push({
                        product_id: result.product.id,
                        name: result.product.name,
                        sku: result.product.sku,
                        barcode: result.product.barcode,
                        partner_name: result.product.partner_name,
                        current_stock: result.product.current_stock,
                        today_stock: result.product.today_stock || 0,
                        has_daily_stock: result.product.has_daily_stock || (result.product.today_stock > 0),
                        quantity: 1,
                    });

                    this.showNotification('✓ Produk berhasil ditambahkan!', 'success');
                    this.clearBarcode();
                } else {
                    this.showNotification('⚠️ ' + (result.message || 'Produk tidak ditemukan'), 'error');
                }
            } catch (err) {
                console.error('Error:', err);
                this.showNotification('Gagal mencari produk', 'error');
            } finally {
                this.loading = false;
            }
        },

        removeEntry(productId) {
            const entry = this.stockEntries.find(e => e.product_id === productId);
            if (this.isPartner && entry && (entry.has_daily_stock || entry.today_stock > 0)) {
                this.showNotification('⚠️ Produk ini sudah memiliki stok harian yang diinput sebelumnya.', 'warning');
                return;
            }
            this.stockEntries = this.stockEntries.filter(e => e.product_id !== productId);
            this.showNotification('Produk dihapus dari daftar', 'info');
        },

        async saveAllStocks() {
            if (this.stockEntries.length === 0) return;

            const validEntries = this.stockEntries.filter(entry => entry.quantity && entry.quantity > 0);

            if (validEntries.length === 0) {
                this.showNotification('Isi jumlah "Tambah Stok" (minimal 1) untuk produk yang ingin ditambahkan.', 'error');
                return;
            }

            this.saving = true;

            try {
                const response = await fetch('{{ route('daily-stocks.save-daily-stock') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ entries: validEntries, branch_id: this.selectedBranch })
                });

                const result = await response.json();

                if (result.success) {
                    this.showNotification('✓ ' + result.message, 'success');

                    if (this.isPartner) {
                        await this.loadPartnerProducts();
                    } else {
                        setTimeout(() => {
                            this.stockEntries = [];
                            this.$refs.barcodeInput?.focus();
                        }, 500);
                    }
                } else {
                    this.showNotification('⚠️ ' + (result.message || 'Gagal menyimpan stok'), 'error');
                }
            } catch (err) {
                console.error('Error:', err);
                this.showNotification('⚠️ Terjadi kesalahan saat menyimpan', 'error');
            } finally {
                this.saving = false;
            }
        },

        clearBarcode() {
            this.barcode = '';
            this.currentProduct = null;
            this.showDropdown = false;
            this.searchResults = [];
            this.selectedIndex = 0;
            this.$nextTick(() => {
                this.$refs.barcodeInput?.focus();
            });
        },

        // Camera scanning functionality
        cameraActive: false,
        cameraLoading: false,
        html5QrcodeScanner: null,

        toggleCamera() {
            if (this.cameraActive) {
                this.stopCamera();
            } else {
                this.startCamera();
            }
        },

        startCamera() {
            this.cameraLoading = true;
            
            // Load html5-qrcode library if not already loaded
            if (!window.Html5Qrcode) {
                const script = document.createElement('script');
                script.src = 'https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js';
                script.onload = () => this.initCamera();
                document.head.appendChild(script);
            } else {
                this.initCamera();
            }
        },

        lastScanned: null,

        initCamera() {
            this.cameraActive = true;
            this.cameraLoading = false;
            this.lastScanned = null;
            
            this.$nextTick(() => {
                const html5QrCode = new Html5Qrcode("barcode-reader");
                this.html5QrcodeScanner = html5QrCode;
                
                const config = {
                    fps: 10,
                    qrbox: { width: 250, height: 150 },
                    aspectRatio: 1.0
                };
                
                html5QrCode.start(
                    { facingMode: "environment" },
                    config,
                    (decodedText, decodedResult) => {
                        // Prevent continuous scanning of the same barcode within 2 seconds
                        if (this.lastScanned === decodedText) return;
                        this.lastScanned = decodedText;
                        setTimeout(() => this.lastScanned = null, 2000);

                        // Success callback - barcode detected
                        this.barcode = decodedText;
                        this.showNotification('Barcode terdeteksi: ' + decodedText, 'success');
                        
                        // Auto search product
                        this.findProduct();
                        
                        // Stop camera after successful scan
                        setTimeout(() => this.stopCamera(), 500);
                    },
                    (errorMessage) => {
                        // Error callback - no barcode detected (ignore)
                    }
                ).catch(err => {
                    console.error('Camera start failed:', err);
                    this.showNotification('Gagal mengakses kamera: ' + err, 'error');
                    this.cameraActive = false;
                });
            });
        },

        stopCamera() {
            if (this.html5QrcodeScanner) {
                this.html5QrcodeScanner.stop().then(() => {
                    this.html5QrcodeScanner.clear();
                    this.html5QrcodeScanner = null;
                }).catch(err => {
                    console.error('Camera stop failed:', err);
                });
            }
            this.cameraActive = false;
            this.cameraLoading = false;
        },

        showNotification(message, type = 'info') {
            const colors = {
                success: 'bg-green-100 dark:bg-green-900/30 border-green-200 dark:border-green-800 text-green-800 dark:text-green-300',
                error: 'bg-red-100 dark:bg-red-900/30 border-red-200 dark:border-red-800 text-red-800 dark:text-red-300',
                warning: 'bg-amber-100 dark:bg-amber-900/30 border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-300',
                info: 'bg-blue-100 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-300',
            };

            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 z-50 px-4 py-3 rounded-lg border shadow-lg ${colors[type]}`;
            notification.textContent = message;
            document.body.appendChild(notification);

            setTimeout(() => {
                notification.style.opacity = '0';
                notification.style.transition = 'opacity 0.3s';
                setTimeout(() => notification.remove(), 300);
            }, 3000);
        }
    }
}
</script>
@endsection