@extends('layouts.opac')

@section('title', 'Change Password › My Library Account')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('opac.account') }}">My Account</a>
    <span class="sep">›</span>
    <span>Change Password</span>
@endsection

@section('sidebar')
    <div class="sidebar-section">
        <div class="sidebar-title">My Account Menu</div>
        <div class="sidebar-links">
            <a href="{{ route('opac.account') }}">📊 Account Summary</a>
            <a href="{{ route('opac.holds') }}">📋 Holds & Reserves</a>
            <a href="{{ route('opac.history') }}">📖 Reading History</a>
            <a href="{{ route('opac.fines') }}">💳 Fines & Charges</a>
            <a href="{{ route('opac.account.password') }}" style="font-weight:bold; color:var(--blue);">🔑 Change Password</a>
        </div>
    </div>
@endsection

@section('content')
<div style="width:100%; display:flex; flex-direction:column;">
    <div class="checkout-panel" style="padding:20px;">
        <h3 style="margin-top:0; color:#1b4880; font-size:16px;">🔑 Change Account Password</h3>
        <p style="font-size:12.5px; color:#555; margin-bottom:16px;">
            Update your library account password below for <strong>{{ $patron->firstname }} {{ $patron->surname }}</strong> (Card: <code>{{ $patron->cardnumber }}</code>).
        </p>

        @if ($errors->any())
            <div style="background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; padding:10px; border-radius:3px; font-size:12.5px; margin-bottom:16px;">
                <ul style="margin:0; padding-left:16px;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('opac.account.password.process') }}" method="POST" style="max-width:420px;">
            @csrf
            
            <div style="margin-bottom:12px;">
                <label style="display:block; font-size:12px; font-weight:bold; color:#444; margin-bottom:4px;">Current Password <span style="color:red;">*</span>:</label>
                <input class="form-input" name="current_password" type="password" required placeholder="Enter current password">
            </div>

            <div style="margin-bottom:12px;">
                <label style="display:block; font-size:12px; font-weight:bold; color:#444; margin-bottom:4px;">New Password <span style="color:red;">*</span>:</label>
                <input class="form-input" name="password" type="password" required placeholder="At least 6 characters">
            </div>

            <div style="margin-bottom:16px;">
                <label style="display:block; font-size:12px; font-weight:bold; color:#444; margin-bottom:4px;">Confirm New Password <span style="color:red;">*</span>:</label>
                <input class="form-input" name="password_confirmation" type="password" required placeholder="Repeat new password">
            </div>

            <div style="display:flex; gap:8px;">
                <button type="submit" class="form-btn primary" style="padding:8px 18px; font-size:13px; font-weight:bold;">Update Password</button>
                <a href="{{ route('opac.account') }}" class="form-btn" style="padding:8px 14px; font-size:13px;">Cancel</a>
            </div>
        </form>
    </div>
</div>
@endsection