@extends('layouts.panel')

@section('title', 'پروفایل انبار: ' . $warehouse->name)

@section('content')
<main class="w-full">
    <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b pb-4 mb-6 border-slate-700">
        <div>
            <h1 class="text-2xl font-bold text-slate-100">{{ $warehouse->name }}</h1>
            <p class="text-sm text-slate-400 mt-1">{{ $warehouse->location ? $warehouse->location : 'انبار' }}</p>
        </div>
        <div class="flex gap-2">
            <button id="addOutputBtn" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-medium rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl glow">افزودن سریع خروجی</button>
            <a href="{{ route('admin.inventory.warehouses') }}" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-slate-200">
                بازگشت به لیست
            </a>
        </div>
    </header>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="glass rounded-xl p-4">
            <div class="text-sm text-slate-400">تعداد محصولات</div>
            <div class="text-2xl font-bold text-blue-400 mt-2">{{ $stats['total_products'] }}</div>
        </div>
        <div class="glass rounded-xl p-4">
            <div class="text-sm text-slate-400">تعداد آیتم‌های موجودی</div>
            <div class="text-2xl font-bold text-purple-400 mt-2">{{ $stats['total_items'] }}</div>
        </div>
        <div class="glass rounded-xl p-4">
            <div class="text-sm text-slate-400">مجموع مقدار موجودی</div>
            <div class="text-2xl font-bold text-green-400 mt-2">{{ number_format($stats['total_quantity']) }}</div>
        </div>
    </div>

    <!-- Warehouse Information -->
    <section class="glass rounded-2xl p-6 mb-6">
        <h2 class="text-xl font-bold text-slate-200 mb-4">اطلاعات انبار</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <div class="text-sm text-slate-400 mb-1">نام شهر</div>
                <div class="text-slate-200">{{ $warehouse->location ?: '-' }}</div>
            </div>
            <div>
                <div class="text-sm text-slate-400 mb-1">اسم انبار</div>
                <div class="text-slate-200">{{ $warehouse->name ?: '-' }}</div>
            </div>
            <div>
                <div class="text-sm text-slate-400 mb-1">آدرس</div>
                <div class="text-slate-200">{{ $warehouse->address ?: '-' }}</div>
            </div>
            <div>
                <div class="text-sm text-slate-400 mb-1">شماره تماس</div>
                <div class="text-slate-200">
                    @php
                        $phones = is_array($warehouse->phone_numbers) ? $warehouse->phone_numbers : json_decode($warehouse->phone_numbers, true);
                    @endphp
                    @if($phones && count($phones) > 0)
                        @foreach($phones as $phone)
                            <div>{{ $phone['number'] ?? '' }}@if(isset($phone['support']) && $phone['support']) ({{ $phone['support'] }})@endif</div>
                        @endforeach
                    @else
                        -
                    @endif
                </div>
            </div>
            <div>
                <div class="text-sm text-slate-400 mb-1">توضیحات</div>
                <div class="text-slate-200">{{ $warehouse->description ?: '-' }}</div>
            </div>
            <div>
                <!-- Empty cell for alignment -->
            </div>
        </div>
    </section>

    <!-- Inventory Items List -->
    <section class="glass rounded-2xl p-6">
        <h2 class="text-xl font-bold text-slate-200 mb-4">لیست موجودی‌ها</h2>
        
        <div class="table-card">
            <div class="table-wrapper">
                <table class="min-w-full text-sm">
                    <thead>
                        <tr>
                            <th style="width:60px">ردیف</th>
                            <th>نام محصول</th>
                            <th>شماره ردیف انبار</th>
                            <th>مقدار باقی مانده</th>
                            <th>برند</th>
                            <th>گرید</th>
                            <th>تاریخ / مقدار برداشتی</th>
                            <th>تاریخ انقضا</th>
                            <th>عملیات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if($inventories->count() > 0)
                            @foreach($inventories as $index => $inventory)
                                @php
                                    $totalOutputs = $inventory->outputs->sum('quantity');
                                    $remainingQuantity = max(0, $inventory->quantity - $totalOutputs);
                                    $lastOutput = $inventory->outputs->sortByDesc('created_at')->first();
                                    
                                    // Extract row number, expiration date, brand, and grade from notes
                                    $rowNumber = null;
                                    $expirationDate = null;
                                    $brand = null;
                                    $grade = null;
                                    if ($inventory->notes) {
                                        $notesLines = explode("\n", $inventory->notes);
                                        foreach ($notesLines as $line) {
                                            if (preg_match('/شماره ردیف انبار:\s*(.+)/', $line, $matches)) {
                                                $rowNumber = trim($matches[1]);
                                            }
                                            if (preg_match('/تاریخ انقضا:\s*(.+)/', $line, $matches)) {
                                                $expirationDate = trim($matches[1]);
                                            }
                                            if (preg_match('/برند:\s*(.+)/', $line, $matches)) {
                                                $brand = trim($matches[1]);
                                            }
                                            if (preg_match('/گرید:\s*(.+)/', $line, $matches)) {
                                                $grade = trim(preg_replace('/⭐\s*/', '', $matches[1]));
                                            }
                                        }
                                    }
                                @endphp
                                <tr class="hover:bg-white/5 transition duration-150 ease-in-out" data-product-id="{{ $inventory->product_id }}">
                                    <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-slate-300">{{ $index + 1 }}</td>
                                    <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-slate-200">
                                        <div class="flex items-center gap-2">
                                            <span>{{ $inventory->product->name ?? 'نامشخص' }}</span>
                                            <button onclick="toggleOutputHistory({{ $inventory->id }})" class="text-xs text-blue-400 hover:text-blue-300">
                                                ({{ $inventory->outputs->count() }} برداشت)
                                            </button>
                                        </div>
                                    </td>
                                    <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-300">
                                        {{ $rowNumber ?? '-' }}
                                    </td>
                                    <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-300">
                                        <div>
                                            <div class="font-medium">{{ number_format($remainingQuantity, 0) }} {{ $inventory->unit ?? '' }}</div>
                                            <div class="text-xs text-slate-500 mt-1">کل: {{ number_format((float)$inventory->quantity, 0) }} {{ $inventory->unit ?? '' }}</div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-300">
                                        {{ $brand ?? '-' }}
                                    </td>
                                    <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-300">
                                        {{ $grade ?? '-' }}
                                    </td>
                                    <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-300">
                                        @if($lastOutput)
                                            <div>
                                                <div class="text-slate-400">@jdate($lastOutput->created_at, 'Y/m/d')</div>
                                                <div class="text-red-400 font-medium mt-1">-{{ number_format($lastOutput->quantity, 0) }} {{ $inventory->unit ?? '' }}</div>
                                            </div>
                                        @else
                                            <span class="text-slate-500">-</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-300">
                                        @if($expirationDate)
                                            @php
                                                // Try to convert to Jalali if it's a Gregorian date
                                                try {
                                                    if (preg_match('/^(\d{4})-(\d{2})-(\d{2})$/', $expirationDate, $matches)) {
                                                        $date = new \Carbon\Carbon($expirationDate);
                                                        $jalali = \Morilog\Jalali\Jalalian::fromCarbon($date);
                                                        echo $jalali->format('Y/m/d');
                                                    } else {
                                                        echo $expirationDate;
                                                    }
                                                } catch (\Exception $e) {
                                                    echo $expirationDate;
                                                }
                                            @endphp
                                        @else
                                            <span class="text-slate-500">-</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-4 whitespace-nowrap">
                                        <div class="actions">
                                            <a href="{{ route('admin.inventory.profile', ['inventory' => $inventory->id]) }}" class="btn-action">مشاهده</a>
                                            <a href="/admin/inventory?edit={{ $inventory->id }}" class="btn-action btn-edit">ویرایش</a>
                                            <button class="btn-action btn-delete" data-action="delete-inventory" data-inventory-id="{{ $inventory->id }}" data-product-name="{{ $inventory->product->name ?? '' }}">حذف</button>
                                            <button class="btn-action btn-add-product" data-action="add-output" data-inventory-id="{{ $inventory->id }}">ثبتی</button>
                                        </div>
                                    </td>
                                </tr>
                                <!-- Output History Row (Hidden by default) -->
                                <tr id="output-history-{{ $inventory->id }}" class="hidden bg-slate-800/30">
                                    <td colspan="9" class="px-4 py-4">
                                        <div class="ml-8">
                                            <h4 class="text-sm font-semibold text-slate-300 mb-2">تاریخچه برداشت‌ها:</h4>
                                            @if($inventory->outputs->count() > 0)
                                                <div class="space-y-2">
                                                    @foreach($inventory->outputs->sortByDesc('created_at') as $output)
                                                        <div class="text-xs text-slate-400 border-r-2 border-slate-600 pr-3">
                                                            <div class="flex items-center gap-2">
                                                                <span>@jdate($output->created_at, 'Y/m/d H:i')</span>
                                                                <span class="text-red-400">-{{ number_format($output->quantity, 0) }} {{ $inventory->unit ?? '' }}</span>
                                                                @if($output->row_number)
                                                                    <span class="text-slate-500">| ردیف: {{ $output->row_number }}</span>
                                                                @endif
                                                            </div>
                                                            @if($output->description)
                                                                <div class="text-slate-500 mt-1">{{ $output->description }}</div>
                                                            @endif
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @else
                                                <div class="text-xs text-slate-500">هیچ برداشتی ثبت نشده است</div>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="9" class="text-center py-8 text-slate-400">هیچ موجودی‌ای در این انبار یافت نشد</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <!-- Add Output Modal -->
    <div id="outputModalOverlay" class="modal-overlay hidden">
        <div class="modal modal-sm" style="width: 550px; max-width: 550px !important;">
            <div class="modal-header">
                <h2>افزودن خروجی جدید</h2>
                <button class="close-modal-btn">×</button>
            </div>
            <form id="outputForm" novalidate>
                <input type="hidden" id="outputWarehouseId" value="{{ $warehouse->id }}">
                <div class="modal-body" style="display: flex; flex-direction: column; gap: 16px;">
                    <div class="form-group">
                        <label for="outputProductName">اسم محصول</label>
                        <input type="text" id="outputProductName" required placeholder="نام محصول را وارد کنید" autocomplete="off">
                        <input type="hidden" id="outputProductId">
                        <div id="output-product-list" class="absolute z-10 w-full mt-1 rounded-lg shadow-lg overflow-hidden hidden bg-slate-800 border border-slate-600" style="max-height: 200px; overflow-y: auto;"></div>
                    </div>
                    <div class="form-group">
                        <label for="outputRowNumber">شماره ردیف</label>
                        <input type="text" id="outputRowNumber" placeholder="شماره ردیف را وارد کنید">
                    </div>
                    <div class="form-group">
                        <label for="outputQuantity">مقدار خروجی</label>
                        <input type="number" id="outputQuantity" step="0.001" min="0.001" required placeholder="مقدار خروجی را وارد کنید">
                    </div>
                    <div class="form-group">
                        <label for="outputDescription">توضیحات</label>
                        <textarea id="outputDescription" rows="3" placeholder="توضیحات را وارد کنید"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary close-modal-btn">انصراف</button>
                    <button type="submit" class="btn btn-primary">ثبت خروجی</button>
                </div>
            </form>
        </div>
    </div>
