@extends('layout.app')
@section('title', 'Permission Info')
@section('style')

@endsection
@section('main')

    <div class="py-4">
        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
            <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                <li class="breadcrumb-item"><a href="#">
                        <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                    </a></li>
                <li class="breadcrumb-item"><a href="#">User Setup</a></li>
                <li class="breadcrumb-item active" aria-current="page">Permission Info</li>
            </ol>
        </nav>
        <div class="d-flex justify-content-between w-100 flex-wrap">
            <div class="mb-3 mb-lg-0"><h1 class="h4">Permission Information's</h1>
                <p class="mb-0">Find All types of Permission and Permissions details information</p>
            </div>
            <div>
                <a href="{{url('permissioninfo/create')}}" class="btn btn-outline-gray-600 d-inline-flex align-items-center">
                    <svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Add New Permission
                </a>
            </div>
        </div>
    </div>



    <div class="card">
        <div class="table-responsive py-4">
            <table class="table table-flush" id="user-datatable">
                <thead class="thead-light">
                <tr>
                    <th>SL</th>
                    <th>Name</th>
                    <th>Guard Name</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody id="table-body">
                <!-- Data will be populated here -->
                </tbody>
            </table>
        </div>
    </div>



@endsection

@section('script')
    <script src="{{ asset('assets/js/simple-datatables.js') }}"></script>
    <script>
        function initializeDataTable() {
            var dataTableEl = document.getElementById('user-datatable');
            if (dataTableEl) {
                const dataTable = new simpleDatatables.DataTable(dataTableEl);
            }
        }

        function loadTableData() {
            $.ajax({
                url: '{{ route('permissioninfo.data') }}',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    $('#table-body').empty();
                    $.each(data, function (index, user) {
                        var row = $('<tr>');
                        row.append('<td>' + (index + 1) + '</td>');
                        row.append('<td>' + user.name + '</td>');
                        row.append('<td>' + user.guard_name + '</td>');
                        row.append(`
                                    <td>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-secondary">Action</button>
                                            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                                <svg class="icon icon-xs" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                                </svg>
                                                <span class="visually-hidden">Toggle Dropdown</span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><button type="button" class="dropdown-item" onclick="viewUser('${user.id}')">View</button></li>
                                                <li><a class="dropdown-item" href="#" onclick="editUser('${user.id}')">Edit</a></li>
                                                <li><a class="dropdown-item" href="#" onclick="deleteUser('${user.id}')">Delete</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                `);
                        $('#table-body').append(row);
                    });
                    initializeDataTable();
                },
                error: function (xhr, status, error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        loadTableData();

        function viewUser(userId) {
            console.log("Edit user with ID:", userId);
            var url = "{{ route('permissioninfo.edit', ':id') }}";
            var fullUrl = url.replace(':id', userId);
            window.location.href = fullUrl;
        }

        function editUser(userId) {
            // Your logic for editing the user
            console.log("Edit user with ID:", userId);
        }

        function deleteUser(userId) {
            var id = userId;
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    var csrf_token = $('meta[name="csrf-token"]').attr('content');

                    $.ajax({
                        url: "{{ url('permissioninfo') }}" + '/' + id,
                        type: "POST",
                        data: {'_method': 'DELETE',
                            '_token': "{{ csrf_token() }}"},
                        success: function (response) {
                            if (response.statusCode == 200) {
                                loadTableData();
                                Swal.fire({
                                    title: "Deleted!",
                                    text: "Your file has been deleted.",
                                    icon: "success"
                                });
                            } else {
                                Swal.fire("Error occured !!");
                            }
                        },
                        error: function (xhr) {
                            alert('Delete failed: ' + xhr.responseText);
                        }
                    });

                }
            });
        }

    </script>
@endsection