@extends('admin.layouts.app')


@section('section')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>{{isset($agent) ? 'All Agents' : 'All Users'}}</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ url('admin/dashboard') }}">Home</a></li>
                            <li class="breadcrumb-item active">{{isset($agent) ? 'All Agents' : 'All Users'}}</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <!-- /.card -->
                        <div class="card">
                            <div class="card-header"style="text-align: right;">
{{--                                <a class="btn btn-primary float-right" data-toggle="modal" data-target="#addUserModal">Add User</a>--}}
                            </div>
                            <div class="col-md-12">
                            </div>

                            <!-- Add User Modal -->
                            <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="addUserModalLabel">Add User</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <!-- Add User Form -->
                                            <form action="" method="POST">
                                                @csrf

                                                <div class="form-group">
                                                    <label for="name">Name</label>
                                                    <input type="text" class="form-control" id="name" name="name">
                                                </div>

                                                <div class="form-group">
                                                    <label for="email">Email</label>
                                                    <input type="email" class="form-control" id="email" name="email">
                                                </div>

                                                <div class="form-group">
                                                    <label for="password">Password</label>
                                                    <input type="password" class="form-control" id="password" name="password">
                                                </div>

                                                <div class="form-group">
                                                    <label for="address">Address</label>
                                                    <input type="text" class="form-control" id="address" name="address">
                                                </div>


                                                <div class="form-group">
                                                    <label for="state">State</label>
                                                    <input type="text" class="form-control" id="state" name="state">
                                                </div>

                                                <div class="form-group">
                                                    <label for="city">City</label>
                                                    <input type="text" class="form-control" id="city" name="city">
                                                </div>

                                                <div class="form-group">
                                                    <label for="zip">Zip</label>
                                                    <input type="text" class="form-control" id="zip" name="zip">
                                                </div>

                                                <!-- Add more fields for adding user details if needed -->

                                                <button type="submit" class="btn btn-primary">Add</button>
                                            </form>
                                            <!-- End Add User Form -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Add User Modal -->


                            <!-- /.card-header -->
                            <div class="card-body">
                                <table id="myTable" class="display">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Role</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($users as $user)
                                        <tr>
                                            <td>{{ $user->id }}</td>
                                            <td>{{ $user->name }}</td>
                                            <td>{{ $user->email }}</td>

                                            <td>
                                                @foreach($user->getRoleNames() as $role)
                                                    {{ $role }}
                                                @endforeach
                                            </td>

                                            <td>
                                                @if($user->status == 1)
                                                    <span class="badge badge-success">Active</span>
                                                @else
                                                    <span class="badge badge-danger">Inactive</span>
                                                @endif
                                            </td>

                                            <td>
                                                <a href="#" data-toggle="modal" data-target="#userModal{{ $user->id }}"><i class="fas fa-eye"></i></a>
                                                <a href="#" data-toggle="modal" data-target="#editModal{{ $user->id }}"><i class="fas fa-edit"></i></a>
                                                <a href="{{route('user_active_inactive',$user->id) }}" data-toggle="tooltip" data-placement="top" title="Activate{{ $user->status == 0 ? 'Activate' : 'Deactivate' }}">
                                                    <i class="fas {{ $user->status == 1 ? 'fa-toggle-on text-success' : 'fa-toggle-off text-danger' }}"></i>
                                                </a>
{{--                                                @if( $user->status == 0)--}}
{{--                                                    <button class="btn btn-danger" data-toggle="modal"--}}
{{--                                                            data-target="#rejectModal">Reject--}}
{{--                                                    </button>--}}
{{--                                                @endif--}}
                                                {{--                                                <a href=""><i class="fas fa-trash"></i></a>--}}
                                            </td>
                                            <div class="modal fade" id="rejectModal" tabindex="-1" role="dialog"
                                                 aria-labelledby="rejectModalLabel" aria-hidden="true">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="rejectModalLabel">
                                                                Confirmation</h5>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <p>Are you sure you want to reject this user?</p>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                    data-dismiss="modal">Cancel
                                                            </button>
                                                            <a class="btn btn-danger"
                                                               href="{{ route('user_reject', $user->id) }}">Reject</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </tr>
                                        <!-- User Details Modal -->
                                        <div class="modal fade" id="userModal{{ $user->id }}" tabindex="-1" role="dialog" aria-labelledby="userModalLabel{{ $user->id }}" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="userModalLabel{{ $user->id }}">{{ $user->name }} (details)</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p><strong>ID:</strong> {{ $user->id }}</p>
                                                        <p><strong>Name:</strong> {{ $user->name }}</p>
                                                        <p><strong>Email:</strong> {{ $user->email }}</p>
                                                        <p><strong>Role(s):</strong>
                                                            @foreach($user->getRoleNames() as $role)
                                                                {{ $role }},
                                                            @endforeach
                                                        </p>
                                                        <p><strong>Address:</strong> {{ $user->address }}</p>
                                                        <p><strong>Phone:</strong> {{ $user->phone }}</p>
                                                        <p><strong>State:</strong> {{ $user->state }}</p>
                                                        <p><strong>Zip:</strong> {{ $user->zip }}</p>
                                                        <p><strong>City:</strong> {{ $user->city }}</p>
                                                        <!-- Add more user details here if needed -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End User Details Modal -->

                                        <!-- Edit User Modal -->
                                        <div class="modal fade" id="editModal{{ $user->id }}" tabindex="-1" role="dialog" aria-labelledby="editModalLabel{{ $user->id }}" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="editModalLabel{{ $user->id }}">Edit Details</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <!-- Edit User Form -->
                                                        <form action="{{route('admin.users.update',$user->id)}}" method="POST">
                                                            @csrf
                                                            @method('PUT')

                                                            <div class="form-group">
                                                                <label for="name">Name</label>
                                                                <input type="text" class="form-control" id="name" name="name" value="{{ $user->name }}">
                                                            </div>

                                                            <div class="form-group">
                                                                <label for="email">Email</label>
                                                                <input type="email" class="form-control" id="email" name="email" value="{{ $user->email }}">
                                                            </div>

                                                            <div class="form-group">
                                                                <label for="address">Address</label>
                                                                <input type="text" class="form-control" id="address" name="address" value="{{ $user->address }}">
                                                            </div>

                                                            <div class="form-group">
                                                                <label for="phone">Phone</label>
                                                                <input type="text" class="form-control" id="phone" name="phone" value="{{ $user->phone }}">
                                                            </div>

                                                            <div class="form-group">
                                                                <label for="phone">City</label>
                                                                <input type="text" class="form-control" id="city" name="city" value="{{ $user->city }}">
                                                            </div>

                                                            <div class="form-group">
                                                                <label for="state">State</label>
                                                                <input type="text" class="form-control" id="state" name="state" value="{{ $user->state }}">
                                                            </div>

                                                            <div class="form-group">
                                                                <label for="zip">Zip</label>
                                                                <input type="text" class="form-control" id="zip" name="zip" value="{{ $user->zip }}">
                                                            </div>


                                                            <!-- Add more fields for editing user details if needed -->

                                                            <button type="submit" class="btn btn-primary">Update</button>
                                                        </form>
                                                        <!-- End Edit User Form -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Edit User Modal -->
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>


        <div id="confirmModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header"  style="background-color: #343a40;
            color: #fff;">
                        <h2 class="modal-title">Confirmation</h2>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <h4 align="center" style="margin: 0;">Are you sure you want to delete this ?</h4>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="ok_delete" name="ok_delete" class="btn btn-danger">Delete</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myTable').DataTable();
        });
    </script>

    <script>
        @if (session('success'))
        Swal.fire({
            icon: 'success',
            title: '{{ session('success') }}',
            showConfirmButton: false,
            timer: 3000
        });
        @endif

        @if (session('error'))
        Swal.fire({
            icon: 'error',
            title: '{{ session('error') }}',
            showConfirmButton: false,
            timer: 3000
        });
        @endif
    </script>
{{--    <script>--}}
{{--        $(document).ready(function () {--}}
{{--            var DataTable = $("#example1").DataTable({--}}
{{--                dom: "Blfrtip",--}}
{{--                buttons: [{--}}
{{--                    extend: "copy",--}}
{{--                    className: "btn-sm"--}}
{{--                }, {--}}
{{--                    extend: "csv",--}}
{{--                    className: "btn-sm"--}}
{{--                }, {--}}
{{--                    extend: "excel",--}}
{{--                    className: "btn-sm"--}}
{{--                }, {--}}
{{--                    extend: "pdfHtml5",--}}
{{--                    className: "btn-sm"--}}
{{--                }, {--}}
{{--                    extend: "print",--}}
{{--                    className: "btn-sm"--}}
{{--                }],--}}
{{--                responsive: true,--}}
{{--                processing: true,--}}
{{--                serverSide: true,--}}
{{--                pageLength: 10,--}}
{{--                ajax: {--}}
{{--                    url: `{{route('testimonial.index')}}`,--}}
{{--                },--}}
{{--                columns: [--}}

{{--                    {data: 'id', name: 'id'},--}}
{{--                    {data: 'name', name: 'name'},--}}
{{--                    // {data: 'designation', name: 'designation'},--}}
{{--                    {data: 'comment', name: 'comment'},--}}
{{--                    {data: 'rating', name: 'rating'},--}}
{{--                    // {data: 'status', name: 'status'},--}}
{{--                    {data: 'action', name: 'action', orderable: false}--}}
{{--                ]--}}

{{--            });--}}
{{--            var delete_id;--}}
{{--            $(document,this).on('click','.delete',function(){--}}
{{--                delete_id = $(this).attr('id');--}}
{{--                $('#confirmModal').modal('show');--}}
{{--            });--}}
{{--            $(document).on('click','#ok_delete',function(){--}}
{{--                $.ajax({--}}
{{--                    url:"{{url('admin/testimonial/destroy')}}/"+delete_id,--}}
{{--                    type:'post',--}}
{{--                    data:{--}}
{{--                        id:delete_id,--}}
{{--                        "_method": 'DELETE',--}}
{{--                    },--}}
{{--                    headers: {--}}
{{--                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')--}}
{{--                    },--}}
{{--                    beforeSend: function(){--}}
{{--                        $('#ok_delete').text('Deleting...');--}}
{{--                        $('#ok_delete').attr("disabled",true);--}}
{{--                    },--}}
{{--                    success: function (data) {--}}
{{--                        DataTable.ajax.reload();--}}
{{--                        $('#ok_delete').text('Delete');--}}
{{--                        $('#ok_delete').attr("disabled",false);--}}
{{--                        $('#confirmModal').modal('hide');--}}
{{--                        //   js_success(data);--}}
{{--                        if(data==0) {--}}
{{--                            toastr.error('Exception Here! Something went wrong');--}}
{{--                        }else{--}}
{{--                            toastr.success('Record Delete Successfully');--}}
{{--                        }--}}
{{--                    }--}}
{{--                })--}}
{{--            });--}}

{{--            $(document).on('click','#status-switch',function(){--}}
{{--                let id = $(this).data('id');--}}
{{--                let val = $(this).data('val');--}}
{{--                $.ajax({--}}
{{--                    type:"get",--}}
{{--                    url:`{{url('admin/'.request()->segment(2).'/changeBlogStatus')}}/${id}`,--}}
{{--                    headers: {--}}
{{--                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')--}}
{{--                    },--}}
{{--                    data:{--}}
{{--                        val:val--}}
{{--                    },--}}
{{--                    success: function (data) {--}}
{{--                        DataTable.ajax.reload();--}}

{{--                        if(data==0) {--}}
{{--                            toastr.error('Exception Here !');--}}
{{--                        }else{--}}
{{--                            toastr.success('Record Status Updated Successfully');--}}
{{--                        }--}}



{{--                    }--}}
{{--                })--}}
{{--            });--}}


{{--        })--}}
{{--    </script>--}}


@endsection