@extends('layouts.app')

@section('sidebar')
@include('sidebar')
@stop
{{-- <style>
    .select2-container--focus {
        width: 750px !important;
    }
</style> --}}

@section('content')
    <!-- BEGIN: Subheader -->
        <div class="m-subheader ">
            <div class="d-flex align-items-center">
                <div class="mr-auto">
                    <h3 class="m-subheader__title ">Payment Processer ID</h3>
                </div>
                <div>
                    <a href="javascript:;" class="btn btn-info m-btn m-btn--wide m-btn--air m-btn--custom payment-processer"><span><i class="la la-plus"></i><span>Add Payment Processer ID</span></span></a>
                </div>
            </div>
        </div>
        <!-- END: Subheader -->

        <div class="m-content">
            <div class="m-portlet m-portlet--full-height ">
                <div class="m-portlet__body">
                    <ul class="nav nav-tabs m-tabs-line m-tabs-line--danger m-tabs-line--2x" role="tablist">
                        <li class="nav-item m-tabs__item">
                            <a class="nav-link m-tabs__link active" data-toggle="tab" href="#client-skrill">Clients payment processer ID</a>
                        </li>
                        <li class="nav-item m-tabs__item">
                            <a class="nav-link m-tabs__link" data-toggle="tab" href="#IB-skrill">IB payment processer ID</a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="client-skrill" role="tabpanel">
                            <table class="table table-striped- table-bordered table-hover table-checkable" id="client-skrill-list">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>User Id</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Skrill / Crypto ID</th>
                                        <th>Payment Processer</th>
                                        <th>Date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tab-pane" id="IB-skrill" role="tabpanel">
                            <table class="table table-striped- table-bordered table-hover table-checkable" id="IB-skrill-list">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>User Id</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Skrill / Crypto ID</th>
                                        <th>Payment Processer</th>
                                        <th>Date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection

@section('script')
{{ Html::script('custom/datatables/datatables.bundle.js') }}
{{ Html::script('custom/eModal/eModal.js') }}
<script type="text/javascript">
    (function($){
        $(document).ready(function () {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var table;
            $('#client-skrill-list').each(function() {
                table = $(this).DataTable({
                    'responsive':!0,
                    'searchDelay':500,
                    'processing':!0,
                    "serverSide": true,
                    "ajax": {
                        "url": "{{ route('payment-processer.index') }}",
                        "type": "GET"
                    },
                    "oLanguage": {
                        "sProcessing": '<div class="m-loader m-loader--brand m-loader--left"><span>Please wait...</span></div>',
                    },
                    "order": [[ 0, "desc" ]],
                    "aoColumns": [
                        { data: 'id', name: 'id', bSearchable: false, bVisible: false },
                        { data: 'user_id', name: 'user_id'},
                        { data: 'name', name: 'users.name'},
                        { data: 'email', name: 'users.email'},
                        { data: 'skrill_id', name: 'skrill_id'},
                        { data: 'payment_processor', name: 'payment_processor'},
                        { data: 'created_at', name: 'created_at'},
                        { data: 'action', name: 'action' , bSearchable: false},
                    ]
                });
            });

            var table1;
            $('#IB-skrill-list').each(function() {
                table1 = $(this).DataTable({
                    'responsive':!0,
                    'searchDelay':500,
                    'processing':!0,
                    "serverSide": true,
                    "ajax": {
                        "url": "{{ route('payment-processer.create') }}",
                        "type": "GET"
                    },
                    "oLanguage": {
                        "sProcessing": '<div class="m-loader m-loader--brand m-loader--left"><span>Please wait...</span></div>',
                    },
                    "order": [[ 0, "desc" ]],
                    "aoColumns": [
                        { data: 'id', name: 'id', bSearchable: false, bVisible: false },
                        { data: 'ib_id', name: 'ib_id'},
                        { data: 'name', name: 'ib_users.name'},
                        { data: 'email', name: 'ib_users.email'},
                        { data: 'skrill_id', name: 'skrill_id'},
                        { data: 'payment_processor', name: 'payment_processor'},
                        { data: 'created_at', name: 'created_at'},
                        { data: 'action', name: 'action' , bSearchable: false},
                    ]
                });
            });

            // datatble search perform after 3 character entered
            $(".dataTables_filter input")
                .unbind() // Unbind previous default bindings
                .bind("keyup", function(e) { // Bind our desired behavior
                    // If the length is 3 or more characters, or the user pressed ENTER, search
                    if(this.value.length >= 3 || e.keyCode == 13) {
                        // Call the API search function
                        table.search(this.value).draw();
                    }
                    // Ensure we clear the search if they backspace far enough
                    if(this.value == "") {
                        table.search("").draw();
                    }
                    return;
            });

            // Edit skrill-cryptonator
            $(document).on("click", "a.edit-admin", function(event){

                var id = $(this).attr('data-id');
				var url = base_url+"/payment-processer/"+id+"/edit";
				var options = {
					url: url,
					title:'Edit Skrill - Cryptonator Id',
                    size: 'md', //sm,lg,md,xl
					buttons: [
						{text: 'Cancel', style: 'btn btn-secondary', close: true },
						{text: 'Update', style: 'btn btn-primary',   close: false, click: saveAdmin }
					]
				};
				eModal.ajax(options);
            });
            function saveAdmin()
            {
                $('#paymentProcesser-form').submit();
            }

            // Edit skrill-cryptonator
            $(document).on("click", "a.edit-ib", function(event){

                var id = $(this).attr('data-id');
                var url = base_url+"/payment-processer/"+id;
                var options = {
                    url: url,
                    title:'Edit Skrill - Cryptonator Id',
                    size: 'md', //sm,lg,md,xl
                    buttons: [
                        {text: 'Cancel', style: 'btn btn-secondary', close: true },
                        {text: 'Update', style: 'btn btn-primary',   close: false, click: saveAdmin }
                    ]
                };
                eModal.ajax(options);
            });
            function saveAdmin()
            {
                $('#paymentProcesser-form').submit();
            }

            //  Add payment processer
            $(document).on("click", ".payment-processer", function(event){
                var url = base_url+"/payment-processer/add";
				var options = {
					url: url,
					title:'Add New Payment Processer ID',
                    size: 'lg',
					buttons: [
						{text: 'Cancel', style: 'btn btn-secondary', close: true },
						{text: 'Submit', style: 'btn btn-primary',   close: false, click: savePaymentProcesser }
					]
				};
				eModal.ajax(options);
            });
            function savePaymentProcesser()
            {
                $('#addppform').submit();
            }

        });
    })(jQuery);


</script>
@endsection