@extends('layouts.app')

@php
    $pageTitle = 'Change Password';
@endphp

@section('content')
<div class="row justify-content-center">
    <div class="col-12 col-md-8 col-lg-5 col-xl-4">
        <div class="card content-card">
            <div class="card-body p-3">
                <div class="d-flex align-items-center gap-2 {{ $isFirstLogin ? 'mb-1' : 'mb-3' }}">
                    <i class="bi bi-key text-primary"></i>
                    <h6 class="fw-bold mb-0">
                        {{ $isFirstLogin ? 'Set a new password to continue' : 'Change password' }}
                    </h6>
                </div>
                @if ($isFirstLogin)
                    <p class="text-muted small mb-3">You are using a temporary password. Choose your own before viewing schedules.</p>
                @endif

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

                    <div class="mb-2">
                        <label class="form-label" for="currentPassword">{{ $isFirstLogin ? 'Temporary password' : 'Current password' }}</label>
                        <div class="password-field">
                            <input type="password" name="current_password" id="currentPassword"
                                   class="form-control form-control-sm @error('current_password') is-invalid @enderror"
                                   autocomplete="current-password" autofocus required>
                            <button type="button" class="password-toggle" aria-label="Show password" tabindex="-1"><i class="bi bi-eye"></i></button>
                            @error('current_password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-2">
                        <label class="form-label" for="newPassword">New password</label>
                        <div class="password-field">
                            <input type="password" name="password" id="newPassword"
                                   class="form-control form-control-sm @error('password') is-invalid @enderror"
                                   placeholder="8+ chars, upper & lower case, number, symbol"
                                   autocomplete="new-password" required>
                            <button type="button" class="password-toggle" aria-label="Show password" tabindex="-1"><i class="bi bi-eye"></i></button>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="newPasswordConfirmation">Confirm new password</label>
                        <div class="password-field">
                            <input type="password" name="password_confirmation" id="newPasswordConfirmation"
                                   class="form-control form-control-sm" autocomplete="new-password" required>
                            <button type="button" class="password-toggle" aria-label="Show password" tabindex="-1"><i class="bi bi-eye"></i></button>
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary btn-sm">Save password</button>
                        @unless ($isFirstLogin)
                            <a href="{{ route('teacher.schedules.index') }}" class="btn btn-outline-secondary btn-sm">Cancel</a>
                        @endunless
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection