@extends('layouts.app')

@section('content')
<main class="main-content" style="background-color: #fff; padding: 0 20px 30px;">

    <div class="header" style="display:flex; align-items:center; gap:15px; padding:15px 0;">
        <a href="{{ route('profile.index') }}"><i class="fas fa-arrow-left" style="font-size:18px; color:#333;"></i></a>
        <h3 style="margin:0; font-size:18px; font-weight:600;">Ganti Password</h3>
    </div>

    @if(session('error'))
        <div style="background:#f8d7da; color:#721c24; padding:12px; border-radius:10px; margin-bottom:15px; font-size:13px;">
            {{ session('error') }}
        </div>
    @endif

    <form action="{{ route('profile.password.update') }}" method="POST">
        @csrf
        @method('PUT')

        <div style="display:flex; flex-direction:column; gap:12px;">
            <div>
                <label style="font-size:12px; color:#64748b; font-weight:500;">Password Saat Ini</label>
                <input type="password" name="current_password" class="edit-input" required>
            </div>
            <div>
                <label style="font-size:12px; color:#64748b; font-weight:500;">Password Baru</label>
                <input type="password" name="new_password" class="edit-input" required>
            </div>
            <div>
                <label style="font-size:12px; color:#64748b; font-weight:500;">Konfirmasi Password Baru</label>
                <input type="password" name="new_password_confirmation" class="edit-input" required>
            </div>
        </div>

        <button type="submit" style="width:100%; padding:14px; background:#00529c; color:white; border:none; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; margin-top:20px; display:flex; align-items:center; justify-content:center; gap:8px;">
            <i class="fas fa-save"></i> Simpan Password Baru
        </button>
    </form>

</main>

<style>
    .edit-input {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 14px;
        width: 100%;
        margin-top: 4px;
        background: #f8fafc;
        box-sizing: border-box;
    }
</style>
@endsection