@extends('layouts.authenticated')

@section('title', 'Stok Harian')
@section('page-title', 'Stok Harian')

@push('styles')
<style>
    .partner-search-wrap {
        position: relative;
    }

    .partner-search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: rgb(148 163 184);
        pointer-events: none;
    }

    .partner-option {
        width: 100%;
        text-align: left;
        padding: 0.7rem 1rem;
        font-size: 0.875rem;
        color: rgb(15 23 42);
        transition: background-color 0.15s ease;
    }

    .dark .partner-option {
        color: rgb(226 232 240);
    }

    .partner-option:hover,
    .partner-option.active {
        background: #eff6ff;
    }

    .dark .partner-option:hover,
    .dark .partner-option.active {
        background: rgba(29, 78, 216, 0.35);
    }

    .partner-option[hidden] {
        display: none !important;
    }
</style>
@endpush

@section('page-content')
<div class="space-y-6 animate-fade-in" x-data="dailyStockManager()" x-init="init()">
    <!-- Header -->
    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-xl font-semibold text-slate-900 dark:text-white">Stok Harian</h1>
                <p class="text-slate-500 dark:text-slate-400 mt-1 text-sm">Input dan kelola stok harian produk</p>
                <p class="text-xs text-slate-400 dark:text-slate-500 mt-1">Cabang: {{ $branch->name ?? 'SEMUA CABANG' }}</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('daily-stocks.revisions.index') }}" class="relative inline-flex items-center gap-2 px-4 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-lg transition-colors text-sm shadow-sm">
                    <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                    Persetujuan Stok
                    @if(isset($pendingRevisionsCount) && $pendingRevisionsCount > 0)
                    <span class="inline-flex items-center justify-center px-2 py-0.5 ml-1 text-xs font-bold leading-none text-white bg-rose-500 rounded-full animate-pulse shadow">
                        {{ $pendingRevisionsCount }}
                    </span>
                    @endif
                </a>
                @if(!$needsClosing)
                <a href="{{ route('daily-stocks.barcode-input') }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg transition-colors text-sm">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-width="2" d="M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 4h2v2h-2v-2zm4-4h2v2h-2v-2zm-4-4h2v2h-2v-2z"/>
                    </svg>
                    {{ auth()->user()->role === 'partner' ? 'Input Stok' : 'Scan Barcode' }}
                </a>
                @if(auth()->user()->role !== 'partner')
                <button @click="openAddModal()" class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors text-sm">
                    <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>
                    Input Stok
                </button>
                @endif
                @endif
            </div>
        </div>
    </div>

    @if($needsClosing)
    <div class="p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl flex items-center gap-3 shadow-sm animate-fade-in">
        <svg class="w-5 h-5 text-amber-600 dark:text-amber-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <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>
        </svg>
        <p class="text-sm font-medium text-amber-800 dark:text-amber-300 flex-1">
            Harap lakukan closing harian terlebih dahulu untuk tanggal {{ \Carbon\Carbon::yesterday()->locale('id')->translatedFormat('j F Y') }} sebelum menginput stok harian hari ini. 
            <a href="{{ route('daily-reports.index') }}" class="underline hover:text-amber-950 dark:hover:text-amber-100 font-bold ml-1">Lakukan Closing &rarr;</a>
        </p>
    </div>
    @endif

    <!-- Filter -->
    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-4 flex flex-col sm:flex-row gap-2 items-start sm:items-center">
        <div class="flex flex-wrap gap-2 items-center w-full sm:w-auto">
            <input type="date" x-model="filterDate" @change="filterStocks()"
                   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">
            
            @if(in_array(auth()->user()->role, ['manager', 'super_admin', 'admin', 'partner']))
            <select x-model="filterBranch" @change="filterStocks()"
                    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">
                <option value="">SEMUA CABANG</option>
                @foreach($branches as $b)
                <option value="{{ $b->id }}">{{ strtoupper($b->name) }}</option>
                @endforeach
            </select>
            @endif
        </div>

        <div class="relative w-full sm:w-64 sm:ml-auto">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                <svg class="h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <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"/>
                </svg>
            </span>
            <input type="text" x-model="searchQuery" @input.debounce.300ms="filterStocks()"
                   placeholder="Cari produk atau mitra..."
                   class="w-full pl-9 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 text-sm">
        </div>
    </div>

    <!-- Table -->
    <div id="daily-stocks-table-container" class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">
        @include('daily-stocks.partials.table')
    </div>

    <!-- Edit Stock Modal -->
    <div id="editStockModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
        <div class="flex items-center justify-center min-h-screen px-4 py-8">
            <div class="fixed inset-0 bg-black/50" onclick="closeEditStockModal()"></div>
            <div class="relative bg-white dark:bg-slate-800 rounded-xl shadow-xl max-w-md w-full">
                <form id="editStockForm" method="POST">
                    @csrf
                    @method('PUT')
                    <!-- Modal Header -->
                    <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-slate-700">
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white">Edit Stok Harian</h3>
                        <button type="button" onclick="closeEditStockModal()" 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>
                    <!-- Modal Body -->
                    <div class="p-6 space-y-4">
                        <div class="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                            <p class="text-sm font-medium text-blue-900 dark:text-blue-300" id="editProductName"></p>
                            <div class="mt-1 text-xs text-blue-700 dark:text-blue-400">
                                <span>Stok Awal Saat Ini: <strong id="editCurrentStock"></strong></span>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
                                Stok Awal Baru <span class="text-red-500">*</span>
                            </label>
                            <input type="number" name="initial_stock" id="editInitialStockInput" min="0" required
                                   placeholder="Masukkan stok awal yang benar"
                                   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">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Keterangan / Alasan Edit</label>
                            <input type="text" name="notes" placeholder="Contoh: Salah input jumlah (opsional)"
                                   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">
                        </div>
                    </div>
                    <!-- Modal Footer -->
                    <div class="flex gap-3 p-6 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/30">
                        <button type="button" onclick="closeEditStockModal()" class="flex-1 px-4 py-2.5 bg-gray-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 font-medium rounded-lg">Batal</button>
                        <button type="submit" class="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Add Stock 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-xl max-w-2xl w-full"
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100">

                <form action="{{ route('daily-stocks.store') }}" method="POST" id="dailyStockForm">
                    @csrf
                    <input type="hidden" name="stock_date" x-model="form.stock_date">
                    <input type="hidden" id="partner-select" name="partner_id" x-model="form.partner_id" required>
                    <input type="hidden" name="product_id" x-model="form.product_id">
                    <input type="hidden" name="stock" x-model="form.stock">

                    <!-- Modal Header -->
                    <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-slate-700">
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white">Input Stok Harian</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>

                    <!-- Modal Body -->
                    <div class="p-6 space-y-4">
                        @if(in_array(auth()->user()->role, ['manager', 'super_admin', 'admin', 'partner']))
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Cabang <span class="text-red-500">*</span></label>
                            <select name="branch_id" x-model="form.branch_id" @change="onBranchChange()" required 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">
                                <option value="">Pilih Cabang</option>
                                @foreach($branches as $b)
                                <option value="{{ $b->id }}">{{ $b->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        @else
                        <input type="hidden" name="branch_id" value="{{ auth()->user()->branch_id }}">
                        @endif
                        <!-- Search input -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
                                {{ auth()->user()->role === 'partner' ? 'Cari Produk Anda' : 'Cari Produk atau Mitra' }} <span class="text-red-500">*</span>
                            </label>
                            <div class="partner-search-wrap" id="modal-product-search-wrap">
                                <svg class="partner-search-icon w-4 h-4" 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"
                                    id="modal-direct-product-search"
                                    autocomplete="off"
                                    placeholder="{{ auth()->user()->role === 'partner' ? 'Ketik nama produk, SKU, atau barcode...' : 'Ketik nama produk, SKU, barcode, atau nama mitra...' }}"
                                    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 text-sm"
                                    @input.debounce.300ms="searchModalProducts()"
                                >
                                <div id="modal-product-dropdown" class="hidden absolute left-0 right-0 top-full mt-2 z-50 overflow-hidden rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 shadow-lg">
                                    <div id="modal-product-options" class="max-h-60 overflow-y-auto py-1">
                                        <!-- Autocomplete options will be appended here -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Selected Partner Details Card -->
                        @if(auth()->user()->role !== 'partner')
                        <div id="selected-partner-card" class="hidden p-4 bg-emerald-50 dark:bg-emerald-950/20 border border-emerald-200 dark:border-emerald-800/60 rounded-xl flex items-center justify-between">
                            <div>
                                <h4 class="text-xs font-semibold text-emerald-700 dark:text-emerald-400 uppercase tracking-wider mb-1">Mitra Terpilih</h4>
                                <strong class="text-slate-900 dark:text-white" id="selected-partner-name"></strong>
                            </div>
                            <button type="button" @click="clearSelectedPartner()" class="px-2.5 py-1 text-xs text-red-600 hover:text-red-700 font-semibold transition-colors">
                                Ubah
                            </button>
                        </div>
                        @endif

                        <!-- Product List for Selected Partner -->
                        <div id="partner-product-list-wrapper" class="hidden space-y-2">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                                {{ auth()->user()->role === 'partner' ? 'Pilih Produk Anda' : 'Pilih Produk Mitra' }} <span class="text-red-500">*</span>
                            </label>
                            <input
                                type="text"
                                id="partner-product-search"
                                placeholder="{{ auth()->user()->role === 'partner' ? 'Filter produk Anda...' : 'Filter produk mitra ini...' }}"
                                class="w-full px-3 py-2 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-xs text-slate-900 dark:text-white placeholder-slate-400 mb-2"
                                oninput="filterPartnerProducts()"
                            >
                            <div id="partner-product-list" class="max-h-60 overflow-y-auto space-y-2 border border-gray-200 dark:border-slate-700 rounded-lg p-2 bg-slate-50/50 dark:bg-slate-900/10">
                                <!-- Radio options will be loaded here -->
                            </div>
                        </div>

                        <!-- Selected Product Details Card -->
                        <div id="selected-product-card" class="hidden p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800/60 rounded-xl">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="text-xs font-semibold text-blue-700 dark:text-blue-400 uppercase tracking-wider">Produk Terpilih</h4>
                                <button type="button" @click="clearSelectedProduct()" class="text-xs text-red-600 hover:text-red-700 font-semibold transition-colors">Ubah</button>
                            </div>
                            <div class="flex flex-col gap-1.5 text-sm text-slate-800 dark:text-slate-300">
                                <div><span class="text-slate-400">Nama:</span> <strong class="text-slate-900 dark:text-white" id="selected-p-name"></strong></div>
                                <div class="flex gap-4">
                                    <div><span class="text-slate-400">SKU:</span> <strong id="selected-p-sku"></strong></div>
                                    <div><span class="text-slate-400">Barcode:</span> <strong id="selected-p-barcode"></strong></div>
                                </div>
                                @if(auth()->user()->role !== 'partner')
                                <div><span class="text-slate-400">Mitra:</span> <strong class="text-slate-900 dark:text-white" id="selected-p-partner"></strong></div>
                                @endif
                                <div><span class="text-slate-400">Stok Aktif Cabang:</span> <strong class="text-slate-900 dark:text-white" id="selected-p-stock"></strong></div>
                            </div>
                        </div>

                        <div x-show="form.product_id">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Jumlah Stok <span class="text-red-500">*</span></label>
                            <input type="number" name="stock_display" x-model="form.stock" min="1" required 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">
                        </div>
                    </div>

                    <!-- Modal Footer -->
                    <div class="flex gap-3 p-6 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/30">
                        <button type="button" @click="closeModal()" class="flex-1 px-4 py-2.5 bg-gray-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 font-medium rounded-lg">Batal</button>
                        <button type="submit" class="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg">Simpan Stok</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
const allPartners = @json($partners);

function dailyStockManager() {
return {
    showModal: false,
    filterDate: '{{ request('date', today()->format("Y-m-d")) }}',
    filterBranch: '{{ request('branch_id', '') }}',
    searchQuery: '{{ request('search', '') }}',
    form: {
        stock_date: '{{ today()->format("Y-m-d") }}',
        partner_id: '',
        product_id: '',
        stock: 1,
        branch_id: '{{ request('branch_id', auth()->user()->branch_id) }}'
    },
    selectedProduct: null,

    onBranchChange() {
        this.clearSelectedPartner();
    },
    
        filterStocks() {
            const params = new URLSearchParams();
            if (this.filterDate) params.append('date', this.filterDate);
            if (this.filterBranch) params.append('branch_id', this.filterBranch);
            if (this.searchQuery) params.append('search', this.searchQuery);

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

            fetch(`{{ route('daily-stocks.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('daily-stocks-table-container').innerHTML = html;
                history.pushState(null, '', url);
            })
            .catch(err => {
                console.error('Filter error:', err);
            });
        },

        init() {
            this.initDirectProductSearch();

            document.getElementById('daily-stocks-table-container').addEventListener('click', (e) => {
                const link = e.target.closest('a[href*="page="]');
                if (!link) return;
                e.preventDefault();
                const page = new URL(link.href).searchParams.get('page');
                const params = new URLSearchParams();
                if (this.filterDate) params.append('date', this.filterDate);
                if (this.filterBranch) params.append('branch_id', this.filterBranch);
                if (this.searchQuery) params.append('search', this.searchQuery);
                if (page) params.append('page', page);

                fetch(`{{ route('daily-stocks.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('daily-stocks-table-container').innerHTML = html;
                    history.pushState(null, '', `{{ route('daily-stocks.index') }}?${params.toString()}`);
                })
                .catch(err => { console.error('Pagination error:', err); });
            });
        },

        initDirectProductSearch() {
            const searchInput = document.getElementById('modal-direct-product-search');
            const dropdown = document.getElementById('modal-product-dropdown');
            const optionsContainer = document.getElementById('modal-product-options');
            const wrap = document.getElementById('modal-product-search-wrap');

            if (!searchInput || !dropdown || !optionsContainer || !wrap) return;

            let debounceTimeout = null;
            let activeIndex = -1;

            const getVisibleOptions = () => {
                return Array.from(optionsContainer.querySelectorAll('button'));
            };

            const updateActiveOption = () => {
                const options = getVisibleOptions();
                options.forEach((opt, idx) => {
                    if (idx === activeIndex) {
                        opt.classList.add('active');
                        opt.scrollIntoView({ block: 'nearest' });
                    } else {
                        opt.classList.remove('active');
                    }
                });
            };

            const performSearch = () => {
                const query = searchInput.value.trim().toLowerCase();
                if (query.length < 2) {
                    dropdown.classList.add('hidden');
                    optionsContainer.innerHTML = '';
                    activeIndex = -1;
                    return;
                }

                optionsContainer.innerHTML = '<div class="px-4 py-2.5 text-xs text-slate-500 italic">Mencari...</div>';
                dropdown.classList.remove('hidden');
                activeIndex = -1;

                // Client-side search matching partners (only for non-partner roles)
                const isPartnerRole = {{ auth()->user()->role === 'partner' ? 'true' : 'false' }};
                const matchingPartners = isPartnerRole ? [] : allPartners.filter(p => p.name.toLowerCase().includes(query));

                // Fetch matching products
                fetch(`/daily-stocks/search?query=${encodeURIComponent(query)}&branch_id=${this.form.branch_id || ''}`)
                    .then(res => res.json())
                    .then(data => {
                        activeIndex = -1;
                        const products = (data.success && data.products) ? data.products : [];

                        if (matchingPartners.length === 0 && products.length === 0) {
                            optionsContainer.innerHTML = '<div class="px-4 py-2.5 text-xs text-red-500">Hasil tidak ditemukan!</div>';
                            return;
                        }

                        let partnerItemsHtml = '';
                        if (matchingPartners.length > 0) {
                            partnerItemsHtml = matchingPartners.map(p => `
                                <button
                                    type="button"
                                    class="partner-option cursor-pointer bg-emerald-500/5 dark:bg-emerald-500/10 border-l-4 border-emerald-500"
                                    data-type="partner"
                                    data-partner-id="${p.id}"
                                    data-partner-name="${p.name}"
                                >
                                    <div class="flex justify-between items-center w-full">
                                        <div>
                                            <div class="font-semibold text-emerald-700 dark:text-emerald-400 text-sm text-left">${p.name}</div>
                                            <div class="text-[10px] text-slate-400 text-left">Pilih mitra untuk melihat semua produknya</div>
                                        </div>
                                        <span class="px-2 py-0.5 rounded-full text-[9px] font-bold bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300 uppercase">Mitra</span>
                                    </div>
                                </button>
                            `).join('');
                        }

                        let productItemsHtml = '';
                        if (products.length > 0) {
                            productItemsHtml = products.map(p => `
                                <button
                                    type="button"
                                    class="partner-option cursor-pointer"
                                    data-type="product"
                                    data-product-id="${p.id}"
                                    data-partner-id="${p.partner_id}"
                                    data-product-name="${p.name}"
                                    data-product-sku="${p.sku || '-'}"
                                    data-product-barcode="${p.barcode || '-'}"
                                    data-partner-name="${p.partner_name}"
                                    data-product-stock="${p.current_stock}"
                                >
                                    <div class="flex justify-between items-center w-full">
                                        <div>
                                            <div class="font-medium text-slate-900 dark:text-white text-sm text-left">${p.name}</div>
                                            ${isPartnerRole ? '' : `<div class="text-xs text-slate-500 text-left">Mitra: ${p.partner_name}</div>`}
                                        </div>
                                        <div class="text-right">
                                            <span class="text-xs font-mono text-slate-400 bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded">${p.barcode || p.sku || '-'}</span>
                                            <div class="text-[10px] text-slate-400 mt-0.5">Stok: ${p.current_stock}</div>
                                        </div>
                                    </div>
                                </button>
                            `).join('');
                        }

                        optionsContainer.innerHTML = partnerItemsHtml + productItemsHtml;
                    })
                    .catch(err => {
                        optionsContainer.innerHTML = '<div class="px-4 py-2.5 text-xs text-red-500">Terjadi kesalahan pencarian!</div>';
                        console.error('Modal search fetch error:', err);
                    });
            };

            searchInput.addEventListener('input', () => {
                clearTimeout(debounceTimeout);
                debounceTimeout = setTimeout(performSearch, 300);
            });

            searchInput.addEventListener('focus', () => {
                if (searchInput.value.trim().length >= 2) {
                    dropdown.classList.remove('hidden');
                }
            });

            searchInput.addEventListener('keydown', (e) => {
                const options = getVisibleOptions();
                if (options.length === 0 || dropdown.classList.contains('hidden')) {
                    return;
                }

                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    activeIndex = (activeIndex + 1) % options.length;
                    updateActiveOption();
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    activeIndex = (activeIndex - 1 + options.length) % options.length;
                    updateActiveOption();
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    if (activeIndex >= 0 && activeIndex < options.length) {
                        options[activeIndex].click();
                    }
                } else if (e.key === 'Escape') {
                    dropdown.classList.add('hidden');
                }
            });

            optionsContainer.addEventListener('click', (e) => {
                const btn = e.target.closest('button');
                if (!btn) return;
                e.preventDefault();

                const type = btn.dataset.type;

                if (type === 'partner') {
                    const partnerId = btn.dataset.partnerId;
                    const partnerName = btn.dataset.partnerName;

                    this.selectPartner({
                        id: partnerId,
                        name: partnerName
                    });
                } else {
                    const pId = btn.dataset.productId;
                    const partnerId = btn.dataset.partnerId;
                    const pName = btn.dataset.productName;
                    const pSku = btn.dataset.productSku;
                    const pBarcode = btn.dataset.productBarcode;
                    const partnerName = btn.dataset.partnerName;
                    const pStock = btn.dataset.productStock;

                    this.selectProduct({
                        id: pId,
                        partner_id: partnerId,
                        name: pName,
                        sku: pSku,
                        barcode: pBarcode,
                        partner_name: partnerName,
                        current_stock: pStock
                    });
                }

                dropdown.classList.add('hidden');
                searchInput.value = '';
            });

            document.addEventListener('click', (e) => {
                if (!wrap.contains(e.target)) {
                    dropdown.classList.add('hidden');
                }
            });
        },

        selectPartner(partner) {
            this.form.partner_id = partner.id;
            this.form.product_id = '';
            this.selectedProduct = null;

            document.getElementById('partner-select').value = partner.id;
            document.querySelector('input[name="product_id"]').value = '';
            
            // Set Partner Card details
            document.getElementById('selected-partner-name').textContent = partner.name;
            document.getElementById('selected-partner-card').classList.remove('hidden');

            // Hide product card
            document.getElementById('selected-product-card').classList.add('hidden');

            // Load products for this partner
            this.loadPartnerProducts(partner.id);
        },

        clearSelectedPartner() {
            this.form.partner_id = '';
            this.form.product_id = '';
            this.selectedProduct = null;

            document.getElementById('partner-select').value = '';
            document.querySelector('input[name="product_id"]').value = '';
            document.getElementById('selected-partner-card').classList.add('hidden');
            document.getElementById('partner-product-list-wrapper').classList.add('hidden');
            document.getElementById('partner-product-list').innerHTML = '';
            document.getElementById('selected-product-card').classList.add('hidden');
            document.getElementById('modal-direct-product-search').value = '';
        },

        loadPartnerProducts(partnerId) {
            const productList = document.getElementById('partner-product-list');
            const wrapper = document.getElementById('partner-product-list-wrapper');

            if (!productList || !wrapper) return;

            productList.innerHTML = '<div class="px-2 py-3 text-xs text-slate-500 italic">Memuat produk mitra...</div>';
            wrapper.classList.remove('hidden');

            fetch(`/labels/products/${partnerId}?branch_id=${this.form.branch_id || ''}`)
                .then(res => res.json())
                .then(products => {
                    if (products.length === 0) {
                        productList.innerHTML = '<div class="px-2 py-3 text-xs text-slate-500 italic">Tidak ada produk untuk mitra ini</div>';
                        return;
                    }

                    productList.innerHTML = products.map(p => `
                        <label class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-slate-700/50 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors partner-product-item" data-product-name="${p.name.toLowerCase()}" data-product-sku="${(p.sku || '').toLowerCase()}" data-product-barcode="${(p.barcode || '').toLowerCase()}">
                            <input type="radio" name="partner_product_radio" value="${p.id}" class="w-4 h-4 text-blue-600 partner-product-radio"
                                data-product-id="${p.id}"
                                data-partner-id="${partnerId}"
                                data-product-name="${p.name}"
                                data-product-sku="${p.sku || '-'}"
                                data-product-barcode="${p.barcode || '-'}"
                                data-partner-name="${p.partner ? p.partner.name : ''}"
                                data-product-stock="${p.stock || 0}"
                            >
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-slate-900 dark:text-white truncate">${p.name}</p>
                                <p class="text-xs text-slate-500">Rp ${parseInt(p.price || 0).toLocaleString('id-ID')}</p>
                            </div>
                            <code class="text-xs text-slate-400 font-mono">${p.barcode || '-'}</code>
                        </label>
                    `).join('');

                    // Add change listener to radio buttons
                    productList.querySelectorAll('.partner-product-radio').forEach(radio => {
                        radio.addEventListener('change', (event) => {
                            const dataset = event.target.dataset;
                            this.selectProduct({
                                id: dataset.productId,
                                partner_id: dataset.partnerId,
                                name: dataset.productName,
                                sku: dataset.productSku,
                                barcode: dataset.productBarcode,
                                partner_name: dataset.partnerName,
                                current_stock: dataset.productStock
                            });
                        });
                    });
                })
                .catch(err => {
                    productList.innerHTML = '<div class="px-2 py-3 text-xs text-red-500">Gagal memuat produk</div>';
                    console.error('Error loading partner products:', err);
                });
        },

        selectProduct(product) {
            this.selectedProduct = product;
            this.form.product_id = product.id;
            this.form.partner_id = product.partner_id;

            // Set hidden inputs in form explicitly to be sure
            document.getElementById('partner-select').value = product.partner_id;
            document.querySelector('input[name="product_id"]').value = product.id;

            // Populate Selected Product Details Card
            document.getElementById('selected-p-name').textContent = product.name;
            document.getElementById('selected-p-sku').textContent = product.sku;
            document.getElementById('selected-p-barcode').textContent = product.barcode;
            document.getElementById('selected-p-partner').textContent = product.partner_name;
            document.getElementById('selected-p-stock').textContent = product.current_stock;
            
            // Show Card
            document.getElementById('selected-product-card').classList.remove('hidden');
        },

        clearSelectedProduct() {
            this.selectedProduct = null;
            this.form.product_id = '';
            document.querySelector('input[name="product_id"]').value = '';
            document.getElementById('selected-product-card').classList.add('hidden');
            
            // Clear checked radio in partner list if any
            const checkedRadio = document.querySelector('input[name="partner_product_radio"]:checked');
            if (checkedRadio) checkedRadio.checked = false;

            if (!this.form.partner_id) {
                this.form.partner_id = '';
                document.getElementById('partner-select').value = '';
                document.getElementById('modal-direct-product-search').value = '';
            }
        },

        openAddModal() {
            this.showModal = true;
            @if(auth()->user()->role === 'partner' && auth()->user()->partner_id)
            this.$nextTick(() => {
                const userPartnerId = '{{ auth()->user()->partner_id }}';
                const userPartnerName = '{{ addslashes(auth()->user()->partner->name ?? "") }}';
                this.selectPartner({
                    id: userPartnerId,
                    name: userPartnerName
                });
            });
            @endif
        },

        closeModal() {
            this.showModal = false;
            this.clearSelectedPartner();
            this.form = {
                stock_date: '{{ today()->format("Y-m-d") }}',
                partner_id: '',
                product_id: '',
                stock: 1
            };
        }
    }
}

function filterPartnerProducts() {
    const query = document.getElementById('partner-product-search')?.value.trim().toLowerCase() || '';
    const items = document.querySelectorAll('#partner-product-list .partner-product-item');
    
    items.forEach(item => {
        const name = item.getAttribute('data-product-name') || '';
        const sku = item.getAttribute('data-product-sku') || '';
        const barcode = item.getAttribute('data-product-barcode') || '';
        
        if (query === '' || name.includes(query) || sku.includes(query) || barcode.includes(query)) {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
}
</script>

<!-- Modal Ajukan Revisi Stok (Mitra) -->
<div id="revisionModal" class="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm hidden items-center justify-center p-4">
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-xl max-w-md w-full p-6 space-y-4">
        <div class="flex items-center justify-between border-b border-gray-100 dark:border-slate-700 pb-3">
            <h3 class="text-lg font-bold text-slate-900 dark:text-white">Ajukan Revisi Stok Harian</h3>
            <button type="button" onclick="closeRevisionModal()" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 text-xl font-bold">&times;</button>
        </div>
        <form id="revisionForm" method="POST" action="{{ route('daily-stocks.revisions.store') }}">
            @csrf
            <input type="hidden" name="daily_stock_id" id="rev_daily_stock_id">
            
            <div class="space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Nama Produk</label>
                    <input type="text" id="rev_product_name" readonly class="w-full px-3 py-2 bg-gray-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-lg text-sm font-medium border-0 cursor-not-allowed">
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Stok Awal Saat Ini</label>
                        <input type="text" id="rev_current_stock" readonly class="w-full px-3 py-2 bg-gray-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-lg text-sm font-medium border-0 text-center cursor-not-allowed">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Stok Awal Baru</label>
                        <input type="number" name="requested_initial_stock" min="0" required class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 dark:bg-slate-700 rounded-lg text-sm font-bold text-center text-blue-600 focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Alasan Pengajuan Revisi <span class="text-rose-500">*</span></label>
                    <textarea name="reason" rows="3" required placeholder="Jelaskan alasan pengubahan stok (misal: salah input, barang fisik kurang, dll)..."
                              class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 dark:bg-slate-700 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
            </div>

            <div class="flex justify-end gap-3 mt-6">
                <button type="button" onclick="closeRevisionModal()" class="px-4 py-2 bg-gray-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-lg text-sm font-medium hover:bg-gray-200">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white rounded-lg text-sm font-medium transition-colors shadow-sm">
                    Kirim Pengajuan
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openRevisionModal(stockId, productName, currentStock) {
    document.getElementById('rev_daily_stock_id').value = stockId;
    document.getElementById('rev_product_name').value = productName;
    document.getElementById('rev_current_stock').value = currentStock;
    document.getElementById('revisionModal').classList.remove('hidden');
    document.getElementById('revisionModal').classList.add('flex');
}

function closeRevisionModal() {
    document.getElementById('revisionModal').classList.add('hidden');
    document.getElementById('revisionModal').classList.remove('flex');
}
</script>

<script>
// Edit Stock Modal Logic
function openEditModal(stockId, productName, initialStock) {
    document.getElementById('editProductName').textContent = productName;
    document.getElementById('editCurrentStock').textContent = initialStock;
    document.getElementById('editInitialStockInput').value = initialStock;

    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    const form = document.getElementById('editStockForm');
    form.action = `/daily-stocks/${stockId}`;

    // Ensure CSRF field is present
    let csrfInput = form.querySelector('input[name="_token"]');
    if (!csrfInput) {
        csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        form.prepend(csrfInput);
    }
    csrfInput.value = csrfToken;

    document.getElementById('editStockModal').classList.remove('hidden');
}

function closeEditStockModal() {
    document.getElementById('editStockModal').classList.add('hidden');
    document.getElementById('editInitialStockInput').value = '';
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeEditStockModal();
        closeRevisionModal();
    }
});
</script>
@endsection