@extends('admin.layouts.app')

@section('title', '비밀번호 변경')
@section('page_title', '비밀번호 변경')
@section('page_desc', '현재 비밀번호 확인 후 변경')

@push('head')
    <style>
        /* password page only */
        .pw-wrap{max-width:560px;}
        .pw-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
        .pw-head__title{font-weight:900;font-size:16px;}
        .pw-head__desc{margin-top:4px;font-size:12px;}

        .lbtn{padding:8px 12px;font-size:13px;border-radius:12px;line-height:1.1;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
            border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:inherit;cursor:pointer;}
        .lbtn:hover{background:rgba(255,255,255,.10);text-decoration:none;}
        .lbtn--primary{background:rgba(59,130,246,.88);border-color:rgba(59,130,246,.95);color:#fff;}
        .lbtn--primary:hover{background:rgba(59,130,246,.98);}
        .lbtn--ghost{background:transparent;}
        .lbtn--wide{padding:10px 14px;font-weight:800;}

        .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;
            border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);}
        .pill--warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.12);}

        .hint{margin-top:10px;font-size:12px;line-height:1.6;}
        .divider{margin:14px 0;opacity:.15;}
        .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;}
    </style>
@endpush

@section('content')
    <section class="a-page">
        <article class="a-card pw-wrap" style="padding:16px;">
            <div class="pw-head">
                <div>
                    <div class="pw-head__title">비밀번호 변경</div>
                    <div class="pw-head__desc a-muted">변경 시 감사로그가 기록됩니다.</div>
                </div>
                <span class="pill pill--warn">보안</span>
            </div>

            <form method="POST"
                  action="{{ route('admin.me.password.update') }}"
                  class="a-form"
                  onsubmit="this.querySelector('button[type=submit]').disabled=true;">
                @csrf

                <div class="a-field">
                    <label class="a-label" for="current_password">현재 비밀번호</label>
                    <input class="a-input" id="current_password" name="current_password"
                           type="password" autocomplete="current-password" autofocus>
                    @error('current_password')<div class="a-error">{{ $message }}</div>@enderror
                </div>

                <div class="a-field">
                    <label class="a-label" for="password">새 비밀번호</label>
                    <input class="a-input" id="password" name="password"
                           type="password" autocomplete="new-password">
                    @error('password')<div class="a-error">{{ $message }}</div>@enderror
                    <div class="a-muted hint">* 영문/숫자/특수문자 조합 권장</div>
                </div>

                <div class="a-field">
                    <label class="a-label" for="password_confirmation">새 비밀번호 확인</label>
                    <input class="a-input" id="password_confirmation" name="password_confirmation"
                           type="password" autocomplete="new-password">
                </div>

                <hr class="divider">

                <div class="actions">
                    <button class="lbtn lbtn--primary lbtn--wide" type="submit">변경</button>
                    <a class="lbtn lbtn--ghost" href="{{ route('admin.me') }}">← 내 정보로</a>
                </div>

                <div class="a-muted hint">
                    * 비밀번호 변경 후 다음 로그인부터 새 비밀번호가 적용됩니다.<br>
                    * OTP/SMS 2FA와 별개로 비밀번호 자체는 주기적으로 변경하는 것을 권장합니다.
                </div>
            </form>
        </article>
    </section>
@endsection