@extends('layout.app')
@section('title', 'Side Menu 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="#">Side Menu Setup</a></li>
                <li class="breadcrumb-item active" aria-current="page">Side Menu 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">Side Menu Information's</h1>
                <p class="mb-0">Find All types of Side Menu and Side Menu details information</p>
            </div>
            @can('create_menu')
            <div>
                <a href="{{url('sidemenu/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 Side-Menu
                </a>
            </div>
            @endcan
        </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>Order BY</th>
                <th>Icon</th>
                <th>Name</th>
                <th>Parent Name</th>
                <th>URL</th>
                <th>Created Info</th>
                <th>Updated Info</th>
              @can('menu_action')   <th>Action</th> @endcan
            </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('sidemenu.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>');
                        var iconTd = $('<td>');
                        if (user.icon) {
                            iconTd[0].innerHTML = user.icon;
                            iconTd.css('background-color', '#494949');
                        }
                        row.append('<td>' + user.order_by + '</td>');
                        row.append(iconTd);
                        row.append('<td>' + user.name + '</td>');
                        row.append('<td>' + (user.parent_name ? user.parent_name : '') + '</td>');
                        row.append('<td>' + (user.url ? user.url : '') + '</td>');
                        row.append('<td>' + (user.created_at ? user.created_at : '') + '</td>');
                        row.append('<td>' + (user.updated_at ? user.updated_at : '') + '</td>');
                        row.append(`
                        @can('menu_action')
                                    <td>
                                        <div class="btn-group">
                                            <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="M4 6h12a1 1 0 110 2H4a1 1 0 110-2zm0 4h12a1 1 0 110 2H4a1 1 0 110-2zm0 4h12a1 1 0 110 2H4a1 1 0 110-2z" 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>
                                               @can('update_menu')  <li><a class="dropdown-item" href="#" onclick="editUser('${user.id}')">Edit</a></li> @endcan
                                              @can('delete_menu')   <li><a class="dropdown-item" href="#" onclick="deleteUser('${user.id}')">Delete</a></li> @endcan
                                            </ul>
                                        </div>
                                    </td>
                                    @endcan
                                `);
                        $('#table-body').append(row);
                    });
                    initializeDataTable();
                },
                error: function (xhr, status, error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        loadTableData();

        function viewUser(userId) {
            console.log("View user with ID:", userId);
        }

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

        function deleteUser(userId) {
            console.log("Edit user with ID:", 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('sidemenu') }}" + '/' + 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