@extends('layouts.app')

@section('title')
    {{ __('Quản lý giao dịch chờ') }}
@endsection

@section('bank_transaction_otp')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Quản lý giao dịch chờ') }}</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">{{ __('Quản lý giao dịch chờ') }}</li>
                    </ol>
                </div>
            </div>

        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="card">
            <div class="card-body" style="background-color: #9fb69f">
                <form class="row" id="search-bank-transaction">
                    @csrf
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('Trạng thái') }}</span>
                                </div>
                                <select name="state" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    <option value="pending" selected>{{ __('Pending') }}</option>
                                    <option value="fail">{{ __('Fail') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <button type="submit" class="btn btn-primary" id="btn-search"><i
                                class="fa fa-search"></i>{{ __('search') }}</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('List') }}</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="listBankTransactionOtp">
                        <thead style="text-align: center;  background-color: #b6b9b6"">
                            <tr>
                                <th>{{ __('Tên') }}</th>
                                <th>{{ __('Tài khoản') }}</th>
                                <th>{{ __('Loại') }}</th>
                                <th>{{ __('Trạng thái') }}</th>
                                <th>{{ __('Thời gian tạo') }}</th>
                                <th>{{ __('operation') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection


@section('scripts')
    <!-- DataTables  & Plugins -->
    <script type='text/javascript' src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    </script>
    <script type="text/javascript"
        src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/2.0.1/pagination/input.js"></script>

    <script>
        jQuery(document).ready(function($) {
            var dataTable = $('#listBankTransactionOtp').DataTable({
                dom: 'lifrtp',
                processing: true,
                serverSide: true,
                'pageLength': 20,
                'pagingType': 'input',
                'aLengthMenu': [
                    [20, 50, 100, -1],
                    [20, 50, 100, 'All']
                ],
                ajax: {
                    url: '{{ route('app.bankTransactionData') }}',
                    type: 'GET',
                    data: function(d) {
                        d.state = $('#search-bank-transaction [name="state"]').val();
                    },
                    error: function(xhr, status, error) {
                        if(status == "parsererror") {
                            window.location.href = '/auth/login';
                        }
                    }
                },
                columns: [
                    {
                        data: 'bank_name',
                        className: 'text-center',
                    },
                    {
                        data: 'bank_account_id',
                        className: 'text-center',
                    },
                    {
                        data: 'bank_type',
                        className: 'text-center',
                    },
                    {
                        data: 'state',
                        className: 'text-center',
                    },
                    {
                        data: 'created_at',
                        className: 'text-center',
                    },
                    {
                        data: 'actions',
                        className: 'text-center'
                    },
                ]
            });

            function refreshData() {
                dataTable.ajax.reload();
            }

            $(document).on('click', '#btn-search', function(event) {
                event.preventDefault();
                dataTable.ajax.reload();
            });

            $(document).on('click', 'button#deleteBankTransactionOtp', function() {
                var transactionId = $(this).data('transaction-id');
                var csrfToken = '{{ csrf_token() }}';

                Swal.fire({
                    title: 'Xác nhận xoá giao dịch chờ?',
                    html: 'Bạn có chắc muốn xoá giao dịch chờ 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.bank-transaction-otp.destroy', ':id') }}'.replace(':id', transactionId),
                            type: 'POST',
                            data: {
                                _method: 'DELETE',
                                _token: csrfToken
                            },
                            dataType: 'json',
                            success: function(data) {
                                if (data.code == 1) {
                                    refreshData();
                                    toastr.success(data.msg);
                                } else {
                                    toastr.error(data.msg);
                                }
                            },
                            error: function(xhr, status, error) {
                                toastr.error(error);
                            }
                        });
                    }
                });
            });


        });
    </script>

@endsection

@section('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css"
        rel="stylesheet" />
@endsection