@extends('layouts.panel')

@section('title', 'تامین‌کننده: ' . $supplier->name)

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-200">{{ $supplier->name }}</h1>
            <p class="text-sm text-slate-400 mt-1">مشاهده جزئیات حسابداری</p>
        </div>
        <div class="flex gap-2">
            <button id="addTransactionBtn" 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.accounting.suppliers') }}" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-slate-200">
                بازگشت به لیست
            </a>
        </div>
    </div>
    
    <!-- Global Delete Confirmation Modal -->
    <div id="globalModalOverlay" class="modal-overlay hidden">
        <div class="modal delete-modal">
            <h3 id="globalModalTitle">حذف مورد</h3>
            <p id="globalDeleteConfirmationMessage">آیا از حذف این مورد مطمئن هستید؟</p>
            <div class="actions">
                <button id="globalCancelDeleteBtn" class="btn btn-secondary">انصراف</button>
                <button id="globalConfirmDeleteBtn" class="btn btn-danger">حذف</button>
            </div>
        </div>
    </div>

    <!-- Success Modal -->
    <div id="successModalOverlay" class="modal-overlay hidden">
        <div class="relative z-10 p-8 text-center">
            <div class="mx-auto w-20 h-20 mb-6 relative">
                <div class="absolute inset-0 rounded-full bg-green-500/20 animate-ping"></div>
                <div class="relative w-20 h-20 rounded-full bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center shadow-lg">
                    <svg class="w-10 h-10 text-white animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                </div>
            </div>
            <h3 id="success-modal-text" class="text-xl font-bold text-white mb-4 leading-relaxed">عملیات با موفقیت انجام شد.</h3>
            <p class="text-white/80 text-sm mb-8">اطلاعات با موفقیت در سیستم ثبت گردید</p>
            <button id="successModalOkBtn" type="button" class="px-8 py-3 rounded-full bg-white/20 hover:bg-white/30 text-white font-medium border border-white/30 hover:border-white/50 transition-all duration-200 transform hover:scale-105 hover:shadow-lg backdrop-blur-sm">
                عالی!
            </button>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <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_transactions'] }}</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['unique_products_count'] }}</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_purchase_value']) }} تومان</div>
        </div>
        <div class="glass rounded-xl p-4">
            <div class="text-sm text-slate-400">بدهی‌های معوق</div>
            <div class="text-2xl font-bold text-red-400 mt-2">{{ $stats['overdue_debts'] }}</div>
        </div>
    </div>

    <!-- Financial Summary -->
    @php
        $balance = $stats['total_credit'] - $stats['total_debit'];
        $debtAmount = $balance < 0 ? abs($balance) : 0;
        $creditAmount = $balance > 0 ? abs($balance) : 0;
    @endphp
    <div class="glass rounded-xl p-6">
        <h2 class="text-xl font-bold text-slate-200 mb-4">خلاصه مالی</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <div class="text-sm text-slate-400">مجموع بدهکاری</div>
                @if($debtAmount > 0)
                    <div class="text-2xl font-bold text-red-400 mt-2">{{ number_format($debtAmount) }} تومان</div>
                @else
                    <div class="text-2xl font-bold text-green-400 mt-2">بدهی به این شرکت نداریم</div>
                @endif
            </div>
            <div>
                <div class="text-sm text-slate-400">مجموع بستانکاری</div>
                @if($creditAmount > 0)
                    <div class="text-2xl font-bold text-green-400 mt-2">{{ number_format($creditAmount) }} تومان</div>
                @else
                    <div class="text-2xl font-bold text-slate-400 mt-2">0 تومان</div>
                @endif
            </div>
            <div>
                <div class="text-sm text-slate-400">مانده حساب</div>
                <div class="text-2xl font-bold {{ $balance >= 0 ? 'text-blue-400' : 'text-red-400' }} mt-2">
                    {{ $balance >= 0 ? '+' : '' }}{{ number_format($balance) }} تومان
                </div>
            </div>
        </div>
    </div>

    <!-- Transactions List -->
    <div class="table-card">
        <div class="table-wrapper" style="max-height: 70vh;">
            <table class="profile-table">
                <thead>
                    <tr>
                        <th>ردیف</th>
                        <th>تاریخ</th>
                        <th>شرح تراکنش</th>
                        <th>بدهکاری</th>
                        <th>بستانکاری</th>
                        <th class="balance-col">مانده</th>
                        <th style="text-align: center;">عملیات</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $runningBalance = 0;
                        $rowNumber = 1;

                        // Build a unified list of entries (debts + manual transactions)
                        $entries = [];

                        // Debts as debit entries
                        if ($supplier->debts && $supplier->debts->count() > 0) {
                            foreach ($supplier->debts as $debt) {
                                $debitAmount = 0;
                                $descriptions = [];

                                if ($debt->purchaseRequest) {
                                    $items = $debt->purchaseRequest->items;
                                    $pr = $debt->purchaseRequest;
                                    // Check if purchase request is completed and has sales user
                                    $isCompleted = false;
                                    $salesUserName = null;
                                    if ($pr->history_status) {
                                        $hs = is_array($pr->history_status) ? $pr->history_status : [];
                                        $lastStatus = is_array($hs) && count($hs) ? (end($hs)['status'] ?? null) : null;
                                        $isCompleted = ($lastStatus === 'completed');
                                    }
                                    if ($isCompleted && $pr->salesUser) {
                                        $salesUserName = $pr->salesUser->full_name ?? $pr->salesUser->name ?? null;
                                    }
                                    
                                    foreach ($items as $item) {
                                        $itemQuantity = $item->quantity;
                                        $itemPrice = 0;
                                        if ($item->offers) {
                                            $selectedOffer = $item->offers->where('is_selected', true)->first();
                                            if ($selectedOffer) { $itemPrice = $selectedOffer->price; }
                                        }
                                        if ($itemPrice > 0) {
                                            $itemAmount = $itemQuantity * $itemPrice;
                                            $debitAmount += $itemAmount;
                                            $formattedQuantity = ($itemQuantity == (int)$itemQuantity) ? (int)$itemQuantity : $itemQuantity;
                                            $formattedPrice = number_format($itemPrice);
                                            $description = "{$item->product_name} ({$formattedQuantity} {$item->unit}) در فی {$formattedPrice} تومان";
                                            if ($salesUserName) {
                                                $description .= " (بازاریاب: {$salesUserName})";
                                            }
                                            $descriptions[] = $description;
                                        }
                                    }
                                } else {
                                    $debitAmount = $debt->total_amount;
                                    $descriptions[] = "خرید از درخواست خرید #{$debt->purchase_request_id}";
                                }

                                $entries[] = [
                                    'date' => $debt->purchase_date ?? $debt->created_at,
                                    'type' => 'debt',
                                    'description' => implode(' + ', $descriptions),
                                    'debit' => (float)$debitAmount,
                                    'credit' => 0,
                                    'debt_id' => $debt->id,
                                ];
                            }
                        }

                        // Manual transactions
                        $transactions = $supplier->transactions ?? [];
                        if (is_string($transactions)) { $transactions = json_decode($transactions, true) ?? []; }
                        if (!is_array($transactions)) { $transactions = []; }
                        foreach ($transactions as $tr) {
                            $entries[] = [
                                'date' => \Carbon\Carbon::parse($tr['date']),
                                'type' => 'manual',
                                'description' => $tr['description'] ?? '',
                                'debit' => ($tr['type'] ?? '') === 'debit' ? (float)$tr['amount'] : 0,
                                'credit' => ($tr['type'] ?? '') === 'credit' ? (float)$tr['amount'] : 0,
                                'transaction_id' => $tr['id'] ?? null,
                                'transaction_data' => $tr, // Store full transaction data for editing
                            ];
                        }

                        // Sort by date ascending (oldest first)
                        usort($entries, function ($a, $b) {
                            $da = $a['date'] instanceof \Carbon\Carbon ? $a['date'] : \Carbon\Carbon::parse($a['date']);
                            $db = $b['date'] instanceof \Carbon\Carbon ? $b['date'] : \Carbon\Carbon::parse($b['date']);
                            if ($da->equalTo($db)) return 0;
                            return $da->lessThan($db) ? -1 : 1;
                        });
                    @endphp

                    @if(count($entries) > 0)
                        @foreach($entries as $entry)
                            @php
                                $runningBalance = $runningBalance - ($entry['debit'] ?? 0) + ($entry['credit'] ?? 0);
                            @endphp
                            <tr>
                                <td>{{ $rowNumber }}</td>
                                <td>{{ jdate($entry['date'])->format('Y/m/d') }}</td>
                                <td>{{ $entry['description'] }}</td>
                                <td>
                                    @php $d = (float)($entry['debit'] ?? 0); @endphp
                                    {!! $d > 0 ? number_format($d) . ' تومان' : '&#8212;&#8212;' !!}
                                </td>
                                <td>
                                    @php $c = (float)($entry['credit'] ?? 0); @endphp
                                    {!! $c > 0 ? number_format($c) . ' تومان' : '&#8212;&#8212;' !!}
                                </td>
                                <td class="balance-col {{ $runningBalance >= 0 ? 'positive-balance' : 'negative-balance' }}">
                                    {{ $runningBalance >= 0 ? '+' : '' }}{{ number_format($runningBalance) }} تومان
                                </td>
                                <td>
                                    <div class="actions" style="display: flex; gap: 4px; justify-content: center;">
                                        @if(($entry['type'] ?? '') === 'debt')
                                            @php
                                                $debtModel = \App\Models\Accounting\AccountingDebt::find($entry['debt_id'] ?? null);
                                                $purchaseRequestId = $debtModel?->purchase_request_id;
                                                $purchaseRequestUrl = null;
                                                if ($purchaseRequestId) {
                                                    // اگر صفحه در پنل کارشناس خرید باشد
                                                    if (request()->is('purchase/*')) {
                                                        // روت کارشناس خرید
                                                        $purchaseRequestUrl = route('purchase.purchase-requests.show', $purchaseRequestId);
                                                    } else {
                                                        // پیش‌فرض: پنل مدیریت
                                                        $purchaseRequestUrl = route('admin.purchase-requests.show', $purchaseRequestId);
                                                    }
                                                }
                                            @endphp
                                            @if($purchaseRequestUrl)
                                                <a href="{{ $purchaseRequestUrl }}"
                                                   class="btn-action"
                                                   title="مشاهده درخواست خرید مرتبط"
                                                   target="_blank">
                                                    مشاهده
                                                </a>
                                            @else
                                                <button class="btn-action" data-action="view-debt" data-debt-id="{{ $entry['debt_id'] }}">مشاهده</button>
                                            @endif
                                            <button class="btn-action btn-edit" data-action="edit-debt" data-debt-id="{{ $entry['debt_id'] }}">ویرایش</button>
                                            <button class="btn-action btn-danger" data-action="delete-debt" data-debt-id="{{ $entry['debt_id'] }}">حذف</button>
                                        @elseif(!empty($entry['transaction_id']))
                                            <button class="btn-action btn-edit" 
                                                    data-action="edit-transaction" 
                                                    data-transaction-id="{{ $entry['transaction_id'] }}"
                                                    data-transaction-data="{{ json_encode($entry['transaction_data'] ?? []) }}">ویرایش</button>
                                            <button class="btn-action btn-danger" data-action="delete-transaction" data-transaction-id="{{ $entry['transaction_id'] }}">حذف</button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @php $rowNumber++; @endphp
                        @endforeach
                    @else
                        <tr>
                            <td colspan="7" style="text-align: center; padding: 16px;">تراکنشی یافت نشد.</td>
                        </tr>
                    @endif
                </tbody>
                @php
                    $finalTransactions = $supplier->transactions ?? [];
                    if (is_string($finalTransactions)) {
                        $finalTransactions = json_decode($finalTransactions, true) ?? [];
                    }
                    if (!is_array($finalTransactions)) {
                        $finalTransactions = [];
                    }
                @endphp
                @if($supplier->debts->count() > 0 || count($finalTransactions) > 0)
                    <tfoot class="total-balance-footer">
                        <tr>
                            <td style="border-top: 2px solid #374151; padding-top: 12px;"></td>
                            <td style="border-top: 2px solid #374151; padding-top: 12px;"></td>
                            <td colspan="3" style="text-align: end; border-top: 2px solid #374151; padding-top: 12px;"><strong>مانده کل:</strong></td>
                            <td class="{{ $runningBalance >= 0 ? 'positive-balance' : 'negative-balance' }} balance-col" style="border-top: 2px solid #374151; padding-top: 12px;">
                                {{ $runningBalance >= 0 ? '+' : '' }}{{ number_format($runningBalance) }} تومان
                            </td>
                            <td style="border-top: 2px solid #374151; padding-top: 12px;"></td>
                        </tr>
                    </tfoot>
                @endif
            </table>
        </div>
        <div class="empty-state {{ $supplier->debts->count() == 0 ? '' : 'hidden' }}">
            موردی یافت نشد
        </div>
        <footer class="table-footer">
            <div class="range-info">نمایش 1 تا {{ $supplier->debts->count() }} از {{ $supplier->debts->count() }}</div>
            <nav class="pagination"></nav>
        </footer>
    </div>

    <!-- Add Transaction Modal -->
    <div id="transactionModalOverlay" 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="transactionForm" novalidate>
                <input type="hidden" id="transactionSupplierId" value="{{ $supplier->id }}">
                <div class="modal-body" style="display: flex; flex-direction: column; gap: 16px;">
                    <div class="form-group">
                        <label for="transactionDate">تاریخ</label>
                        <input type="text" 
                               id="transactionDateShamsi" 
                               placeholder="برای انتخاب تاریخ کلیک کنید" 
                               readonly
                               class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer"
                               style="cursor: pointer;">
                        <input type="hidden" 
                               id="transactionDate" 
                               value="{{ \Carbon\Carbon::now('Asia/Tehran')->format('Y-m-d') }}" 
                               required>
                    </div>
                    <div class="form-group">
                        <label for="transactionCategory">نوع تراکنش</label>
                        <select id="transactionCategory" required>
                            <option value="">انتخاب کنید...</option>
                            <option value="deposit">واریزی</option>
                            <option value="purchase">خرید</option>
                            <option value="return">عودت کالا</option>
                        </select>
                    </div>
                    <div class="form-group" id="transactionDepartmentGroup" style="display: none;">
                        <label for="transactionDepartment">بخش</label>
                        <select id="transactionDepartment">
                            <option value="">انتخاب کنید...</option>
                            <option value="management">مدیریت</option>
                            <option value="accounting">حسابداری</option>
                            <option value="sales">تیم فروش</option>
                        </select>
                    </div>
                    <div class="form-group" id="transactionSalesExpertGroup" style="display: none;">
                        <label for="transactionSalesExpert">کارشناس فروش</label>
                        <select id="transactionSalesExpert">
                            <option value="">انتخاب کنید...</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="transactionDescription">شرح تراکنش</label>
                        <textarea id="transactionDescription" rows="3" required placeholder="شرح تراکنش را وارد کنید"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="transactionAmount">مبلغ (تومان)</label>
                        <input type="text" id="transactionAmount" required placeholder="مثال: 1,500,000">
                    </div>
                    <div class="form-group">
                        <label for="transactionNature">ماهیت تراکنش</label>
                        <select id="transactionNature">
                            <option value="debit">بدهکار (خرید)</option>
                            <option value="credit">بستانکار (پرداخت)</option>
                        </select>
                    </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>

    <!-- Edit Transaction Modal -->
    <div id="editTransactionModalOverlay" 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="editTransactionForm" novalidate>
                <input type="hidden" id="editTransactionSupplierId" value="{{ $supplier->id }}">
                <input type="hidden" id="editTransactionId">
                <div class="modal-body" style="display: flex; flex-direction: column; gap: 16px;">
                    <div class="form-group">
                        <label for="editTransactionDate">تاریخ</label>
                        <input type="text" 
                               id="editTransactionDateShamsi" 
                               placeholder="برای انتخاب تاریخ کلیک کنید" 
                               readonly
                               class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer"
                               style="cursor: pointer;">
                        <input type="hidden" 
                               id="editTransactionDate" 
                               required>
                    </div>
                    <div class="form-group">
                        <label for="editTransactionCategory">نوع تراکنش</label>
                        <select id="editTransactionCategory" required>
                            <option value="">انتخاب کنید...</option>
                            <option value="deposit">واریزی</option>
                            <option value="purchase">خرید</option>
                            <option value="return">عودت کالا</option>
                        </select>
                    </div>
                    <div class="form-group" id="editTransactionDepartmentGroup" style="display: none;">
                        <label for="editTransactionDepartment">بخش</label>
                        <select id="editTransactionDepartment">
                            <option value="">انتخاب کنید...</option>
                            <option value="management">مدیریت</option>
                            <option value="accounting">حسابداری</option>
                            <option value="sales">تیم فروش</option>
                        </select>
                    </div>
                    <div class="form-group" id="editTransactionSalesExpertGroup" style="display: none;">
                        <label for="editTransactionSalesExpert">کارشناس فروش</label>
                        <select id="editTransactionSalesExpert">
                            <option value="">انتخاب کنید...</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editTransactionDescription">شرح تراکنش</label>
                        <textarea id="editTransactionDescription" rows="3" required placeholder="شرح تراکنش را وارد کنید"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="editTransactionAmount">مبلغ (تومان)</label>
                        <input type="text" id="editTransactionAmount" required placeholder="مثال: 1,500,000">
                    </div>
                    <div class="form-group">
                        <label for="editTransactionNature">ماهیت تراکنش</label>
                        <select id="editTransactionNature">
                            <option value="debit">بدهکار (خرید)</option>
                            <option value="credit">بستانکار (پرداخت)</option>
                        </select>
                    </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>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('transactionModalOverlay');
    const addBtn = document.getElementById('addTransactionBtn');
    const form = document.getElementById('transactionForm');
    const closeButtons = document.querySelectorAll('.close-modal-btn');
    
    // Open modal
    addBtn.addEventListener('click', () => {
        modal.classList.remove('hidden');
    });

    // Close modal
    closeButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            modal.classList.add('hidden');
        });
    });

    // Format amount input
    const amountInput = document.getElementById('transactionAmount');
    amountInput.addEventListener('input', (e) => {
        e.target.value = e.target.value.replace(/[^0-9]/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    });

    // Show/hide department field based on transaction category
    const categorySelect = document.getElementById('transactionCategory');
    const departmentGroup = document.getElementById('transactionDepartmentGroup');
    const salesExpertGroup = document.getElementById('transactionSalesExpertGroup');
    const salesExpertSelect = document.getElementById('transactionSalesExpert');
    
    categorySelect.addEventListener('change', function() {
        if (this.value === 'deposit') {
            departmentGroup.style.display = 'block';
        } else {
            departmentGroup.style.display = 'none';
            document.getElementById('transactionDepartment').value = '';
        }
    });
    
    // Show/hide sales expert field based on department selection
    const departmentSelect = document.getElementById('transactionDepartment');
    departmentSelect.addEventListener('change', async function() {
        if (this.value === 'sales') {
            salesExpertGroup.style.display = 'block';
            // Load sales experts
            try {
                const response = await fetch('/admin/users/by-role?role=کارشناس فروش', {
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                });
                const result = await response.json();
                salesExpertSelect.innerHTML = '<option value="">انتخاب کنید...</option>';
                if (result.data && result.data.length > 0) {
                    result.data.forEach(user => {
                        const option = document.createElement('option');
                        option.value = user.id;
                        option.textContent = user.name;
                        salesExpertSelect.appendChild(option);
                    });
                }
            } catch (error) {
                console.error('Error loading sales experts:', error);
            }
        } else {
            salesExpertGroup.style.display = 'none';
            salesExpertSelect.value = '';
        }
    });

    // Handle form submit
    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const formData = {
            supplier_id: document.getElementById('transactionSupplierId').value,
            date: document.getElementById('transactionDate').value,
            category: document.getElementById('transactionCategory').value,
            department: document.getElementById('transactionDepartment').value || null,
            sales_expert_id: document.getElementById('transactionSalesExpert')?.value || null,
            description: document.getElementById('transactionDescription').value,
            amount: document.getElementById('transactionAmount').value.replace(/,/g, ''),
            type: document.getElementById('transactionNature').value,
        };

        try {
            console.log('Sending form data:', formData);
            const response = await fetch('/admin/accounting/suppliers/' + formData.supplier_id + '/transactions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(formData)
            });

            console.log('Response status:', response.status);

            const result = await response.json();
            console.log('Response data:', result);

            if (result.success) {
                modal.classList.add('hidden');
                form.reset();
                if (window.showSuccessModalWithAutoClose) {
                    window.showSuccessModalWithAutoClose('تراکنش با موفقیت ثبت شد');
                    window.location.reload();
                } else {
                    alert('تراکنش با موفقیت ثبت شد');
                    window.location.reload();
                }
            } else {
                alert('خطا در ثبت تراکنش: ' + (result.message || 'خطای ناشناخته'));
            }
        } catch (error) {
            console.error('Error:', error);
            alert('خطا در ارتباط با سرور: ' + error.message);
        }
    });

    // Delete flow with custom modals
    const globalModal = document.getElementById('globalModalOverlay');
    const globalTitle = document.getElementById('globalModalTitle');
    const globalMsg = document.getElementById('globalDeleteConfirmationMessage');
    const cancelDeleteBtn = document.getElementById('globalCancelDeleteBtn');
    const confirmDeleteBtn = document.getElementById('globalConfirmDeleteBtn');
    const successModal = document.getElementById('successModalOverlay');
    const successText = document.getElementById('success-modal-text');
    const successOk = document.getElementById('successModalOkBtn');

    let pendingDeletion = null; // { type: 'transaction'|'debt', id: string|number }

    function openDeleteModal(title, message, payload) {
        globalTitle.textContent = title;
        globalMsg.textContent = message;
        pendingDeletion = payload;
        globalModal.classList.remove('hidden');
    }

    function closeDeleteModal() {
        globalModal.classList.add('hidden');
        pendingDeletion = null;
    }

    function showSuccessModal(message, reload = true) {
        successText.textContent = message || 'عملیات با موفقیت انجام شد.';
        successModal.classList.remove('hidden');
        const finish = () => {
            successModal.classList.add('hidden');
            if (reload) window.location.reload();
        };
        successOk.onclick = finish;
        // Auto close after 1.2s if no interaction
        setTimeout(() => { if (!successModal.classList.contains('hidden')) finish(); }, 1200);
    }

    cancelDeleteBtn.addEventListener('click', closeDeleteModal);

    confirmDeleteBtn.addEventListener('click', async () => {
        if (!pendingDeletion) return;
        try {
            if (pendingDeletion.type === 'transaction') {
                const response = await fetch('/admin/accounting/suppliers/{{ $supplier->id }}/transactions/' + pendingDeletion.id, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') }
                });
                const result = await response.json();
                if (result.success) {
                    closeDeleteModal();
                    showSuccessModal('تراکنش با موفقیت حذف شد');
                } else {
                    closeDeleteModal();
                    alert(result.message || 'خطا در حذف تراکنش');
                }
            } else if (pendingDeletion.type === 'debt') {
                // Placeholder: implement when delete debt endpoint is ready
                closeDeleteModal();
                alert('حذف بدهی هنوز پیاده‌سازی نشده است');
            }
        } catch (e) {
            console.error(e);
            closeDeleteModal();
            alert('خطا در ارتباط با سرور');
        }
    });

    // Wire delete buttons to open custom modal
    document.querySelectorAll('[data-action="delete-transaction"]').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.getAttribute('data-transaction-id');
            openDeleteModal('حذف تراکنش', 'آیا از حذف این تراکنش مطمئن هستید؟', { type: 'transaction', id });
        });
    });

    // Handle edit transaction using event delegation
    document.addEventListener('click', function(e) {
        const editBtn = e.target.closest('[data-action="edit-transaction"]');
        if (!editBtn) return;
        
        e.preventDefault();
        e.stopPropagation();
        
        console.log('Edit transaction button clicked');
        
        const transactionId = editBtn.getAttribute('data-transaction-id');
        const transactionDataStr = editBtn.getAttribute('data-transaction-data');
        console.log('Transaction ID:', transactionId);
        console.log('Transaction Data String:', transactionDataStr);
        
        let transactionData = {};
        
        try {
            transactionData = JSON.parse(transactionDataStr || '{}');
            console.log('Parsed transaction data:', transactionData);
        } catch (e) {
            console.error('Error parsing transaction data:', e);
        }
        
        // Open edit modal
        const editModal = document.getElementById('editTransactionModalOverlay');
        const editForm = document.getElementById('editTransactionForm');
        
        if (!editModal) {
            console.error('Edit transaction modal not found');
            alert('مودال ویرایش تراکنش یافت نشد');
            return;
        }
        
        console.log('Edit modal found, opening...');
        
        // Set transaction ID
        document.getElementById('editTransactionSupplierId').value = {{ $supplier->id }};
        document.getElementById('editTransactionId').value = transactionId;
        
        // Fill form with transaction data
        const editDateInput = document.getElementById('editTransactionDate');
        const editDateShamsiInput = document.getElementById('editTransactionDateShamsi');
        if (transactionData.date) {
            // Set the hidden input with Gregorian date
            editDateInput.value = transactionData.date;
            
            // Convert to Persian date for display
            // The date is already in YYYY-MM-DD format, we need to convert it to Persian
            if (editDateShamsiInput) {
                // Use a simple conversion or fetch from server
                // For now, we'll set it empty and let the calendar handle it
                // The calendar will show the correct date when opened
            }
        }
        
        document.getElementById('editTransactionCategory').value = transactionData.category || '';
        document.getElementById('editTransactionDescription').value = transactionData.description || '';
        document.getElementById('editTransactionAmount').value = transactionData.amount ? transactionData.amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '';
        document.getElementById('editTransactionNature').value = transactionData.type || 'debit';
        
        // Show/hide department field
        const editDepartmentGroup = document.getElementById('editTransactionDepartmentGroup');
        if (transactionData.category === 'deposit') {
            editDepartmentGroup.style.display = 'block';
            document.getElementById('editTransactionDepartment').value = transactionData.department || '';
            
            // If department is sales, show sales expert field and load experts
            if (transactionData.department === 'sales') {
                const editSalesExpertGroup = document.getElementById('editTransactionSalesExpertGroup');
                editSalesExpertGroup.style.display = 'block';
                // Load sales experts
                fetch('/admin/users/by-role?role=کارشناس فروش', {
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(response => response.json())
                .then(result => {
                    const editSalesExpertSelect = document.getElementById('editTransactionSalesExpert');
                    editSalesExpertSelect.innerHTML = '<option value="">انتخاب کنید...</option>';
                    if (result.data && result.data.length > 0) {
                        result.data.forEach(user => {
                            const option = document.createElement('option');
                            option.value = user.id;
                            option.textContent = user.name;
                            if (transactionData.sales_expert_id && user.id == transactionData.sales_expert_id) {
                                option.selected = true;
                            }
                            editSalesExpertSelect.appendChild(option);
                        });
                    }
                })
                .catch(error => console.error('Error loading sales experts:', error));
            } else {
                document.getElementById('editTransactionSalesExpertGroup').style.display = 'none';
            }
        } else {
            editDepartmentGroup.style.display = 'none';
            document.getElementById('editTransactionSalesExpertGroup').style.display = 'none';
        }
        
        // Show modal
        console.log('Showing edit modal');
        editModal.classList.remove('hidden');
        console.log('Modal should be visible now');
    });
    
    // Handle edit transaction category change
    const editCategorySelect = document.getElementById('editTransactionCategory');
    const editDepartmentGroup = document.getElementById('editTransactionDepartmentGroup');
    const editSalesExpertGroup = document.getElementById('editTransactionSalesExpertGroup');
    
    if (editCategorySelect) {
        editCategorySelect.addEventListener('change', function() {
            if (this.value === 'deposit') {
                editDepartmentGroup.style.display = 'block';
            } else {
                editDepartmentGroup.style.display = 'none';
                document.getElementById('editTransactionDepartment').value = '';
                editSalesExpertGroup.style.display = 'none';
                document.getElementById('editTransactionSalesExpert').value = '';
            }
        });
    }
    
    // Handle edit transaction department change
    const editDepartmentSelect = document.getElementById('editTransactionDepartment');
    if (editDepartmentSelect) {
        editDepartmentSelect.addEventListener('change', async function() {
            if (this.value === 'sales') {
                editSalesExpertGroup.style.display = 'block';
                // Load sales experts
                try {
                    const response = await fetch('/admin/users/by-role?role=کارشناس فروش', {
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    });
                    const result = await response.json();
                    const editSalesExpertSelect = document.getElementById('editTransactionSalesExpert');
                    editSalesExpertSelect.innerHTML = '<option value="">انتخاب کنید...</option>';
                    if (result.data && result.data.length > 0) {
                        result.data.forEach(user => {
                            const option = document.createElement('option');
                            option.value = user.id;
                            option.textContent = user.name;
                            editSalesExpertSelect.appendChild(option);
                        });
                    }
                } catch (error) {
                    console.error('Error loading sales experts:', error);
                }
            } else {
                editSalesExpertGroup.style.display = 'none';
                document.getElementById('editTransactionSalesExpert').value = '';
            }
        });
    }
    
    // Handle edit transaction form submit
    const editTransactionForm = document.getElementById('editTransactionForm');
    if (editTransactionForm) {
        editTransactionForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const formData = {
                supplier_id: document.getElementById('editTransactionSupplierId').value,
                transaction_id: document.getElementById('editTransactionId').value,
                date: document.getElementById('editTransactionDate').value,
                category: document.getElementById('editTransactionCategory').value,
                department: document.getElementById('editTransactionDepartment').value || null,
                sales_expert_id: document.getElementById('editTransactionSalesExpert')?.value || null,
                description: document.getElementById('editTransactionDescription').value,
                amount: document.getElementById('editTransactionAmount').value.replace(/,/g, ''),
                type: document.getElementById('editTransactionNature').value,
            };
            
            try {
                const response = await fetch('/admin/accounting/suppliers/' + formData.supplier_id + '/transactions/' + formData.transaction_id, {
                    method: 'PUT',
                    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) {
                    // Reload page to show updated data
                    window.location.reload();
                } else {
                    alert('خطا در بروزرسانی تراکنش: ' + (result.message || 'خطای ناشناخته'));
                }
            } catch (error) {
                console.error('Error updating transaction:', error);
                alert('خطا در بروزرسانی تراکنش');
            }
        });
    }
    
    // Close edit modal
    const editModal = document.getElementById('editTransactionModalOverlay');
    if (editModal) {
        const editCloseButtons = editModal.querySelectorAll('.close-modal-btn');
        editCloseButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                editModal.classList.add('hidden');
            });
        });
    }
    
    // Format amount input in edit modal
    const editAmountInput = document.getElementById('editTransactionAmount');
    if (editAmountInput) {
        editAmountInput.addEventListener('input', (e) => {
            e.target.value = e.target.value.replace(/[^0-9]/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        });
    }

    // Handle view debt
    document.querySelectorAll('[data-action="view-debt"]').forEach(btn => {
        btn.addEventListener('click', function() {
            const debtId = this.getAttribute('data-debt-id');
            alert('مشاهده بدهی #' + debtId);
            // TODO: Implement view debt modal
        });
    });

    // Handle edit debt using event delegation
    document.addEventListener('click', function(e) {
        const editBtn = e.target.closest('[data-action="edit-debt"]');
        if (!editBtn) return;
        
        e.preventDefault();
        e.stopPropagation();
        const debtId = editBtn.getAttribute('data-debt-id');
        alert('ویرایش بدهی #' + debtId);
        // TODO: Implement edit debt modal
    });

    // Handle delete debt
    document.querySelectorAll('[data-action="delete-debt"]').forEach(btn => {
        btn.addEventListener('click', function() {
            const debtId = this.getAttribute('data-debt-id');
            alert('حذف بدهی #' + debtId);
            // TODO: Implement delete debt with confirmation
        });
    });
});