</main>
@endsection

@push('styles')
<style>
    .table-card {
        @apply glass rounded-xl overflow-hidden;
    }
    
    .table-wrapper {
        @apply overflow-x-auto;
    }
    
    .table-wrapper table {
        @apply w-full;
    }
    
    .table-wrapper thead {
        @apply bg-slate-800/50;
    }
    
    .table-wrapper th {
        @apply px-4 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider border-b border-slate-700;
    }
    
    .table-wrapper tbody tr {
        @apply hover:bg-white/5 transition duration-150 ease-in-out border-b border-slate-800;
    }
    
    .table-wrapper td {
        @apply px-4 py-4 whitespace-nowrap text-sm;
    }
    
    .modal-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.75);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 50;
        backdrop-filter: blur(4px);
    }
    
    .modal {
        background: rgba(30, 41, 59, 0.95);
        border-radius: 1rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
        max-width: 90vw;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-sm {
        width: 550px;
    }
    
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    }
    
    .modal-header h2 {
        font-size: 1.25rem;
        font-weight: 700;
        color: #e2e8f0;
    }
    
    .close-modal-btn {
        background: transparent;
        border: none;
        color: #cbd5e1;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        transition: all 0.2s;
    }
    
    .close-modal-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }
    
    .modal-body {
        padding: 1.5rem;
    }
    
    .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        padding: 1.5rem;
        border-top: 1px solid rgba(148, 163, 184, 0.2);
    }
    
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        position: relative;
    }
    
    .form-group label {
        font-size: 0.875rem;
        font-weight: 500;
        color: #cbd5e1;
    }
    
    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(148, 163, 184, 0.3);
        border-radius: 0.5rem;
        color: #e2e8f0;
        font-size: 0.875rem;
    }
    
    .form-group input:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    
    .btn {
        padding: 1.5rem 1.5rem;
        border-radius: 0.75rem;
        font-weight: 500;
        transition: all 0.2s;
        border: none;
        cursor: pointer;
        min-width: 120px;
        text-align: center;
    }
    
    .btn-primary {
        background: linear-gradient(to right, #2563eb, #4f46e5);
        color: white;
    }
    
    .btn-primary:hover {
        background: linear-gradient(to right, #1d4ed8, #4338ca);
    }
    
    .btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: #e2e8f0;
    }
    
    .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    
    .close-modal-btn.btn:not(.btn-secondary) {
        min-width: auto;
        width: 32px;
        height: 32px;
        padding: 0;
    }
    
    .actions {
        display: flex;
        gap: 8px;
        justify-content: flex-start;
    }
    
    .btn-action {
        border: 1px solid rgba(148, 163, 184, 0.25);
        background: transparent;
        color: #cbd5e1;
        border-radius: 8px;
        padding: 6px 10px;
        cursor: pointer;
        font-size: 12px;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-block;
    }
    
    .btn-action:hover {
        background: rgba(148, 163, 184, 0.1);
        color: #f8fafc;
    }
    
    .btn-action.btn-edit:hover {
        border-color: #fbbf24;
        color: #fbbf24;
    }
    
    .btn-action.btn-delete:hover {
        border-color: #f87171;
        color: #f87171;
    }
    
    .btn-action.btn-add-product {
        border-color: #22c55e;
        color: #22c55e;
    }
    
    .btn-action.btn-add-product:hover {
        background: #22c55e;
        color: white;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('outputModalOverlay');
    const addBtn = document.getElementById('addOutputBtn');
    const form = document.getElementById('outputForm');
    const closeButtons = document.querySelectorAll('.close-modal-btn');
    const productInput = document.getElementById('outputProductName');
    const productIdInput = document.getElementById('outputProductId');
    const productList = document.getElementById('output-product-list');
    
    let productSearchTimer = null;
    
    // Product search functionality
    if (productInput && productList) {
        productInput.addEventListener('input', function() {
            const query = this.value.trim();
            productIdInput.value = '';
            
            clearTimeout(productSearchTimer);
            productSearchTimer = setTimeout(() => {
                if (query.length >= 2) {
                    searchProducts(query);
                } else {
                    hideProductList();
                }
            }, 300);
        });
        
        function searchProducts(query) {
            fetch(`/admin/products/search?q=${encodeURIComponent(query)}`)
                .then(response => response.json())
                .then(data => {
                    if (data && Array.isArray(data) && data.length > 0) {
                        displayProducts(data);
                    } else {
                        hideProductList();
                    }
                })
                .catch(() => hideProductList());
        }
        
        function displayProducts(products) {
            productList.innerHTML = '';
            if (products.length === 0) {
                productList.innerHTML = '<div class="px-4 py-2 text-slate-400 text-sm">محصولی یافت نشد</div>';
            } else {
                products.forEach(product => {
                    const div = document.createElement('div');
                    div.className = 'px-4 py-3 cursor-pointer hover:bg-slate-700 text-slate-200 border-b border-slate-600 last:border-b-0 transition duration-200';
                    div.innerHTML = `
                        <div class="font-medium text-sm">${product.name}</div>
                        <div class="text-xs text-slate-400 mt-1">ID: ${product.id}</div>
                    `;
                    div.addEventListener('click', () => {
                        productInput.value = product.name;
                        productIdInput.value = product.id;
                        hideProductList();
                    });
                    productList.appendChild(div);
                });
            }
            productList.classList.remove('hidden');
        }
        
        function hideProductList() {
            productList.classList.add('hidden');
            productList.innerHTML = '';
        }
        
        // Hide list when clicking outside
        document.addEventListener('click', function(e) {
            if (!productList.contains(e.target) && e.target !== productInput) {
                hideProductList();
            }
        });
    }
    
    // Open modal
    if (addBtn) {
        addBtn.addEventListener('click', () => {
            modal.classList.remove('hidden');
        });
    }
    
    // Close modal
    closeButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            modal.classList.add('hidden');
            form.reset();
            productIdInput.value = '';
        });
    });
    
    // Close modal when clicking outside
    if (modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === modal) {
                modal.classList.add('hidden');
                form.reset();
                productIdInput.value = '';
            }
        });
    }
    
    // Handle form submit
    if (form) {
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            if (!productIdInput.value) {
                if (window.showErrorModal) {
                    window.showErrorModal('لطفاً یک محصول را انتخاب کنید');
                } else {
                    alert('لطفاً یک محصول را انتخاب کنید');
                }
                return;
            }
            
            const formData = {
                warehouse_id: document.getElementById('outputWarehouseId').value,
                product_id: productIdInput.value,
                row_number: document.getElementById('outputRowNumber').value || null,
                quantity: parseFloat(document.getElementById('outputQuantity').value),
                description: document.getElementById('outputDescription').value || null,
            };
            
            const submitButton = form.querySelector('button[type="submit"]');
            const originalText = submitButton.textContent;
            submitButton.disabled = true;
            submitButton.textContent = 'در حال ثبت...';
            
            try {
                const response = await fetch(`/admin/inventory/warehouses/${formData.warehouse_id}/output`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify(formData)
                });
                
                const result = await response.json();
                
                if (result.success || result.ok) {
                    modal.classList.add('hidden');
                    form.reset();
                    productIdInput.value = '';
                    if (window.showSuccessModalWithAutoClose) {
                        window.showSuccessModalWithAutoClose('خروجی با موفقیت ثبت شد');
                        setTimeout(() => window.location.reload(), 1500);
                    } else {
                        alert('خروجی با موفقیت ثبت شد');
                        window.location.reload();
                    }
                } else {
                    const errorMessage = result.message || 'خطای ناشناخته';
                    if (window.showErrorModal) {
                        window.showErrorModal('خطا در ثبت خروجی: ' + errorMessage);
                    } else {
                        alert('خطا در ثبت خروجی: ' + errorMessage);
                    }
                }
            } catch (error) {
                console.error('Error:', error);
                if (window.showErrorModal) {
                    window.showErrorModal('خطا در ارتباط با سرور: ' + error.message);
                } else {
                    alert('خطا در ارتباط با سرور: ' + error.message);
                }
            } finally {
                submitButton.disabled = false;
                submitButton.textContent = originalText;
            }
        });
    }
});

