@extends('layouts.app')

@section('sidebar')
    @include('sidebar')
@stop

@section('style')
<style>
    .modal-header, .modal-header h4 {
        background-color: #3c4483 !important; /* #226fab , #394398 ,#3c4483 */
        color:#ffffff !important;
    }
</style>
@endsection

@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">
                            Crypto Symbols
                        </h3>
                    </div>
                </div>
            </div>
            
            <div class="m-portlet__body">
                
                <table class="m_datatable table table-striped- table-bordered table-hover table-checkable" id="crypto-banks">
                    <thead>
                        <tr>
                            <th>Symbol</th>
                            <th>Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    {{ Html::script('custom/datatables/datatables.bundle.js') }}
    
    <script type="text/javascript">
        $(document).ready(function () {
            
            $('#crypto-banks').each(function() {
                table = $(this).DataTable({
                    // Export Buttons End
                    '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": "{{ Route('crypto_banks_datatable') }}",
                        "type": "GET",
                    },
                    "order": [[ 0, "desc" ]],
                    "aoColumns": [
                        { data: 'symbol', name: 'symbol'},
                        { data: 'name', name: 'name'},
                        { data: 'action', name: 'action'},
                    ]
                });
            });
        });
    </script>
@endsection