// Persian Calendar for transactionDate
document.addEventListener('DOMContentLoaded', function() {
    const transactionDateShamsiInput = document.getElementById('transactionDateShamsi');
    const transactionDateHiddenInput = document.getElementById('transactionDate');
    
    if (transactionDateShamsiInput) {
        let currentCalendarYear = null;
        let currentCalendarMonth = null;
        
        // Get current date from input or use today
        const getCurrentDate = () => {
            const currentValue = transactionDateShamsiInput.value;
            if (currentValue && currentValue.includes('/')) {
                const parts = currentValue.split('/');
                return {
                    year: parseInt(parts[0]),
                    month: parseInt(parts[1])
                };
            }
            // Get from server
            @php
                $now = \Morilog\Jalali\Jalalian::now();
                $currentYear = $now->getYear();
                $currentMonth = $now->getMonth();
            @endphp
            return {
                year: {{ $currentYear }},
                month: {{ $currentMonth }}
            };
        };
        
        // Function to show Persian calendar
        window.showTransactionDateCalendar = function(year, month) {
            // Remove existing calendar if any
            const existingCalendar = document.getElementById('persian-calendar-modal-transaction');
            if (existingCalendar) {
                existingCalendar.remove();
            }
            
            // Fetch calendar view from server
            const calendarUrl = '{{ route('api.calendar-view') }}';
            fetch(calendarUrl + '?year=' + year + '&month=' + month, {
                headers: {
                    'Accept': 'text/html',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                }
            })
                .then(response => {
                    return response.text().then(text => {
                        if (!response.ok) {
                            if (text.includes('persian-calendar-container')) {
                                return text;
                            }
                            console.error('Calendar fetch error:', {
                                status: response.status,
                                statusText: response.statusText,
                                url: calendarUrl + '?year=' + year + '&month=' + month,
                                responseText: text.substring(0, 500)
                            });
                            throw new Error('Failed to load calendar: ' + response.status);
                        }
                        return text;
                    });
                })
                .then(html => {
                    if (!html || html.trim().length === 0 || !html.includes('persian-calendar-container')) {
                        console.error('Invalid calendar HTML');
                        throw new Error('Invalid calendar HTML');
                    }
                    
                    // Create modal container
                    const modal = document.createElement('div');
                    modal.id = 'persian-calendar-modal-transaction';
                    modal.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; pointer-events: none;';
                    
                    // Create backdrop
                    const backdrop = document.createElement('div');
                    backdrop.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); pointer-events: auto;';
                    backdrop.addEventListener('click', function(e) {
                        e.stopPropagation();
                        modal.remove();
                    });
                    
                    // Create calendar container
                    const calendarContainer = document.createElement('div');
                    calendarContainer.style.cssText = 'position: relative; z-index: 100000; background: transparent; pointer-events: auto;';
                    calendarContainer.innerHTML = html;
                    calendarContainer.addEventListener('click', function(e) {
                        e.stopPropagation();
                    });
                    
                    modal.appendChild(backdrop);
                    modal.appendChild(calendarContainer);
                    document.body.appendChild(modal);
                    
                    setTimeout(() => {
                        const calendarDiv = calendarContainer.querySelector('.persian-calendar-container');
                        if (calendarDiv) {
                            calendarDiv.style.display = 'block';
                            calendarDiv.style.visibility = 'visible';
                            calendarDiv.style.opacity = '1';
                        }
                    }, 50);
                    
                    // Handle day selection
                    setTimeout(() => {
                        const dayElements = calendarContainer.querySelectorAll('.calendar-day');
                        dayElements.forEach(dayEl => {
                            dayEl.addEventListener('click', function(e) {
                                e.stopPropagation();
                                
                                // Remove selected class from all days
                                dayElements.forEach(day => {
                                    day.classList.remove('selected');
                                    const dayNumber = day.querySelector('.day-number');
                                    const dayGregorian = day.querySelector('.day-gregorian');
                                    if (dayNumber) {
                                        dayNumber.style.color = '';
                                    }
                                    if (dayGregorian) {
                                        dayGregorian.style.color = '';
                                    }
                                });
                                
                                // Add selected class to clicked day
                                this.classList.add('selected');
                                const dayNumber = this.querySelector('.day-number');
                                const dayGregorian = this.querySelector('.day-gregorian');
                                if (dayNumber) {
                                    dayNumber.style.color = '#ffffff';
                                }
                                if (dayGregorian) {
                                    dayGregorian.style.color = '#ffffff';
                                }
                                
                                const gregorian = this.getAttribute('data-gregorian');
                                const shamsi = this.getAttribute('data-shamsi');
                                
                                if (transactionDateShamsiInput) {
                                    transactionDateShamsiInput.value = shamsi;
                                }
                                if (transactionDateHiddenInput) {
                                    transactionDateHiddenInput.value = gregorian;
                                }
                                
                                modal.remove();
                            });
                        });
                        
                        // Handle month navigation
                        const prevBtn = calendarContainer.querySelector('.prev-month');
                        const nextBtn = calendarContainer.querySelector('.next-month');
                        
                        if (prevBtn) {
                            prevBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                let newYear = parseInt(this.getAttribute('data-year'));
                                let newMonth = parseInt(this.getAttribute('data-month'));
                                
                                if (newMonth < 1) {
                                    newMonth = 12;
                                    newYear--;
                                }
                                
                                currentCalendarYear = newYear;
                                currentCalendarMonth = newMonth;
                                showTransactionDateCalendar(newYear, newMonth);
                            });
                        }
                        
                        if (nextBtn) {
                            nextBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                let newYear = parseInt(this.getAttribute('data-year'));
                                let newMonth = parseInt(this.getAttribute('data-month'));
                                
                                if (newMonth > 12) {
                                    newMonth = 1;
                                    newYear++;
                                }
                                
                                currentCalendarYear = newYear;
                                currentCalendarMonth = newMonth;
                                showTransactionDateCalendar(newYear, newMonth);
                            });
                        }
                        
                        // Handle "Go to Today" button
                        const todayBtn = calendarContainer.querySelector('.calendar-today-btn');
                        if (todayBtn) {
                            todayBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                const today = getCurrentDate();
                                currentCalendarYear = today.year;
                                currentCalendarMonth = today.month;
                                showTransactionDateCalendar(today.year, today.month);
                            });
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Failed to load calendar:', error);
                });
        };
        
        // Open calendar on input click
        transactionDateShamsiInput.addEventListener('click', function() {
            const currentDate = getCurrentDate();
            currentCalendarYear = currentDate.year;
            currentCalendarMonth = currentDate.month;
            showTransactionDateCalendar(currentDate.year, currentDate.month);
        });
    }
});

