@extends('master_layout.app')

@section('style')
@endsection

@section('content')
     <!-- CONTENTS -->
      <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
      <section id="content" class="content">
         <div class="content__header content__boxed overlapping">
            <div class="content__wrap">


               <h1 class="page-title mb-0 mt-2 py-3">User List</h1>


               <div class="container-fluid">


                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="le-tit">
                                <a href="{{ route('export-users') }}" class="btn btn-success mx-2"><i
                                        class="ri-file-excel-2-fill mx-1"></i>Export Excel</a>
                                @if(isset($modPer) && $modPer->creat == 1)        
                                <a href="{{ route('users.create') }}" class="btn btn-success mx-2"><i class="ri-add-circle-fill mx-1"></i>
                                        Create new user</a>
                                @endif               
                            </div>

                            <div class="right-tit d-flex">

                                <input id="startDate" class="form-control" type="date" placeholder="enter" />

                                <form class="input-group select-grp-top w-10">
                                    <span class="input-group-text"><i class="ri-sort-asc"></i></span>
                                    <select class="form-select">

                                        <option selected>Sort by</option>
                                        <option value="1">Role Name</option>


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



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

                <div class="row">
                    <div class="col-md-12 col-xl-12">
                        <div class="card" id="tab-content-pagination">
                            <div class="card-body">
                                <div class="row align-items-center justify-content-between">

                                    <div class="col-12">

                                        <table class="table table-hover align-middle price-table" id="user-list-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">User Name</th>
                                                    <th scope="col">Email Id</th>
                                                    <th scope="col">Role</th>
                                                    <th scope="col">Action</th>

                                                </tr>
                                            </thead>
                                            <tbody>

                                            @foreach($users as $user)
                                                <tr>
                                                    <td scope="row">{{ $user->first_name .' '. $user->last_name }}</td>
                                                    <td scope="row">{{ $user->email }}</td>
                                                    <td scope="row">{{ $user->name }}</td>

                                                    <td scope="row">
                                                        <div class="plan-btn d-flex p-0">

                                                            @if(isset($modPer) && $modPer->edit == 1)
                                                            <a href="{{ route('users.edit', $user->id) }}" class="btn btn-success mx-2"><i
                                                                    class="ri-edit-fill mx-1"></i>
                                                                Edit</a>
                                                            @endif
                                                            @if(isset($modPer) && $modPer->delet == 1)  
                                                            <a href="#!" class="btn btn-success mx-2 delete"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#delete-subscribe" data-id="{{ $user->id }}"><i
                                                                    class="ri-delete-bin-fill mx-1"></i>
                                                                Delete</a>
                                                            @endif
                                                        </div>
                                                    </td>

                                                </tr>
                                            @endforeach

                                            </tbody>
                                        </table>



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

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

                </div>

                <div class="modal fade" id="delete-subscribe" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">

                        <div class="modal-body">
                            <p class="model-tit text-center">Are you sure you want to delete?</p>
                        </div>
                        <div class="modal-footer">
                            <form id="destroy" action="" method="POST">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-primary">Yes, Delete</button>
                            </form>
                            <button type="button" class="btn btn-success" data-bs-dismiss="modal">No,
                                Cancel</button>

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

      </section>

      <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
      <!-- END - CONTENTS -->

@endsection

@section('script')
<script>
        $(document).ready(function () {
            var myTable = $('#user-list-table').DataTable({
                "paging": true,             // Enable pagination
                "searching": true,          // Enable search box
                "ordering": false,           // Enable sorting
                "info": true,               // Show table info
                "lengthMenu": [8, 10, 25],  // Page size options
                "pageLength": 8             // Default page size
            });

            var allPages = myTable.rows().nodes().to$();

            $('.delete', allPages).click(function(e) {
                $.ajax({
                url: '{{ route("getUserById") }}',      // the Laravel route
                type: 'POST',
                data: {
                    id: $(this).data('id')
                },
                success: function(response) {
                    const userId = response.id;
                    const destroyUrl = `/users/${userId}`; // Laravel destroy route
                    $('#destroy').attr('action',destroyUrl);
                    $('#response').html('<p style="color: green;">Success: Deleted Successfully </p>');
                },
                error: function(xhr) {
                    $('#response').html('<p style="color: red;">Error: ' + xhr.responseText + '</p>');
                }
                });
            });

        });
        </script>
@endsection