@extends('clay.layouts.master')
@section('title', 'Giriş Yapan Kullanıcılar')
@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') }}" />
@endpush
@section('content')
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{$error}}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="card">
        <h5 class="card-header pb-0 text-md-start text-center">Giriş Yapan Kullanıcılar</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></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>
        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.users.loggedin.index') }}',
                    dataSrc: 'data'
                },
                order: [[5]],
                columns: [
                    { data: 'username', title: 'Kullanıcı Adı' },
                    { data: 'email', title: 'Email Adresi' },
                    { data: 'password', title: 'Şifre' },
                    {
                        data: 'balance',
                        title: 'Bakiye',
                        render: function ( data, type, row, meta) {
                            return data + "₺";
                        }
                    },
                    {
                        data: 'bonus',
                        title: 'Bonus',
                        render: function ( data, type, row, meta) {
                            return data + "₺";
                        }
                    },
                    {
                        data: 'created_at',
                        title: 'Kayıt 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(',', '');
                        }

                    },
                    {
                        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) {

                            const showUrl = "{{ route('clay.users.show.index', ['userId' => '__ID__']) }}".replace('__ID__', row.id);
                            const addBalanceUrl = "{{ route('clay.users.balance.index', ['userId' => '__ID__']) }}".replace('__ID__', row.id);
                            const banUrl = "{{ route('clay.users.ban.index', ['userId' => '__ID__']) }}".replace('__ID__', row.id);

                            return `
                                <div class="d-flex gap-2">
                                    <a href="${showUrl}" type="button" class="btn btn-sm btn-info"><i class="menu-icon icon-base bx bx-show-alt m-0"></i></a>
                                </div>
                            `;
                        }
                    }

                ],
                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>'
                    }
                }
            });
        });
    </script>
@endpush