@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">


                <h4 class="mb-3 fw-semibold">User List</h4>


                <div class="container-fluid">


                    <div class="row">
                        @if (session('success'))
                            <div class="alert alert-success mt-3">{{ session('success') }}</div>
                        @endif
                        @if (session('error'))
                            <div class="alert alert-danger mt-3">{{ session('error') }}</div>
                        @endif
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="le-tit">

                                    @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="subscribe-list-table">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">User Name</th>
                                                        <th scope="col">Email Id</th>
                                                        <th scope="col">Role</th>
                                                        <th scope="col">Title</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">{{ $user->title }}</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