// Toggle output history
function toggleOutputHistory(inventoryId) {
    const historyRow = document.getElementById(`output-history-${inventoryId}`);
    if (historyRow) {
        historyRow.classList.toggle('hidden');
    }
}

// Handle action buttons
document.addEventListener('click', function(e) {
    // Handle delete button
    if (e.target.matches('[data-action="delete-inventory"]')) {
        e.preventDefault();
        const inventoryId = e.target.getAttribute('data-inventory-id');
        const productName = e.target.getAttribute('data-product-name');
        if (window.showDeleteModal) {
            window.showDeleteModal(
                'حذف موجودی',
                `آیا از حذف موجودی "${productName}" اطمینان دارید؟`,
                async () => {
                    try {
                        const response = await fetch(`/admin/inventory/${inventoryId}`, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                'Content-Type': 'application/json'
                            }
                        });
                        const data = await response.json();
                        if (response.ok && (data.success || data.ok)) {
                            if (window.showSuccessModalWithAutoClose) {
                                window.showSuccessModalWithAutoClose('موجودی با موفقیت حذف شد', 3, () => {
                                    window.location.reload();
                                });
                            } else {
                                alert('موجودی با موفقیت حذف شد');
                                window.location.reload();
                            }
                        } else {
                            if (window.showErrorModal) {
                                window.showErrorModal('خطا', data.message || 'خطا در حذف موجودی');
                            } else {
                                alert(data.message || 'خطا در حذف موجودی');
                            }
                        }
                    } catch (error) {
                        console.error('Error deleting inventory:', error);
                        if (window.showErrorModal) {
                            window.showErrorModal('خطا', 'خطا در ارتباط با سرور');
                        } else {
                            alert('خطا در ارتباط با سرور');
                        }
                    }
                }
            );
        }
    }
    
    // Handle add output button (ثبتی)
    if (e.target.matches('[data-action="add-output"]')) {
        e.preventDefault();
        const inventoryId = e.target.getAttribute('data-inventory-id');
        const modal = document.getElementById('outputModalOverlay');
        const form = document.getElementById('outputForm');
        const productNameInput = document.getElementById('outputProductName');
        const productIdInput = document.getElementById('outputProductId');
        
        if (modal && form) {
            // Get product name and ID from the row
            const row = e.target.closest('tr');
            if (row) {
                const productNameCell = row.querySelector('td:nth-child(2) span');
                if (productNameCell && productNameInput) {
                    const productName = productNameCell.textContent.trim();
                    productNameInput.value = productName;
                    
                    // Try to get product ID from data attribute
                    const productId = row.getAttribute('data-product-id');
                    if (productId && productIdInput) {
                        productIdInput.value = productId;
                    }
                }
            }
            
            // Store inventory ID for later use if needed
            if (inventoryId) {
                form.setAttribute('data-inventory-id', inventoryId);
            }
            
            modal.classList.remove('hidden');
            modal.style.display = 'flex';
            
            // Focus on quantity input
            const quantityInput = document.getElementById('outputQuantity');
            if (quantityInput) {
                setTimeout(() => quantityInput.focus(), 100);
            }
        }
    }
});
</script>
@endpush