@extends(config('role.layout', 'layouts.app'))

@section('content')
<div class="flex-1 space-y-6">
    <!-- Header -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ url('/') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <a href="{{ route(config('role.routes.as') . 'index') }}" class="hover:text-blue-600 cursor-pointer">Danh sách vai trò</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Thông tin vai trò</span>
    </div>
    <h1 class="text-2xl sm:text-3xl font-bold text-slate-900 mb-4 sm:mb-6">Thông tin vai trò</h1>

    <!-- Message Notification V2 -->
    <div class="message-class hidden fixed top-4 right-2 sm:right-4 left-2 sm:left-auto z-50 max-w-md w-auto sm:w-full">
        <div class="notification-v2 bg-white rounded-lg shadow-xl border-l-4 p-3 sm:p-4 flex items-start gap-2 sm:gap-3 animate-slide-in">
            <div class="notification-icon flex-shrink-0 mt-0.5">
                <i data-lucide="check-circle" class="w-6 h-6 text-green-500 notification-icon-success hidden"></i>
                <i data-lucide="x-circle" class="w-6 h-6 text-red-500 notification-icon-error hidden"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div id="content_message" class="text-sm font-medium text-slate-800"></div>
            </div>
            <button type="button" class="notification-close flex-shrink-0 text-slate-400 hover:text-slate-600 transition-colors" aria-label="Close">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
    </div>

    @if(session('success-v2') || session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showNotificationV2('success', '{{ session('success-v2') ?? session('success') }}');
            });
        </script>
    @endif

    @if(session('error-v2') || session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showNotificationV2('error', '{{ session('error-v2') ?? session('error') }}');
            });
        </script>
    @endif

    <!-- Form -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4 sm:p-6">
        <form action="{{ route(config('role.routes.as') . 'update', ['id' => $role->id]) }}" id="form_role_info" method="post">
            @csrf
            <div class="space-y-6">
                <!-- Thông tin vai trò -->
                <div>
                    <h3 class="text-base sm:text-lg font-semibold text-slate-900 mb-3 sm:mb-4">Thông tin vai trò</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Tên vai trò <span class="text-red-500">(*)</span></label>
                            <input type="text" name="name" value="{{ old('name', $role->name) }}" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" placeholder="Nhập tên vai trò" required>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Tên ngắn (Mã định danh)</label>
                            <input type="text" name="short_name" value="{{ old('short_name', $role->short_name) }}" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" placeholder="VD: teacher, student, manager">
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Mô tả</label>
                            <textarea id="description" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" name="description" placeholder="Nhập mô tả cho vai trò" rows="3">{{ old('description', $role->description) }}</textarea>
                        </div>
                    </div>
                </div>

                <!-- Phân quyền (Route Permissions) -->
                <div>
                    <h3 class="text-base sm:text-lg font-semibold text-slate-900 mb-3 sm:mb-4">Phân quyền chức năng</h3>
                    <div class="permission-selector-wrapper">
                        <div class="mb-4">
                            <input type="text" id="permission_search" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" placeholder="Tìm kiếm route chức năng...">
                        </div>
                        <div class="mb-4 flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3">
                            <button type="button" class="w-full sm:w-auto px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors" id="select_all_permissions">Chọn tất cả</button>
                            <button type="button" class="w-full sm:w-auto px-4 py-2 bg-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-300 transition-colors" id="deselect_all_permissions">Bỏ chọn tất cả</button>
                            <span class="text-sm text-slate-600 text-center sm:text-left"><strong id="selected_count">0</strong> quyền đã chọn</span>
                        </div>
                        <div class="permission-groups border border-slate-200 rounded-lg p-4 bg-white" style="max-height: 500px; overflow-y: auto;">
                            @foreach($routesConfig as $groupKey => $group)
                                <div class="permission-group mb-3" data-group="{{ $groupKey }}">
                                    <div class="permission-group-header flex items-center justify-between p-3 bg-slate-50 rounded-lg cursor-pointer hover:bg-slate-100 transition-colors" data-group-toggle="{{ $groupKey }}">
                                        <div class="flex items-center gap-2">
                                            <i data-lucide="chevron-down" class="w-4 h-4 text-slate-600 group-chevron-icon" data-group="{{ $groupKey }}"></i>
                                            <strong class="text-slate-900">{{ $group['label'] }}</strong>
                                            <span class="px-2 py-0.5 bg-slate-200 text-slate-700 rounded text-xs group-count" data-group="{{ $groupKey }}">0/{{ count($group['items'] ?? []) }}</span>
                                        </div>
                                        <button type="button" class="px-3 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded hover:bg-blue-100 transition-colors select-group-btn" data-group="{{ $groupKey }}" onclick="event.stopPropagation();">Chọn nhóm</button>
                                    </div>
                                    <div class="mt-2 group-content" id="group_{{ $groupKey }}" data-group="{{ $groupKey }}">
                                        <div class="permission-items pl-6 space-y-2">
                                            @foreach($group['items'] ?? [] as $routeName => $routeConfig)
                                                <div class="permission-item flex items-start gap-2 py-1" data-route="{{ $routeName }}" data-group="{{ $groupKey }}" data-label="{{ $routeConfig['label'] }}" data-method="{{ $routeConfig['method'] ?? 'GET' }}">
                                                    <input class="mt-1 permission-checkbox" type="checkbox" name="permission_route_name[]" 
                                                        value="{{ $routeName }}" 
                                                        id="route_{{ $groupKey }}_{{ $loop->index }}"
                                                        data-method="{{ $routeConfig['method'] ?? 'GET' }}" 
                                                        data-action="{{ $routeConfig['action'] ?? 'index' }}"
                                                        {{ in_array($routeName, $selectedRouteNames ?? []) ? 'checked' : '' }}>
                                                    <label class="flex-1 cursor-pointer text-sm text-slate-700" for="route_{{ $groupKey }}_{{ $loop->index }}">
                                                        <span class="route-label-text font-medium">{{ $routeConfig['label'] }}</span>
                                                        <span class="text-slate-500 ml-2 text-xs italic">({{ $routeName }})</span>
                                                        <span class="ml-2 px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs">{{ $routeConfig['method'] ?? 'GET' }}</span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <p class="mt-3 text-xs text-slate-500">Chọn các quyền để gán cho vai trò này. Bạn có thể tìm kiếm, chọn theo nhóm hoặc chọn tất cả.</p>
                    </div>
                </div>

                <!-- Buttons -->
                <div class="flex flex-col sm:flex-row justify-end gap-2 sm:gap-3 pt-4 border-t border-slate-200">
                    <button type="submit" id="btn-save" class="w-full sm:w-auto px-6 py-2 bg-blue-600 text-white !rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm">
                        <i data-lucide="save" class="w-4 h-4 inline-block mr-1"></i>
                        Lưu
                    </button>
                    <a href="{{ route(config('role.routes.as') . 'index') }}" id="btn-cancel" class="w-full sm:w-auto px-6 py-2 bg-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-300 transition-colors text-center">
                        <i data-lucide="x" class="w-4 h-4 inline-block mr-1"></i>
                        Huỷ
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

