@extends('tenant.layouts.app')

@section('title', $pageTitle ?? tenant_page_title('정보수정', $tenantSiteSettings))
@section('header', '정보수정')

@section('content')
    <div class="mx-auto max-w-4xl space-y-6">
        @if (session('status'))
            <x-ui.alert variant="success" title="안내">
                {{ session('status') }}
            </x-ui.alert>
        @endif

        @if ($errors->any())
            <x-ui.alert variant="danger" title="입력 오류">
                <ul class="m-0 list-disc space-y-1 pl-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </x-ui.alert>
        @endif

        <div class="grid gap-4 lg:grid-cols-[minmax(0,1.3fr)_minmax(280px,0.7fr)]">
            <x-ui.card padded class="space-y-5 border border-muted bg-card shadow-sm">
                <div class="space-y-2">
                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">Account</div>
                    <h1 class="text-2xl font-extrabold tracking-[-0.05em] c-main">내 정보 수정</h1>
                    <p class="text-sm leading-6 c-muted">
                        이름, 이메일, 비밀번호를 변경할 수 있습니다.
                    </p>
                </div>

                <form method="POST" action="{{ tenant_url(null, 'user') }}" class="space-y-4">
                    @csrf
                    @method('PUT')

                    <div class="grid gap-4 md:grid-cols-2">
                        <x-ui.input
                            floating
                            id="name"
                            name="name"
                            type="text"
                            label="이름"
                            autocomplete="name"
                            :value="old('name', $user?->name)"
                            :error="$errors->first('name')"
                            required
                        />

                        <x-ui.input
                            floating
                            id="email"
                            name="email"
                            type="email"
                            label="이메일"
                            autocomplete="email"
                            :value="old('email', $user?->email)"
                            :error="$errors->first('email')"
                            required
                        />
                    </div>

                    <div class="rounded-[var(--radius-xl)] border border-muted bg-surface p-4">
                        <div class="space-y-1">
                            <div class="text-sm font-extrabold tracking-[-0.03em] c-main">비밀번호 변경</div>
                            <p class="text-xs leading-5 c-muted">
                                비밀번호를 바꾸려면 현재 비밀번호를 함께 입력하세요. 비워두면 변경되지 않습니다.
                            </p>
                        </div>

                        <div class="mt-4 grid gap-4">
                            <x-ui.input
                                floating
                                id="current_password"
                                name="current_password"
                                type="password"
                                label="현재 비밀번호"
                                autocomplete="current-password"
                                :error="$errors->first('current_password')"
                            />

                            <div class="grid gap-4 md:grid-cols-2">
                                <x-ui.input
                                    floating
                                    id="password"
                                    name="password"
                                    type="password"
                                    label="새 비밀번호"
                                    autocomplete="new-password"
                                    :error="$errors->first('password')"
                                />

                                <x-ui.input
                                    floating
                                    id="password_confirmation"
                                    name="password_confirmation"
                                    type="password"
                                    label="새 비밀번호 확인"
                                    autocomplete="new-password"
                                />
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-wrap items-center gap-3 pt-2">
                        <x-ui.button type="submit" variant="primary" size="md">
                            저장하기
                        </x-ui.button>

                        <x-ui.button href="{{ tenant_url(null, 'user') }}" variant="ghost" size="md">
                            돌아가기
                        </x-ui.button>
                    </div>
                </form>
            </x-ui.card>

            <x-ui.card padded class="space-y-4 border border-muted bg-card shadow-sm">
                <div class="space-y-2">
                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">Profile</div>
                    <h2 class="text-xl font-extrabold tracking-[-0.04em] c-main">현재 계정</h2>
                </div>

                <div class="space-y-3">
                    <div class="flex items-center justify-between gap-3 rounded-2xl border border-muted bg-surface px-4 py-3">
                        <span class="text-sm c-muted">이름</span>
                        <span class="text-sm font-semibold c-main">{{ $user?->name ?? '-' }}</span>
                    </div>

                    <div class="flex items-center justify-between gap-3 rounded-2xl border border-muted bg-surface px-4 py-3">
                        <span class="text-sm c-muted">이메일</span>
                        <span class="break-all text-right text-sm font-semibold c-main">{{ $user?->email ?? '-' }}</span>
                    </div>

                    <div class="flex items-center justify-between gap-3 rounded-2xl border border-muted bg-surface px-4 py-3">
                        <span class="text-sm c-muted">역할</span>
                        <span class="text-sm font-semibold c-main">{{ $user?->role ?? '-' }}</span>
                    </div>
                </div>

                <div class="rounded-[var(--radius-xl)] border border-muted bg-base p-4">
                    <div class="text-sm font-semibold c-main">팁</div>
                    <p class="mt-2 text-sm leading-6 c-muted">
                        수정 후에는 바로 현재 계정에 반영됩니다.
                    </p>
                </div>
            </x-ui.card>
        </div>
    </div>
@endsection