@include('admin.includes.header')
@include('admin.includes.top-nav')
@include('admin.includes.side-nav')

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Manage Staff</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    {{--<ol class="breadcrumb float-sm-right">--}}
                    {{--<li class="breadcrumb-item"><a href="#">Home</a></li>--}}
                    {{--<li class="breadcrumb-item active">Starter Page</li>--}}
                    {{--</ol>--}}
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                  @if(session('status'))
                        <div class="alert alert-success alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            <h5><i class="icon fa fa-check"></i> Success Message</h5>
                            User has successfully created.
                        </div>
                    @endif
                    <div class="card card-warning">
                        <div class="card-header">
                            <h3 class="card-title text-danger">Register Staff User</h3>
                        </div>
                        <div class="card-body">
                            @if ($errors->any())
                                <div class="alert ">
                                    @foreach ($errors->all() as $error)
                                        <ul>
                                            <li style="color: red; font-size: 16px;">{{ $error }}</li>
                                        </ul>
                                    @endforeach
                                </div>
                            @endif
                            <form action="{{url('/insertStaff')}}" method="post">
                                @csrf
                                <div class="row">
                                    <div class="col-4">
                                        <input type="text" name="name" class="form-control" placeholder="Name" value="{{old('name')}}">
                                    </div>
                                    <div class="col-4">
                                        <input type="text" name="username" class="form-control" placeholder="User Name" value="{{old('username')}}">
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <select class="form-control select2" style="width: 100%;" name="role">
                                                <option selected="selected" value="">Select User Role</option>
                                                <option value="0" {{ (collect(old('role'))->contains('0')) ? 'selected':'' }}>User</option>
                                                <option value="4" {{ (collect(old('role'))->contains('4')) ? 'selected':'' }}>Staff</option>
                                                <option value="3" {{ (collect(old('role'))->contains('3')) ? 'selected':'' }}>Admin</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <input type="password" class="form-control" placeholder="Password" name="password" value="{{old('password')}}">
                                    </div>
                                    <div class="col-6">
                                        <input type="password" class="form-control" placeholder="Confirm Password"  name="password_confirmation" value="{{old('password_confirmation')}}">
                                    </div>


                                </div>
                                <div class="row">
                                    <div class="col-4 mt-4 offset-4">
                                        <button class="btn btn-warning btn-block">Register</button>
                                    </div>

                                </div>
                            </form>
                        </div>
                        <!-- /.card-body form-->
                    </div>
                    <!-- /.card form -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Staff Members</h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th class="text-center">User ID</th>
                                    {{--<th class="text-center">Name</th>--}}
                                    <th class="text-center">User Name</th>
                                    <th class="text-center">User Role</th>

                                </tr>
                                </thead>
                                <tbody>
                                @foreach($data as $row)
                                    <tr>
                                        <td class="text-center">{{$row->id}}</td>
                                        {{--<td>{{$row->name}}</td>--}}
                                        <td>{{$row->username}}</td>
                                        <td>Staff Member</td>
                                    </tr>
                                @endforeach

                                </tbody>
                                <tfoot>
                                <tr>
                                    <th class="text-center">User ID</th>
                                    {{--<th class="text-center">Name</th>--}}
                                    <th class="text-center">User Name</th>
                                    <th class="text-center">User Role</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>

                    </div>
                    <!-- /.card-body -->
                </div>
                    <!-- /.card table -->
            </div>
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->

@include('admin.includes.footer')

<script>
    $(function () {
        $("#example1").DataTable();
        $('#example2').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false
        });
    });
</script>