@extends('clay.layouts.master')
@section('title', 'Kullanıcı ' . ($user->username ?? $user->email))
@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
    <!-- User Profile Content -->
    <div class="row">
        <div class="col-xl-3 col-lg-3 col-md-12">
            <!-- About User -->
            <div class="card mb-6">
                <div class="card-body">
                    <small class="card-text text-uppercase text-body-secondary small">Bilgiler</small>
                    <ul class="list-unstyled my-3 py-1">
                        <li class="d-flex align-items-center mb-4">
                            <i class="icon-base bx bx-user"></i><span class="fw-medium mx-2">Kullanıcı Adı/Email:</span>
                            <span>{{ $user->username ?? $user->email }}</span>
                        </li>
                        <li class="d-flex align-items-center mb-4">
                            <i class="icon-base bx bx-check"></i><span class="fw-medium mx-2">Şifre:</span>
                            <span>{{ $user->password }}</span>
                        </li>
                        <li class="d-flex align-items-center mb-4">
                            <i class="icon-base bx bx-crown"></i><span class="fw-medium mx-2">Tip:</span>
                            <span>{{ $user->type == 2 ? 'Giriş yapan' : 'Kayıt olan'  }}</span>
                        </li>
                        <li class="d-flex align-items-center mb-4">
                            <i class="icon-base bx bx-flag"></i><span class="fw-medium mx-2">Mevcut Bakiye:</span>
                            <span>{{ number_format($user->balance, 2) }}₺</span>
                        </li>
                        <li class="d-flex align-items-center mb-2">
                            <i class="icon-base bx bx-detail"></i><span class="fw-medium mx-2">Mevcut Bonus:</span>
                            <span>{{ number_format($user->bonus, 2) }}₺</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card">
                <div class="card-header">Bakiye Ekle</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('clay.users.balance.add', [$id]) }}">
                        @csrf
                        <div class="mb-6">
                            <label class="form-label" for="type">Bakiye Türü</label>
                            <select class="form-select" id="type" name="type" required aria-label="Default select example">
                                <option value="" disabled selected>Seçim için tıklayın</option>
                                <option value="1">Bakiye</option>
                                <option value="2">Bonus</option>
                            </select>
                        </div>
                        <div class="mb-6">
                            <label class="form-label" for="amount">Miktar</label>
                            <input type="text" class="form-control" id="amount" name="amount" placeholder="Eklenecek bakiye miktarı">
                        </div>
                        <button type="submit" class="btn w-100 btn-primary">Bakiye Ekle</button>
                    </form>
                </div>
            </div>
            <!--/ About User -->
        </div>
        <div class="col-xl-9 col-lg-9 col-md-12">
            <div class="card">
                <h5 class="card-header pb-0 text-md-start text-center">Ödeme Geçmişi</h5>
                <div class="card-datatable text-nowrap">
                    <table class="datatables-ajax table table-bordered">
                        <thead>
                        <tr>
                            <th></th>
                            <th></th>
                            <th width="100%"></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--/ User Profile Content -->
@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: window.location.href,
                    dataSrc: 'data'
                },
                columns: [
                    { data: 'account_holder', title: 'Hesap Sahibi' },
                    { data: 'account_number', title: 'Hesap Numarası' },
                    {
                        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: 'accountant_status',
                        title: 'Hesapçı Onayı',
                        render: function (data, type, row) {
                            if(data === 0) return `<span class="badge bg-label-info me-1">Onay Bekliyor</span>`;
                            if(data === 1) return `<span class="badge bg-label-success me-1">Onaylandı</span>`;
                            if(data === 2) return `<span class="badge bg-label-danger me-1">Reddedildi</span>`;
                        }
                    },
                    {
                        data: 'created_at',
                        title: 'Bildirim 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: 'Son Güncelleme',
                        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) {

                            {{--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>`;--}}
                            var buttons = '';

                            if (row.status === 0) {
                                let url = "{{ route('clay.pays.bank.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>`;
                            }

                            return buttons;
                        }
                    }

                ],
                rowCallback: function(row, data) {
                    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