@props([
    'id' => 'profileModal',
    'title' => 'Thông Tin Cá Nhân',
])

<x-ui.modals
    type="form-modal"
    :id="$id"
    :title="$title"
    size="md"
    formId="profileForm"
    submitLabel="Lưu thay đổi"
>
    <form id="profileForm" class="modal-form">
        @csrf
        
        <div class="modal-form-grid">
            <!-- Cột trái -->
            <div>
                <x-form.field name="name" label="Họ và tên" required="true">
                    <x-ui.forms type="input" name="name" placeholder="Nhập họ và tên" required="true" />
                </x-form.field>

                <x-form.field name="display_name" label="Tên hiển thị">
                    <x-ui.forms type="input" name="display_name" placeholder="Tên sẽ hiển thị trên sidebar" />
                </x-form.field>

                <div class="form-group">
                    <p class="text-xs text-gray-600 leading-relaxed">
                        <strong>Vai trò:</strong> 
                        <span x-text="roleLabel()" class="font-semibold text-primary-600"></span>
                    </p>
                </div>
            </div>

            <!-- Cột phải -->
            <div>
                <x-form.field name="email" label="Email">
                    <x-ui.forms type="input" typeInput="email" name="email" disabled="true" />
                    <p class="text-xs text-gray-400 mt-1">Email không thể thay đổi</p>
                </x-form.field>

                <div class="form-group">
                    <p class="text-xs text-gray-600 leading-relaxed">
                        <strong>Ngày tham gia:</strong>
                        <span x-text="formatDate(document.getElementById('app-layout')?.dataset?.userCreatedAt || '')" class="text-gray-600"></span>
                    </p>
                </div>
            </div>

            <div class="full-width">
                <div class="form-section">
                    <h3>Đổi mật khẩu</h3>
                    <div class="form-row two-col">
                        <x-form.field name="current_password" label="Mật khẩu hiện tại">
                            <x-ui.forms type="input" typeInput="password" name="current_password" placeholder="Nhập mật khẩu hiện tại" />
                        </x-form.field>
                        <x-form.field name="password" label="Mật khẩu mới">
                            <x-ui.forms type="input" typeInput="password" name="password" placeholder="Nhập mật khẩu mới" />
                        </x-form.field>
                    </div>
                    <div class="form-row">
                        <x-form.field name="password_confirmation" label="Xác nhận mật khẩu">
                            <x-ui.forms type="input" typeInput="password" name="password_confirmation" placeholder="Nhập lại mật khẩu mới" />
                        </x-form.field>
                    </div>
                </div>
            </div>
        </div>
    </form>
</x-ui.modals>