@extends('layouts.app')

@section('page-title')
<div class="bg-title d-flex flex-wrap align-items-center justify-content-between">
    <h4 class="page-title">
        <i class="{{ $pageIcon }}"></i> @lang($pageTitle)
    </h4>
    @if(!$roles->isEmpty())
        <a href="javascript:;" id="addRole" class="themeBtn greenBtnSoft">
            <i class="fa fa-gear"></i> @lang("modules.roles.addRole")
        </a>
    @endif
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="{{ asset('plugins/bower_components/switchery/dist/switchery.min.css') }}">
<style>
    .mytooltip { z-index: 999 !important; }
    .custom-role-row { border-radius: 4px; overflow: hidden; }
    .custom-role-column { padding: 15px 0; }
    .collapse-toggle { cursor: pointer; display: flex; align-items: center; gap: 8px; }
    .collapse-toggle i { transition: transform 0.2s ease; width: 14px; }
    .child-row { display: none; }
    .bg-light-gray { background-color: #f7f7f7; }
    .permission-section .table td, .permission-section .table th { vertical-align: middle; }
</style>
@endpush

@section('content')
<div class="dash_panel">
    <div class="customCard">
        <h4>@lang($pageTitle)</h4>

        <div class="row">
            @forelse($roles as $role)
                <div class="col-md-12 m-b-20">
                    <div class="customRoleBox">
                        <div class="row custom-role-row bg-inverse gy-0">
                            <div class="col-md-4 text-center bg-inverse custom-role-column">
                                <h5 class="text-white"><strong>{{ ucwords($role->display_name) }}</strong></h5>
                            </div>
                            <div class="col-md-4 text-center bg-inverse role-members custom-role-column">
                                <button class="themeBtn greenBtnSoft themeBtn_sm show-members"
                                        data-role-id="{{ $role->id }}">
                                    <i class="fa fa-users"></i> {{ count($role->roleuser) }} Member(s)
                                </button>
                            </div>
                            <div class="col-md-4 p-10 bg-inverse text-center custom-role-column">
                                <button class="themeBtn blueBtnSoft themeBtn_sm toggle-permission"
                                        data-role-id="{{ $role->id }}">
                                    <i class="fa fa-key"></i> Permissions
                                </button>
                            </div>

                            {{-- PERMISSION TABLE --}}
                            <div class="col-md-12 permission-section" style="display:none;" id="role-permission-{{ $role->id }}">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>
                                            {{-- <div class="form-group">
                                                <div class="checkbox themeCheckbox col-md-10">
                                                    <input id="select_all_permission_{{ $role->id }}"
                                                        class="select_all_permission"
                                                        value="{{ $role->id }}" type="checkbox">
                                                    <label for="select_all_permission_{{ $role->id }}">@lang('modules.permission.selectAll')</label>
                                                </div>
                                            </div> --}}
                                        </th>
                                        <th>@lang('app.read')</th>
                                        <th>@lang('app.write')</th>
                                        <th>@lang('app.delete')</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @include('admin.role-permission.partials.menu-tree', [
                                        'menus' => $menus,
                                        'parentId' => 0,
                                        'roleId' => $role->id,
                                        'hasParent' => 0
                                    ])
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center">
                    <div class="empty-space" style="height:200px;">
                        <div class="empty-space-inner">
                            <div class="icon" style="font-size:30px"><i class="ti-lock"></i></div>
                            <div class="title m-b-15">@lang('messages.defaultRolesCantDelete')</div>
                            <div class="subtitle">
                                <a href="javascript:;" id="addRole" class="themeBtn greenBtnSoft">
                                    <i class="fa fa-gear"></i> @lang("modules.roles.addRole")
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @endforelse
        </div>
    </div>
</div>

{{-- Ajax Modal --}}
<div class="modal fade bs-modal-md in" id="projectCategoryModal" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md" id="modal-data-application">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <span class="caption-subject font-red-sunglo bold uppercase" id="modelHeading"></span>
            </div>
            <div class="modal-body">Loading...</div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/switchery/dist/switchery.min.js') }}"></script>
<script>
$(function () {

    function initSwitchery() {
        document.querySelectorAll('.js-switch').forEach(function(el) {
            if (!el.switchery) el.switchery = new Switchery(el, $(el).data());
        });
    }
    initSwitchery();

    // Toggle permission section per role
    $('.toggle-permission').on('click', function () {
        const roleId = $(this).data('role-id');
        $('#role-permission-' + roleId).toggle();
    });

    // Expand/collapse child menus + show parent checkbox
    $(document).on('click', '.collapse-toggle', function () {
        const target = $(this).data('target');
        const $row = $(target);
        const $icon = $(this).find('i');
        const $parentRow = $(this).closest('tr');
        const $parentCheckbox = $parentRow.find('.parent-permission-checkbox');

        if ($row.is(':visible')) {
            $row.find('td').slideUp(200, () => $row.hide());
            $icon.removeClass('fa-chevron-down').addClass('fa-chevron-right');
            $parentCheckbox.hide(); // hide parent checkbox
        } else {
            $row.show();
            $row.find('td').slideDown(200);
            $icon.removeClass('fa-chevron-right').addClass('fa-chevron-down');
            $parentCheckbox.show(); // hide parent checkbox
        }
    });

    // Handle both parent and child checkbox logic (single AJAX for parent)
    $(document).on('change', '.assign-role-permission', function () {
    const $this = $(this);
    const roleId = $this.data('role-id');
    const menuId = $this.data('permission-id');
    const parentId = $this.data('parent-id');
    const permissionType = $this.data('permission-type');
    const value = $this.is(':checked') ? 1 : 0;
    var isParent = $this.hasClass('parent-permission-checkbox');

    const $childRow = $(`#menu-${roleId}-${parentId}`);
    const childRecordLength = $childRow.find('.assign-role-permission:checked').length;

    $.easyAjax({
        url: '{{ route('role-permission.store') }}',
        type: 'POST',
        data: {
            roleId,
            menuId,
            permissionType,
            value,
            isParent,
            childRecordLength,
            parentId,
            _token: '{{ csrf_token() }}'
        },
        success: function () {
            // Reinitialize switchery toggles
            initSwitchery();
            if (isParent) {
                // When parent toggled 
                const $childRow = $('#menu-' + roleId + '-' + menuId);
                const $childCheckboxes = $childRow.find('.assign-role-permission');

                $childCheckboxes.each(function () {
                    const $child = $(this);
                    $child.prop('checked', value === 1);

                    // Update Switchery UI if exists
                    if ($child[0].switchery) {
                        const switchEl = $child[0].switchery;
                        switchEl.element.checked = value === 1;
                        switchEl.setPosition();
                    }
                });
            } else {
                //  When any child toggled
                const anyChecked = childRecordLength > 0;

                // Find the correct parent checkbox row
                const $parentCheckbox = $(`.parent-permission-checkbox.${roleId}-${parentId}`);

                // Update checkbox value
                $parentCheckbox.prop('checked', anyChecked);

                // Update Switchery UI safely
                if ($parentCheckbox.length && $parentCheckbox[0].switchery) {
                    const switchEl = $parentCheckbox[0].switchery;
                    switchEl.element.checked = anyChecked;
                    switchEl.setPosition();
                }
            }

        }
    });
});


    // Show members modal
    $('.show-members').click(function () {
        const id = $(this).data('role-id');
        const url = '{{ route('role-permission.showMembers', ':id')}}'.replace(':id', id);
        $('#modelHeading').html('Role Members');
        $.ajaxModal('#projectCategoryModal', url);
    });

    // Add role modal
    $('#addRole').click(function () {
        const url = '{{ route('role-permission.create')}}';
        $('#modelHeading').html('Add Role');
        $.ajaxModal('#projectCategoryModal', url);
    });

});
</script>
@endpush