@extends('backend.template.layouts.template-base')
@section('title', 'Roles & Permissions')

@section('content')
    <section>

        <div class="roles d-flex  justify-content-between mb-4">
            <h2 class="text-role text-title fw-semibold mb-0">Roles & Permissions</h2>
            <a href="{{ route('backend.template.manage-users.roles.create-role') }}"
                class="button-green d-flex align-items-center gap-2 px-3">
                <img src="{{ asset('backend/template/svg-icon/plus.svg') }}" alt="plus">
                <span>Create Role</span>
            </a>
        </div>

        <div class="fb-container">
            {{-- Filter Row --}}
            <div class="fb-filter-row justify-content-between flex-wrap gap-2">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <div class="table-search-box" style="min-width:220px;">
                        <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                            alt="">
                        <input type="text" id="searchName" placeholder="Search role name" class="table-search-input">
                    </div>
                    <select id="filterStatus" class="table-filter-select" style="width:130px;">
                        <option value="">All Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                    <button id="searchBtn" class="button-green px-3" style="height:40px;">Search</button>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <label class="custom-label mb-0" style="white-space:nowrap;">Show</label>
                    <select id="dtLength" class="table-filter-select" style="width:80px;">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                    </select>
                    <label class="custom-label mb-0">entries</label>
                </div>
            </div>

            <div class="table-responsive">
                <table id="rolesTable" class="table align-middle mb-0" style="width:100%;">
                    <thead class="all-table-head">
                        <tr>
                            <th class="table-head-content ps-4" style="width:50px;">#</th>
                            <th class="table-head-content">Role Name</th>
                            <th class="table-head-content">Users Assigned</th>
                            <th class="table-head-content">Created By</th>
                            <th class="table-head-content">Last Updated On</th>
                            <th class="table-head-content">Status</th>
                            <th class="table-head-content">Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

    </section>

    {{-- Duplicate Modal --}}
    <div class="modal fade" id="duplicateModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:440px;">
            <div class="modal-content custom-modal">
                <div class="modal-header" style="background:#eff6ff;height:60px;">
                    <h5 class="mt-2" style="color:#1e40af;">Duplicate Role</h5>
                </div>
                <div class="modal-body">
                    <p style="font-size:13px;color:#6b7280;" class="mb-3">
                        Creating a copy of <strong id="duplicateSourceName"></strong>. Enter a name for the new role.
                    </p>
                    <label class="custom-label">New Role Name <span class="text-danger">*</span></label>
                    <input type="text" id="duplicateNewName" class="form-control custom-input"
                        placeholder="Enter new role name">
                    <div id="duplicateError" class="text-danger mt-1" style="font-size:12px;display:none;"></div>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="duplicateConfirm" class="button-green px-4" style="height:38px;">Duplicate</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        const CSRF = "{{ csrf_token() }}";
        const BASE = "{{ url('/admin/manage-users/roles') }}";
        const ROLES_URL = "{{ route('backend.template.manage-users.roles.roles-and-permissions') }}";

        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        /* ── DataTable ──────────────────────────────────────────── */
        var rolesTable = $('#rolesTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: ROLES_URL,
                data: function(d) {
                    d.search_name = $('#searchName').val();
                    d.filter_status = $('#filterStatus').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'id',
                    orderable: false,
                    searchable: false,
                    className: 'table-body-content ps-4'
                },
                {
                    data: 'name',
                    name: 'name',
                    className: 'table-body-content'
                },
                {
                    data: 'users_assigned',
                    name: 'users_count',
                    searchable: false,
                    className: 'table-body-content'
                },
                {
                    data: 'created_by_name',
                    name: 'created_by',
                    orderable: false,
                    searchable: false,
                    className: 'table-body-content'
                },
                {
                    data: 'updated_at',
                    name: 'updated_at',
                    className: 'table-body-content'
                },
                {
                    data: 'status_html',
                    name: 'status',
                    searchable: false,
                    className: 'table-body-content'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    className: 'table-body-content'
                },
            ],
            order: [
                [4, 'desc']
            ],
            pageLength: 10,
            lengthChange: false,
            searching: false,
            dom: 'rt<"d-flex justify-content-between align-items-center px-3 py-3 border-top"ip>',
            language: {
                info: 'Showing _START_–_END_ of _TOTAL_ results',
                infoEmpty: 'No results found',
                zeroRecords: '<div class="text-center text-muted py-5">No roles found.</div>',
                paginate: {
                    previous: '<i class="ri-arrow-left-s-line"></i>',
                    next: '<i class="ri-arrow-right-s-line"></i>',
                }
            }
        });

        /* ── Filters ────────────────────────────────────────────── */
        var searchTimer;
        $('#searchName').on('keyup', function() {
            clearTimeout(searchTimer);
            searchTimer = setTimeout(function() {
                rolesTable.ajax.reload(null, false);
            }, 400);
        });
        $('#filterStatus').on('change', function() {
            rolesTable.ajax.reload(null, false);
        });
        $('#searchBtn').on('click', function() {
            rolesTable.ajax.reload(null, false);
        });
        $('#dtLength').on('change', function() {
            rolesTable.page.len(+this.value).draw();
        });

        /* ── Status modal ───────────────────────────────────────── */
        function openStatusModal(id, current, name) {
            ConfirmStatus({
                name: name,
                current: current,
                url: BASE + '/' + id + '/status',
                csrf: CSRF,
                onSuccess: function() {
                    rolesTable.ajax.reload(null, false);
                }
            });
        }

        /* ── Duplicate modal ────────────────────────────────────── */
        var dupRoleId = null;

        function openDuplicateModal(id, name) {
            dupRoleId = id;
            $('#duplicateSourceName').text(name);
            $('#duplicateNewName').val('');
            $('#duplicateError').hide();
            new bootstrap.Modal(document.getElementById('duplicateModal')).show();
        }
        $('#duplicateConfirm').on('click', function() {
            var name = $('#duplicateNewName').val().trim();
            if (!name) {
                $('#duplicateError').text('Please enter a role name.').show();
                return;
            }
            $(this).prop('disabled', true).text('Duplicating…');
            $.post(BASE + '/' + dupRoleId + '/duplicate', {
                    _token: CSRF,
                    name: name
                })
                .done(function() {
                    toastr.success('Role duplicated.');
                    bootstrap.Modal.getInstance(document.getElementById('duplicateModal')).hide();
                    rolesTable.ajax.reload(null, false);
                })
                .fail(function(xhr) {
                    $('#duplicateError').text(xhr.responseJSON?.message || 'Failed.').show();
                    $('#duplicateConfirm').prop('disabled', false).text('Duplicate');
                });
        });

        /* ── Delete modal ───────────────────────────────────────── */
        function openDeleteModal(id, name) {
            ConfirmDelete({
                name: name,
                url: BASE + '/' + id + '/destroy',
                csrf: CSRF,
                onSuccess: function() {
                    rolesTable.ajax.reload(null, false);
                }
            });
        }
    </script>
@endsection