@extends('layouts.admin')
@section('title', 'My Profile')

@section('content')

<div style="margin-bottom:1.5rem">
  <h1 style="font-size:1.25rem;font-weight:800;color:var(--foreground);letter-spacing:-.025em;margin:0 0 .25rem">
    My Profile
  </h1>
  <p style="font-size:.8125rem;color:var(--muted-foreground);margin:0">
    Manage your admin account information and password.
  </p>
</div>

<div style="display:grid;grid-template-columns:240px 1fr;gap:1.5rem;align-items:start;max-width:900px">

  {{-- ── Left: avatar card ── --}}
  <div style="display:flex;flex-direction:column;gap:1rem">
    <div class="card" style="padding:1.5rem;text-align:center">
      <div style="width:5rem;height:5rem;border-radius:50%;
        background:var(--foreground);
        display:flex;align-items:center;justify-content:center;
        font-size:2rem;font-weight:700;color:var(--background);
        margin:0 auto 1rem">
        {{ strtoupper(substr($user->name, 0, 1)) }}
      </div>
      <div style="font-size:1rem;font-weight:700;color:var(--foreground);margin-bottom:.25rem">
        {{ $user->name }}
      </div>
      <div style="font-size:.8125rem;color:var(--muted-foreground);margin-bottom:.75rem">
        {{ $user->email }}
      </div>
      <div style="display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:700;
        text-transform:uppercase;letter-spacing:.08em;color:var(--foreground);
        background:var(--muted);border:1px solid var(--border);
        border-radius:var(--radius);padding:.25rem .75rem">
        <svg width="11" height="11" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
            d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
        </svg>
        Administrator
      </div>
    </div>

    <div class="card" style="overflow:hidden">
      <div class="card-header">
        <div class="card-title" style="font-size:.875rem">Account Details</div>
      </div>
      @foreach([
        ['Member since', $user->created_at->format('M d, Y')],
        ['Last login',   $user->last_login_at?->diffForHumans() ?? 'First visit'],
        ['Last IP',      $user->last_login_ip ?? '—'],
      ] as [$label, $value])
      <div style="display:flex;justify-content:space-between;align-items:center;
        padding:.625rem 1.25rem;border-bottom:1px solid var(--border);font-size:.8125rem">
        <span style="color:var(--muted-foreground)">{{ $label }}</span>
        <span style="font-weight:600;color:var(--foreground)">{{ $value }}</span>
      </div>
      @endforeach
    </div>
  </div>

  {{-- ── Right: edit forms ── --}}
  <div style="display:flex;flex-direction:column;gap:1.25rem">

    {{-- ── Account Information ── --}}
    <div class="card" id="info">
      <div class="card-header">
        <div>
          <div class="card-title">Account Information</div>
          <div class="card-sub">Update your display name and email address.</div>
        </div>
      </div>


      <form method="POST" action="{{ route('admin.profile.update-info') }}" style="padding:1.375rem">
        @csrf
        @method('PATCH')

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem">
          <div>
            <label>Full Name <span style="color:var(--destructive)">*</span></label>
            <input type="text" name="name" class="input"
              value="{{ old('name', $user->name) }}" required maxlength="100"
              placeholder="Administrator">
            @error('name')
            <p style="font-size:.75rem;color:var(--destructive);margin-top:.25rem">{{ $message }}</p>
            @enderror
          </div>

          <div>
            <label>Email Address <span style="color:var(--destructive)">*</span></label>
            <input type="email" name="email" class="input"
              value="{{ old('email', $user->email) }}" required maxlength="180"
              placeholder="admin@yourdomain.com">
            @error('email')
            <p style="font-size:.75rem;color:var(--destructive);margin-top:.25rem">{{ $message }}</p>
            @enderror
          </div>
        </div>

        <div style="display:flex;justify-content:flex-end;padding-top:1rem;border-top:1px solid var(--border)">
          <button type="submit" class="btn btn-primary btn-sm">
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Save Changes
          </button>
        </div>
      </form>
    </div>

    {{-- ── Change Password ── --}}
    <div class="card" id="password">
      <div class="card-header">
        <div>
          <div class="card-title">Change Password</div>
          <div class="card-sub">Use a strong password of at least 8 characters.</div>
        </div>
      </div>


      <form method="POST" action="{{ route('admin.profile.update-password') }}" style="padding:1.375rem">
        @csrf
        @method('PATCH')

        <div style="display:flex;flex-direction:column;gap:1rem;max-width:420px">

          <div>
            <label>Current Password <span style="color:var(--destructive)">*</span></label>
            <div style="position:relative">
              <input type="password" name="current_password" id="pw-current" class="input"
                style="padding-right:2.75rem" placeholder="Enter current password" required>
              <button type="button" onclick="togglePw('pw-current','eye-c')"
                style="position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
                  background:none;border:none;cursor:pointer;color:var(--muted-foreground);padding:0">
                <svg id="eye-c" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                </svg>
              </button>
            </div>
            @error('current_password')
            <p style="font-size:.75rem;color:var(--destructive);margin-top:.25rem">{{ $message }}</p>
            @enderror
          </div>

          <div>
            <label>New Password <span style="color:var(--destructive)">*</span></label>
            <div style="position:relative">
              <input type="password" name="password" id="pw-new" class="input"
                style="padding-right:2.75rem" placeholder="Minimum 8 characters" required>
              <button type="button" onclick="togglePw('pw-new','eye-n')"
                style="position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
                  background:none;border:none;cursor:pointer;color:var(--muted-foreground);padding:0">
                <svg id="eye-n" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                </svg>
              </button>
            </div>
            @error('password')
            <p style="font-size:.75rem;color:var(--destructive);margin-top:.25rem">{{ $message }}</p>
            @enderror
          </div>

          <div>
            <label>Confirm New Password <span style="color:var(--destructive)">*</span></label>
            <div style="position:relative">
              <input type="password" name="password_confirmation" id="pw-conf" class="input"
                style="padding-right:2.75rem" placeholder="Re-enter new password" required>
              <button type="button" onclick="togglePw('pw-conf','eye-f')"
                style="position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
                  background:none;border:none;cursor:pointer;color:var(--muted-foreground);padding:0">
                <svg id="eye-f" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                </svg>
              </button>
            </div>
          </div>

        </div>

        {{-- Password strength meter --}}
        <div id="pw-strength" style="display:none;margin-top:.75rem;max-width:420px">
          <div style="font-size:.72rem;color:var(--muted-foreground);margin-bottom:.375rem">Password strength</div>
          <div style="height:4px;border-radius:9999px;background:var(--border);overflow:hidden">
            <div id="pw-bar" style="height:100%;width:0%;border-radius:9999px;transition:width .3s,background .3s"></div>
          </div>
          <div id="pw-label" style="font-size:.72rem;margin-top:.25rem"></div>
        </div>

        <div style="display:flex;justify-content:flex-end;margin-top:1.375rem;padding-top:1rem;border-top:1px solid var(--border)">
          <button type="submit" class="btn btn-primary btn-sm">
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
            </svg>
            Update Password
          </button>
        </div>
      </form>
    </div>

  </div>
