@extends('layouts.backend')

@section('extra-css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('content')
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>Manage User</h3>
                </div>

                <div class="title_right">
                    <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button">Go!</button>
                    </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    @include('parts.message')
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>User List</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            {{--<button class="btn btn-danger" id="newUser">Create New User</button>--}}
                            {{--<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal1">--}}
                                {{--Create New User--}}
                            {{--</button>--}}
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>name</th>
                                    <th>email</th>
                                    <th>Role</th>
                                    <th>Posts</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach(\App\User::take(100)->skip(1)->get() as $user)
                                    <tr>
                                        <th scope="row">{{ $user->id }}</th>
                                        <td>{{ $user->name }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->role }}</td>
                                        <td>{{ $user->Posts->count() }}</td>
                                        <td>
                                            <ul class="list-inline" style="margin: 0">
                                                <li style="float:left;"><a href="{{ route('user.edit', $id = $user->id) }}"
                                                                           class="btn btn-success"><i
                                                                class="fa fa-edit"></i></a></li>
                                                <li>
                                                    <form action="{{ route('user.destroy', $id = $user->id) }}"
                                                          method="post">
                                                        <input type="hidden" name="_method"
                                                               value="DELETE">
                                                        {{ csrf_field() }}
                                                        <button type="submit"
                                                                class="btn btn-danger">
                                                            <i class="fa fa-close"></i>
                                                        </button>

                                                    </form>

                                                </li>

                                            </ul>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <!-- Modal -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="#" id="createNewUser">
                    {{ csrf_field() }}
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Username:</label>
                            <input type="text" class="form-control" id="name" name="name">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Email:</label>
                            <input type="text" class="form-control" id="email" name="email">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Password:</label>
                            <input type="text" class="form-control" id="password" name="password">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Confirm Password:</label>
                            <input type="text" class="form-control" id="ConfirmPassword">
                            <p class="text-danger" style="font-weight: bold;"></p>
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Role:</label>
                            <input type="text" class="form-control" id="role" name="role">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Phone:</label>
                            <input type="text" class="form-control" id="phone" name="phone">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Address:</label>
                            <input type="text" class="form-control" id="address" name="address">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">ZIP:</label>
                            <input type="text" class="form-control" id="zip" name="zip">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">City:</label>
                            <input type="text" class="form-control" id="city" name="city">
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('extra-js')

    <script>
//        $.ajaxSetup({
//            headers: {
//                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//            }
//        });
        $(document).ready(function () {
            $('#createNewUser').submit(function () {
                console.log($(this).serialize());
                $.post('', $(this).serialize, function (msg) {
                    console.log(msg);
                    $('#data').html('sdfdsfds');
                });

                e.preventDefault();
            });


        });
    </script>

@endsection