@extends('layouts.dash')
@section('title', 'My Profile')
@section('content')
@php $mustChange = auth()->user()->must_change_password; @endphp
<div class="page-head"><div><h1>My Profile</h1><p>Manage your account, security & preferences.</p></div><a href="{{ route('user.dashboard') }}" class="btn btn-outline btn-sm"><i class="fa-solid fa-gauge-high"></i> Dashboard</a></div>

@if($mustChange)
<div class="alert alert-warning" style="display:flex;gap:14px;align-items:center;border:2px solid #f59e0b;background:#fffbeb"><div style="width:44px;height:44px;border-radius:12px;background:#f59e0b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0"><i class="fa-solid fa-shield-halved"></i></div><div><div style="font-weight:900">Please change your default password</div><div class="text-sm text-gray">For your security, we require you to set a new password before using the platform. Choose a strong, unique password (min 8 chars).</div></div></div>
@endif

<div class="grid-2" style="align-items:start">
  <div class="card">
    <div class="card-title"><i class="fa-solid fa-user"></i> Account Info</div>
    <p class="card-sub">Keep your details up to date — helps support find your orders faster.</p>
    <div style="display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;margin-bottom:16px">
      <div class="avatar" style="width:52px;height:52px;font-size:18px">{{ strtoupper(substr(auth()->user()->name,0,1)) }}</div>
      <div><div style="font-weight:900">{{ auth()->user()->name }}</div><div class="text-sm text-gray">{{ auth()->user()->email }} • <span class="badge {{ auth()->user()->status==='active'?'badge-success':'badge-danger' }}" style="font-size:10px">{{ auth()->user()->status }}</span></div><div class="text-sm text-gray">Member since {{ fmt_date(auth()->user()->created_at) }} • Last password change: {{ auth()->user()->password_changed_at ? fmt_date(auth()->user()->password_changed_at, true) : 'Never' }}</div></div>
    </div>
    <form method="POST" action="{{ route('user.profile.info') }}" novalidate>
      @csrf @method('PATCH')
      <div class="form-group"><label>Full Name <span class="req">*</span></label><div class="input-icon"><i class="fa-solid fa-user"></i><input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', auth()->user()->name) }}" required placeholder="Your name"></div>@error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
      <div class="form-group"><label>Email (cannot change)</label><div class="input-icon"><i class="fa-solid fa-envelope"></i><input type="email" class="form-control" value="{{ auth()->user()->email }}" disabled style="background:var(--bg)"></div><div class="form-hint"><i class="fa-solid fa-lock"></i> Contact support to change email.</div></div>
      <div class="form-group"><label>Phone / WhatsApp</label><div class="input-icon"><i class="fa-brands fa-whatsapp"></i><input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone', auth()->user()->phone) }}" placeholder="01XXXXXXXXX • helps admin verify payments" inputmode="numeric"></div>@error('phone')<div class="invalid-feedback">{{ $message }}</div>@else<div class="form-hint">Used for payment verification & support.</div>@enderror</div>
      <div class="form-group"><label>Member Since</label><input type="text" class="form-control" value="{{ fmt_date(auth()->user()->created_at, true) }}" disabled style="background:var(--bg)"></div>
      <button class="btn btn-primary btn-block" type="submit"><i class="fa-solid fa-check"></i> Save Changes</button>
    </form>
  </div>
  <div class="card" style="border-color:{{ $mustChange ? '#fde68a' : 'var(--border)' }}">
    <div class="flex between center"><div class="card-title" style="margin:0"><i class="fa-solid fa-lock"></i> Change Password</div>@if($mustChange)<span class="badge badge-warning">Required now</span>@endif</div>
    <p class="card-sub">Use 8+ characters with a mix of letters, numbers & symbols. We’ll log you out from other devices.</p>
    @if($mustChange)<div class="alert alert-warning" style="font-size:13px"><i class="fa-solid fa-circle-info"></i> You’re using a default/insecure password. Please set a new one to continue.</div>@endif
    <form method="POST" action="{{ route('user.profile.password') }}" id="pwdForm" novalidate>
      @csrf @method('PATCH')
      <div class="form-group"><label>Current Password <span class="req">*</span></label><div style="position:relative"><input type="password" name="current" id="currentPwd" class="form-control @error('current') is-invalid @enderror" required placeholder="Enter current password"><button type="button" onclick="togglePwd('currentPwd', this)" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--gray);cursor:pointer"><i class="fa-solid fa-eye"></i></button></div>@error('current')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
      <div class="form-group"><label>New Password <span class="req">*</span></label><div style="position:relative"><input type="password" name="new" id="newPwd" class="form-control @error('new') is-invalid @enderror" required placeholder="Min 8 characters" oninput="meter(this.value)"><button type="button" onclick="togglePwd('newPwd', this)" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--gray);cursor:pointer"><i class="fa-solid fa-eye"></i></button></div>
        <div style="margin-top:8px;display:flex;gap:6px;align-items:center"><div style="flex:1;height:6px;background:var(--border);border-radius:50px;overflow:hidden"><div id="pwdBar" style="height:100%;width:0%;background:var(--danger);transition:var(--tr)"></div></div><span id="pwdLabel" class="text-sm" style="font-weight:800;color:var(--gray)">—</span></div>
        <div class="form-hint" id="pwdHint">Tip: mix upper, lower, number & symbol.</div>
        @error('new')<div class="invalid-feedback">{{ $message }}</div>@enderror
      </div>
      <div class="form-group"><label>Confirm New Password <span class="req">*</span></label><input type="password" name="new_confirmation" class="form-control" required placeholder="Repeat new password"><div class="form-hint">Must match new password.</div></div>
      <button class="btn {{ $mustChange ? 'btn-warning' : 'btn-outline' }} btn-block btn-lg" type="submit" style="{{ $mustChange ? 'background:#f59e0b;color:#fff;border-color:#f59e0b' : '' }}"><i class="fa-solid fa-key"></i> {{ $mustChange ? 'Set New Password & Continue' : 'Update Password' }}</button>
      <p class="text-sm text-gray" style="text-align:center;margin-top:10px"><i class="fa-solid fa-shield-halved"></i> We never store plain passwords — encrypted & hashed.</p>
    </form>
    <details style="margin-top:16px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px"><summary style="font-weight:800;cursor:pointer">Password tips</summary><ul style="margin:8px 0 0 18px;font-size:13px;color:var(--gray);line-height:1.7"><li>At least 8 characters, ideally 12+.</li><li>Don’t reuse admin123 or your email.</li><li>Use a passphrase: <span class="mono">BlueTiger$2025!</span></li></ul></details>
  </div>
