@extends('layouts.Admin.layout')
@section('title', 'Create Project')

@section('content')

    <div class="row">

        <div class="col-12">
            <div class=" header-table py-2">
                <h6 class="">Projects</h6>
                <a href="{{ route('admin.projects.create') }}" class="btn btn-primary">Create new Project</a>
            </div>

            <div class="card pull-up">
                <div class="card-content collapse show">
                    <div class="card-body">
                        <form class="form-horizontal form-purchase-token row" action="">
                            <div class="col-md-3 col-12">
                                <fieldset class="form-label-group mb-0">
                                    <input type="text" class="form-control" id="name" value="">
                                    <label for="ico-token">Project Name</label>
                                </fieldset>
                            </div>




                            <div class="col-md-3 col-12 mb-1">
                                <fieldset class="form-label-group mb-0">
                                    <input type="text" class="form-control" id="username" value="">
                                    <label for="wallet-address">Email</label>
                                </fieldset>
                            </div>
                            <div class="col-md-3 col-12 mb-1">
                                <fieldset class="form-label-group mb-0">
                                    <input type="date" class="form-control" id="created_at" value="">
                                    <label for="wallet-address">Created Date</label>
                                </fieldset>
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-primary" id="search">Search</button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div id="recent-transactions" class="col-12">

            <div class="card p-2">
                <div class="card-content">
                    <div class="table-responsive">
                        <table id="projects" class="table  table-xl mb-0">
                            <thead>
                                <tr>
                                    <th class="border-top-0">#</th>
                                    <th class="border-top-0">Project Name</th>
                                    <th class="border-top-0">Created Date</th>
                                    <th class="border-top-0">Username</th>
                                    <th class="border-top-0">Email</th>
                                    <th class="border-top-0">Actions</th>
                                </tr>
                            </thead>
                            <tbody>


                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')


    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(function() {
            var table = $('#projects').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                ajax: {
                    url: "{{ route('admin.projects.index') }}",
                    data: function(d) {
                        return $.extend({}, d, {

                            "project_name": $("#name").val(),
                            "username": $("#username").val(),
                            "created_at": $('#created_at').val()
                        });
                    }

                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        
                    },
                    {
                        data: 'name',
                        name: 'name',
                        orderable: false,
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        orderable: false,
                    },
                    {
                        data: 'user.login_user',
                        name: 'username',
                        orderable: false,
                    },
                    {
                        data: 'user.email',
                        name: 'email',
                        orderable: false,
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                    }

                ]
            });

            // $('#name').on('keyup', function() {
            //     table.draw();
            // })
            // $('#username').on('keyup', function() {
            //     table.draw();
            // })
            // $('#created_at').on('change', function() {
            //     table.draw();
            // })
            $('#search').on('click',function(e){
                e.preventDefault();
                table.draw();
            })
        });


        //delete a document
        $(document).on('click', '.delete', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');
            var id = $(this).data('id')

            bootbox.confirm({
                message: 'Are you sure want to delete ?<br>',
                buttons: {
                    confirm: {
                        label: 'Delete Permenantly',
                        className: 'btn-danger'
                    },
                    cancel: {
                        label: 'No',
                        className: 'btn-success'
                    }
                },
                callback: function(result) {
                    if (result) {
                        $.ajax({
                            method: "DELETE",
                            url,
                            data: {
                                'id': id
                            },
                            success: function(res) {
                                window.location.reload();
                            }

                        })
                    }
                }
            });



        })
    </script>
@endsection