@push('css')
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">
@endpush

@push('scripts')
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <script>
        $(document).ready(function() {
            // DataTable başlat
            const table = $('#transactionsTable').DataTable({
                data: {!! json_encode($transactions) !!},
                responsive: true,
                searching: false,
                columns: [
                    {
                        data: 'date',
                        type: 'date'
                    },
                    {
                        data: 'operation_type',
                        render: function(data) {
                            return `<span class="badge bg-${data.class}">${data.label}</span>`;
                        }
                    },
                    {
                        data: 'amount',
                        render: function(data) {
                            return `<span class="fw-bold">${data.formatted}</span>`;
                        }
                    },
                    {
                        data: 'transaction_status',
                        render: function(data) {
                            return `<span class="badge bg-${data.class}">${data.label}</span>`;
                        }
                    },
                    {
                        data: null,
                        className: 'text-center',
                        render: function(data, type, row) {
                            return `
                                <button
                                    class="btn btn-sm btn-primary view-transaction"
                                    data-bs-toggle="modal"
                                    data-bs-target="#transaction-detail">
                                    <i class="fas fa-eye me-1"></i> Dekont
                                </button>`;
                        }
                    }
                ],
                language: {
                    lengthMenu: "_MENU_ kayıt göster",
                    zeroRecords: "Kayıt bulunamadı",
                    info: "_TOTAL_ kayıttan _START_ - _END_ arası gösteriliyor",
                    infoEmpty: "Kayıt bulunamadı",
                    infoFiltered: "(_MAX_ kayıt içerisinden filtrelendi)",
                    paginate: {
                        first: "İlk",
                        last: "Son",
                        next: "Sonraki",
                        previous: "Önceki"
                    }
                },
                order: [[0, 'desc']],
            });

            // Modal detay işlemlerini yönetecek fonksiyon
            $('#transactionsTable').on('click', '.view-transaction', function(e) {
                e.preventDefault();

                const transaction = table.row($(this).closest('tr')).data();

                if (transaction) {
                    const modalContent = `
            <div class="row g-0">
                <div class="col-sm-5 d-flex justify-content-center bg-primary rounded-start py-4">
                    <div class="my-auto text-center">
                        <div class="text-17 text-white my-3"><i class="fas fa-building"></i></div>
                        <h3 class="text-4 text-white fw-400 my-3">${transaction.operation_type?.label || '-'}</h3>
                        <div class="text-8 fw-500 text-white my-4">${transaction.amount?.formatted || '0,00₺'}</div>
                        <p class="text-white">${transaction.date || '-'}</p>
                    </div>
                </div>
                <div class="col-sm-7">
                    <h5 class="text-5 fw-400 m-3">İşlem Detayı
                        <button type="button" class="btn-close text-2 float-end" data-bs-dismiss="modal" aria-label="Close"></button>
                    </h5>
                    <hr>
                    <div class="px-3">
                        <ul class="list-unstyled">
                            <li class="mb-2">İşlem Tutarı <span class="float-end text-3">${transaction.amount?.formatted || '0,00₺'}</span></li>
                            <li class="mb-2">Komisyon <span class="float-end text-3">${transaction.fee || '0,00₺'}</span></li>
                        </ul>
                        <hr class="mb-2">
                        <p class="d-flex align-items-center fw-500 mb-0">Toplam Tutar <span class="text-3 ms-auto">${transaction.total || transaction.amount?.formatted || '0,00₺'}</span></p>
                        <hr class="mb-4 mt-2">
                        <ul class="list-unstyled">
                            <li class="fw-500">Gönderen</li>
                            <li class="text-muted">${transaction.wallets?.from?.name || '-'}</li>
                        </ul>
                        <ul class="list-unstyled">
                            <li class="fw-500">Alıcı</li>
                            <li class="text-muted">${transaction.wallets?.to?.name || '-'}</li>
                        </ul>
                        <ul class="list-unstyled">
                            <li class="fw-500">İşlem ID:</li>
                            <li class="text-muted text-break">${transaction.operation_unique_id || '-'}</li>
                        </ul>
                        <ul class="list-unstyled">
                            <li class="fw-500">Açıklama:</li>
                            <li class="text-muted">${transaction.description || '-'}</li>
                        </ul>
                        <ul class="list-unstyled">
                            <li class="fw-500">Durum:</li>
                            <li class="text-muted">
                                ${transaction.operation_status?.label || '-'}
                                <span class="text-${transaction.operation_status?.class} text-3 ms-1">
                                    <i class="fas ${getStatusIcon(transaction.operation_status?.class)}"></i>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        `;

                    $('#transaction-detail .modal-body').html(modalContent);
                    $('#transaction-detail').modal('show');
                } else {
                    console.error('İşlem detayları bulunamadı');
                    $('#transaction-detail .modal-body').html('<div class="p-3">İşlem detayları yüklenirken bir hata oluştu.</div>');
                }
            });

// Durum ikonlarını belirlemek için yardımcı fonksiyon
            function getStatusIcon(status) {
                const icons = {
                    'warning': 'fa-ellipsis-h',
                    'success': 'fa-check-circle',
                    'danger': 'fa-times-circle',
                    'primary': 'fa-info-circle'
                };
                return icons[status] || 'fa-question-circle';
            }
        });
    </script>
@endpush
<div class="table-responsive p-2">
    <table id="transactionsTable" class="table table-striped table-bordered" width="100%">
        <thead>
        <tr>
            <th>Tarih</th>
            <th>İşlem Tipi</th>
            <th>Tutar</th>
            <th>Transfer Durumu</th>
            <th>İşlemler</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<!-- Transaction Detail Modal -->
<div id="transaction-detail" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body p-0"></div>
        </div>
    </div>
</div>