@extends('layouts.app')

@section('content')
<div class="flex-1 space-y-6">
    <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>
        <a href="{{ route('permission.index') }}" class="hover:text-blue-600 cursor-pointer">Danh sách quyền</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Chỉnh sửa quyền</span>
    </div>
    <h1 class="text-2xl sm:text-3xl font-bold text-slate-900 mb-4 sm:mb-6">Thông tin quyền</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 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'))
        <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

    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4 sm:p-6">
        <form action="{{ route('permission.update', ['id' => $permission->id]) }}" id="form_permission_info" method="post">
            @csrf
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Name <span class="text-red-500">(*)</span></label>
                    <input type="text" name="permission_name" value="{{ $permission->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" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Route Name <span class="text-red-500">(*)</span></label>
                    <input type="text" name="permission_route_name" value="{{ $permission->route_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" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Action <span class="text-red-500">(*)</span></label>
                    <input type="text" name="permission_action" value="{{ $permission->action }}" 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" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Method <span class="text-red-500">(*)</span></label>
                    <input type="text" name="permission_method" value="{{ $permission->method }}" 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" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Mô tả</label>
                    <textarea id="permission_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="permission_description" placeholder="Nhập mô tả" rows="3">{{ $permission->description }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Roles</label>
                    <select name="permission_roleIds[]" id="permission_roleIds" multiple 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">
                        @foreach($roles as $role)
                            <option value="{{ $role->id }}" {{ in_array($role->id, $selectedRoleIds) ? 'selected' : '' }}>{{ $role->name }}</option>
                        @endforeach
                    </select>
                </div>
                <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">
                        <i data-lucide="save" class="w-4 h-4 inline-block mr-1"></i>
                        Lưu
                    </button>
                    <a href="{{ route('permission.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) {
        var $n = $('.message-class'); var $c = $('#content_message');
        var $ok = $('.notification-icon-success'); var $err = $('.notification-icon-error');
        var $box = $n.find('.notification-v2');
        $c.text(message);
        if (type === 'success') { $ok.removeClass('hidden'); $err.addClass('hidden'); $box.removeClass('border-red-500').addClass('border-green-500'); }
        else { $err.removeClass('hidden'); $ok.addClass('hidden'); $box.removeClass('border-green-500').addClass('border-red-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'); });

    $('#permission_roleIds').select2({
        placeholder: "-- Chọn vai trò --",
        allowClear: true,
        tags: true,
        width: '100%'
    });
</script>
@endsection