@extends('layouts.app')

@section('content')
<div class="flex-1 space-y-6 overflow-x-hidden max-w-full">
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 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 cursor-pointer">Danh sách vai trò</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Danh sách quyền</span>
    </div>
    <h1 class="text-2xl md:text-3xl font-bold text-slate-900 mb-6">Danh sách quyền</h1>

    <div class="message-class hidden fixed top-4 right-4 z-50 max-w-md w-full">
        <div class="notification-v2 bg-white rounded-lg shadow-xl border-l-4 p-4 flex items-start 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'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showNotificationV2('success', '{{ addslashes(session('success')) }}');
            });
        </script>
    @endif

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

    <form action="{{ route('permission.index') }}" class="permission-index-form flex flex-wrap items-center gap-2 mb-4" method="get">
        <input type="text" name="permission_search" id="permission_search" placeholder="Nhập thông tin quyền" class="px-3 py-2 border border-slate-300 rounded-lg text-sm w-full max-w-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" value="{{ request('permission_search') }}">
        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">Tìm kiếm</button>
        <button type="button" class="btn-clear px-4 py-2 bg-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-300 transition-colors">Xóa tìm kiếm</button>
    </form>

    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
        <div class="bg-white rounded-lg px-4 py-2 shadow-sm border border-slate-200">
            <span class="text-sm">Tổng số quyền: <span class="font-semibold text-blue-600">{{ $totalPermissionsCount }}</span></span>
        </div>
        <a href="{{ route('permission.add') }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors inline-flex items-center">
            <i data-lucide="plus" class="w-4 h-4 mr-1"></i>
            Quyền
        </a>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full divide-y divide-slate-200">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-4 md:px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider whitespace-nowrap w-12">STT</th>
                        <th class="px-4 md:px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Name</th>
                        <th class="px-4 md:px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Route Name</th>
                        <th class="px-4 md:px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Action</th>
                        <th class="px-4 md:px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Method</th>
                        <th class="px-4 md:px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Roles</th>
                        <th class="px-4 md:px-6 py-3 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider w-28">Hành động</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-slate-200">
                    @foreach($permissions as $index => $permission)
                        <tr id="permission-{{ $permission->id }}" class="hover:bg-slate-50 transition-colors">
                            <td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm text-slate-700">{{ $index + 1 }}</td>
                            <td class="px-4 md:px-6 py-4 text-sm font-medium text-slate-900">{{ $permission->name }}</td>
                            <td class="px-4 md:px-6 py-4 text-sm text-slate-700">{{ $permission->route_name }}</td>
                            <td class="px-4 md:px-6 py-4 text-sm text-slate-700">{{ $permission->action }}</td>
                            <td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm text-slate-700">{{ $permission->method }}</td>
                            <td class="px-4 md:px-6 py-4 text-sm text-slate-700">
                                @if($permission->roles->isNotEmpty())
                                    {{ $permission->roles->pluck('name')->implode(', ') }}
                                @else
                                    <em class="text-slate-500">Chưa có vai trò</em>
                                @endif
                            </td>
                            <td class="px-4 md:px-6 py-4 whitespace-nowrap text-center">
                                <div class="flex items-center justify-center gap-1">
                                    <a href="{{ route('permission.edit', ['id' => $permission->id]) }}" title="Chỉnh sửa" class="inline-flex items-center justify-center w-8 h-8 text-green-600 hover:text-green-800 hover:bg-green-50 rounded-lg transition-colors">
                                        <i data-lucide="edit" class="w-4 h-4"></i>
                                    </a>
                                    <a href="javascript:void(0)" class="item-delete inline-flex items-center justify-center w-8 h-8 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors" data-permission-id="{{ $permission->id }}" data-permission-name="{{ $permission->name }}" onclick="showModalDeletePermission(this)" title="Xóa quyền">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if(method_exists($permissions, 'hasPages') && $permissions->hasPages())
            <div class="px-4 md:px-6 py-4 border-t border-slate-200 bg-slate-50">
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <div class="text-sm text-slate-600">
                        Hiển thị {{ $permissions->firstItem() ?? 0 }} - {{ $permissions->lastItem() ?? 0 }} trong tổng số {{ $permissions->total() }} kết quả
                    </div>
                    <div class="flex items-center gap-1">
                        @if($permissions->onFirstPage())
                            <span class="px-3 py-1.5 text-sm text-slate-400 bg-slate-100 rounded-lg cursor-not-allowed"><i data-lucide="chevron-left" class="w-4 h-4 inline"></i></span>
                        @else
                            <a href="{{ $permissions->appends(request()->all())->previousPageUrl() }}" class="px-3 py-1.5 text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50"><i data-lucide="chevron-left" class="w-4 h-4 inline"></i></a>
                        @endif
                        @if($permissions->hasMorePages())
                            <a href="{{ $permissions->appends(request()->all())->nextPageUrl() }}" class="px-3 py-1.5 text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50"><i data-lucide="chevron-right" class="w-4 h-4 inline"></i></a>
                        @else
                            <span class="px-3 py-1.5 text-sm text-slate-400 bg-slate-100 rounded-lg cursor-not-allowed"><i data-lucide="chevron-right" class="w-4 h-4 inline"></i></span>
                        @endif
                    </div>
                </div>
            </div>
        @elseif(method_exists($permissions, 'links'))
            <div class="px-4 md:px-6 py-4 border-t border-slate-200 bg-slate-50">
                {{ $permissions->links() }}
            </div>
        @endif
    </div>