// Persian Calendar for editTransactionDate
document.addEventListener('DOMContentLoaded', function() {
    const editTransactionDateShamsiInput = document.getElementById('editTransactionDateShamsi');
    const editTransactionDateHiddenInput = document.getElementById('editTransactionDate');
    
    if (editTransactionDateShamsiInput) {
        let currentCalendarYear = null;
        let currentCalendarMonth = null;
        
        // Get current date from input or use today
        const getCurrentDate = () => {
            const currentValue = editTransactionDateShamsiInput.value;
            if (currentValue && currentValue.includes('/')) {
                const parts = currentValue.split('/');
                return {
                    year: parseInt(parts[0]),
                    month: parseInt(parts[1])
                };
            }
            // Get from server
            @php
                $now = \Morilog\Jalali\Jalalian::now();
                $currentYear = $now->getYear();
                $currentMonth = $now->getMonth();
            @endphp
            return {
                year: {{ $currentYear }},
                month: {{ $currentMonth }}
            };
        };
        
        // Function to show Persian calendar
        window.showEditTransactionDateCalendar = function(year, month) {
            // Remove existing calendar if any
            const existingCalendar = document.getElementById('persian-calendar-modal-edit-transaction');
            if (existingCalendar) {
                existingCalendar.remove();
            }
            
            // Fetch calendar view from server
            const calendarUrl = '{{ route('api.calendar-view') }}';
            fetch(calendarUrl + '?year=' + year + '&month=' + month, {
                headers: {
                    'Accept': 'text/html',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                }
            })
                .then(response => {
                    return response.text().then(text => {
                        if (!response.ok) {
                            if (text.includes('persian-calendar-container')) {
                                return text;
                            }
                            console.error('Calendar fetch error:', {
                                status: response.status,
                                statusText: response.statusText,
                                url: calendarUrl + '?year=' + year + '&month=' + month,
                                responseText: text.substring(0, 500)
                            });
                            throw new Error('Failed to load calendar: ' + response.status);
                        }
                        return text;
                    });
                })
                .then(html => {
                    if (!html || html.trim().length === 0 || !html.includes('persian-calendar-container')) {
                        console.error('Invalid calendar HTML');
                        throw new Error('Invalid calendar HTML');
                    }
                    
                    // Create modal container
                    const modal = document.createElement('div');
                    modal.id = 'persian-calendar-modal-edit-transaction';
                    modal.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; pointer-events: none;';
                    
                    // Create backdrop
                    const backdrop = document.createElement('div');
                    backdrop.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); pointer-events: auto;';
                    backdrop.addEventListener('click', function(e) {
                        e.stopPropagation();
                        modal.remove();
                    });
                    
                    // Create calendar container
                    const calendarContainer = document.createElement('div');
                    calendarContainer.style.cssText = 'position: relative; z-index: 100000; background: transparent; pointer-events: auto;';
                    calendarContainer.innerHTML = html;
                    calendarContainer.addEventListener('click', function(e) {
                        e.stopPropagation();
                    });
                    
                    modal.appendChild(backdrop);
                    modal.appendChild(calendarContainer);
                    document.body.appendChild(modal);
                    
                    setTimeout(() => {
                        const calendarDiv = calendarContainer.querySelector('.persian-calendar-container');
                        if (calendarDiv) {
                            calendarDiv.style.display = 'block';
                            calendarDiv.style.visibility = 'visible';
                            calendarDiv.style.opacity = '1';
                        }
                    }, 50);
                    
                    // Handle day selection
                    setTimeout(() => {
                        const dayElements = calendarContainer.querySelectorAll('.calendar-day');
                        dayElements.forEach(dayEl => {
                            dayEl.addEventListener('click', function(e) {
                                e.stopPropagation();
                                
                                // Remove selected class from all days
                                dayElements.forEach(day => {
                                    day.classList.remove('selected');
                                    const dayNumber = day.querySelector('.day-number');
                                    const dayGregorian = day.querySelector('.day-gregorian');
                                    if (dayNumber) {
                                        dayNumber.style.color = '';
                                    }
                                    if (dayGregorian) {
                                        dayGregorian.style.color = '';
                                    }
                                });
                                
                                // Add selected class to clicked day
                                this.classList.add('selected');
                                const dayNumber = this.querySelector('.day-number');
                                const dayGregorian = this.querySelector('.day-gregorian');
                                if (dayNumber) {
                                    dayNumber.style.color = '#ffffff';
                                }
                                if (dayGregorian) {
                                    dayGregorian.style.color = '#ffffff';
                                }
                                
                                const gregorian = this.getAttribute('data-gregorian');
                                const shamsi = this.getAttribute('data-shamsi');
                                
                                if (editTransactionDateShamsiInput) {
                                    editTransactionDateShamsiInput.value = shamsi;
                                }
                                if (editTransactionDateHiddenInput) {
                                    editTransactionDateHiddenInput.value = gregorian;
                                }
                                
                                modal.remove();
                            });
                        });
                        
                        // Handle month navigation
                        const prevBtn = calendarContainer.querySelector('.prev-month');
                        const nextBtn = calendarContainer.querySelector('.next-month');
                        
                        if (prevBtn) {
                            prevBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                let newYear = parseInt(this.getAttribute('data-year'));
                                let newMonth = parseInt(this.getAttribute('data-month'));
                                
                                if (newMonth < 1) {
                                    newMonth = 12;
                                    newYear--;
                                }
                                
                                currentCalendarYear = newYear;
                                currentCalendarMonth = newMonth;
                                showEditTransactionDateCalendar(newYear, newMonth);
                            });
                        }
                        
                        if (nextBtn) {
                            nextBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                let newYear = parseInt(this.getAttribute('data-year'));
                                let newMonth = parseInt(this.getAttribute('data-month'));
                                
                                if (newMonth > 12) {
                                    newMonth = 1;
                                    newYear++;
                                }
                                
                                currentCalendarYear = newYear;
                                currentCalendarMonth = newMonth;
                                showEditTransactionDateCalendar(newYear, newMonth);
                            });
                        }
                        
                        // Handle "Go to Today" button
                        const todayBtn = calendarContainer.querySelector('.calendar-today-btn');
                        if (todayBtn) {
                            todayBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                const today = getCurrentDate();
                                currentCalendarYear = today.year;
                                currentCalendarMonth = today.month;
                                showEditTransactionDateCalendar(today.year, today.month);
                            });
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Failed to load calendar:', error);
                });
        };
        
        // Open calendar on input click
        editTransactionDateShamsiInput.addEventListener('click', function() {
            const currentDate = getCurrentDate();
            currentCalendarYear = currentDate.year;
            currentCalendarMonth = currentDate.month;
            showEditTransactionDateCalendar(currentDate.year, currentDate.month);
        });
        
        // When edit modal opens, convert the date if it exists
        const editModal = document.getElementById('editTransactionModalOverlay');
        if (editModal) {
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (!editModal.classList.contains('hidden')) {
                        // Modal is open, check if we have a date to convert
                        const hiddenDate = editTransactionDateHiddenInput?.value;
                        if (hiddenDate && hiddenDate.includes('-')) {
                            // Convert Gregorian to Persian for display
                            // We'll fetch the conversion from server or use a simple method
                            // For now, leave it empty and let user select from calendar
                        }
                    }
                });
            });
            observer.observe(editModal, { attributes: true, attributeFilter: ['class'] });
        }
    }
});
</script>
@endpush

@endsection