@extends('adminlte::page')
@section('content_header')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Dashboard</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Admin</a></li>
                    <li class="breadcrumb-item active">Payment Method</li>
                </ol>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="card card-outline card-primary">
    <div class="card-header">
        <h3 class="card-title">Payment Method</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-sm-12">
                <div class="table-responsive">
                    <table id="payment-table" width="100%" class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>{{ __('auth.image') }}</th>
                                <th>{{ __('auth.name') }}</th>
                                <th>{{ __('auth.bank_account') }}</th>
                                <th>{{ __('auth.bank_number') }}</th>
                                <th>{{ __('auth.action') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
    <script type="text/javascript">
        var table = $('#payment-table').DataTable({
            "bDestroy": true,
            ordering: false,
            serverSide: true,
            lengthMenu: [[20, 50, 100,200,500,1000,-1], [20, 50, 100,200,500,1000,'All']],
            ajax: "{{ route('payment-methods.index') }}",
            columns:
            [
                {data: 'DT_RowIndex','searchable': false},
                {data: 'image',
                    render: function(data, type, full, meta) {
                        return "<img src=\"storage/payment_methods/" + data + "\" height=\"50\"/>";

                    }  
                },
                {data: 'bank_name'},
                {data: 'bank_account'},
                {data: 'bank_number'},
                {data: 'action'},
            ],
            "initComplete": function(settings, json) {
                $("div.dataTables_filter label").after(` <span class="btn btn-info btn-sm" onclick="createThis()"><i class="fas fa-plus"></i> @lang('auth.create_new')</span> `);
            }
        });

        function createThis() {
            $.confirm({
                type: "blue",
                title: 'Create New',
                content: `<form action="" id="createData" autocomplete="off">@csrf
                            <div class="form-group">
                                <label class="required">Name</label>
                                <input type="text" name="bank_name" placeholder="Name" class="bank_name form-control" required/>
                            </div>
                            <div class="form-group">
                                <label>Bank Account</label>
                                <input type="text" name="bank_account" placeholder="Account" class="bank_account form-control"/>
                            </div>
                            <div class="form-group">
                                <label>Bank Number</label>
                                <input type="number" name="bank_number" placeholder="Account Number" class="bank_number form-control"/>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">{{__('auth.image')}}</label>
                                <div class="col-sm-10">
                                    <input type="file" name="image"
                                    onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">
                    
                                    <div class="col-sm-12">&nbsp;</div>
                                    <div class="col-sm-12">
                                        <div class="add_img text-left">
                                            <img src="" style="" id="blah" width="30%">
                                        </div>
                                    </div>
                                    <input type="hidden" name="hidden_image_name" value="">
                                </div>
                            </div>  
                        </form>`,
                buttons: {
                    cancel: function() {},
                    Save: {
                        position: "center",
                        btnClass: 'btn-blue btn-save',
                        keys: ['enter'],
                        action: function() {

                            let bank_name   = $('input[name="bank_name"]');

                            if (!bank_name.val()) {
                                bank_name.focus();
                                return false;
                            }
                            let formData = new FormData($('#createData')[0]);

                            $.ajax({
                                method: 'post',
                                data: formData,
                                contentType: false,
                                processData: false,
                                url: "{{route('payment-methods.store')}}",
                                success: function(response) {
                                    notifier(response.status, response.msg);
                                    table.ajax.reload(null, false);
                                },
                            });
                        }
                    },
                },
                onContentReady: function() {
                    var jc = this;
                    this.$content.find('form').on('submit', function(e) {
                        e.preventDefault();
                        jc.$$formSubmit.trigger('click');
                    });
                }
            });
        }
        
        function editThis(obj) {
            let tr = $(obj).closest('tr');
            let row = table.row(tr);
            let data = row.data();
            let url = $(obj).data('url');

            $.confirm({
                title: 'Edit',
                type: "blue",
                content: `<form action="" id="updateData" autocomplete="off" enctype="multipart/form-data">
                            @method('PATCH')
                            @csrf
                            <div class="form-group">
                                <label class="required">Name</label>
                                <input type="text" value="${data.bank_name}" name="bank_name" placeholder="Bank Name" class="bank_name form-control" required />
                            </div>
                            <div class="form-group">
                                <label>Bank Account</label>
                                <input type="text" value="${data.bank_account}" name="bank_account" placeholder="Account" class="bank_account form-control"/>
                            </div>
                            <div class="form-group">
                                <label>Bank Number</label>
                                <input type="text" value="${data.bank_number}" name="bank_number" placeholder="Account Number" class="bank_number form-control"/>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-form-label">{{__('auth.image')}}</label>
                                <div class="col-sm-10">
                                    <input type="file" name="image"
                                    onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">
                        
                                <div class="col-sm-12">&nbsp;</div>
                                <div class="col-sm-12">
                                    <div class="add_img text-left">
                                        <img src="{{ asset('storage/payment_methods/'.'${data.image}') }}" style="" id="blah" width="30%">
                                    </div>
                                </div>
                                <input type="hidden" name="hidden_image_name" value="">
                                </div>
                            </div>  
                        </form>`,
                buttons: {
                    cancel: function() {},
                    Save: {
                        text: 'UPDATE',
                        position: "center",
                        btnClass: 'btn-blue btn-save',
                        keys: ['enter'],
                        action: function() {

                            let bank_name = $('input[name="bank_name"]');
                            let formData = new FormData($('#updateData')[0]);

                            if (!bank_name.val()) {
                                bank_name.focus();
                                return false;
                            }

                            $.ajax({
                                method: 'POST',
                                data: formData,
                                url: url,
                                dataType: 'json',
                                processData: false,
                                contentType: false,
                                success: function(response) {
                                    notifier(response.status, response.msg);
                                    table.ajax.reload(null, false);
                                },
                            });
                        }
                    },
                },
                onContentReady: function() {
                    var jc = this;
                    this.$content.find('form').on('submit', function(e) {
                        e.preventDefault();
                        jc.$$formSubmit.trigger('click');
                    });
                }
            });
        }

        function deleteThis(obj) {
            let url = $(obj).data('url');
            $.confirm({
                type: "red",
                title: 'Confirm!',
                content: 'Are you sure to delete this?',
                theme: 'modern',
                buttons: {
                    cancel: function() {

                    },
                    Ok: {
                        text: 'OK',
                        btnClass: 'btn-red',
                        keys: ['enter'],
                        action: function() {
                            $.ajax({
                                type: 'delete',
                                dataType: "json",
                                url: url,
                                data: {
                                    _token: "{{csrf_token()}}"
                                },
                                success: function(response) {
                                    notifier(response.status, response.msg);
                                    table.ajax.reload(null, false);
                                }
                            });
                        }
                    }

                }
            });
        }
    </script>
@endsection