</div>

<div id="deletePermissionModalV2" class="hidden fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-black bg-opacity-50" id="delete-permission-backdrop"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative rounded-lg bg-white shadow-xl w-full max-w-md">
            <div class="flex items-center justify-between px-4 md:px-6 py-4 border-b border-slate-200">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
                        <i data-lucide="alert-triangle" class="w-5 h-5 text-red-600"></i>
                    </div>
                    <h3 class="text-base md:text-lg font-semibold text-slate-900">Xóa quyền</h3>
                </div>
                <button type="button" class="text-slate-400 hover:text-slate-600" id="delete-permission-close">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <div class="px-4 md:px-6 py-6">
                <form action="{{ route('permission.delete') }}" id="deletePermissionForm" method="post">
                    @csrf
                    <input type="hidden" name="permission_id" id="permission_id">
                    <p class="text-sm text-slate-600 text-center">
                        Bạn có chắc chắn xoá "<b class="this_item_name font-semibold text-slate-900">test</b>" khỏi hệ thống?
                    </p>
                </form>
            </div>
            <div class="flex flex-col sm:flex-row justify-end gap-2 sm:gap-3 px-4 md:px-6 py-4 border-t border-slate-200 bg-slate-50">
                <button type="button" class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50" id="delete-permission-cancel">Hủy bỏ</button>
                <button type="button" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 btn-action-delete-permission">
                    <i data-lucide="trash-2" class="w-4 h-4 inline mr-1"></i>
                    Xoá
                </button>
            </div>
        </div>
    </div>
</div>

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

@section('scripts')
<script>
    function showNotificationV2(type, message) {
        var $notification = $('.message-class');
        var $content = $('#content_message');
        var $iconSuccess = $('.notification-icon-success');
        var $iconError = $('.notification-icon-error');
        var $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() { $('.message-class').addClass('hidden'); }, 5000);
    }
    $(document).on('click', '.notification-close', function() { $('.message-class').addClass('hidden'); });

    function showModalDeletePermission(button) {
        var permissionId = $(button).attr('data-permission-id');
        var permissionName = $(button).attr('data-permission-name');
        $('#deletePermissionModalV2 .this_item_name').text(permissionName);
        $('#deletePermissionModalV2 #permission_id').val(permissionId);
        $('#deletePermissionModalV2').removeClass('hidden');
    }
    $('#delete-permission-close, #delete-permission-cancel').on('click', function() {
        $('#deletePermissionModalV2').addClass('hidden');
    });
    $('.btn-action-delete-permission').on('click', function() {
        $('#deletePermissionForm').submit();
    });
    $('#delete-permission-backdrop').on('click', function() {
        $('#deletePermissionModalV2').addClass('hidden');
    });

    $('.btn-clear').on('click', function() {
        $('#permission_search').val('');
        $('.permission-index-form').submit();
    });
</script>
@endsection