@extends('admin.layout')
@section('content')
<div class="content-card" style="max-width: 550px; margin: 0 auto;">

    <div style="text-align: center; margin-bottom: 30px;">
        <div style="width: 70px; height: 70px; background: linear-gradient(135deg,#0170B9,#4dd0e1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
            <i class="fas fa-lock" style="font-size: 28px; color: white;"></i>
        </div>
        <h3 style="margin: 0; border: none; padding: 0; font-size: 22px;">Change Password</h3>
        <p style="color: #888; margin: 8px 0 0; font-size: 14px;">Update your admin account password</p>
    </div>

    @if(session('success'))
        <div style="background:#e8f5e9; color:#2e7d32; padding:16px 18px; border-radius:8px; margin-bottom:20px; display:flex; align-items:center; gap:10px;">
            <i class="fas fa-check-circle" style="font-size:18px;"></i> {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div style="background:#fdecea; color:#d32f2f; padding:16px 18px; border-radius:8px; margin-bottom:20px;">
            <ul style="margin:0; padding-left:20px;">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

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

        <div style="margin-bottom: 20px;">
            <label style="display:block; font-weight:600; margin-bottom:8px; font-size:14px; color:#555;">
                <i class="fas fa-key" style="color:#0170B9; margin-right:6px;"></i> Current Password
            </label>
            <input type="password" name="current_password" required
                style="width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:8px; font-size:15px; font-family:inherit; box-sizing:border-box;"
                placeholder="Enter your current password">
        </div>

        <div style="margin-bottom: 20px;">
            <label style="display:block; font-weight:600; margin-bottom:8px; font-size:14px; color:#555;">
                <i class="fas fa-lock" style="color:#0170B9; margin-right:6px;"></i> New Password
            </label>
            <input type="password" name="new_password" required
                style="width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:8px; font-size:15px; font-family:inherit; box-sizing:border-box;"
                placeholder="Minimum 6 characters">
        </div>

        <div style="margin-bottom: 30px;">
            <label style="display:block; font-weight:600; margin-bottom:8px; font-size:14px; color:#555;">
                <i class="fas fa-lock" style="color:#0170B9; margin-right:6px;"></i> Confirm New Password
            </label>
            <input type="password" name="new_password_confirmation" required
                style="width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:8px; font-size:15px; font-family:inherit; box-sizing:border-box;"
                placeholder="Repeat new password">
        </div>

        <button type="submit"
            style="width:100%; background:linear-gradient(135deg,#0170B9,#0d47a1); color:white; padding:14px; border:none; border-radius:8px; font-size:16px; font-weight:700; cursor:pointer; letter-spacing:0.5px;">
            <i class="fas fa-save"></i> Update Password
        </button>
    </form>
</div>
@endsection