@extends('layouts.authenticated')

@section('title', 'Produk')
@section('page-title', 'Produk')

@section('page-content')
<div class="space-y-6 animate-fade-in" x-data="productManager()">
    <!-- 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">Manajemen Produk</h1>
            <p class="text-slate-500 dark:text-slate-400 mt-1 text-sm">Kelola produk dan stok toko Anda</p>
        </div>
        @if(!auth()->user()->isCashier() && auth()->user()->role !== 'partner')
        <button @click="openAddModal()"
                class="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors">
            <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="M12 4v16m8-8H4"></path>
            </svg>
            Tambah Produk
        </button>
        @endif
    </div>

    <!-- Filters & Search -->
    <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 sm:flex-row 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="searchQuery" @input.debounce.300ms="filterProducts()"
                       placeholder="Cari produk..."
                       class="w-full pl-10 pr-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 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all">
            </div>
            @if(auth()->user()->role !== 'partner')
            <div class="relative w-full sm:w-64" x-data="{ 
                open: false, 
                search: '',
                get filteredPartners() {
                    return {{ json_encode($partners) }}.filter(p => p.name.toLowerCase().includes(this.search.toLowerCase()));
                },
                get selectedName() {
                    const p = {{ json_encode($partners) }}.find(p => p.id == selectedPartner);
                    return p ? p.name : 'Semua Mitra';
                }
            }">
                <button type="button" @click="open = !open" class="w-full flex items-center justify-between 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">
                    <span x-text="selectedName" class="truncate"></span>
                    <svg class="w-4 h-4 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                </button>
                <div x-show="open" @click.away="open = false" x-cloak class="absolute z-50 w-full min-w-[250px] mt-2 bg-white dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-lg shadow-lg">
                    <div class="p-2 border-b border-gray-100 dark:border-slate-600">
                        <input type="text" x-model="search" placeholder="Cari mitra..." class="w-full px-3 py-1.5 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-600 rounded text-sm text-slate-900 dark:text-white">
                    </div>
                    <div class="max-h-48 overflow-y-auto">
                        <button type="button" @click="selectedPartner = ''; filterProducts(); open = false" class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-slate-600">Semua Mitra</button>
                        <template x-for="p in filteredPartners" :key="p.id">
                            <button type="button" @click="selectedPartner = p.id; filterProducts(); open = false" class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-slate-600" x-text="p.name"></button>
                        </template>
                    </div>
                </div>
            </div>
            @endif
            @if(!empty($branches))
            <select x-model="selectedBranch" @change="filterProducts()" class="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 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all">
                <option value="">Semua Cabang</option>
                @foreach($branches as $b)
                <option value="{{ $b->id }}" {{ $b->id == $branchId ? 'selected' : '' }}>{{ strtoupper($b->name) }}</option>
                @endforeach
            </select>
            @endif
            <select x-model="selectedCategory" @change="filterProducts()" class="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 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all">
                <option value="">Semua Kategori</option>
                @foreach($categories as $cat)
                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                @endforeach
            </select>
            <select x-model="sortBy" @change="filterProducts()" class="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 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all">
                <option value="">Urutkan Harga</option>
                <option value="asc">Termurah - Termahal</option>
                <option value="desc">Termahal - Termurah</option>
            </select>
        </div>
    </div>

    <!-- Products Table -->
    <div id="products-table-container" class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">
        <div 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">Produk</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Mitra</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Kategori</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Harga</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Stok</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Status</th>
                        @if(!auth()->user()->isCashier() && auth()->user()->role !== 'partner')
                        <th class="px-6 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Aksi</th>
                        @endif
                    </tr>
                </thead>
                <tbody id="products-table-body" class="divide-y divide-gray-200 dark:divide-slate-700">
                    @forelse($products as $product)
                    <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50 transition-colors">
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 bg-gray-100 dark:bg-slate-700 rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
                                    @if($product->image)
                                        <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="w-full h-full object-cover">
                                    @else
                                        <svg class="w-6 h-6 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                                        </svg>
                                    @endif
                                </div>
                                <div>
                                    <p class="font-medium text-slate-900 dark:text-white">{{ $product->name }}</p>
                                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">SKU: {{ $product->sku ?? '-' }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-sm text-slate-600 dark:text-slate-400">
                                {{ $product->partner->name ?? '-' }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-2.5 py-1 rounded text-xs font-medium bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400">
                                {{ $product->category->name ?? 'Uncategorized' }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <p class="font-semibold text-slate-900 dark:text-white">Rp {{ number_format($product->price, 0, ',', '.') }}</p>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                @if($product->stock > 10)
                                    <span class="text-sm font-medium text-emerald-600 dark:text-emerald-400">{{ $product->stock }}</span>
                                @elseif($product->stock > 0)
                                    <span class="text-sm font-medium text-amber-600 dark:text-amber-400">{{ $product->stock }}</span>
                                @else
                                    <span class="text-sm font-medium text-red-600 dark:text-red-400">0</span>
                                @endif
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-medium
                                @if($product->is_active) bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400
                                @else bg-gray-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400
                                @endif">
                                <span class="w-1.5 h-1.5 rounded-full @if($product->is_active) bg-emerald-500 @else bg-slate-400 @endif"></span>
                                {{ $product->is_active ? 'Aktif' : 'Nonaktif' }}
                            </span>
                        </td>
                        @if(!auth()->user()->isCashier() && auth()->user()->role !== 'partner')
                        <td class="px-6 py-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <button @click="openEditModal({{ $product->id }}, {{ json_encode($product) }})"
                                        class="p-2 text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors" title="Edit">
                                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                    </svg>
                                </button>
                                <button @click="confirmDelete({{ $product->id }}, '{{ $product->name }}')"
                                        class="p-2 text-slate-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors" title="Hapus">
                                    <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="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>
                                </button>
                            </div>
                        </td>
                        @endif
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center">
                            <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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></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">Mulai dengan menambahkan produk pertama Anda</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div id="products-pagination" class="px-6 py-4 border-t border-gray-200 dark:border-slate-700">
            @if($products->hasPages())
            {{ $products->links() }}
            @endif
        </div>
    </div>

    <!-- Add/Edit Modal -->
    <div x-show="showModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4 py-8">
            <div class="fixed inset-0 bg-black/50" @click="closeModal()"></div>

            <div class="relative bg-white dark:bg-slate-800 rounded-xl shadow-lg max-w-5xl w-full max-h-[90vh] overflow-y-auto"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100">

                <form @submit.prevent="submitForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="_method" :value="editMode ? 'PUT' : 'POST'">

                    <!-- Modal Header -->
                    <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 sticky top-0 bg-white dark:bg-slate-800">
                        <div class="flex items-center justify-between">
                            <h3 class="text-lg font-semibold text-slate-900 dark:text-white" x-text="editMode ? 'Edit Produk' : 'Tambah Produk Baru'"></h3>
                            <button type="button" @click="closeModal()" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
                                <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>

                    <!-- Modal Body -->
                    <div class="px-6 py-5">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Left Column -->
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Nama Produk <span class="text-red-500">*</span></label>
                                    <input type="text" x-model="form.name" name="name" required maxlength="25"
                                           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 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
                                           placeholder="Contoh: Nasi Goreng Spesial">
                                    <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Maksimal 25 karakter.</p>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Kategori</label>
                                    <select x-model="form.category_id" name="category_id"
                                            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 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all">
                                        <option value="">Pilih Kategori</option>
                                        @foreach($categories as $cat)
                                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Mitra</label>
                                    <div class="relative" x-data="{ 
                                        open: false, 
                                        search: '',
                                        get partners() {
                                            return {{ json_encode($partners) }}.filter(p => p.name.toLowerCase().includes(this.search.toLowerCase()));
                                        },
                                        get selectedName() {
                                            const p = {{ json_encode($partners) }}.find(p => p.id == form.partner_id);
                                            return p ? p.name : 'Pilih Mitra (Opsional)';
                                        }
                                    }">
                                        <button type="button" @click="open = !open" class="w-full flex items-center justify-between 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">
                                            <span x-text="selectedName"></span>
                                            <svg class="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="M19 9l-7 7-7-7"></path></svg>
                                        </button>
                                        <div x-show="open" @click.away="open = false" x-cloak class="absolute z-50 w-full mt-2 bg-white dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-lg shadow-lg">
                                            <div class="p-2 border-b border-gray-100 dark:border-slate-600">
                                                <input type="text" x-model="search" placeholder="Cari mitra..." class="w-full px-3 py-1.5 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-600 rounded text-sm text-slate-900 dark:text-white">
                                            </div>
                                            <div class="max-h-48 overflow-y-auto">
                                                <button type="button" @click="form.partner_id = ''; open = false" class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-slate-600">Pilih Mitra (Opsional)</button>
                                                <template x-for="p in partners" :key="p.id">
                                                    <button type="button" @click="form.partner_id = p.id; open = false" class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-slate-600" x-text="p.name"></button>
                                                </template>
                                            </div>
                                        </div>
                                        <input type="hidden" name="partner_id" :value="form.partner_id">
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Harga Jual <span class="text-red-500">*</span></label>
                                    <input type="number" x-model="form.price" name="price" required min="0"
                                           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 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
                                           placeholder="0">
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Harga Modal</label>
                                    <input type="number" x-model="form.cost" name="cost" min="0"
                                           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 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
                                           placeholder="0">
                                </div>
                            </div>

                            <!-- Right Column -->
                            <div class="space-y-4">
                                <div x-data="{ preview: null, fileName: '' }">
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Gambar Produk</label>
                                    <div class="relative">
                                        <div
                                             @dragover.prevent=" $el.classList.add('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/10') "
                                             @dragleave.prevent=" $el.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/10') "
                                             @drop.prevent=" $el.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/10'); const files = $event.dataTransfer.files; if(files.length > 0){ fileName = files[0].name; const reader = new FileReader(); reader.onload = (e) => preview = e.target.result; reader.readAsDataURL(files[0]); $refs.fileInput.files = files; } "
                                             @click="$refs.fileInput.click()"
                                             class="flex flex-col items-center justify-center w-full p-4 border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-lg cursor-pointer hover:border-blue-400 dark:hover:border-blue-500 hover:bg-gray-50 dark:hover:bg-slate-700/50 transition-colors"
                                             :class="{ 'border-blue-500 bg-blue-50 dark:bg-blue-900/10': preview }">

                                            <template x-if="!preview">
                                                <div class="text-center">
                                                    <svg class="mx-auto h-10 w-10 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                                    </svg>
                                                    <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
                                                        <span class="font-medium text-blue-600 dark:text-blue-400">Klik untuk upload</span>
                                                    </p>
                                                    <p class="text-xs text-slate-500 dark:text-slate-500 mt-1">PNG, JPG (Max. 2MB)</p>
                                                </div>
                                            </template>

                                            <template x-if="preview">
                                                <div class="text-center">
                                                    <img :src="preview" class="mx-auto max-h-32 rounded-lg object-cover border border-gray-200 dark:border-slate-600" alt="Preview">
                                                    <p class="mt-2 text-xs text-slate-600 dark:text-slate-400 truncate max-w-[200px] mx-auto" x-text="fileName"></p>
                                                    <button type="button" @click.stop="preview = null; fileName = ''; $refs.fileInput.value = ''" class="mt-2 px-3 py-1 text-xs text-red-600 hover:text-red-700 font-medium bg-red-50 dark:bg-red-900/20 rounded hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors">Hapus</button>
                                                </div>
                                            </template>

                                            <input x-ref="fileInput" type="file" name="image" accept="image/*" class="hidden" @change="const file = $event.target.files[0]; if(file){ fileName = file.name; const reader = new FileReader(); reader.onload = (e) => preview = e.target.result; reader.readAsDataURL(file); }">
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Stok Awal</label>
                                    <input type="number" x-model="form.stock" name="stock" min="0"
                                           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 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
                                           placeholder="0">
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Minimum Stok</label>
                                    <input type="number" x-model="form.min_stock" name="min_stock" min="0"
                                           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 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
                                           placeholder="5">
                                </div>

                                <div>
                                    <label class="flex items-start gap-2 cursor-pointer">
                                        <input type="checkbox" x-model="form.track_stock" name="track_stock"
                                               class="w-4 h-4 mt-0.5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm font-medium text-slate-700 dark:text-slate-300">Track Stock</span>
                                    </label>
                                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-1 ml-6">Stok akan berkurang otomatis saat penjualan</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Modal Footer -->
                    <div class="px-6 py-4 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/50 flex gap-3 justify-end">
                        <button type="button" @click="closeModal()"
                                class="px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 hover:bg-gray-50 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 font-medium rounded-lg transition-colors shadow-sm">
                            Batal
                        </button>
                        <button type="submit"
                                class="px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                            <span x-text="editMode ? 'Update' : 'Simpan'"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div x-show="showDeleteModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4 py-8">
            <div class="fixed inset-0 bg-black/50" @click="showDeleteModal = false"></div>

            <div class="relative bg-white dark:bg-slate-800 rounded-xl shadow-lg max-w-md w-full overflow-hidden"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100">

                <div class="p-6">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 text-red-600 dark:text-red-400" 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>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-slate-900 dark:text-white">Hapus Produk?</h3>
                            <p class="text-sm text-slate-500 dark:text-slate-400">Tindakan ini tidak dapat dibatalkan</p>
                        </div>
                    </div>

                    <div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-4 mb-4">
                        <p class="text-sm text-slate-600 dark:text-slate-300">Anda akan menghapus produk:</p>
                        <p class="text-base font-semibold text-slate-900 dark:text-white mt-1" x-text="deleteProductName"></p>
                    </div>

                    <div class="flex gap-3">
                        <button type="button" @click="showDeleteModal = false"
                                class="flex-1 px-4 py-2.5 bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 font-medium rounded-lg transition-colors">
                            Batal
                        </button>
                        <button type="button" @click="deleteProduct()"
                                class="flex-1 px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2">
                            <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="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>
                            Ya, Hapus
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function productManager() {
    return {
        showModal: false,
        showDeleteModal: false,
        editMode: false,
        deleteProductId: null,
        deleteProductName: '',
        searchQuery: '{{ request('search') }}',
        selectedCategory: '{{ request('category') }}',
        selectedPartner: '{{ request('partner') }}',
        sortBy: '{{ request('sort_by') }}',
        selectedBranch: '{{ request('branch_id', $branchId ?? '') }}',
        form: {
            id: null,
            name: '',
            category_id: '',
            partner_id: '',
            barcode: '',
            price: '',
            cost: '',
            stock: '',
            min_stock: '5',
            track_stock: true,
        },

        init() {
            const successMsg = sessionStorage.getItem('toast_success');
            if (successMsg) {
                this.showToast('success', successMsg);
                sessionStorage.removeItem('toast_success');
            }

            document.getElementById('products-table-container').addEventListener('click', (e) => {
                const link = e.target.closest('a[href*="page="]');
                if (!link) return;
                e.preventDefault();

                const url = new URL(link.href);
                const page = url.searchParams.get('page');
                const params = new URLSearchParams();
                if (this.searchQuery) params.append('search', this.searchQuery);
                if (this.selectedCategory) params.append('category', this.selectedCategory);
                if (this.sortBy) params.append('sort_by', this.sortBy);
                if (this.selectedBranch) params.append('branch_id', this.selectedBranch);
                if (page) params.append('page', page);

                fetch(`{{ route('products.filter') }}?${params.toString()}`, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                })
                .then(res => res.text())
                .then(html => {
                    document.getElementById('products-table-container').innerHTML = html;
                    const finalUrl = `{{ route('products.index') }}?${params.toString()}`;
                    history.pushState(null, '', finalUrl);
                })
                .catch(err => { console.error('Pagination error:', err); });
            });

            window.addEventListener('open-edit-modal', (event) => {
                this.openEditModal(event.detail.id, event.detail.product);
            });

            window.addEventListener('confirm-delete', (event) => {
                this.confirmDelete(event.detail.id, event.detail.name);
            });
        },

        filterProducts() {
            const params = new URLSearchParams();
            if (this.searchQuery) params.append('search', this.searchQuery);
            if (this.selectedCategory) params.append('category', this.selectedCategory);
            if (this.selectedPartner) params.append('partner', this.selectedPartner);
            if (this.sortBy) params.append('sort_by', this.sortBy);
            if (this.selectedBranch) params.append('branch_id', this.selectedBranch);

            const url = `{{ route('products.index') }}?${params.toString()}`;

            fetch(`{{ route('products.filter') }}?${params.toString()}`, {
                headers: { 
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            })
            .then(res => res.text())
            .then(html => {
                document.getElementById('products-table-container').innerHTML = html;
                history.pushState(null, '', url);
            })
            .catch(err => {
                console.error('Filter error:', err);
            });
        },

        openAddModal() {
            this.editMode = false;
            this.form = {
                id: null,
                name: '',
                category_id: '',
                partner_id: '',
                barcode: '',
                price: '',
                cost: '',
                stock: '',
                min_stock: '5',
                track_stock: true,
            };
            this.showModal = true;
        },

        openEditModal(id, product) {
            this.editMode = true;
            this.form = {
                id: id,
                name: product.name,
                category_id: product.category_id || '',
                partner_id: product.partner_id || '',
                barcode: product.barcode || '',
                price: product.price,
                cost: product.cost || '',
                stock: product.stock,
                min_stock: product.min_stock || '5',
                track_stock: product.track_stock,
            };
            this.showModal = true;
        },

        closeModal() {
            this.showModal = false;
        },

        showToast(type, message) {
            const colors = { success: 'bg-emerald-600', error: 'bg-red-600', warning: 'bg-amber-600', info: 'bg-blue-600' };
            const icons = {
                success: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>',
                error: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>',
                warning: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>',
                info: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>'
            };
            const toast = document.createElement('div');
            toast.className = `fixed top-4 right-4 z-[9999] ${colors[type]} text-white px-5 py-3 rounded-lg shadow-lg flex items-center gap-3`;
            toast.innerHTML = `<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">${icons[type]}</svg><span class="font-medium text-sm">${message}</span>`;
            document.body.appendChild(toast);
            setTimeout(() => { toast.style.opacity = '0'; toast.style.transition = 'opacity 0.2s'; setTimeout(() => toast.remove(), 200); }, 3000);
        },

        submitForm() {            const url = this.editMode ? `/products/${this.form.id}` : '/products';

            const formData = new FormData();
            formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
            if (this.editMode) {
                formData.append('_method', 'PUT');
            }

            for (const key in this.form) {
                if (key === 'track_stock') {
                    formData.append('track_stock', this.form.track_stock ? '1' : '0');
                } else if (this.form[key] !== null && this.form[key] !== '') {
                    formData.append(key, this.form[key]);
                }
            }
            if (this.selectedBranch) {
                formData.append('branch_id', this.selectedBranch);
            }

            fetch(url, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(async res => {
                const contentType = res.headers.get('content-type') || '';
                if (!res.ok) {
                    if (contentType.includes('application/json')) {
                        const err = await res.json();
                        if (err.messages) {
                            const messages = Object.values(err.messages).flat().join('\n');
                            throw new Error(messages);
                        }
                        throw new Error(err.error || 'Terjadi kesalahan');
                    }
                    const text = await res.text();
                    console.error('Server response:', text.substring(0, 500));
                    throw new Error(`Server error (${res.status}). Silakan coba lagi.`);
                }
                if (contentType.includes('application/json')) {
                    return res.json();
                }
                const text = await res.text();
                console.error('Non-JSON response received');
                throw new Error('Invalid server response');
            })
            .then(data => {
                if (data && data.redirect) {
                    sessionStorage.setItem('toast_success', data.success || 'Operasi berhasil');
                    window.location.href = data.redirect;
                }
            })
            .catch(err => {
                console.error('Form submission error:', err);
                this.showToast('error', err.message || 'Terjadi kesalahan. Silakan coba lagi.');
            });
        },

        confirmDelete(id, name) {
            this.deleteProductId = id;
            this.deleteProductName = name;
            this.showDeleteModal = true;
        },

        deleteProduct() {
            fetch(`/products/${this.deleteProductId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(async res => {
                const contentType = res.headers.get('content-type') || '';
                if (!res.ok) {
                    if (contentType.includes('application/json')) {
                        const err = await res.json();
                        if (err.messages) {
                            const messages = Object.values(err.messages).flat().join('\n');
                            throw new Error(messages);
                        }
                        throw new Error(err.error || 'Terjadi kesalahan');
                    }
                    const text = await res.text();
                    console.error('Server response:', text.substring(0, 500));
                    throw new Error(`Server error (${res.status}). Silakan coba lagi.`);
                }
                if (contentType.includes('application/json')) {
                    return res.json();
                }
                const text = await res.text();
                console.error('Non-JSON response received');
                throw new Error('Invalid server response');
            })
            .then(data => {
                if (data && data.success) {
                    this.showDeleteModal = false;
                    this.showToast('success', data.success);
                    this.filterProducts();
                } else if (data && data.redirect) {
                    sessionStorage.setItem('toast_success', 'Produk berhasil dihapus');
                    window.location.href = data.redirect;
                }
            })
            .catch(err => {
                console.error('Delete error:', err);
                this.showToast('error', err.message || 'Gagal menghapus produk');
            });
        }
    }
}
</script>

@push('styles')
<style>
    @keyframes fade-in {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in { animation: fade-in 0.3s ease-out; }
</style>
@endpush
@endsection