@extends('mgh_theme.app')
@section('content')
    <div class="content">

        <!-- Start Content-->
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row align-items-center bg-white">
                <div class="col-sm-6">
                    <div class="page-title-box">
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">{{env('APP_NAME')}}</a></li>
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Manage Users</a></li>
                            </ol>
                        </div>
                        <h4 class="page-title">Manage Users</h4>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="float-right d-none d-md-block">
                        <div class="dropdown">
                            <button class="btn btn-primary dropdown-toggle waves-effect waves-light data_add_new" data-toggle="modal" data-target=".bs-example-modal-lg" type="button">
                                <i class="far fa-calendar-plus  mr-2"></i> Create
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        @include('mgh_theme.session')
                        @include('mgh_theme.error')
                        <div class="card-body table-responsive">

                            <table id="datatable" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead class="thead-light">
                                <tr>
                                    <th>Account Type</th>
                                    <th>Active Status</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Action</th>


                                </tr>
                                </thead>
                                <tbody>
                                @foreach($users as $user)
                                    <tr>
                                        <td>@if($user->admin == 1)<span class="badge badge-primary">Admin</span>@else <span class="badge badge-info">Regular</span>@endif</td>
                                        <td>@if($user->active == 1)<span class="badge badge-info">Active</span>@else <span class="badge badge-danger">Banned</span>@endif</td>
                                        <td>{{$user->name}}</td>
                                        <td>{{$user->email}}</td>
                                        <td class="d-flex">
                                            <button class="btn btn-primary btn-sm dropdown-toggle waves-effect waves-light data_edit mr-2" data="{{$user->id}}" data-toggle="modal" data-target=".bs-example-modal-lg" type="button">
                                                <i class="mdi mdi-pencil"></i>
                                            </button>
                                            <form action="{{route('user.destroy',['user'=>$user->id])}}" method="post">@csrf @method('DELETE') <button onclick="return confirm('Are your sure ?')" class="btn btn-danger btn-sm" type="submit" ><i class="mdi mdi-delete"></i></button></form>
                {{--                        </td>--}}
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div> <!-- end col -->
            </div> <!-- end row -->



        </div> <!-- container-fluid -->
    </div>
    <!-- End Page-content -->

    <!--  Modal content for the above example -->
    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mt-0" id="myLargeModalLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body data_modal">

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            var posturl;
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('.data_edit').on('click',function(){
                $('#myLargeModalLabel').text('Update User');
                posturl = $(this).attr('data');
                jQuery.ajax({
                    url: '{{url('/user')}}/'+$(this).attr('data'),
                    method: 'get',
                    success: function (result) {
                        $('.data_modal').html(result);
                    }
                });
            });
            $('.data_add_new').on('click',function(){
                $('#myLargeModalLabel').html('Add new User');
                jQuery.ajax({
                    url: '{{url('/user')}}/create',
                    method: 'get',
                    success: function (result) {
                        $('.data_modal').html(result);
                    }
                });
            });


        });
    </script>
@endsection