@extends('layouts.app')

@section('title')
    {{ __('Thêm tài khoản') }}
@endsection

@section('payment')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Tài khoản duyệt thủ công') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('app.index') }}">{{ __('home') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('Tài khoản thủ công') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i>{{ __('Điền đầy đủ thông tin tài khoản vào form dưới đây') }}</i>
                </h3>
            </div>
            @if (Session::has('success'))
                <div id="message-alert" class="alert alert-success">
                    {{ Session::get('success') }}
                </div>
            @endif
            @if (Session::has('error'))
                <div id="message-alert" class="alert alert-danger">
                    {{ Session::get('error') }}
                </div>
            @endif
            <div class="card-body">
                <form class="row" id="accountForm" method="POST">
                    @csrf
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="bank_name">{{ __('Loại tài khoản(Ví/Ngân hàng) *') }}</label>
                            <select name="bank_name" id="bank_name" class="form-control select2">
                                <option value="">{{ __('--Chọn tên ngân hàng/ví--') }}</option>
                                @foreach (config('bank') as $bank)
                                    <option value="{{ $bank['bank_code'] }}"
                                        @if (old('bank_name') == $bank['bank_code']) selected @endif>
                                        {{ $bank['bank_name'] }} ({{ $bank['display_name'] }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="type">{{ __('Mã nạp*') }}</label>
                            <input type="text" class="form-control" name="type" id="type"
                                placeholder="{{ __('Nhập mã nạp tiền') }}"
                                oninput="this.value = this.value.toUpperCase()">
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="acc_name">{{ __('Chủ tài khoản *') }}</label>
                            <input type="text" class="form-control" name="acc_name" id="acc_name"
                                placeholder="{{ __('Nhập tên chủ tài khoản') }}"
                                oninput="this.value = this.value.toUpperCase()">
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="acc_no">{{ __('Số tài khoản *') }}</label>
                            <input type="text" class="form-control" name="acc_no" id="acc_no"
                                placeholder="{{ __('Nhập số tài khoản') }}">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="text-center">
                            <button type="submit" class="btn btn-success" id="btnAddAccount"><i class="fas fa-save"></i>
                                {{ __('Thêm tài khoản') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('Danh sách tài khoản') }}</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="listManualAccounts">
                        <thead style="text-align: center">
                            <tr>
                                <th>{{ __('ID') }}</th>
                                <th>{{ __('creator') }}</th>
                                <th>{{ __('Mã nạp') }}</th>
                                <th>{{ __('Tên ngân hàng/ví') }}</th>
                                <th>{{ __('Chủ tài khoản') }}</th>
                                <th>{{ __('Số tài khoản') }}</th>
                                <th>{{ __('Trạng thái') }}</th>
                                <th>{{ __('created_date') }}</th>
                                <th>{{ __('operation') }}</th>
                            </tr>
                        </thead>
                        <tbody class="text-center"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>
    <script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#bank_name').select2();
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#btnAddAccount').on('click', function(e) {
                e.preventDefault();
                var formData = $('#accountForm').serialize();

                $.ajax({
                    type: 'POST',
                    url: '{{ route('app.account.store') }}',
                    data: formData,
                    success: function(data) {
                        if (data.code === 1) {
                            toastr.success(data.message);
                            location.reload();
                        } else if (data.code === 0) {
                            toastr.error(data.message);
                        } else {
                            toastr.error(
                                'Thêm tài khoản không thành công, vui lòng thử lại.');
                        }
                    },
                    error: function(error) {
                        toastr.error('Có lỗi xảy ra, vui lòng thử lại.');
                    }
                });
            });

            var table = $('#listManualAccounts').DataTable({
                dom: 'lifrtp',
                processing: true,
                serverSide: true,
                info: true,
                ajax: '{{ route('app.account.index') }}',
                'pageLength': 20,
                'aLengthMenu': [
                    [20, 50, 100, -1],
                    [20, 50, 100, 'All']
                ],
                columns: [{
                        data: 'id',
                        name: 'id',
                        searchable: false
                    },
                    {
                        data: 'user_id',
                    },
                    {
                        data: 'type',
                    },
                    {
                        data: 'bank_name',
                    },
                    {
                        data: 'acc_name',
                    },
                    {
                        data: 'acc_no',
                    },
                    {
                        data: 'status',
                        render: (data) => {
                            if (data === 0) {
                                return `<span class="badge bg-danger">Đóng</span>`
                            } else if (data === 1) {
                                return `<span class="badge bg-success">Mở</span>`
                            }
                        }
                    },
                    {
                        data: 'created_at',
                        render: function(data, type, row) {
                            return formatTime(data);
                        },
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    ['0', 'asc'],
                ],
            });

            $(document).on('click', 'button#deleteAccount', function() {
                var accountId = $(this).data('account-id');
                var csrfToken = '{{ csrf_token() }}';

                Swal.fire({
                    title: 'Xác nhận xoá tài khoản?',
                    html: 'Bạn có chắc muốn xoá tài khoản này không?',
                    showCancelButton: true,
                    icon: "question",
                    showCloseButton: true,
                    confirmButtonText: 'Đồng ý, xoá',
                    cancelButtonText: 'Huỷ',
                    confirmButtonColor: '#556ee6',
                    cancelButtonColor: '#d33',
                    allowOutsideClick: false,
                }).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            url: '{{ route('app.account.deleteBankAccount') }}',
                            type: 'DELETE',
                            data: {
                                accountId: accountId,
                                _token: csrfToken
                            },
                            dataType: 'json',
                            success: function(data) {
                                if (data.code == 1) {
                                    toastr.success(data.msg);
                                    location.reload();
                                } else {
                                    toastr.error(data.msg);
                                }
                            },
                            error: function(xhr, status, error) {
                                toastr.error(error);
                            }
                        });
                    }
                });
            });
        });

        function formatTime(isoTime) {
            const date = new Date(isoTime);
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const year = date.getFullYear();

            return `${hours}:${minutes}:${seconds} ${day}/${month}/${year}`;
        }
    </script>
@endsection

@section('styles')
    <link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <style>
        .select2-container .select2-selection--single {
            height: 38px;
        }
    </style>
@endsection