</div>

<script>
function togglePw(inputId, eyeId) {
  var inp = document.getElementById(inputId);
  var eye = document.getElementById(eyeId);
  if (inp.type === 'password') {
    inp.type = 'text';
    eye.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>';
  } else {
    inp.type = 'password';
    eye.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>';
  }
}

document.getElementById('pw-new').addEventListener('input', function() {
  var val  = this.value;
  var wrap = document.getElementById('pw-strength');
  var bar  = document.getElementById('pw-bar');
  var lbl  = document.getElementById('pw-label');
  if (!val) { wrap.style.display = 'none'; return; }
  wrap.style.display = 'block';
  var score = 0;
  if (val.length >= 8)  score++;
  if (val.length >= 12) score++;
  if (/[A-Z]/.test(val)) score++;
  if (/[0-9]/.test(val)) score++;
  if (/[^A-Za-z0-9]/.test(val)) score++;
  var levels = [
    { pct:'20%', color:'#ef4444', text:'Very weak' },
    { pct:'40%', color:'#f97316', text:'Weak'      },
    { pct:'60%', color:'#eab308', text:'Fair'      },
    { pct:'80%', color:'#22c55e', text:'Good'      },
    { pct:'100%',color:'#16a34a', text:'Strong'    },
  ];
  var lvl = levels[Math.min(score, 4)];
  bar.style.width      = lvl.pct;
  bar.style.background = lvl.color;
  lbl.style.color      = lvl.color;
  lbl.textContent      = lvl.text;
});
</script>

@endsection
