@extends('layouts.panel')

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

@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">لیست تراکنش‌های حسابداری</h1>
            <p class="text-sm text-slate-400 mt-1">نمایش تمام تراکنش‌های ثبت شده</p>
        </div>
    </div>

    <!-- Controls -->
    <section class="controls" style="display: flex; align-items: end; gap: 16px; flex-wrap: wrap;">
        <div class="control-group" style="display: flex; flex-direction: column; gap: 4px; min-width: 75%;">
            <label for="searchInput" style="font-size: 12px; color: #9ca3af;">جستجو</label>
            <input id="searchInput" type="search" placeholder="جستجو در نام، شرح، مبلغ و..." style="padding: 8px 12px; border:1px solid var(--border); border-radius: 6px; background: #0b1220; color: #e5e7eb; font-size: 14px;">
        </div>
        <div class="control-group" style="display: flex; flex-direction: column; gap: 4px;">
            <button id="resetFilters" class="btn btn-secondary" style="width: max-content !important; padding: 8px 16px; font-size: 12px; white-space: nowrap;">پاکسازی فیلترها</button>
        </div>
        <div class="control-group" style="display: flex; flex-direction: column; gap: 4px;">
            <label for="pageSize" style="font-size: 12px; color: #9ca3af;">تعداد</label>
            <select id="pageSize" style="width: max-content !important; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: #0b1220; color: #e5e7eb; font-size: 14px;">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>
        <div class="control-group" style="display: flex; flex-direction: column; gap: 4px; min-width: 120px;">
            <label for="transactionTypeFilter" style="font-size: 12px; color: #9ca3af;">نوع تراکنش</label>
            <select id="transactionTypeFilter" style="width: max-content !important; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: #0b1220; color: #e5e7eb; font-size: 14px;">
                <option style="background: #0b1220; color: #e5e7eb; font-family: IRANSans;" value="">همه</option>
                <option style="background: #0b1220; color: #e5e7eb; font-family: IRANSans;" value="بدهکار">بدهکار</option>
                <option style="background: #0b1220; color: #e5e7eb; font-family: IRANSans;" value="بستانکار">بستانکار</option>
            </select>
        </div>
    </section>

    <!-- Transactions Table -->
    <section 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>تاریخ</th>
                    </tr>
                </thead>
                <tbody>
                    @if(count($transactions) > 0)
                        @foreach($transactions as $index => $transaction)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $transaction['supplier_name'] }}</td>
                                <td>{{ $transaction['description'] }}</td>
                                <td class="{{ $transaction['type_color'] }}" style="font-weight: 600; font-size: 16px;">
                                    @if($transaction['type'] === 'بدهکار')
                                        -{{ number_format($transaction['amount']) }}
                                    @else
                                        +{{ number_format($transaction['amount']) }}
                                    @endif تومان
                                </td>
                                <td>
                                    <span class="{{ $transaction['type_color'] }}" style="font-weight: 600;">
                                        {{ $transaction['type'] }}
                                    </span>
                                </td>
                                <td>{{ jdate($transaction['date'])->format('Y/m/d') }}</td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="6" style="text-align: center; padding: 16px;">
                                تراکنشی یافت نشد.
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
        
        @if(count($transactions) == 0)
            <div class="empty-state">
                موردی یافت نشد
            </div>
        @endif
        
        <footer class="table-footer">
            <div id="rangeInfo" class="range-info">نمایش 1 تا {{ count($transactions) }} از {{ count($transactions) }}</div>
            <nav id="pagination" class="pagination"></nav>
        </footer>
    </section>
</div>

<style>
.profile-table th {
    color: #c7d2fe;
}

.profile-table td {
    white-space: normal;
    word-wrap: break-word;
    max-width: 200px;
}

