@extends('admin.index')
@section('title', Helper::getSiteTitle('Payouts'))

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin-dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Payouts</li>
                </ol>
            </div>
            <h4 class="page-title">Payouts</h4>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-xl-6">
        <div class="widget-rounded-circle card-box">
            <div class="row">
                <div class="col-6">
                    <div class="avatar-lg rounded-circle bg-soft-blue border-blue border">
                        <i class="fe-aperture font-22 avatar-title text-blue"></i>
                    </div>
                </div>
                <div class="col-6">
                    <div class="text-right">
                        <h3 class="text-dark mt-1"><span>{{ $total_balance }} GP</span></h3>
                        <p class="text-muted mb-1 text-truncate" title="Total Payout Balance">Total Payout Balance</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-6">
        <div class="widget-rounded-circle card-box">
            <div class="row">
                <div class="col-6">
                    <div class="avatar-lg rounded-circle bg-soft-info border-info border">
                        <i class="fe-users font-22 avatar-title text-info"></i>
                    </div>
                </div>
                <div class="col-6">
                    <div class="text-right">
                        <h3 class="mt-1 text-dark"><span data-plugin="counterup">{{ $total }}</span></h3>
                        <p class="text-muted mb-1 text-truncate" title="Total Payouts">Total Payouts</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-4">
        <div class="widget-rounded-circle card-box">
            <div class="row">
                <div class="col-6">
                    <div class="avatar-lg rounded-circle bg-soft-warning border-warning border">
                        <i class="fe-book-open font-22 avatar-title text-warning"></i>
                    </div>
                </div>
                <div class="col-6">
                    <div class="text-right">
                        <h3 class="text-dark mt-1"><span data-plugin="counterup">{{ $open }}</span></h3>
                        <p class="text-muted mb-1 text-truncate" title="Open Payouts">Open Payouts</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-4">
        <div class="widget-rounded-circle card-box">
            <div class="row">
                <div class="col-6">
                    <div class="avatar-lg rounded-circle bg-soft-success border-success border">
                        <i class="fe-user-check font-22 avatar-title text-success"></i>
                    </div>
                </div>
                <div class="col-6">
                    <div class="text-right">
                        <h3 class="text-dark mt-1"><span data-plugin="counterup">{{ $approved }}</span></h3>
                        <p class="text-muted mb-1 text-truncate" title="Approved Payouts">Approved Payouts</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-4">
        <div class="widget-rounded-circle card-box">
            <div class="row">
                <div class="col-6">
                    <div class="avatar-lg rounded-circle bg-soft-danger border-danger border">
                        <i class="fe-user-x font-22 avatar-title text-danger"></i>
                    </div>
                </div>
                <div class="col-6">
                    <div class="text-right">
                        <h3 class="text-dark mt-1"><span data-plugin="counterup">{{ $rejected }}</span></h3>
                        <p class="text-muted mb-1 text-truncate" title="Rejected Payouts">Rejected Payouts</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card-box">
            <button class="btn btn-danger waves-effect waves-light float-right ml-5 d-none remove-all-button">
                <span class="btn-label"><i class="mdi mdi-delete"></i></span>
                {{ __('Remove') }}
            </button>
            <h4 class="header-title mb-4">Payouts</h4>
            {!! Helper::getDatatables(['User', __('Transaction ID'), __('OSRS Balance'), 'Character Name', 'IP', __('Status'), __('Created At'), __('Action')], 1) !!}
        </div>
    </div>
</div>
@endsection

@section('js-lib')
<script src="{{ asset('admin/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-buttons/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-keytable/js/dataTables.keyTable.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-select/js/dataTables.select.min.js') }}"></script>
<script src="{{ asset('admin/libs/pdfmake/build/pdfmake.min.js') }}"></script>
<script src="{{ asset('admin/libs/pdfmake/build/vfs_fonts.js') }}"></script>
<script src="{{ asset('admin/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ asset('admin/libs/select2/js/select2.min.js') }}"></script>
@endsection

@section('css-lib')
<meta name="remove-url" content="{{ route('admin-remove-payout') }}">
<meta name="class-to-open" content='payouts'>
<link href="{{ asset('admin/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('admin/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('admin/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('admin/libs/datatables.net-select-bs4/css/select.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('admin/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('admin/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('js')
<script type="text/javascript">
    function createTable()
    {
        table = $('.datatable').DataTable({
            language:{paginate:{previous:"<i class='mdi mdi-chevron-left'>",next:"<i class='mdi mdi-chevron-right'>"}},
            drawCallback:function(){$(".dataTables_paginate > .pagination").addClass("pagination-rounded")},
            "processing": true,
            "serverSide": true,
            "paging": true,
            "scrollX": false,
            "pageLength": 25,
            "language": {
                "emptyTable": "No payout found"
            },
            "order": [[0, "desc"]],
            "ajax":
            {
                url: "{{ route('admin-payouts', $user_id) }}",
                data: function ( d ) {},
                beforeSend: function(jqXHR) {},
                error: function(jqXHR, textStatus, errorThrown){},
                complete: function(jqXHR) {}
            },
            createdRow: function( row, full, dataIndex ) {

                if (full.status == 0) 
                {
                    $( row ).addClass('alert alert-warning');
                }
                else if(full.status == 1)
                {
                    $( row ).addClass('alert alert-success');
                }
                else
                {
                    $( row ).addClass('alert alert-danger');
                }
            },
            "columnDefs": [
                { className: "text-center", "targets": [ 2 ] },
                { className: "text-center", "targets": [ 3 ] },
                { className: "text-center", "targets": [ 4 ] },
                { className: "text-center", "targets": [ 5 ] },
                { className: "text-center", "targets": [ 6 ] },
                { className: "text-center", "targets": [ 7 ] },
                { className: "text-right", "targets": [ 8 ] },
            ],
            "columns":[
                {
                    sortable: false,
                    name: "payouts.id",
                    "render": function ( data, type, full, meta ) {

                        return '<div class="checkbox checkbox-single"><input type="checkbox" class="select-item-checkbox" value="'+ full.id +'"><label></label></div>';
                    }
                },
                { "data": "username", "name":"payouts.id" },
                { "data": "transaction_id", "name":"payouts.id" },
                { "data": "osrs_balance", "name":"payouts.id", "sortable": false },
                { "data": "character_name", "name":"payouts.id", "sortable": false },
                { "data": "ip", "name":"payouts.id", "sortable": false },
                { "data": "payout_status", "name":"payouts.id", "sortable": false },
                { "data": "created_at", "name":"payouts.id", "sortable": false },
                { "data": "actions", "name":"payouts.id", "sortable": false },
            ] 
        });
    }
</script>
@endsection