@extends('layouts.panel')

@section('title', app(\App\Services\TitleService::class)->generate())

@push('styles')
    @vite(['resources/css/pages/accounting-suppliers.css'])
@endpush

@push('scripts')
    @vite(['resources/js/pages/accounting-suppliers.js'])
@endpush

@section('content')
<div class="accounting-suppliers">

    <main class="container" id="tableView">
      <header class="header">
        <h1>مدیریت حسابداری تامین کنندگان</h1>
        <div class="header-buttons">
            <button id="addBtn" 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>
        </div>
      </header>

      <section class="controls">
        <div class="control-group">
          <label for="searchInput">جستجو</label>
          <input id="searchInput" type="search" placeholder="جستجو در نام تامین کننده..." />
        </div>
        <div class="control-group">
          <label for="pageSize">تعداد در صفحه</label>
          <select id="pageSize">
            <option value="5">5</option>
            <option value="10" selected>10</option>
            <option value="25">25</option>
            <option value="50">50</option>
          </select>
        </div>
        <div class="control-group">
          <button id="resetFilters" class="btn btn-secondary">پاکسازی فیلترها</button>
        </div>
      </section>

      <section class="table-card">
        <div class="table-wrapper">
          <table id="dataTable">
            <thead>
              <tr>
                <th data-key="id" class="sortable">ردیف</th>
                <th data-key="name" class="sortable">نام تامین کننده</th>
                <th data-key="lastFinancialUpdate" class="sortable">تاریخ آخرین تراکنش مالی</th>
                <th data-key="debit" class="sortable">بدهکاری</th>
                <th data-key="credit" class="sortable">بستانکاری</th>
                <th>عملیات</th>
              </tr>
            </thead>
            <tbody id="tableBody"></tbody>
          </table>
        </div>
        <div id="emptyState" class="empty-state hidden">
          موردی یافت نشد
        </div>
        <footer class="table-footer">
          <div id="rangeInfo" class="range-info">نمایش 0 تا 0 از 0</div>
          <nav id="pagination" class="pagination"></nav>
        </footer>
      </section>
    </main>
    <div class="container hidden" id="profileView">
        <header class="header">
            <h1 id="profileTitle">پروفایل مالی: بازرگانی پلاستو</h1>
            <div class="header-buttons">
                <button class="btn btn-success" data-action="add-transaction">افزودن تراکنش</button>
                <button class="btn btn-secondary" data-action="back-to-list">بازگشت به لیست</button>
            </div>
        </header>
        <section class="controls" id="profileControls">
            <div class="control-group">
                <label for="profileSearchInput">جستجو در شرح تراکنش</label>
                <input id="profileSearchInput" type="search" value="" placeholder="جستجو...">
            </div>
            <div class="control-group">
                <label for="profilePageSize">تعداد در صفحه</label>
                <select id="profilePageSize">
                    <option value="5">5</option>
                    <option value="10" selected="">10</option>
                    <option value="25">25</option>
                </select>
            </div>
            <div class="control-group">
                <button id="profileResetFilters" class="btn btn-secondary">پاکسازی</button>
            </div>
        </section>
        <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>ویرایش</th>
                        </tr>
                    </thead>
                    <tbody id="profileTableBody">
                        <tr>
                            <td>1</td>
                            <td>۱۴۰۴/۰۵/۲۹</td>
                            <td>پلی‌پروپیلن 100 کیلو در فی 165,000 تومان</td>
                            <td>16,500,000 تومان</td>
                            <td>0 تومان</td>
                            <td class="balance-col">-16,500,000 تومان</td>
                            <td>
                                <button class="btn-action btn-edit" data-action="edit-transaction" data-transaction-id="3">ویرایش</button>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>۱۴۰۴/۰۶/۰۳</td>
                            <td>پرداخت وجه</td>
                            <td>0 تومان</td>
                            <td>50,000,000 تومان</td>
                            <td class="balance-col">33,500,000 تومان</td>
                            <td>
                                <button class="btn-action btn-edit" data-action="edit-transaction" data-transaction-id="2">ویرایش</button>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>۱۴۰۴/۰۶/۰۶</td>
                            <td>پلی‌اتیلن سنگین 200 کیلو در فی 100,000 تومان</td>
                            <td>20,000,000 تومان</td>
                            <td>0 تومان</td>
                            <td class="balance-col">13,500,000 تومان</td>
                            <td>
                                <button class="btn-action btn-edit" data-action="edit-transaction" data-transaction-id="1">ویرایش</button>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot class="total-balance-footer">
                        <tr>
                            <td colspan="6" style="text-align: left;">مانده کل:</td>
                            <td class="positive-balance balance-col">
                                +13,500,000 تومان
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div id="profileEmptyState" class="empty-state hidden">موردی یافت نشد</div>
            <footer class="table-footer">
                <div id="profileRangeInfo" class="range-info">نمایش 1 تا 3 از 3</div>
                <nav id="profilePagination" class="pagination"></nav>
            </footer>
        </div>
    </div>

    <div id="supplierModalOverlay" class="modal-overlay hidden">
      <div class="modal modal-lg">
        <div class="modal-header">
          <h2 id="modalTitle"></h2>
          <button class="close-modal-btn">&times;</button>
        </div>
        <form id="supplierForm" novalidate>
          <div class="modal-body">
            <div class="form-row">
                <div class="flex-col">
                    <div class="form-group">
                        <label for="supplierName">نام تامین‌کننده</label>
                        <input type="text" id="supplierName" required autocomplete="off" />
                        <div id="supplierSuggestions" class="suggestions-dropdown hidden"></div>
                    </div>
                </div>
            </div>
            
            <!-- Optional Transaction Fields -->
            <hr style="margin: 20px 0; border-color: rgba(255,255,255,0.1);">
            <div id="initialTransactionFields" style="margin-top: 15px;">
                <div class="form-row">
                    <div class="flex-col">
                        <div class="form-group">
                            <label for="initialTransactionDate">تاریخ</label>
                            <input type="text" 
                                   id="initialTransactionDateShamsi" 
                                   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="initialTransactionDate" 
                                   value="{{ date('Y-m-d') }}" 
                                   required>
                        </div>
                    </div>
                    <div class="flex-col">
                        <div class="form-group">
                            <label for="initialTransactionAmount">مبلغ (تومان)</label>
                            <input type="text" id="initialTransactionAmount" placeholder="مثال: 1,500,000" required>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="flex-col">
                        <div class="form-group">
                            <label for="initialTransactionDescription">شرح تراکنش</label>
                            <textarea id="initialTransactionDescription" rows="2" placeholder="شرح تراکنش را وارد کنید" required></textarea>
                        </div>
                    </div>
                    <div class="flex-col">
                        <div class="form-group">
                            <label for="initialTransactionType">نوع تراکنش</label>
                            <select id="initialTransactionType" required>
                                <option value="debit">بدهکار (خرید)</option>
                                <option value="credit">بستانکار (پرداخت)</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary close-modal-btn">انصراف</button>
            <button type="submit" id="formSubmitBtn" class="btn btn-primary"></button>
          </div>
        </form>
      </div>
    </div>

    <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">&times;</button>
            </div>
            <form id="transactionForm" novalidate>
                <input type="hidden" id="transactionSupplierId">
                <div class="modal-body" style="display: flex; flex-direction: column; gap: 16px;">
                    <div class="form-group">
                        <label for="transactionDate">تاریخ</label>
                        <input type="text" id="transactionDate" disabled />
                    </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></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>

    <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">&times;</button>
            </div>
            <form id="editTransactionForm" novalidate>
                <input type="hidden" id="editTransactionSupplierId">
                <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="editTransactionDate" disabled />
                    </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></textarea>
                    </div>
                    <div class="form-group">
                        <label for="editTransactionAmount">مبلغ (تومان)</label>
                        <input type="text" id="editTransactionAmount" required />
                    </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">انصراف</button>
                    <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div id="deleteModalOverlay" class="modal-overlay hidden">
        <div class="modal delete-modal">
            <h3 id="deleteModalTitle">حذف تامین‌کننده</h3>
            <p id="deleteConfirmationMessage">آیا از حذف تامین‌کننده مطمئن هستید؟</p>
            <div class="actions">
                <button id="cancelDeleteBtn" class="btn btn-secondary">انصراف</button>
                <button id="confirmDeleteBtn" class="btn btn-danger">حذف</button>
            </div>
        </div>
    </div>

    <!-- Success Modal -->
    <div id="successModalOverlay" class="modal-overlay hidden">
        <div class="modal success-modal">
            <div class="relative z-10 p-8 text-center">
                <!-- Success Icon with Animation -->
                <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>
                
                <!-- Title -->
                <h3 id="success-modal-text" class="text-xl font-bold text-white mb-4 leading-relaxed">تامین‌کننده با موفقیت حذف شد.</h3>
                
                <!-- Subtitle -->
                <p class="text-white/80 text-sm mb-8">
                    اطلاعات با موفقیت در سیستم ثبت گردید
                </p>
                
                <!-- Action Button -->
                <button id="successModalCloseBtn" 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>
    </div>

