@extends('layouts.superadmin')
@section('title', 'Change Password')
@section('page-title', 'Change Password')

@section('content')
<div class="page-header">
  <div>
    <div class="page-title">Change Password</div>
    <div class="page-breadcrumb">Change your Super Admin account password securely</div>
  </div>
  <a href="{{ route('superadmin.dashboard') }}" class="btn-outline-custom">
    <i class="bi bi-arrow-left"></i> Back to Dashboard
  </a>
</div>

<div class="row">
  <div class="col-12 col-md-6 col-lg-5">
    <div class="card-custom">
      <div class="section-title"><i class="bi bi-shield-lock"></i> Super Admin Security</div>
      <p style="font-size: 13px; color: var(--text-muted); margin-bottom: 20px;">
        To ensure platform safety, choose a highly secure password containing at least 8 characters.
      </p>

      @if($errors->any())
        <div style="background:#fee2e2; border:1px solid #fca5a5; border-radius:10px; padding:12px 14px; font-size:13px; color:#991b1b; margin-bottom:16px;">
          <ul style="margin: 0; padding-left: 20px;">
            @foreach($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif

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

        <div style="margin-bottom: 16px;">
          <label class="form-label-custom">Current Password *</label>
          <div style="position:relative;">
            <i class="bi bi-lock" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);"></i>
            <input class="form-control-custom" style="padding-left:36px;" type="password" name="current_password" required placeholder="Enter current password">
          </div>
        </div>

        <div style="margin-bottom: 16px;">
          <label class="form-label-custom">New Password *</label>
          <div style="position:relative;">
            <i class="bi bi-key" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);"></i>
            <input class="form-control-custom" style="padding-left:36px;" type="password" name="new_password" required placeholder="Min 8 characters">
          </div>
        </div>

        <div style="margin-bottom: 20px;">
          <label class="form-label-custom">Confirm New Password *</label>
          <div style="position:relative;">
            <i class="bi bi-key-fill" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);"></i>
            <input class="form-control-custom" style="padding-left:36px;" type="password" name="new_password_confirmation" required placeholder="Repeat new password">
          </div>
        </div>

        <button type="submit" class="btn-primary-custom w-100" style="justify-content:center; padding:12px; background:var(--primary);">
          <i class="bi bi-check-lg"></i> Update Password
        </button>
      </form>
    </div>
  </div>
</div>
@endsection