@extends('layouts.app')

@section('content')
<main id="mainContent">
  <section class="section" style="min-height: 80vh; display: flex; align-items: center; padding: 4rem 0;">
    <div class="container" style="max-width: 540px;">
      
      <div class="service-card reveal" style="padding: 2.5rem; background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-lg);">
        
        <div style="text-align: center; margin-bottom: 2rem;">
          <div style="width: 56px; height: 56px; border-radius: 50%; background: rgba(245, 158, 11, 0.15); color: #d97706; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem;">
            <i class="fas fa-shield-alt"></i>
          </div>
          <span class="section-badge" style="margin-bottom: 0.75rem; background: rgba(245, 158, 11, 0.15); color: #d97706; border-color: rgba(245, 158, 11, 0.3);">
            <i class="fas fa-key"></i> Action Required
          </span>
          <h1 style="font-size: 1.75rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin-bottom: 0.5rem;">
            Mandatory Password Update
          </h1>
          <p style="color: var(--text-light); font-size: 0.92rem; line-height: 1.5;">
            An administrator has reset your password. For your security and DPDP Act compliance, you must set a new password before continuing.
          </p>
        </div>

        @if (session('warning'))
          <div style="padding: 0.85rem 1.25rem; background: rgba(245, 158, 11, 0.12); border-left: 4px solid #f59e0b; border-radius: var(--radius-sm); margin-bottom: 1.5rem; color: #d97706; font-size: 0.9rem;">
            <i class="fas fa-exclamation-triangle" style="margin-right: 0.4rem;"></i> {{ session('warning') }}
          </div>
        @endif

        @if ($errors->any())
          <div style="padding: 0.85rem 1.25rem; background: rgba(239, 68, 68, 0.12); border-left: 4px solid #ef4444; border-radius: var(--radius-sm); margin-bottom: 1.5rem; color: #ef4444; font-size: 0.9rem;">
            <ul style="list-style: none; margin: 0; padding: 0;">
              @foreach ($errors->all() as $error)
                <li><i class="fas fa-exclamation-circle" style="margin-right: 0.4rem;"></i> {{ $error }}</li>
              @endforeach
            </ul>
          </div>
        @endif

        <form method="POST" action="{{ route('password.force-change.update') }}" data-ajax="true" novalidate>
          @csrf

          <!-- Account Email Preview -->
          <div style="margin-bottom: 1.25rem;">
            <label style="display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--text-heading);">
              Account Identity
            </label>
            <input type="text" value="{{ $user->email }} ({{ $user->name }})" disabled
                   style="width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--bg-surface); opacity: 0.75; color: var(--text-body); font-size: 0.95rem; height: 46px; padding: 0 1rem; cursor: not-allowed;">
          </div>

          <!-- Current / Temporary Password -->
          <div style="margin-bottom: 1.25rem;">
            <label for="current_password" style="display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--text-heading);">
              Temporary / Current Password <span style="color: #ef4444;">*</span>
            </label>
            <input type="password" id="current_password" name="current_password" required autofocus
                   placeholder="Enter the temporary password received"
                   class="filter-select"
                   style="width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-body); font-size: 0.95rem; height: 46px; padding: 0 1rem;">
            @error('current_password')
              <span style="color: #ef4444; font-size: 0.85rem; display: block; margin-top: 0.35rem;">{{ $message }}</span>
            @enderror
          </div>

          <!-- New Password -->
          <div style="margin-bottom: 1.25rem;">
            <label for="password" style="display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--text-heading);">
              New Strong Password <span style="color: #ef4444;">*</span>
            </label>
            <input type="password" id="password" name="password" required
                   placeholder="Minimum 8 characters"
                   class="filter-select"
                   style="width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-body); font-size: 0.95rem; height: 46px; padding: 0 1rem;">
            <small style="color: var(--text-light); font-size: 0.8rem; display: block; margin-top: 0.35rem;">
              Must be at least 8 characters and differ from your temporary password.
            </small>
            @error('password')
              <span style="color: #ef4444; font-size: 0.85rem; display: block; margin-top: 0.35rem;">{{ $message }}</span>
            @enderror
          </div>

          <!-- Confirm Password -->
          <div style="margin-bottom: 1.75rem;">
            <label for="password_confirmation" style="display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--text-heading);">
              Confirm New Password <span style="color: #ef4444;">*</span>
            </label>
            <input type="password" id="password_confirmation" name="password_confirmation" required
                   placeholder="Re-enter your new password"
                   class="filter-select"
                   style="width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-body); font-size: 0.95rem; height: 46px; padding: 0 1rem;">
          </div>

          <!-- Submit Button -->
          <button type="submit" class="btn btn-primary" style="width: 100%; height: 48px; font-weight: 600; font-size: 1rem; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
            <i class="fas fa-check-circle"></i> Save New Password & Proceed
          </button>
        </form>

        <div style="margin-top: 1.5rem; text-align: center; border-top: 1px solid var(--border-light); padding-top: 1rem;">
          <form method="POST" action="{{ route('logout') }}" style="display: inline;">
            @csrf
            <button type="submit" style="background: none; border: none; color: var(--text-light); font-size: 0.85rem; cursor: pointer; text-decoration: underline;">
              <i class="fas fa-sign-out-alt"></i> Sign out instead
            </button>
          </form>
        </div>

      </div>

    </div>
  </section>
</main>
@endsection