@extends('app-new')

{{-- Web site Title --}}
@section('title') Accounts :: @parent @stop


@section('content')

    @if (isset($status))
        <div class="pad margin no-print">
            <div class="alert alert-{{ $status['code'] }} alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4><i class="icon fa fa-ban"></i> {{ $status['header'] }}</h4>
                <ul>
                    @foreach ($status['messages'] as $m)
                        <li>{{ $m }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <section class="content-header">
        <!--<h1>Users <small>Platform Users</small></h1>-->
        <h1>Accounts</h1>
        <ol class="breadcrumb" style="align-items: center; justify-content: space-between; margin-left: -26px">
            <div class="" style="display:flex; aling-items: center;">
                <li><a href="/accounts"><i class="fa fa-dashboard"></i> Home</a></li> <li style="margin-left: 5px">/</li>  <li class="active" style="margin-left: 5px">Accounts</li>
            </div>
            <h3>
                <div class="pull-left">
                    <div class="pull-right">
                        <a href="{{ URL::to('/account/create/') }}" class="btn btn-sm  btn-primary iframe cboxElement"><span
                                class="glyphicon glyphicon-plus-sign"></span> Add item</a>
                    </div>
                </div>
            </h3>
        </ol>
        <br>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">
                        <table id="table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <!-- <th>Title</th> -->
                                    <th>Name</th>
                                    <th>Amount</th>
                                    {{-- <th>Active</th> --}}
                                    <th>Created At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>


                            </tbody>
                        </table>
                    </div><!-- /.box-body -->
                </div>
            </div>
        </div>
    </section>
@endsection

@push('head-script')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@endpush

{{-- Scripts --}}
 @push('footer-script')
    @parent
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript">
        var oTable;
        $(document).ready(function() {
            console.log('a');
            oTable = $('#table').DataTable({
                "order": [
                    [1, "desc"]
                ],
                "sDom": "<'row align-items-center'<'col-md-3'l><'col-md-6'a><'col-md-3'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
                //"sPaginationType": "bootstrap",
                "processing": true,
                "serverSide": true,
                "ajax": "{{ url('/accounts/data') }}",
                "columns": [{
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    // {
                    //     data: 'deleted_at',
                    //     name: 'deleted_at'
                    // },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'actions',
                        name: 'actions'
                    }
                ],
                // "fnDrawCallback": function(oSettings) {
                //     $(".iframe").colorbox({
                //         iframe: true,
                //         width: "80%",
                //         height: "80%",
                //         onClosed: function() {
                //             window.location.reload();
                //         }
                //     });
                // }
            });
        });
    </script>
@endpush