</div>

<div class="card mt" style="padding:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:linear-gradient(135deg,#f8fbff,#f3f7ff);border-color:#dbeafe">
  <i class="fa-solid fa-headset" style="color:var(--primary);font-size:20px"></i><div><div style="font-weight:900">Need help?</div><div class="text-sm text-gray">Stuck on profile or password? <a href="{{ route('user.tickets') }}" style="color:var(--primary);font-weight:800">Open a ticket</a> — we reply in minutes.</div></div><a href="{{ route('user.tickets') }}" class="btn btn-outline btn-sm" style="margin-left:auto"><i class="fa-solid fa-life-ring"></i> Support</a>
</div>
@push('scripts')
<script>
function togglePwd(id, btn){
  const inp = document.getElementById(id);
  const is = inp.type === 'password';
  inp.type = is ? 'text' : 'password';
  btn.innerHTML = is ? '<i class="fa-solid fa-eye-slash"></i>' : '<i class="fa-solid fa-eye"></i>';
}
function meter(v){
  let s=0;
  if(v.length>=8) s++; if(v.length>=12) s++; if(/[A-Z]/.test(v)) s++; if(/[0-9]/.test(v)) s++; if(/[^A-Za-z0-9]/.test(v)) s++;
  const pct = Math.min(100, s*20);
  const bar = document.getElementById('pwdBar');
  const label = document.getElementById('pwdLabel');
  const hint = document.getElementById('pwdHint');
  bar.style.width = pct+'%';
  if(pct<40){ bar.style.background='var(--danger)'; label.textContent='Weak'; label.style.color='var(--danger)'; hint.textContent='Add more characters, numbers & symbols.'; }
  else if(pct<70){ bar.style.background='var(--warning)'; label.textContent='Fair'; label.style.color='var(--warning)'; hint.textContent='Good — add a symbol or uppercase for strong.'; }
  else if(pct<90){ bar.style.background='#22c55e'; label.textContent='Strong'; label.style.color='#15803d'; hint.textContent='Nice! This is strong.'; }
  else { bar.style.background='var(--primary)'; label.textContent='Very strong'; label.style.color='var(--primary)'; hint.textContent='Excellent — very strong password.'; }
}
</script>
@endpush
@endsection