@extends('layouts.app')

@section('title', 'ログイン情報の変更 - ' . config('app.name'))

@section('content')
    <header class="c-toolbar">
        <div class="c-toolbar__row">
            <h2 class="c-toolbar__title">ログイン情報の変更</h2>
            <div class="c-toolbar__actions">
                <a href="{{ route('settings.edit') }}" class="c-btn c-btn--ghost">設定へ戻る</a>
            </div>
        </div>
        <p class="c-toolbar__sub">
            現在のパスワードで本人確認のうえ、メールアドレスだけ・パスワードだけ・両方のいずれでも変更できます。空欄の項目は変更されません。
        </p>
    </header>

    <p class="c-form-intro" role="note">
        変更を保存すると<strong>自動的にログアウト</strong>し、新しい内容で再度ログインしてください。
    </p>

    <form
        method="post"
        action="{{ route('settings.account.update') }}"
        class="c-form c-form--sheet c-settings-account-form"
        novalidate
    >
        @csrf
        @method('PUT')

        <div class="c-field">
            <label class="c-field__label" for="current_password">現在のパスワード <span class="c-field__required">必須</span></label>
            <input
                type="password"
                id="current_password"
                name="current_password"
                required
                autocomplete="current-password"
                class="c-input @error('current_password') c-input--error @enderror"
            >
            @error('current_password')
                <p class="c-field__error">{{ $message }}</p>
            @enderror
        </div>

        <section class="c-account-change-block" aria-labelledby="account-email-heading">
            <h3 id="account-email-heading" class="c-account-change-block__title">メールアドレス</h3>
            <p class="c-account-change-block__help">変更しない場合は、以下を空欄のままにしてください。</p>
            <div class="c-field">
                <label class="c-field__label" for="new_email">新しいメールアドレス</label>
                <input
                    type="email"
                    id="new_email"
                    name="new_email"
                    value="{{ old('new_email') }}"
                    autocomplete="email"
                    class="c-input @error('new_email') c-input--error @enderror"
                >
                @error('new_email')
                    <p class="c-field__error">{{ $message }}</p>
                @enderror
            </div>
            <div class="c-field">
                <label class="c-field__label" for="new_email_confirmation">新しいメールアドレス（確認）</label>
                <input
                    type="email"
                    id="new_email_confirmation"
                    name="new_email_confirmation"
                    value="{{ old('new_email_confirmation') }}"
                    autocomplete="email"
                    class="c-input @error('new_email_confirmation') c-input--error @enderror"
                >
                @error('new_email_confirmation')
                    <p class="c-field__error">{{ $message }}</p>
                @enderror
            </div>
        </section>

        <section class="c-account-change-block" aria-labelledby="account-password-heading">
            <h3 id="account-password-heading" class="c-account-change-block__title">パスワード</h3>
            <p class="c-account-change-block__help">変更しない場合は、以下を空欄のままにしてください。</p>
            <div class="c-field">
                <label class="c-field__label" for="new_password">新しいパスワード</label>
                <input
                    type="password"
                    id="new_password"
                    name="new_password"
                    autocomplete="new-password"
                    class="c-input @error('new_password') c-input--error @enderror"
                >
                @error('new_password')
                    <p class="c-field__error">{{ $message }}</p>
                @enderror
            </div>
            <div class="c-field">
                <label class="c-field__label" for="new_password_confirmation">新しいパスワード（確認）</label>
                <input
                    type="password"
                    id="new_password_confirmation"
                    name="new_password_confirmation"
                    autocomplete="new-password"
                    class="c-input @error('new_password_confirmation') c-input--error @enderror"
                >
                @error('new_password_confirmation')
                    <p class="c-field__error">{{ $message }}</p>
                @enderror
            </div>
        </section>

        <div class="c-form-actions">
            <button type="submit" class="c-btn c-btn--primary">変更を保存して再ログイン</button>
            <a href="{{ route('settings.edit') }}" class="c-btn c-btn--ghost">キャンセル</a>
        </div>
    </form>
@endsection