<input type="hidden" id="currentUserEmail" value="{{ $currentEmail }}">
@endsection

@section('scripts')
<script>
    function showNotificationV2(type, message) {
        const $notification = $('.message-class');
        const $content = $('#content_message');
        const $iconSuccess = $('.notification-icon-success');
        const $iconError = $('.notification-icon-error');
        const $notificationBox = $notification.find('.notification-v2');

        $content.text(message);

        if (type === 'success') {
            $iconSuccess.removeClass('hidden');
            $iconError.addClass('hidden');
            $notificationBox.removeClass('border-red-500').addClass('border-green-500');
        } else {
            $iconError.removeClass('hidden');
            $iconSuccess.addClass('hidden');
            $notificationBox.removeClass('border-green-500').addClass('border-red-500');
        }

        $notification.removeClass('hidden');

        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }

        setTimeout(function() {
            hideNotificationV2();
        }, 5000);
    }

    function hideNotificationV2() {
        $('.message-class').addClass('hidden');
    }

    $(document).on('click', '.notification-close', function() {
        hideNotificationV2();
    });

    $(document).ready(function() {
        function updateSelectedCount() {
            const selected = $('.permission-checkbox:checked').length;
            $('#selected_count').text(selected);

            $('.permission-group').each(function() {
                const groupKey = $(this).data('group');
                const groupCheckboxes = $(this).find('.permission-checkbox');
                const groupCount = groupCheckboxes.filter(':checked').length;
                const totalInGroup = groupCheckboxes.length;
                $(this).find('.group-count').text(groupCount + '/' + totalInGroup);
            });
        }

        $('#permission_search').on('keyup', function() {
            const searchTerm = $(this).val().trim();

            if (searchTerm === '') {
                $('.permission-item').removeClass('hidden');
                $('.permission-group').removeClass('hidden');
                return;
            }

            const normalizedSearchTerm = normalizeVietnamese(searchTerm.toLowerCase());

            $('.permission-item').each(function() {
                const routeLabel = $(this).data('label') || '';
                const routeMethod = $(this).data('method') || '';
                const routeName = ($(this).data('route') || '').toLowerCase();

                const normalizedLabel = normalizeVietnamese(routeLabel.toLowerCase());
                const normalizedMethod = normalizeVietnamese(routeMethod.toLowerCase());
                const normalizedRouteName = normalizeVietnamese(routeName);

                if (normalizedLabel.includes(normalizedSearchTerm) || normalizedMethod.includes(normalizedSearchTerm) || normalizedRouteName.includes(normalizedSearchTerm)) {
                    $(this).removeClass('hidden');
                } else {
                    $(this).addClass('hidden');
                }
            });

            $('.permission-group').each(function() {
                const visibleItems = $(this).find('.permission-item').not('.hidden').length;
                if (visibleItems === 0) {
                    $(this).addClass('hidden');
                } else {
                    $(this).removeClass('hidden');
                }
            });
        });

        function normalizeVietnamese(str) {
            return str
                .normalize('NFD')
                .replace(/[\u0300-\u036f]/g, '')
                .replace(/đ/g, 'd')
                .replace(/Đ/g, 'D');
        }

        $('#select_all_permissions').on('click', function() {
            $('.permission-checkbox').prop('checked', true);
            updateSelectedCount();
        });

        $('#deselect_all_permissions').on('click', function() {
            $('.permission-checkbox').prop('checked', false);
            updateSelectedCount();
        });

        $(document).on('change', '.permission-checkbox', function() {
            updateSelectedCount();
        });

        $('.permission-group-header').on('click', function(e) {
            if ($(e.target).closest('.select-group-btn').length) {
                return;
            }
            const groupKey = $(this).data('group-toggle');
            const groupContent = $('#group_' + groupKey);
            const icon = $('.group-chevron-icon[data-group="' + groupKey + '"]');

            if (groupContent.hasClass('hidden')) {
                groupContent.removeClass('hidden');
                icon.attr('data-lucide', 'chevron-down');
            } else {
                groupContent.addClass('hidden');
                icon.attr('data-lucide', 'chevron-right');
            }

            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        });

        $('.select-group-btn').on('click', function(e) {
            e.stopPropagation();
            const groupKey = $(this).data('group');
            const group = $('.permission-group[data-group="' + groupKey + '"]');
            const checkboxes = group.find('.permission-checkbox');
            const allChecked = checkboxes.length === checkboxes.filter(':checked').length;

            if (allChecked) {
                checkboxes.prop('checked', false);
                $(this).text('Chọn nhóm');
            } else {
                checkboxes.prop('checked', true);
                $(this).text('Bỏ chọn nhóm');
            }
            updateSelectedCount();
        });

        function updateGroupButtons() {
            $('.select-group-btn').each(function() {
                const groupKey = $(this).data('group');
                const group = $('.permission-group[data-group="' + groupKey + '"]');
                const checkboxes = group.find('.permission-checkbox');
                const allChecked = checkboxes.length === checkboxes.filter(':checked').length;
                $(this).text(allChecked ? 'Bỏ chọn nhóm' : 'Chọn nhóm');
            });
        }

        updateSelectedCount();
        updateGroupButtons();

        $(document).on('change', '.permission-checkbox', function() {
            updateGroupButtons();
        });
    });
</script>
@endsection