.table-wrapper {
    overflow-x: auto;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const transactionTypeFilter = document.getElementById('transactionTypeFilter');
    const pageSizeSelect = document.getElementById('pageSize');
    const resetFiltersBtn = document.getElementById('resetFilters');
    const tableBody = document.querySelector('tbody');
    
    let allTransactions = @json($transactions);
    let filteredTransactions = [...allTransactions];
    let currentPageSize = parseInt(pageSizeSelect.value);
    let currentPage = 1;
    
    // Filter and search function
    function filterTransactions() {
        const searchTerm = searchInput.value.toLowerCase().trim();
        const typeFilter = transactionTypeFilter.value;
        const size = parseInt(pageSizeSelect.value);
        
        filteredTransactions = allTransactions.filter(transaction => {
            const matchesSearch = !searchTerm || 
                transaction.supplier_name.toLowerCase().includes(searchTerm) ||
                transaction.description.toLowerCase().includes(searchTerm) ||
                transaction.amount.toString().includes(searchTerm);
            
            const matchesType = !typeFilter || transaction.type === typeFilter;
            
            return matchesSearch && matchesType;
        });
        
        currentPageSize = size;
        currentPage = 1;
        renderTable();
    }
    
    // Render table function
    function renderTable() {
        const start = (currentPage - 1) * currentPageSize;
        const end = start + currentPageSize;
        const paginatedTransactions = filteredTransactions.slice(start, end);
        
        const rows = paginatedTransactions.map((transaction, index) => {
            const rowNumber = start + index + 1;
            const typeColor = transaction.type === 'بدهکار' ? 'text-red-400' : 'text-green-400';
            const amountDisplay = transaction.type === 'بدهکار' 
                ? `<span style="color: #ef4444;">-${new Intl.NumberFormat('fa-IR').format(transaction.amount)}</span>`
                : `<span style="color: #22c55e;">+${new Intl.NumberFormat('fa-IR').format(transaction.amount)}</span>`;
            
            return `
                <tr>
                    <td>${rowNumber}</td>
                    <td>${transaction.supplier_name}</td>
                    <td>${transaction.description}</td>
                    <td class="${typeColor}" style="font-weight: 600; font-size: 16px;">
                        ${amountDisplay} تومان
                    </td>
                    <td>
                        <span class="${typeColor}" style="font-weight: 600;">
                            ${transaction.type}
                        </span>
                    </td>
                    <td>${transaction.date ? new Date(transaction.date).toLocaleDateString('fa-IR') : '-'}</td>
                </tr>
            `;
        }).join('');
        
        if (paginatedTransactions.length === 0) {
            tableBody.innerHTML = `
                <tr>
                    <td colspan="6" style="text-align: center; padding: 16px;">
                        تراکنشی یافت نشد.
                    </td>
                </tr>
            `;
        } else {
            tableBody.innerHTML = rows;
        }
        
        // Update range info
        const rangeInfo = document.getElementById('rangeInfo');
        if (rangeInfo) {
            const end = Math.min(start + currentPageSize, filteredTransactions.length);
            rangeInfo.textContent = `نمایش ${start + 1} تا ${end} از ${filteredTransactions.length}`;
        }
        
        renderPagination();
    }
    
    // Render pagination
    function renderPagination() {
        const totalPages = Math.ceil(filteredTransactions.length / currentPageSize);
        const pagination = document.getElementById('pagination');
        
        if (!pagination) return;
        
        if (totalPages <= 1) {
            pagination.innerHTML = '';
            return;
        }
        
        let paginationHTML = '';
        for (let i = 1; i <= totalPages; i++) {
            if (i === 1 || i === totalPages || (i >= currentPage - 1 && i <= currentPage + 1)) {
                paginationHTML += `<button class="page-btn ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</button>`;
            } else if (i === currentPage - 2 || i === currentPage + 2) {
                paginationHTML += `<span class="page-btn" disabled>...</span>`;
            }
        }
        
        pagination.innerHTML = paginationHTML;
        
        // Add event listeners to pagination buttons
        const pageButtons = pagination.querySelectorAll('.page-btn');
        pageButtons.forEach(button => {
            button.addEventListener('click', function() {
                const page = parseInt(this.getAttribute('data-page'));
                if (page && page !== currentPage) {
                    currentPage = page;
                    renderTable();
                }
            });
        });
    }
    
    // Event listeners
    searchInput.addEventListener('input', filterTransactions);
    transactionTypeFilter.addEventListener('change', filterTransactions);
    pageSizeSelect.addEventListener('change', filterTransactions);
    
    resetFiltersBtn.addEventListener('click', function() {
        searchInput.value = '';
        transactionTypeFilter.value = '';
        pageSizeSelect.value = '10';
        filterTransactions();
    });
    
    // Initial render
    renderTable();
});
</script>
@endsection