@extends('admin.layouts.app')

@section('title', 'User')
@section('stylesheets')
    <link href="{{ asset('adminlte/component/dataTables/css/datatables.min.css') }}" rel="stylesheet">
@endsection
@push('breadcrump')
    <li class="breadcrumb-item active">User</li>
@endpush
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card card-{{ config('configs.app_theme') }} card-outline">
                <div class="card-header">
                    <h3 class="card-title">Data User</h3>
                    <!-- tools box -->
                    <div class="pull-right card-tools">
                        <a href="{{ route('admin.user.create') }}" class="btn btn-{{ config('configs.app_theme') }} btn-sm"
                            data-toggle="tooltip" title="Tambah">
                            <i class="fa fa-plus"></i>
                        </a>
                        <a href="#" onclick="filter()" class="btn btn-default btn-sm" data-toggle="tooltip"
                            title="Search">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                    <!-- /. tools -->
                </div>
                <div class="card-body">
                    <table class="table table-striped table-bordered datatable" style="width:100%">
                        <thead>
                            <tr>
                                <th width="10">#</th>
                                <th width="120">Nama</th>
                                <th width="100">Email</th>
                                <th width="100">Dibuat</th>
                                <th width="10">#</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="overlay d-none">
                    <i class="fa fa-2x fa-sync-alt fa-spin"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="add-filter" tabindex="-1" role="dialog" aria-hidden="true" tabindex="-1" role="dialog"
        aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Pencarian</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-search" autocomplete="off">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label" for="name">Nama</label>
                                    <input type="text" name="name" class="form-control" placeholder="Nama">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label" for="email">Email</label>
                                    <input type="text" name="email" class="form-control" placeholder="Email">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button form="form-search" type="submit" class="btn btn-default" title="Apply"><i
                            class="fa fa-search"></i></button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('adminlte/component/dataTables/js/datatables.min.js') }}"></script>
    <script type="text/javascript">
        function filter() {
            $('#add-filter').modal('show');
        }
        $(function() {
            dataTable = $('.datatable').DataTable({
                stateSave: true,
                processing: true,
                serverSide: true,
                filter: false,
                info: false,
                lengthChange: true,
                responsive: true,
                order: [
                    [1, "asc"]
                ],
                ajax: {
                    url: "{{ route('admin.user.read') }}",
                    type: "GET",
                    data: function(data) {
                        var name = $('#form-search').find('input[name=name]').val();
                        var email = $('#form-search').find('input[name=email]').val();
                        data.name = name;
                        data.email = email;
                    }
                },
                columnDefs: [{
                        orderable: false,
                        targets: [0]
                    },
                    {
                        className: "text-right",
                        targets: [0]
                    },
                    {
                        className: "text-center",
                        targets: [4]
                    },
                    {
                        render: function(data, type, row) {
                            return `
                        <div class="dropdown">
                        <button class="btn  btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-bars"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a class="dropdown-item" href="{{ url('admin/user') }}/${row.id}/edit"><i class="fa fa-pencil-alt mr-2"></i> Edit</a></li>
                            <li><a class="dropdown-item" href="{{ url('admin/user') }}/${row.id}"><i class="fa fa-info mr-3"></i> Detail</a></li>
                        </ul></div>`
                        },
                        targets: [4]
                    }
                ],
                columns: [{
                        data: "no"
                    },
                    {
                        data: "name"
                    },
                    {
                        data: "email"
                    },
                    {
                        data: "created_at"
                    },
                    {
                        data: "id"
                    },
                ]
            });
            $(".select2").select2();
            $('#form-search').submit(function(e) {
                e.preventDefault();
                dataTable.draw();
                $('#add-filter').modal('hide');
            })
        })
    </script>
@endpush