@extends($layout)
@section('styles')
    {{-- <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.13.6/b-2.4.1/sl-1.7.0/datatables.min.css" /> --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" />
    <style>
        div.dataTables_wrapper div.dataTables_length select {
            width: 50%;
        }

        #example_paginate>ul>li.paginate_button.page-item.active>a {
            color: white !important;
        }
    </style>
@endsection
@section('content')
    <div class="row" style="max-width: 100%;
    overflow-x: hidden;">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <div class="row">
                        <div class="col-6 d-flex align-items-center">
                          <h6 class="mb-5">Users</h6>
                        </div>
                        <div class="col-6 text-end">
                          <a class="btn bg-gradient-dark mb-0" href="/users/register"><i class="fas fa-plus"></i>&nbsp;&nbsp;Add New User</a>
                        </div>
                      </div>
                </div>
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="px-2">
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    </div>
                    <div class="table-responsive p-4 pt-2">
                        <table id="example" class="display responsive nowrap" width="100%" ">
                                    <thead >
                                        <tr >
                                            <th >Name</th>
                                            <th >Email</th>
                                            <th >Role</th>
                                            <th >Created Date</th>
                                            <th >Created By</th>
                                            <th >Action</th>
                                        </tr>
                                    </thead>
                                </table>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteConfirmationModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="deleteConfirmationModalLabel">Confirm Deletion</h5>
                                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        Are you sure you want to delete this item?
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                        <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
                                    </div>
                                </div>
                            </div>
                        </div>
@endsection

@section('script')
    <script src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.13.6/b-2.4.1/sl-1.7.0/datatables.min.js"></script>
                <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

                            <script>
                                var dataTable = new DataTable('#example', {
                                    language: {
                                        paginate: {
                                            next: '&#8594;', 
                                            previous: '&#8592;' 
                                        }
                                    },
                                    ajax: '{{ route('users.index') }}',
                                    columnDefs: [{
                                        "className": "dt-center",
                                        "targets": "_all"
                                    }],

                                    processing: true,
                                    serverSide: true,
                                    responsive: true,
                                    "order": [],
                                    columns: [{
                                            data: 'name',
                                            name: 'name'
                                        },
                                        {
                                            data: 'email',
                                            name: 'email'
                                        },
                                        {
                                            data: 'role',
                                            name: 'role',
                                            render: function(data, type, row) {
                                                return data === 'dio' ? 'Standard User' : data;
                                            }
                                        },
                                        {
                                            data: 'created_at',
                                            name: 'created_at'
                                        },
                                        {
                                            data: 'created_by',
                                            name: 'created_by'
                                        },

                                        {
                                            data: 'action',
                                            name: 'action',

                                        },
                                    ]
                                });
                            </script>
                            <script>
                                document.addEventListener("DOMContentLoaded", function() {
                                    var recordToDelete = null;

                                    document.querySelector("#example").addEventListener("click", function(e) {
                                        if (e.target.classList.contains("delete-btn")) {
                                            recordToDelete = e.target.getAttribute("data-id");
                                            console.log(recordToDelete);

                                            document.querySelector("#deleteConfirmationModal").classList.add("show");
                                        }
                                    });

                                    document.querySelector("#confirmDeleteBtn").addEventListener("click", function() {
                                        if (recordToDelete) {
                                            fetch("{{ route('users.destroy', ['id' => '__ID__']) }}".replace('__ID__',
                                                    recordToDelete), {
                                                    method: "DELETE",
                                                    body: JSON.stringify({
                                                        id: recordToDelete
                                                    }),
                                                    headers: {
                                                        "Content-Type": "application/json",
                                                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                                                    },
                                                })
                                                .then(function(response) {
                                                    if (response.ok) {
                                                        document.querySelector('.modal-backdrop').remove();
                                                        dataTable.draw();
                                                        document.querySelector("#deleteConfirmationModal").classList.remove(
                                                            "show");
                                                    } else {
                                                        alert("Error deleting the record.");
                                                        document.querySelector("#deleteConfirmationModal").classList.remove(
                                                            "show");
                                                    }
                                                })
                                                .catch(function(error) {
                                                    console.error("Error:", error);
                                                    document.querySelector("#deleteConfirmationModal").classList.remove("show");
                                                });
                                        }
                                    });
                                });
                            </script>
@endsection