@extends('layouts.app')

@section('sidebar')
@include('sidebar')
@stop
@section('content')
<div class="m-content">
    <div class="m-portlet m-portlet--full-height ">
        <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <h3 class="m-portlet__head-text">
                        IB Documents
                    </h3>
                </div>
            </div>
        </div>
        <div class="m-portlet__body">
            @if(Session::has('success'))
            <div class="alert alert-success">
                {!! Session::get('success') !!}
            </div>
            @endif
            <!--begin: Search Form -->
            <div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
                <div class="row align-items-center">
                    <div class="col-xl-8 order-2 order-xl-1">
                        <div class="form-group m-form__group row align-items-center">
                            <div class="col-md-4">
                                <div class="m-input-icon m-input-icon--left">
                                    <input type="text" class="form-control m-input" placeholder="Search..." id="general-search">
                                    <span class="m-input-icon__icon m-input-icon__icon--left">
                                        <span>
                                            <i class="la la-search"></i>
                                        </span>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="m-form__group m-form__group--inline">
                                    <div class="m-form__label">
                                        <label>Type:</label>
                                    </div>
                                    <div class="m-form__control">
                                        <select class="form-control m-bootstrap-select" id="document_type">
                                            <option value="">All</option>
                                            <option value="Proof of Legal Existence">Proof of Legal Existence</option>
                                            <option value="Proof of Address">Proof of Address</option>
                                            <option value="Other">Other</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="d-md-none m--margin-bottom-10"></div>
                            </div>
                            <div class="col-md-4">
                                <div class="m-form__group m-form__group--inline">
                                    <div class="m-form__label">
                                        <label class="m-label m-label--single">Status:</label>
                                    </div>
                                    <div class="m-form__control">
                                        <select class="form-control m-bootstrap-select" id="document_status">
                                            <option value="">All</option>
                                            <option value="Pending">Pending</option>
                                            <option value="Accepted">Accepted</option>
                                            <option value="Rejected">Rejected</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="d-md-none m--margin-bottom-10"></div>
                            </div>
                            
                        </div>
                    </div>
                    
                </div>
            </div>

            <!--end: Search Form -->
            <table class="m_datatable table table-striped- table-bordered table-hover table-checkable" id="ib-document-list">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Account Name</th>
                        <th>Email</th>
                        <th>Type</th>
                        <th>File 1</th>
                        <th>File 2</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th align="center">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

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

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // IB Document List
            $('#ib-document-list').each(function() {
                table = $(this).DataTable({
                    'responsive':!0,
                    'searchDelay':500,
                    'processing':!0,
                    "oLanguage": {
                        "sProcessing": '<div class="m-loader m-loader--brand m-loader--left"><span>Please wait...</span></div>',
                    },
                    "serverSide": true,
                    "ajax": {
                        "url": base_url+"/ibdocument/listDatatable",
                        "type": "GET"
                    },
                    "order": [[ 0, "desc" ]],
                    "dom":
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'p>>",
                    "aoColumns": [
                        { data: 'id', name: 'id', bSearchable: false, bVisible: false },
                        { data: 'name', name: 'ib_users.name'},
                        { data: 'email', name: 'ib_users.email'},
                        { data: 'type', name: 'ib_documents.type'},
                        { data: 'file', name: 'ib_documents.file'},
                        { data: 'file2', name: 'ib_documents.file2'},
                        { data: 'status', name: 'ib_documents.status'},
                        { data: 'created_at', name: 'ib_documents.created_at'},
                        { data: 'action', name: 'action', orderable: false, searchable: false },
                    ]
                });

                
            });
		});

        // Search Start

        // Status type Vise Search
        $('#document_status').on('change', function () {
                table.column('6').search($(this).val()).draw();
        });

        // Document type vise search
        $('#document_type').on('change', function () {
            table.column('3').search($(this).val()).draw();
        });

        $('#document_status, #document_type').selectpicker();

        // General search after 3 character entered
        $("#general-search")
        .unbind() // Unbind previous default bindings
        .bind("keyup", function(e) { // Bind our desired behavior
            var data = $(this).val();
            // If the length is 3 or more characters, or the user pressed ENTER, search
            if(data.length >= 3 || e.keyCode == 13 || e.keyCode == 8){
                table.search(data).draw();
            }
            // Ensure we clear the search if they backspace far enough
            if(this.value.length == 0) {
                table.search("").draw();
            }
        });

        // Search End

        /** Document Verification **/
        $(document).on('click', 'a.document-approv', function(event){
            // event.preventDefault();
            var id = $(this).attr('data-id');
            var secret = $(this).attr('secret-id');
            // var email = $(this).attr('data-email');
            // var name = $(this).attr('data-name');

            var url = base_url+"/document/action/"+id+"/"+secret;
            var options = {
                url: url,
                title:'Document Detatils',
                size: 'md',
                buttons: [
                    {text: 'Cancel', style: 'btn btn-secondary', close: true },
                    {text: 'Submit', style: 'btn btn-primary',   close: false, click: saveDocuments }
                ]
            };
            eModal.ajax(options);
        });
        function saveDocuments()
        {
            $('#document-form').submit();
            table.ajax.reload( null, false );
        }

	})(jQuery);
    eModal.setModalOptions({ backdrop: 'static', keyboard: false });
</script>
@endsection