@section('title', 'Change Password - BondaCare')

<div class="flex flex-col gap-6">
    <!-- Header -->
    <div class="text-center">
        <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full mb-4"
             style="background: linear-gradient(135deg, rgba(102, 2, 31, 0.1) 0%, rgba(216, 149, 177, 0.1) 100%); border: 2px solid rgba(102, 2, 31, 0.2);">
            <i class="fas fa-key text-3xl" style="color: var(--primary);"></i>
        </div>
        <h2 class="auth-title">Change Your Password</h2>
        <p class="auth-subtitle">You must change your password before continuing</p>
    </div>

    <!-- Success Message -->
    @if (session()->has('success'))
        <div class="success-message">
            {{ session('success') }}
        </div>
    @endif

    <!-- Warning Message -->
    @if(auth()->user()->must_change_password)
        <div style="background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); border: 2px solid #FCD34D; color: #92400E; padding: 1rem 1.25rem; border-radius: 14px; margin-bottom: 1rem; font-weight: 600; box-shadow: 0 2px 8px rgba(252, 211, 77, 0.15); display: flex; align-items: center; gap: 0.75rem;">
            <i class="fas fa-exclamation-triangle" style="color: #F59E0B; font-size: 1.25rem;"></i>
            <span>For security reasons, you must change your default password on first login.</span>
        </div>
    @endif

    <!-- Form -->
    <form wire:submit.prevent="changePassword" class="flex flex-col gap-6">
        <!-- Current Password -->
        <div class="form-group">
            <label for="currentPassword" class="form-label">
                <i class="fas fa-lock mr-2" style="color: var(--primary);"></i>Current Password
            </label>
            <input type="password"
                   wire:model="currentPassword"
                   id="currentPassword"
                   class="form-input"
                   placeholder="Enter your current password"
                   required>
            @error('currentPassword')
                <span class="error-message">{{ $message }}</span>
            @enderror
        </div>

        <!-- New Password -->
        <div class="form-group">
            <label for="newPassword" class="form-label">
                <i class="fas fa-key mr-2" style="color: var(--primary);"></i>New Password
            </label>
            <input type="password"
                   wire:model="newPassword"
                   id="newPassword"
                   class="form-input"
                   placeholder="Enter your new password"
                   required>
            @error('newPassword')
                <span class="error-message">{{ $message }}</span>
            @enderror
        </div>

        <!-- Confirm New Password -->
        <div class="form-group">
            <label for="confirmPassword" class="form-label">
                <i class="fas fa-check-circle mr-2" style="color: var(--primary);"></i>Confirm New Password
            </label>
            <input type="password"
                   wire:model="confirmPassword"
                   id="confirmPassword"
                   class="form-input"
                   placeholder="Confirm your new password"
                   required>
            @error('confirmPassword')
                <span class="error-message">{{ $message }}</span>
            @enderror
        </div>

        <!-- Password Requirements -->
        <div style="background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%); border: 2px solid #BAE6FD; border-radius: 14px; padding: 1.25rem; margin-bottom: 0.5rem;">
            <h4 class="text-sm font-bold mb-3" style="color: #0C4A6E; display: flex; align-items: center; gap: 0.5rem;">
                <i class="fas fa-shield-alt" style="color: #0EA5E9;"></i>
                Password Requirements
            </h4>
            <ul class="text-sm space-y-2" style="color: #075985;">
                <li style="display: flex; align-items: center; gap: 0.5rem;">
                    <i class="fas fa-check-circle" style="color: #0EA5E9; font-size: 0.875rem;"></i>
                    At least 8 characters long
                </li>
                <li style="display: flex; align-items: center; gap: 0.5rem;">
                    <i class="fas fa-check-circle" style="color: #0EA5E9; font-size: 0.875rem;"></i>
                    Different from your current password
                </li>
                <li style="display: flex; align-items: center; gap: 0.5rem;">
                    <i class="fas fa-check-circle" style="color: #0EA5E9; font-size: 0.875rem;"></i>
                    Must match the confirmation password
                </li>
            </ul>
        </div>

        <!-- Submit Button -->
        <div>
            <button type="submit" class="btn-primary">
                <i class="fas fa-key mr-2"></i>
                Change Password
            </button>
        </div>
    </form>

    <!-- Sign Out Link -->
    <div class="text-center" style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid #f3f4f6;">
        <form method="POST" action="{{ route('logout') }}" class="inline">
            @csrf
            <button type="submit" class="auth-link" style="font-size: 0.9375rem; background: none; border: none; cursor: pointer;">
                <i class="fas fa-sign-out-alt mr-2"></i>Sign out instead
            </button>
        </form>
    </div>
</div>