@extends('admin.layouts.masterlayout')

@section('title', "Role Management")
@section('head_title', "Role Management")

@section('content')
<div class="dashboard-body-content">

    <div class="manage-offers-flex">
        <div class="admin-tab-container">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <!-- <a class="nav-link active" data-bs-toggle="pill" href="#admin-role">Admin Role</a> -->
                    <a class="nav-link jp_link" data-bs-toggle="pill" href="#admin-role" data-tab="role">Admin Role</a>
                </li>
                <li class="nav-item">
                    <!-- <a class="nav-link" data-bs-toggle="pill" href="#admin-user">Admin Users</a> -->
                    <a class="nav-link jp_link" data-bs-toggle="pill" href="#admin-user" data-tab="user">Admin Users</a>
                </li>
            </ul>
        </div>
        <div class="d-flex gap-3 align-items-center manage-search-container">
            <div class="position-relative w-100">
                <input type="search" class="form-control search_text" placeholder="Search here">
                <div class="search-icon">
                    <img src="{{ asset('assets/img/dashboard/search-icon.png') }}" alt="">
                </div>
            </div>
            <a href="#" id="dynamicButton" class="ct-btn text-center add-ct-btn" data-role-route="{{ route('admin.role-management.createRole',['tab' => 'role']) }}" data-user-route="{{ route('admin.role-management.createAdminuser',['tab' => 'user']) }}">Add Role</a>
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-pane jp" id="admin-role">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="rolesTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Role Name</th>
                                    <th>Assigned Users</th>
                                    <th>Description</th>
                                    <th>Assigned Date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody> </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane jp" id="admin-user">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="myTable1">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>User Name</th>
                                    <th>Email</th>
                                    <th>Assigned Role Name</th>
                                    <th>Assigned Date </th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@section('script')
<script src="{{ asset('assets/js/dataTables.js') }}"></script>
<script>
    $(document).ready(function() {
        // === ROLES DATATABLE ===
        const rolesTable = $('#rolesTable').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.roles.data') }}",
            order: [],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: {
                        _: 'assign_user.display',
                        sort: 'assign_user.sort',

                    },
                    name: 'assign_user',
                    orderable: false,
                    searchable: true
                },
                {
                    data: 'description',
                    name: 'description'
                },
                {
                    data: {
                        _: 'assign_date.display',
                        sort: 'assign_date.timestamp'
                    },
                    name: 'assign_date.display',
                    render: function(data, type, row) {
                        return `<div class="d-flex gap-2">
                    <img class="clock-img" src="{{asset('assets/img/dashboard/calendar.png')}}" alt="">
                    ${data}
                </div>`;
                    }
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        // === ADMIN USERS DATATABLE ===
        const adminUsersTable = $('#myTable1').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.users.data') }}",
            order: [],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },

                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'assigned_role',
                    name: 'assigned_role',
                    orderable: false,
                    searchable: true
                },
                {
                    data: {
                        _: 'assign_date.display',
                        sort: 'assign_date.timestamp'
                    },
                    name: 'assign_date.display',
                    render: function(data, type, row) {
                        return `<div class="d-flex gap-2">
                    <img class="clock-img" src="{{asset('assets/img/dashboard/calendar.png')}}" alt="">
                    ${data}
                </div>`;
                    }
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        // === SHARED SEARCH LOGIC ===
        $('.manage-search-container input[type="search"]').on('input', function() {
            const activeTab = $('.tab-pane.jp.active').attr('id');
            const searchText = $(this).val();

            if (activeTab === 'admin-role') {
                rolesTable.search(searchText).draw();
            } else if (activeTab === 'admin-user') {
                adminUsersTable.search(searchText).draw();
            }
        });

        // === DELETE ROLE AND AdminUser LOGIC ===


        $(document).on('click', '.delete-role, .deleteAdminuser', function() {
            var id = $(this).attr("data-role-id");
            var type = $(this).attr("data-type");


            $(".tattoo-delete-btn").attr('data-deleted-id', id);
            $(".tattoo-delete-btn").attr('data-delete-type', type);
            $('.tattoo-delete-modal').modal('show');
        });

        $(document).on('click', '.tattoo-delete-btn', function() {
            var id = $(this).attr("data-deleted-id");
            var type = $(this).attr("data-delete-type");

            if (id !== "" && id != 0) {
                $('.tattoo-delete-btn').attr('disabled', true).addClass('loader-active');

                let deleteUrl = "";
                let dataPayload = {};

                if (type === "role") {
                    deleteUrl = "{{ route('admin.delete_role') }}";
                    dataPayload = {
                        role_id: id
                    };
                } else if (type === "adminuser") {
                    deleteUrl = "{{ route('admin.delete_admin_user') }}";
                    dataPayload = {
                        adminuser_id: id
                    };
                }

                $.ajax({
                    type: "POST",
                    url: deleteUrl,
                    data: dataPayload,
                    success: function(response) {

                        $('.tattoo-delete-modal').modal('hide');
                        $('.tattoo-delete-btn').removeAttr('disabled').removeClass('loader-active');

                        if (response.status === true) {
                            // Clear search input and reset filters
                            // $('.manage-search-container input[type="search"]').val('');

                            if (type === "role") {

                                if (rolesTable.rows({
                                        page: 'current'
                                    }).count() === 1) {
                                    rolesTable.page('previous').draw('page');
                                } else {
                                    rolesTable.ajax.reload(null, false);
                                }
                            } else if (type === "adminuser") {

                                if (adminUsersTable.rows({
                                        page: 'current'
                                    }).count() === 1) {
                                    adminUsersTable.page('previous').draw('page');
                                } else {
                                    adminUsersTable.ajax.reload(null, false);
                                }
                            }

                            custom_message('success', response.message);
                        } else {
                            custom_message('error', response.message);
                        }
                    }
                });
            } else {
                custom_message('error', "ID isn't valid");
            }
        });

    });

    // dynamic button logics
    $(document).ready(function() {

        function updateDynamicButton(tab) {
            const $button = $('#dynamicButton');
            if (tab === 'user') {
                $button.text('Add User');
                $button.attr('href', $button.data('user-route'));
            } else {
                $button.text('Add Role');
                $button.attr('href', $button.data('role-route'));
            }
        }

        var tab = getUrlParameter('tab') || 'role';

        // Activate correct tab
        $('.jp_link').removeClass('active');
        $('.jp').removeClass('active show');
        $('.jp_link[data-tab="' + tab + '"]').addClass('active');
        $('#admin-' + tab).addClass('active show');

        updateDynamicButton(tab); // update button text + link

        $('.jp_link').on('click', function(e) {
            var selectedTab = $(this).data('tab');
            var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?tab=' + selectedTab;
            window.history.pushState({
                path: newUrl
            }, '', newUrl);

            $('.jp_link').removeClass('active');
            $(this).addClass('active');
            $('.jp').removeClass('active show');
            $('#admin-' + selectedTab).addClass('active show');

            updateDynamicButton(selectedTab);
        });
    });
</script>
@endsection