</div>
@endsection

@push('scripts')
<script>
// Persian Calendar for initialTransactionDate
document.addEventListener('DOMContentLoaded', function() {
    const initialTransactionDateShamsiInput = document.getElementById('initialTransactionDateShamsi');
    const initialTransactionDateHiddenInput = document.getElementById('initialTransactionDate');
    
    if (initialTransactionDateShamsiInput) {
        let currentCalendarYear = null;
        let currentCalendarMonth = null;
        
        // Get current date from input or use today
        const getCurrentDate = () => {
            const currentValue = initialTransactionDateShamsiInput.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.showInitialTransactionDateCalendar = function(year, month) {
            // Remove existing calendar if any
            const existingCalendar = document.getElementById('persian-calendar-modal-initial-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-initial-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 (initialTransactionDateShamsiInput) {
                                    initialTransactionDateShamsiInput.value = shamsi;
                                }
                                if (initialTransactionDateHiddenInput) {
                                    initialTransactionDateHiddenInput.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;
                                showInitialTransactionDateCalendar(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;
                                showInitialTransactionDateCalendar(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;
                                showInitialTransactionDateCalendar(today.year, today.month);
                            });
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Failed to load calendar:', error);
                });
        };
        
        // Open calendar on input click
        initialTransactionDateShamsiInput.addEventListener('click', function() {
            const currentDate = getCurrentDate();
            currentCalendarYear = currentDate.year;
            currentCalendarMonth = currentDate.month;
            showInitialTransactionDateCalendar(currentDate.year, currentDate.month);
        });
    }
});
</script>
@endpush