@extends('layouts.panel')

@section('title', 'پروفایل موجودی: ' . ($inventory->product->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">{{ $inventory->product->name ?? 'نامشخص' }}</h1>
            <p class="text-sm text-slate-400 mt-1">{{ $warehouseName }}@if($warehouseLocation) / {{ $warehouseLocation }}@endif</p>
        </div>
        <div class="flex gap-2">
            <button id="add-reduce-inventory-btn" 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>
            @if($warehouseId)
                <a href="{{ route('admin.inventory.warehouses.show', ['warehouse' => $warehouseId]) }}" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-slate-200">
                    بازگشت به لیست
                </a>
            @else
                <a href="{{ route('admin.inventory.warehouses') }}" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-slate-200">
                    بازگشت به لیست
                </a>
            @endif
        </div>
    </header>

    <!-- Product Info Section -->
    <section class="mb-6">
        <h2 class="text-xl font-bold text-slate-200 mb-4">اطلاعات محصول</h2>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
            <!-- Table 1: Basic Information -->
            <div class="glass rounded-2xl overflow-hidden">
                <div class="bg-gradient-to-r from-blue-500/10 to-purple-500/10 border-b border-slate-700 px-6 py-4">
                    <h3 class="text-lg font-semibold text-slate-200">اطلاعات کلی</h3>
                </div>
                <div class="p-6">
                    <table class="w-full">
                        <tbody>
                            <tr class="border-b border-slate-800/50 hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400 w-1/3">نام محصول</td>
                                <td class="px-4 py-3 text-sm text-slate-200 font-semibold">{{ $inventory->product->name ?? 'نامشخص' }}</td>
                            </tr>
                            <tr class="border-b border-slate-800/50 hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400">انبار</td>
                                <td class="px-4 py-3 text-sm text-slate-200">{{ $warehouseName }}@if($warehouseLocation) / {{ $warehouseLocation }}@endif</td>
                            </tr>
                            <tr class="border-b border-slate-800/50 hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400">مقدار کل</td>
                                <td class="px-4 py-3 text-sm text-slate-200">{{ number_format((float)$totalQuantity, 0) }} {{ $inventory->unit ?? '' }}</td>
                            </tr>
                            <tr class="hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400">مقدار باقی مانده</td>
                                <td class="px-4 py-3 text-sm font-bold text-green-400">{{ number_format($remainingQuantity, 0) }} {{ $inventory->unit ?? '' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Table 2: Product Specifications -->
            <div class="glass rounded-2xl overflow-hidden">
                <div class="bg-gradient-to-r from-emerald-500/10 to-teal-500/10 border-b border-slate-700 px-6 py-4">
                    <h3 class="text-lg font-semibold text-slate-200">مشخصات محصول</h3>
                </div>
                <div class="p-6">
                    <table class="w-full">
                        <tbody>
                            @if($productDetails['row_number'])
                            <tr class="border-b border-slate-800/50 hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400 w-1/3">شماره ردیف انبار</td>
                                <td class="px-4 py-3 text-sm text-slate-200">{{ $productDetails['row_number'] }}</td>
                            </tr>
                            @endif
                            @if($productDetails['brand'])
                            <tr class="border-b border-slate-800/50 hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400">برند</td>
                                <td class="px-4 py-3 text-sm text-slate-200">{{ $productDetails['brand'] }}</td>
                            </tr>
                            @endif
                            @if($productDetails['country'])
                            <tr class="border-b border-slate-800/50 hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400">کشور</td>
                                <td class="px-4 py-3 text-sm text-slate-200">{{ $productDetails['country'] }}</td>
                            </tr>
                            @endif
                            @if($productDetails['grade'])
                            <tr class="border-b border-slate-800/50 hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400">گرید</td>
                                <td class="px-4 py-3 text-sm text-slate-200">{{ $productDetails['grade'] }}</td>
                            </tr>
                            @endif
                            @if($productDetails['purity'])
                            <tr class="border-b border-slate-800/50 hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400">خلوص</td>
                                <td class="px-4 py-3 text-sm text-slate-200">{{ $productDetails['purity'] }}</td>
                            </tr>
                            @endif
                            @if($productDetails['batch_number'])
                            <tr class="border-b border-slate-800/50 hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400">بچ نامبر</td>
                                <td class="px-4 py-3 text-sm text-slate-200 font-mono">{{ $productDetails['batch_number'] }}</td>
                            </tr>
                            @endif
                            @if($productDetails['packaging'])
                            <tr class="hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400">بسته‌بندی</td>
                                <td class="px-4 py-3 text-sm text-slate-200">{{ $productDetails['packaging'] }}</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Table 3: Dates and Additional Info -->
            <div class="glass rounded-2xl overflow-hidden">
                <div class="bg-gradient-to-r from-amber-500/10 to-orange-500/10 border-b border-slate-700 px-6 py-4">
                    <h3 class="text-lg font-semibold text-slate-200">تاریخ‌ها و اطلاعات تکمیلی</h3>
                </div>
                <div class="p-6">
                    <table class="w-full">
                        <tbody>
                            @if($productDetails['production_date'])
                            <tr class="border-b border-slate-800/50 hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400 w-1/3">تاریخ تولید</td>
                                <td class="px-4 py-3 text-sm text-slate-200">
                                    @php
                                        try {
                                            if (preg_match('/^(\d{4})-(\d{2})-(\d{2})$/', $productDetails['production_date'], $matches)) {
                                                $date = new \Carbon\Carbon($productDetails['production_date']);
                                                $jalali = \Morilog\Jalali\Jalalian::fromCarbon($date);
                                                echo $jalali->format('Y/m/d');
                                            } else {
                                                echo $productDetails['production_date'];
                                            }
                                        } catch (\Exception $e) {
                                            echo $productDetails['production_date'];
                                        }
                                    @endphp
                                </td>
                            </tr>
                            @endif
                            @if($productDetails['expiration_date'])
                            <tr class="border-b border-slate-800/50 hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400">تاریخ انقضا</td>
                                <td class="px-4 py-3 text-sm text-slate-200">
                                    @php
                                        try {
                                            if (preg_match('/^(\d{4})-(\d{2})-(\d{2})$/', $productDetails['expiration_date'], $matches)) {
                                                $date = new \Carbon\Carbon($productDetails['expiration_date']);
                                                $jalali = \Morilog\Jalali\Jalalian::fromCarbon($date);
                                                echo $jalali->format('Y/m/d');
                                            } else {
                                                echo $productDetails['expiration_date'];
                                            }
                                        } catch (\Exception $e) {
                                            echo $productDetails['expiration_date'];
                                        }
                                    @endphp
                                </td>
                            </tr>
                            @endif
                            @if($productDetails['price'])
                            <tr class="border-b border-slate-800/50 hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400">قیمت</td>
                                <td class="px-4 py-3 text-sm text-slate-200 font-semibold text-green-400">{{ $productDetails['price'] }} تومان</td>
                            </tr>
                            @endif
                            @if($productDetails['low_stock_threshold'])
                            <tr class="border-b border-slate-800/50 hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400">آستانه کم شدن</td>
                                <td class="px-4 py-3 text-sm text-slate-200">{{ $productDetails['low_stock_threshold'] }} {{ $inventory->unit ?? '' }}</td>
                            </tr>
                            @endif
                            @if($productDetails['description'])
                            <tr class="hover:bg-white/5 transition-colors">
                                <td class="px-4 py-3 text-sm font-medium text-slate-400 align-top">توضیحات</td>
                                <td class="px-4 py-3 text-sm text-slate-200">{{ $productDetails['description'] }}</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!-- Transactions Table -->
    <section class="glass rounded-2xl overflow-hidden">
        <div class="table-wrapper">
            <table class="min-w-full text-sm">
                <thead>
                    <tr>
                        <th style="width:60px" class="px-4 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider border-b border-slate-700">ردیف</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider border-b border-slate-700">تاریخ</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider border-b border-slate-700">مقدار محصول</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider border-b border-slate-700">ردیف محصول</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider border-b border-slate-700">بازاریاب</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider border-b border-slate-700">شرکت خریدار</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider border-b border-slate-700">عملیات</th>
                    </tr>
                </thead>
                <tbody>
                    @if(count($transactions) > 0)
                        @foreach($transactions as $index => $transaction)
                            <tr class="hover:bg-white/5 transition duration-150 ease-in-out">
                                <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 text-slate-400">@jdate($transaction['date'], 'Y/m/d')</td>
                                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium {{ $transaction['quantity'] >= 0 ? 'text-green-400' : 'text-red-400' }}">
                                    @if($transaction['quantity'] >= 0)
                                        +{{ number_format($transaction['quantity'], 0) }} {{ $inventory->unit ?? '' }}
                                    @else
                                        {{ number_format($transaction['quantity'], 0) }} {{ $inventory->unit ?? '' }}
                                    @endif
                                </td>
                                <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-300">
                                    {{ $transaction['row_number'] ?? '—' }}
                                </td>
                                <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-300">
                                    {{ $transaction['sales_person'] ?? '—' }}
                                </td>
                                <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-300">
                                    {{ $transaction['buyer_company'] ?? '—' }}
                                </td>
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <div class="actions" data-id="{{ $transaction['output_id'] ?? ($transaction['entry_id'] ?? '') }}">
                                        @if(isset($transaction['output_id']) && $transaction['output_id'])
                                            <a href="#" class="btn-action btn-edit" onclick="event.preventDefault(); editOutput({{ $transaction['output_id'] }});">ویرایش</a>
                                            <button type="button" class="btn-action btn-delete ph-delete-btn" data-output-id="{{ $transaction['output_id'] }}">حذف</button>
                                        @elseif(isset($transaction['entry_id']) && $transaction['entry_id'])
                                            <a href="#" class="btn-action btn-edit" style="opacity: 0.5; cursor: not-allowed;" onclick="event.preventDefault(); return false;" title="ویرایش برای تراکنش ورودی امکان‌پذیر نیست">ویرایش</a>
                                            <button type="button" class="btn-action btn-delete ph-delete-btn" style="opacity: 0.5; cursor: not-allowed;" disabled title="حذف برای تراکنش ورودی امکان‌پذیر نیست">حذف</button>
                                        @else
                                            <a href="#" class="btn-action btn-edit" style="opacity: 0.5; cursor: not-allowed;" onclick="event.preventDefault(); return false;" title="ویرایش برای تراکنش ورودی امکان‌پذیر نیست">ویرایش</a>
                                            <button type="button" class="btn-action btn-delete ph-delete-btn" style="opacity: 0.5; cursor: not-allowed;" disabled title="حذف برای تراکنش ورودی امکان‌پذیر نیست">حذف</button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="7" class="text-center py-8 text-slate-400">هیچ تراکنشی ثبت نشده است</td>
                        </tr>
                    @endif
                </tbody>
                <tfoot class="total-balance-footer">
                    <tr>
                        <td style="border-top: 2px solid #374151; padding-top: 12px;"></td>
                        <td class="text-slate-300" style="border-top: 2px solid #374151; padding-top: 12px; text-align: right; padding-right: 16px;">
                            <strong>مقدار باقی‌مانده:</strong>
                        </td>
                        <td class="font-bold {{ $remainingQuantity >= 0 ? 'text-green-400' : 'text-red-400' }}" style="border-top: 2px solid #374151; padding-top: 12px; text-align: right; padding-right: 16px;">
                            @if($remainingQuantity >= 0)
                                +{{ number_format($remainingQuantity, 0) }} {{ $inventory->unit ?? '' }}
                            @else
                                {{ number_format($remainingQuantity, 0) }} {{ $inventory->unit ?? '' }}
                            @endif
                        </td>
                        <td colspan="4" style="border-top: 2px solid #374151; padding-top: 12px;"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        
        <!-- Pagination Info -->
        <div class="px-4 py-3 bg-slate-800/50 border-t border-slate-700">
            <div class="text-xs text-slate-400">
                نمایش 1 تا {{ count($transactions) }} از {{ count($transactions) }}
            </div>
        </div>
    </section>
</main>

<!-- Add/Reduce Inventory Modal -->
<div id="addReduceModalOverlay" 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" id="close-add-reduce-modal">×</button>
        </div>
        <form id="addReduceForm" novalidate>
            <input type="hidden" id="addReduceInventoryId" value="{{ $inventory->id }}">
            <div class="modal-body" style="display: flex; flex-direction: column; gap: 16px;">
                <div class="form-group">
                    <label for="operationType">عملیات</label>
                    <select id="operationType" required>
                        <option value="">انتخاب کنید</option>
                        <option value="increase">افزایش</option>
                        <option value="decrease">کاهش</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="addReduceProductName">اسم محصول</label>
                    <input type="text" id="addReduceProductName" required placeholder="نام محصول را وارد کنید" autocomplete="off" value="{{ $inventory->product->name ?? '' }}" readonly>
                    <input type="hidden" id="addReduceProductId" value="{{ $inventory->product_id ?? '' }}">
                </div>
                <div class="form-group">
                    <label for="addReduceQuantity">مقدار</label>
                    <div style="display: flex; gap: 8px;">
                        <input type="number" id="addReduceQuantity" step="0.001" min="0.001" required placeholder="مقدار را وارد کنید" style="flex: 1;">
                        <select id="addReduceUnit" required style="width: 120px;">
                            <option value="kg">کیلوگرم</option>
                            <option value="L">لیتر</option>
                            <option value="g">گرم</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="addReduceSalesPerson">بازاریاب</label>
                    <div class="relative">
                        <input type="text" id="addReduceSalesPerson" placeholder="نام بازاریاب را وارد کنید" autocomplete="off">
                        <input type="hidden" id="addReduceSalesPersonId">
                        <div id="addReduceSalesPersonList" 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>
                <div class="form-group">
                    <label for="addReduceBuyerCompany">شرکت خریدار</label>
                    <input type="text" id="addReduceBuyerCompany" placeholder="نام شرکت خریدار را وارد کنید">
                </div>
                <div class="form-group">
                    <label for="addReduceDescription">توضیحات</label>
                    <textarea id="addReduceDescription" 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>
@endsection

@push('styles')
<style>
    .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-overlay.hidden {
        display: none;
    }
    
    .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,
    .form-group select {
        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,
    .form-group select:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    
    .form-group input:read-only {
        background: rgba(255, 255, 255, 0.03);
        cursor: not-allowed;
    }
    
    .btn {
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        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;
    }
</style>
@endpush

@push('scripts')
<script>
function viewOutput(outputId) {
    // View is handled by the link in the table
    console.log('View output:', outputId);
}

async function editOutput(outputId) {
    try {
        // Fetch output data
        const response = await fetch(`/admin/inventory/outputs/${outputId}`);
        if (!response.ok) {
            if (window.showErrorModal) {
                window.showErrorModal('خطا در دریافت اطلاعات خروجی');
            } else {
                alert('خطا در دریافت اطلاعات خروجی');
            }
            return;
        }
        
        const data = await response.json();
        const output = data.output;
        
        // Populate the add/reduce modal with output data
        document.getElementById('addReduceInventoryId').value = output.inventory_id;
        document.getElementById('operationType').value = 'decrease';
        document.getElementById('addReduceQuantity').value = output.quantity;
        document.getElementById('addReduceUnit').value = output.unit || 'kg';
        document.getElementById('addReduceSalesPerson').value = output.sales_person || '';
        document.getElementById('addReduceSalesPersonId').value = output.sales_person_id || '';
        document.getElementById('addReduceBuyerCompany').value = output.buyer_company || '';
        document.getElementById('addReduceDescription').value = output.description ? output.description.replace('توضیحات خروجی: ', '') : '';
        
        // Store output ID for update
        document.getElementById('addReduceForm').setAttribute('data-edit-output-id', outputId);
        
        // Open modal
        document.getElementById('addReduceModalOverlay').classList.remove('hidden');
        
        // Load sales experts
        if (window.loadSalesExperts) {
            await window.loadSalesExperts();
        }
    } catch (error) {
        console.error('Error loading output:', error);
        if (window.showErrorModal) {
            window.showErrorModal('خطا در دریافت اطلاعات');
        } else {
            alert('خطا در دریافت اطلاعات');
        }
    }
}

async function deleteOutput(outputId) {
    if (!outputId) {
        console.error('deleteOutput: outputId is missing');
        return;
    }
    
    try {
        // First, fetch output details
        const fetchResponse = await fetch(`/admin/inventory/outputs/${outputId}`);
        
        let message = 'آیا از حذف این خروجی اطمینان دارید؟';
        
        if (fetchResponse.ok) {
            try {
                const fetchData = await fetchResponse.json();
                
                if (fetchData && fetchData.output) {
                    const output = fetchData.output;
                    
                    // Build detailed message with output information
                    const unit = output.unit || 'kg';
                    const quantity = parseFloat(output.quantity || 0);
                    const salesPerson = output.sales_person || '—';
                    const buyerCompany = output.buyer_company || '—';
                    const rowNumber = output.row_number || '—';
                    const description = output.description ? output.description.replace('توضیحات خروجی: ', '') : '—';
                    
                    // Format number with commas
                    const formatNumber = (num) => {
                        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                    };
                    
                    message = `<div style="text-align: right; direction: rtl;">
                            <p style="margin-bottom: 12px; color: #cbd5e1;">آیا از حذف این خروجی اطمینان دارید؟</p>
                            <div style="background: rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 8px; margin-top: 16px;">
                                <div style="margin-bottom: 8px;">
                                    <span style="color: #94a3b8; font-size: 13px;">مقدار:</span>
                                    <span style="color: #ef4444; font-weight: 600; margin-right: 8px;">-${formatNumber(Math.floor(quantity))} ${unit}</span>
                                </div>
                                <div style="margin-bottom: 8px;">
                                    <span style="color: #94a3b8; font-size: 13px;">بازاریاب:</span>
                                    <span style="color: #e2e8f0; margin-right: 8px;">${salesPerson}</span>
                                </div>
                                <div style="margin-bottom: 8px;">
                                    <span style="color: #94a3b8; font-size: 13px;">شرکت خریدار:</span>
                                    <span style="color: #e2e8f0; margin-right: 8px;">${buyerCompany}</span>
                                </div>
                                <div style="margin-bottom: 8px;">
                                    <span style="color: #94a3b8; font-size: 13px;">شماره ردیف:</span>
                                    <span style="color: #e2e8f0; margin-right: 8px;">${rowNumber}</span>
                                </div>
                                ${description !== '—' ? `<div style="margin-bottom: 0;">
                                    <span style="color: #94a3b8; font-size: 13px;">توضیحات:</span>
                                    <span style="color: #e2e8f0; margin-right: 8px;">${description}</span>
                                </div>` : ''}
                            </div>
                        </div>`;
                }
            } catch (jsonError) {
                console.error('Error parsing JSON:', jsonError);
            }
        }
        
        // Use global delete modal if available
        if (window.showDeleteModal) {
            try {
                window.showDeleteModal(
                    'حذف خروجی',
                    message,
                    async () => {
                        try {
                            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
                            const response = await fetch(`/admin/inventory/outputs/${outputId}`, {
                                method: 'DELETE',
                                headers: {
                                    'X-CSRF-TOKEN': csrfToken,
                                    'Accept': 'application/json'
                                }
                            });
                            
                            const data = await response.json();
                            
                            if (response.ok) {
                                if (window.showSuccessModalWithAutoClose) {
                                    window.showSuccessModalWithAutoClose('خروجی با موفقیت حذف شد', 3, () => {
                                        window.location.reload();
                                    });
                                } else {
                                    alert('خروجی با موفقیت حذف شد');
                                    window.location.reload();
                                }
                            } else {
                                const errorMessage = data.message || 'خطا در حذف خروجی';
                                if (window.showErrorModal) {
                                    window.showErrorModal(errorMessage);
                                } else {
                                    alert(errorMessage);
                                }
                            }
                        } catch (error) {
                            console.error('Error deleting output:', error);
                            if (window.showErrorModal) {
                                window.showErrorModal('خطا در ارتباط با سرور');
                            } else {
                                alert('خطا در ارتباط با سرور');
                            }
                        }
                    }
                );
            } catch (modalError) {
                console.error('Error showing modal:', modalError);
                // Fallback to confirm if modal fails
                if (confirm('آیا از حذف این خروجی اطمینان دارید؟')) {
                    await executeDelete(outputId);
                }
            }
        } else {
            // Fallback to confirm
            if (confirm('آیا از حذف این خروجی اطمینان دارید؟')) {
                await executeDelete(outputId);
            }
        }
    } catch (error) {
        console.error('Error in deleteOutput function:', error);
        // Final fallback
        if (confirm('آیا از حذف این خروجی اطمینان دارید؟')) {
            await executeDelete(outputId);
        }
    }
}

async function executeDelete(outputId) {
    try {
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
        const response = await fetch(`/admin/inventory/outputs/${outputId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            }
        });
        
        const data = await response.json();
        
        if (response.ok) {
            if (window.showSuccessModalWithAutoClose) {
                window.showSuccessModalWithAutoClose('خروجی با موفقیت حذف شد', 3, () => {
                    window.location.reload();
                });
            } else {
                alert('خروجی با موفقیت حذف شد');
                window.location.reload();
            }
        } else {
            const errorMessage = data.message || 'خطا در حذف خروجی';
            if (window.showErrorModal) {
                window.showErrorModal(errorMessage);
            } else {
                alert(errorMessage);
            }
        }
    } catch (error) {
        console.error('Error deleting output:', error);
        if (window.showErrorModal) {
            window.showErrorModal('خطا در ارتباط با سرور');
        } else {
            alert('خطا در ارتباط با سرور');
        }
    }
}

// Make deleteOutput globally accessible
window.deleteOutput = deleteOutput;

// Add/Reduce Modal Functions
document.addEventListener('DOMContentLoaded', function() {
    // Handle delete button clicks using event delegation
    document.addEventListener('click', function(e) {
        const deleteBtn = e.target.closest('.ph-delete-btn');
        if (deleteBtn && !deleteBtn.disabled && deleteBtn.hasAttribute('data-output-id')) {
            e.preventDefault();
            e.stopPropagation();
            const outputId = deleteBtn.getAttribute('data-output-id');
            if (outputId) {
                deleteOutput(parseInt(outputId, 10));
            }
        }
    });
    const addReduceBtn = document.getElementById('add-reduce-inventory-btn');
    const addReduceModal = document.getElementById('addReduceModalOverlay');
    const closeModalBtns = document.querySelectorAll('#addReduceModalOverlay .close-modal-btn');
    const addReduceForm = document.getElementById('addReduceForm');
    
    // Sales person live search
    const salesPersonInput = document.getElementById('addReduceSalesPerson');
    const salesPersonIdInput = document.getElementById('addReduceSalesPersonId');
    const salesPersonList = document.getElementById('addReduceSalesPersonList');
    let salesPersonSearchTimeout;
    
    // Load sales experts on modal open
    if (addReduceBtn && salesPersonInput) {
        addReduceBtn.addEventListener('click', async function() {
            // Load sales experts when modal opens
            await loadSalesExperts();
        });
    }
    
    // Sales person input handler
    if (salesPersonInput && salesPersonList) {
        salesPersonInput.addEventListener('input', function(e) {
            clearTimeout(salesPersonSearchTimeout);
            const query = e.target.value.trim();
            
            if (query.length < 2) {
                salesPersonList.classList.add('hidden');
                return;
            }
            
            salesPersonSearchTimeout = setTimeout(async () => {
                await searchSalesExperts(query);
            }, 300);
        });
        
        // Hide suggestions when clicking outside
        document.addEventListener('click', function(e) {
            if (!salesPersonInput.contains(e.target) && !salesPersonList.contains(e.target)) {
                salesPersonList.classList.add('hidden');
            }
        });
    }
    
    async function loadSalesExperts() {
        try {
            const response = await fetch('/admin/users/by-role?role=کارشناس فروش', {
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            
            if (!response.ok) return;
            
            const result = await response.json();
            const experts = result.data || [];
            
            // Store experts for search
            window.salesExpertsList = experts;
        } catch (error) {
            console.error('Error loading sales experts:', error);
        }
    }
    
    async function searchSalesExperts(query) {
        if (!window.salesExpertsList) {
            await loadSalesExperts();
        }
        
        const experts = window.salesExpertsList || [];
        const filtered = experts.filter(expert => {
            const name = (expert.name || expert.full_name || '').toLowerCase();
            return name.includes(query.toLowerCase());
        });
        
        displaySalesExpertSuggestions(filtered);
    }
    
    function displaySalesExpertSuggestions(experts) {
        if (!salesPersonList) return;
        
        salesPersonList.innerHTML = '';
        
        if (experts.length === 0) {
            const item = document.createElement('div');
            item.className = 'px-4 py-2 text-sm text-slate-400';
            item.textContent = 'نتیجه‌ای یافت نشد';
            salesPersonList.appendChild(item);
            salesPersonList.classList.remove('hidden');
            return;
        }
        
        experts.forEach(expert => {
            const item = document.createElement('div');
            item.className = 'px-4 py-2 text-sm text-slate-200 hover:bg-slate-700 cursor-pointer';
            item.textContent = expert.name || expert.full_name || '';
            item.addEventListener('click', function() {
                salesPersonInput.value = expert.name || expert.full_name || '';
                salesPersonIdInput.value = expert.id;
                salesPersonList.classList.add('hidden');
            });
            salesPersonList.appendChild(item);
        });
        
        salesPersonList.classList.remove('hidden');
    }
    
    // Open modal (for new entry)
    if (addReduceBtn) {
        addReduceBtn.addEventListener('click', function() {
            if (addReduceModal) {
                // Reset form
                addReduceForm.reset();
                addReduceForm.removeAttribute('data-edit-output-id');
                document.getElementById('operationType').value = '';
                
                addReduceModal.classList.remove('hidden');
                // Load sales experts when opening modal
                if (salesPersonInput) {
                    loadSalesExperts();
                }
            }
        });
    }
    
    // Make loadSalesExperts globally accessible
    window.loadSalesExperts = loadSalesExperts;
    
    // Close modal
    closeModalBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            if (addReduceModal) {
                addReduceModal.classList.add('hidden');
                addReduceForm.reset();
                addReduceForm.removeAttribute('data-edit-output-id');
            }
        });
    });
    
    // Close modal on overlay click
    if (addReduceModal) {
        addReduceModal.addEventListener('click', function(e) {
            if (e.target === addReduceModal) {
                addReduceModal.classList.add('hidden');
                addReduceForm.reset();
            }
        });
    }
    
    // Form submission
    if (addReduceForm) {
        addReduceForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const inventoryId = document.getElementById('addReduceInventoryId').value;
            const operationType = document.getElementById('operationType').value;
            const quantity = parseFloat(document.getElementById('addReduceQuantity').value);
            const unit = document.getElementById('addReduceUnit').value;
            const salesPersonId = document.getElementById('addReduceSalesPersonId').value;
            const salesPersonName = document.getElementById('addReduceSalesPerson').value;
            const buyerCompany = document.getElementById('addReduceBuyerCompany').value;
            const description = document.getElementById('addReduceDescription').value;
            
            if (!operationType || !quantity || quantity <= 0 || !unit) {
                alert('لطفاً تمام فیلدهای الزامی را پر کنید');
                return;
            }
            
            const submitBtn = addReduceForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.textContent;
            submitBtn.disabled = true;
            submitBtn.textContent = 'در حال ثبت...';
            
            // Check if we're editing an existing output
            const editOutputId = addReduceForm.getAttribute('data-edit-output-id');
            
            try {
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
                                  document.querySelector('input[name="_token"]')?.value || '';
                
                const url = editOutputId 
                    ? `/admin/inventory/outputs/${editOutputId}`
                    : `/admin/inventory/${inventoryId}/add-reduce`;
                const method = editOutputId ? 'PUT' : 'POST';
                
                const response = await fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        operation: operationType,
                        quantity: quantity,
                        unit: unit,
                        sales_person_id: salesPersonId || null,
                        sales_person_name: salesPersonName || null,
                        buyer_company: buyerCompany || null,
                        description: description
                    })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    addReduceModal.classList.add('hidden');
                    addReduceForm.reset();
                    addReduceForm.removeAttribute('data-edit-output-id');
                    
                    if (window.showSuccessModalWithAutoClose) {
                        window.showSuccessModalWithAutoClose(editOutputId ? 'خروجی با موفقیت به‌روزرسانی شد' : 'عملیات با موفقیت ثبت شد', 3, () => {
                            // Redirect to the same profile page
                            const inventoryId = document.getElementById('addReduceInventoryId').value;
                            window.location.href = `/admin/inventory/${inventoryId}/profile`;
                        });
                    } else {
                        alert(editOutputId ? 'خروجی با موفقیت به‌روزرسانی شد' : 'عملیات با موفقیت ثبت شد');
                        // Redirect to the same profile page
                        const inventoryId = document.getElementById('addReduceInventoryId').value;
                        window.location.href = `/admin/inventory/${inventoryId}/profile`;
                    }
                } else {
                    const errorMessage = data.message || 'خطا در ثبت عملیات';
                    if (window.showErrorModal) {
                        window.showErrorModal(errorMessage);
                    } else {
                        alert(errorMessage);
                    }
                }
            } catch (error) {
                console.error('Error:', error);
                if (window.showErrorModal) {
                    window.showErrorModal('خطا در ارتباط با سرور');
                } else {
                    alert('خطا در ارتباط با سرور');
                }
            } finally {
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
            }
        });
    }
});
</script>
@endpush