@extends('layouts.app')

@section('content')
    <div class="flex-1 space-y-6 pb-20">
        <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
            <a href="{{ route('dashboard') }}" class="hover:text-blue-600 transition-colors cursor-pointer">Trang chủ</a>
            <i data-lucide="chevron-right" class="w-4 h-4"></i>
            <a href="{{ route('role.index') }}" class="hover:text-blue-600 transition-colors cursor-pointer">Danh sách vai trò</a>
            <i data-lucide="chevron-right" class="w-4 h-4"></i>
            <span class="font-medium text-slate-700">Thêm vai trò</span>
        </div>
        <h1 class="text-2xl sm:text-3xl font-bold text-slate-900 mb-4 sm:mb-6 tracking-tight">Thêm vai trò mới</h1>

        <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/90 backdrop-blur-md rounded-xl shadow-2xl border-l-4 p-4 flex items-start gap-3 animate-slide-in ring-1 ring-slate-900/5">
                <div class="notification-icon flex-shrink-0 mt-0.5">
                    <i data-lucide="check-circle" class="w-5 h-5 text-emerald-500 notification-icon-success hidden"></i>
                    <i data-lucide="x-circle" class="w-5 h-5 text-rose-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'))
        @endif
        @if(session('error'))
        @endif

        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 relative">
            <form action="{{ route('role.store') }}" id="form_role_info" method="post">
                @csrf

                <div class="p-4 sm:p-6 space-y-8">
                    <div>
                        <h3 class="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
                            <i data-lucide="info" class="w-5 h-5 text-slate-400"></i>
                            Thông tin chung
                        </h3>
                        <div class="space-y-5">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-1.5">Tên vai trò <span class="text-rose-500">*</span></label>
                                <input type="text" name="name" value="{{ old('name') }}"
                                    class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all"
                                    placeholder="Ví dụ: Quản trị viên, Biên tập viên..." required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-1.5">Mô tả</label>
                                <textarea id="description"
                                    class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all resize-y"
                                    name="description" placeholder="Nhập mô tả chi tiết quyền hạn của vai trò này"
                                    rows="3">{{ old('description') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="flex flex-col sm:flex-row sm:items-end justify-between mb-4 gap-4">
                            <h3 class="text-lg font-semibold text-slate-900 flex items-center gap-2">
                                <i data-lucide="shield" class="w-5 h-5 text-slate-400"></i>
                                Phân quyền hệ thống
                            </h3>
                            <span class="text-sm px-3 py-1 bg-slate-100 text-slate-600 rounded-full font-medium">Đã chọn: <strong id="selected_count" class="text-blue-600">0</strong></span>
                        </div>
                        
                        <div class="permission-selector-wrapper bg-slate-50 border border-slate-200 rounded-xl overflow-hidden">
                            <div class="p-4 border-b border-slate-200 bg-white">
                                <div class="relative mb-4">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i data-lucide="search" class="w-4 h-4 text-slate-400"></i>
                                    </div>
                                    <input type="text" id="permission_search"
                                        class="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all shadow-sm"
                                        placeholder="Tìm kiếm theo tên quyền, route name hoặc method (vd: user.index)...">
                                </div>
                                <div class="flex flex-wrap items-center gap-2">
                                    <button type="button" class="px-4 py-2 bg-slate-50 border border-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-100 hover:text-blue-600 transition-all flex items-center group shadow-sm" id="toggle_all_permissions" data-state="unselected">
                                        <i data-lucide="check-square" class="w-4 h-4 mr-2 group-hover:scale-110 transition-transform"></i>
                                        <span class="btn-text">Chọn tất cả</span>
                                    </button>
                                    
                                    <div class="w-px h-6 bg-slate-300 mx-1 hidden sm:block"></div>
                                    
                                    <button type="button" class="px-4 py-2 bg-white border border-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-all shadow-sm flex items-center" id="expand_all_groups">
                                        <i data-lucide="chevrons-down" class="w-4 h-4 mr-2 text-slate-400"></i> Mở rộng hết
                                    </button>
                                    <button type="button" class="px-4 py-2 bg-white border border-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-all shadow-sm flex items-center" id="collapse_all_groups">
                                        <i data-lucide="chevrons-up" class="w-4 h-4 mr-2 text-slate-400"></i> Thu gọn hết
                                    </button>
                                </div>
                            </div>

                            <div class="permission-groups p-4 bg-slate-50/50" style="max-height: 500px; overflow-y: auto;">
                                @foreach($routesConfig as $groupKey => $group)
                                    <div class="permission-group mb-5 last:mb-0 bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden" data-group="{{ $groupKey }}">
                                        
                                        <div class="permission-group-header flex items-center justify-between p-4 bg-slate-100 border-b border-slate-200 cursor-pointer hover:bg-slate-200/70 transition-colors" data-group-toggle="{{ $groupKey }}">
                                            <div class="flex items-center gap-3">
                                                <div class="bg-white p-1 rounded shadow-sm border border-slate-200">
                                                    <i data-lucide="chevron-down" class="w-4 h-4 text-slate-600 group-chevron-icon transition-transform" data-group="{{ $groupKey }}"></i>
                                                </div>
                                                <strong class="text-slate-900 text-base tracking-tight">{{ $group['label'] }}</strong>
                                                <span class="px-2.5 py-0.5 bg-white border border-slate-300 text-slate-600 rounded-md text-xs font-bold group-count shadow-sm" data-group="{{ $groupKey }}">0/{{ count($group['items']) }}</span>
                                            </div>
                                            <button type="button" class="px-3 py-1.5 text-xs font-semibold text-slate-600 bg-white border border-slate-300 rounded-md hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 transition-colors select-group-btn shadow-sm" data-group="{{ $groupKey }}" onclick="event.stopPropagation();">
                                                Chọn nhóm
                                            </button>
                                        </div>
                                        
                                        <div class="group-content p-3" id="group_{{ $groupKey }}" data-group="{{ $groupKey }}">
                                            <div class="permission-items space-y-1">
                                                @foreach($group['items'] as $routeName => $routeConfig)
                                                    @php
                                                        // Fix lỗi PHP bằng cách dùng Array thay vì match()
                                                        $colors = [
                                                            'GET' => 'bg-emerald-50 text-emerald-600 border-emerald-200',
                                                            'POST' => 'bg-blue-50 text-blue-600 border-blue-200',
                                                            'PUT' => 'bg-amber-50 text-amber-600 border-amber-200',
                                                            'PATCH' => 'bg-amber-50 text-amber-600 border-amber-200',
                                                            'DELETE' => 'bg-rose-50 text-rose-600 border-rose-200',
                                                        ];
                                                        $methodKey = strtoupper($routeConfig['method']);
                                                        $methodColor = $colors[$methodKey] ?? 'bg-slate-50 text-slate-600 border-slate-200';
                                                    @endphp
                                                    <label class="permission-item flex items-center gap-3 p-2.5 rounded-lg hover:bg-slate-50 transition-colors cursor-pointer group"
                                                        data-route="{{ $routeName }}" data-group="{{ $groupKey }}"
                                                        data-label="{{ $routeConfig['label'] }}" data-method="{{ $routeConfig['method'] }}">
                                                        
                                                        <div class="flex-shrink-0 flex items-center justify-center">
                                                            <input class="w-4 h-4 text-blue-600 bg-white border-slate-300 rounded focus:ring-blue-500 focus:ring-2 permission-checkbox transition-all" 
                                                                type="checkbox"
                                                                name="permission_route_name[]" value="{{ $routeName }}"
                                                                data-method="{{ $routeConfig['method'] }}"
                                                                data-action="{{ $routeConfig['action'] }}" {{ in_array($routeName, old('permission_route_name', [])) ? 'checked' : '' }}>
                                                        </div>
                                                        
                                                        <div class="flex-1 flex flex-col sm:flex-row sm:items-center justify-between gap-2 min-w-0">
                                                            <div class="truncate">
                                                                <span class="route-label-text text-sm font-medium text-slate-700 group-hover:text-blue-700 transition-colors">{{ $routeConfig['label'] }}</span>
                                                                <span class="text-slate-400 ml-2 text-xs font-mono hidden sm:inline-block">{{ $routeName }}</span>
                                                            </div>
                                                            <div class="flex-shrink-0">
                                                                <span class="px-2 py-1 {{ $methodColor }} border rounded-md text-[10px] font-bold uppercase tracking-wider">{{ $routeConfig['method'] }}</span>
                                                            </div>
                                                        </div>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="fixed bottom-0 right-0 left-0 lg:left-72 z-40 bg-white/80 backdrop-blur-md border-t border-slate-200 p-4 sm:px-6 flex justify-end gap-3 shadow-[0_-4px_10px_rgba(0,0,0,0.05)]">
                    <a href="{{ route('role.index') }}" id="btn-cancel" class="w-full sm:w-auto px-6 py-2.5 bg-white border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors text-center shadow-sm">
                        Huỷ bỏ
                    </a>
                    <button id="btn-save" class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 focus:ring-4 focus:ring-blue-500/20 transition-all shadow-sm shadow-blue-600/20 flex items-center justify-center">
                        <i data-lucide="plus" class="w-4 h-4 mr-2"></i>
                        Thêm mới
                    </button>
                </div>
            </form>
        </div>
    </div>

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

@section('scripts')
    <script>
        function showNotificationV2(type, message) {
            var $n = $('.message-class'), $c = $('#content_message');
            var $ok = $('.notification-icon-success'), $err = $('.notification-icon-error');
            var $box = $n.find('.notification-v2');
            $c.text(message);
            if (type === 'success') { $ok.removeClass('hidden'); $err.addClass('hidden'); $box.removeClass('ring-rose-500/20 border-l-rose-500').addClass('ring-emerald-500/20 border-l-emerald-500'); }
            else { $err.removeClass('hidden'); $ok.addClass('hidden'); $box.removeClass('ring-emerald-500/20 border-l-emerald-500').addClass('ring-rose-500/20 border-l-rose-500'); }
            $n.removeClass('hidden');
            if (typeof lucide !== 'undefined') lucide.createIcons();
            setTimeout(function () { $n.addClass('hidden'); }, 5000);
        }
        $(document).on('click', '.notification-close', function () { $('.message-class').addClass('hidden'); });

        $(document).ready(function () {
            if (typeof lucide !== 'undefined') lucide.createIcons();

            function updateSelectedCount() {
                var totalSelected = $('.permission-checkbox:checked').length;
                $('#selected_count').text(totalSelected);
                
                $('.permission-group').each(function () {
                    var groupCheckboxes = $(this).find('.permission-checkbox');
                    var groupCount = groupCheckboxes.filter(':checked').length;
                    var totalInGroup = groupCheckboxes.length;
                    var groupCountEl = $(this).find('.group-count');
                    
                    groupCountEl.text(groupCount + '/' + totalInGroup);
                    if(groupCount > 0) {
                        groupCountEl.removeClass('bg-white text-slate-600').addClass('bg-blue-100 text-blue-700 border-blue-200');
                    } else {
                        groupCountEl.removeClass('bg-blue-100 text-blue-700 border-blue-200').addClass('bg-white text-slate-600');
                    }
                });

                updateToggleAllButton(); // Gọi để đồng bộ nút Chọn Tất cả
            }

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

            // Logic tìm kiếm
            $('#permission_search').on('keyup', function () {
                var searchTerm = $(this).val().trim();
                if (searchTerm === '') {
                    $('.permission-item').removeClass('hidden');
                    $('.permission-group').removeClass('hidden');
                    return;
                }
                var normalizedSearchTerm = normalizeVietnamese(searchTerm.toLowerCase());
                
                $('.permission-item').each(function () {
                    var routeLabel = ($(this).data('label') || '').toLowerCase();
                    var routeMethod = ($(this).data('method') || '').toLowerCase();
                    var routeName = ($(this).data('route') || '').toLowerCase();

                    var nLabel = normalizeVietnamese(routeLabel);
                    var nMethod = normalizeVietnamese(routeMethod);
                    var nRoute = normalizeVietnamese(routeName);

                    if (nLabel.indexOf(normalizedSearchTerm) !== -1 || nMethod.indexOf(normalizedSearchTerm) !== -1 || nRoute.indexOf(normalizedSearchTerm) !== -1) {
                        $(this).removeClass('hidden');
                    } else {
                        $(this).addClass('hidden');
                    }
                });
                
                $('.permission-group').each(function () {
                    if ($(this).find('.permission-item').not('.hidden').length === 0) {
                        $(this).addClass('hidden');
                    } else {
                        $(this).removeClass('hidden');
                    }
                });
            });

            // Gộp 2 nút làm 1
            $('#toggle_all_permissions').on('click', function () {
                var state = $(this).attr('data-state');
                if (state === 'unselected') {
                    // Đổi sang trạng thái Đã chọn
                    $('.permission-checkbox').prop('checked', true);
                } else {
                    // Đổi sang trạng thái Bỏ chọn
                    $('.permission-checkbox').prop('checked', false);
                }
                updateSelectedCount();
                updateGroupButtons();
            });

            // Đồng bộ UI cho nút Chọn tất cả
            function updateToggleAllButton() {
                var total = $('.permission-checkbox').length;
                var checked = $('.permission-checkbox:checked').length;
                var $btn = $('#toggle_all_permissions');
                var $text = $btn.find('.btn-text');
                var $icon = $btn.find('i');

                if (total > 0 && checked === total) {
                    $btn.attr('data-state', 'selected');
                    $text.text('Bỏ chọn tất cả');
                    $icon.attr('data-lucide', 'square');
                    $btn.removeClass('bg-slate-50 text-slate-700 hover:text-blue-600').addClass('bg-rose-50 text-rose-600 border-rose-200 hover:bg-rose-100 hover:text-rose-700');
                } else {
                    $btn.attr('data-state', 'unselected');
                    $text.text('Chọn tất cả');
                    $icon.attr('data-lucide', 'check-square');
                    $btn.removeClass('bg-rose-50 text-rose-600 border-rose-200 hover:bg-rose-100 hover:text-rose-700').addClass('bg-slate-50 text-slate-700 hover:text-blue-600');
                }
                if (typeof lucide !== 'undefined') lucide.createIcons();
            }

            // Mở rộng tất cả
            $('#expand_all_groups').on('click', function() {
                $('.group-content').removeClass('hidden');
                $('.group-chevron-icon').css('transform', 'rotate(0deg)');
            });

            // Thu gọn tất cả
            $('#collapse_all_groups').on('click', function() {
                $('.group-content').addClass('hidden');
                $('.group-chevron-icon').css('transform', 'rotate(-90deg)');
            });

            // Đóng/Mở từng nhóm
            $('.permission-group-header').on('click', function (e) {
                if ($(e.target).closest('.select-group-btn').length) return;
                var groupKey = $(this).data('group-toggle');
                var groupContent = $('#group_' + groupKey);
                var icon = $('.group-chevron-icon[data-group="' + groupKey + '"]');
                
                if (groupContent.hasClass('hidden')) {
                    groupContent.removeClass('hidden');
                    icon.css('transform', 'rotate(0deg)');
                } else {
                    groupContent.addClass('hidden');
                    icon.css('transform', 'rotate(-90deg)');
                }
            });

            // Chọn nhóm
            $('.select-group-btn').on('click', function (e) {
                e.stopPropagation();
                var groupKey = $(this).data('group');
                var group = $('.permission-group[data-group="' + groupKey + '"]');
                var checkboxes = group.find('.permission-checkbox');
                var allChecked = checkboxes.length === checkboxes.filter(':checked').length;
                
                checkboxes.prop('checked', !allChecked);
                updateSelectedCount();
                updateGroupButtons();
            });

            function updateGroupButtons() {
                $('.select-group-btn').each(function () {
                    var groupKey = $(this).data('group');
                    var group = $('.permission-group[data-group="' + groupKey + '"]');
                    var checkboxes = group.find('.permission-checkbox');
                    var allChecked = checkboxes.length > 0 && checkboxes.length === checkboxes.filter(':checked').length;
                    
                    if (allChecked) {
                        $(this).text('Bỏ chọn nhóm')
                               .removeClass('text-slate-600 border-slate-300 hover:text-blue-600')
                               .addClass('text-rose-600 bg-rose-50 border-rose-300 hover:bg-rose-100');
                    } else {
                        $(this).text('Chọn nhóm')
                               .removeClass('text-rose-600 bg-rose-50 border-rose-300 hover:bg-rose-100')
                               .addClass('text-slate-600 border-slate-300 hover:text-blue-600 bg-white');
                    }
                });
            }

            // Sự kiện thay đổi Checkbox lẻ
            $(document).on('change', '.permission-checkbox', function () {
                updateSelectedCount();
                updateGroupButtons();
            });

            // Khởi tạo
            updateSelectedCount();
            updateGroupButtons();
        });
    </script>
@endsection