@extends('layouts.admin')

@section('content')
  @php
    $roleLabels = [
        1 => 'Institute',
        3 => 'School',
        4 => 'Student',
    ];
    $roleLabel = $roleLabels[(int) ($selectedUser->usertype ?? 0)] ?? 'Platform Admin';
    $summaryCards = [
        'Target User' => $selectedUser->name ?? 'Selected User',
        'Role' => $roleLabel,
        'Login Contact' => $selectedUser->mobileno ?: ($selectedUser->email ?: '-'),
    ];
  @endphp

  <div class="card-header">
    <h4>Change Password</h4>
  </div>
  <div class="card-body">
    @include('admin.partials.flash-messages')

    <div class="portal-page-shell">
      <div class="portal-hero-card">
        <div class="portal-hero-main">
          <div class="portal-hero-copy">
            <h5>{{ $selectedUser->name ?? 'Selected User' }}</h5>
            <p>Replace the current password for this account safely. The new password becomes active immediately after saving.</p>
            <div class="portal-chip-list">
              <span class="portal-chip">{{ $roleLabel }}</span>
              <span class="portal-chip">{{ $selectedUser->email ?: 'Email not available' }}</span>
              <span class="portal-chip">{{ $selectedUser->mobileno ?: 'Mobile not available' }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="portal-summary-grid">
        @foreach($summaryCards as $label => $value)
          <div class="portal-summary-card">
            <span>{{ $label }}</span>
            <strong>{{ $value }}</strong>
          </div>
        @endforeach
      </div>

      <form action="{{ route('admin.updatepassword') }}" method="post" class="portal-form-shell">
        @csrf
        <input type="hidden" name="userid" value="{{ $selectedUserId }}">

        <div class="portal-form-section">
          <h6>Set New Password</h6>
          <p>Use the same business flow as before, but with a clearer and safer admin form.</p>
          <div class="portal-form-grid">
            <div class="form-group portal-form-group">
              <label for="password">New Password</label>
              <input type="password" class="form-control" id="password" name="password" maxlength="20" minlength="6" placeholder="Enter new password" autocomplete="new-password" required>
              <small class="portal-form-hint">Minimum 6 characters. A strong password is recommended.</small>
            </div>
            <div class="form-group portal-form-group">
              <label for="confirmpassword">Confirm Password</label>
              <input type="password" class="form-control" id="confirmpassword" name="confirmpassword" maxlength="20" minlength="6" placeholder="Re-enter new password" autocomplete="new-password" required>
            </div>
          </div>
        </div>

        <div class="portal-form-actions">
          <p class="portal-security-note">After changing the password, the old password will stop working immediately.</p>
          <div>
            <button type="button" id="togglePasswordVisibility" class="btn btn-outline-dark">Show Password</button>
            <button type="submit" class="btn btn-primary">Change Password</button>
          </div>
        </div>
      </form>
    </div>
  </div>
@endsection

@push('scripts')
  <script>
    (function () {
      var toggleButton = document.getElementById('togglePasswordVisibility');
      var passwordField = document.getElementById('password');
      var confirmField = document.getElementById('confirmpassword');

      if (!toggleButton || !passwordField || !confirmField) {
        return;
      }

      toggleButton.addEventListener('click', function () {
        var nextType = passwordField.type === 'password' ? 'text' : 'password';
        passwordField.type = nextType;
        confirmField.type = nextType;
        toggleButton.textContent = nextType === 'password' ? 'Show Password' : 'Hide Password';
      });
    })();
  </script>
@endpush
