@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êm vai trò</span>
        </div>
        <h1 class="text-2xl sm:text-3xl font-bold text-slate-900 mb-4 sm:mb-6">Thêm 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') . 'store') }}" 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') }}"
                                    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') }}"
                                    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') }}</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' }}">
                                                        <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