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

@section('content')

{{-- Header --}}
<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 personal information and account security.
  </p>
</div>

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

  {{-- ── Left sidebar: avatar + account info ── --}}
  <div style="display:flex;flex-direction:column;gap:1rem">

    {{-- Avatar card --}}
    <div class="card" style="padding:1.5rem;text-align:center">
      <div style="width:5rem;height:5rem;border-radius:50%;
        background:linear-gradient(135deg,#6366f1,#7c3aed);
        display:flex;align-items:center;justify-content:center;
        font-size:2rem;font-weight:700;color:#fff;
        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>
      @if($user->company)
      <div style="font-size:.8125rem;color:var(--foreground);font-weight:500;
        background:var(--muted);border:1px solid var(--border);
        border-radius:var(--radius);padding:.3rem .75rem;display:inline-block">
        {{ $user->company }}
      </div>
      @endif
    </div>

    {{-- Account info card --}}
    <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'],
        ['Licenses',      $user->licenses()->count()],
        ['Orders',        $user->orders()->count()],
        ['Tickets',       $user->supportTickets()->count()],
      ] 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">

    {{-- ── Personal information ── --}}
    <div class="card" id="info">
      <div class="card-header">
        <div>
          <div class="card-title">Personal Information</div>
          <div class="card-sub">Update your name, company and contact details.</div>
        </div>
      </div>


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

        <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="Jane Developer">
            @error('name')
            <p style="font-size:.75rem;color:var(--destructive);margin-top:.25rem">{{ $message }}</p>
            @enderror
          </div>

          <div>
            <label>Email Address</label>
            <input type="email" class="input"
              value="{{ $user->email }}" disabled
              style="background:var(--muted);color:var(--muted-foreground);cursor:not-allowed">
            <p style="font-size:.72rem;color:var(--muted-foreground);margin:.25rem 0 0">
              Contact support to change your email.
            </p>
          </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem">
          <div>
            <label>Company / Organisation</label>
            <input type="text" name="company" class="input"
              value="{{ old('company', $user->company) }}" maxlength="150"
              placeholder="Acme Corp">
          </div>

          <div>
            <label>Phone Number</label>
            <input type="text" name="phone" class="input"
              value="{{ old('phone', $user->phone) }}" maxlength="30"
              placeholder="+1 555 000 0000">
          </div>
        </div>

        {{-- Country + State row --}}
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem">
          <div>
            <label>Country</label>
            <select name="country" id="profile-country" class="select"
              onchange="profileUpdateStates(this.value)">
              <option value="">— Select Country —</option>
              @foreach($countries as $c)
              <option value="{{ $c }}" @selected(old('country', $user->country)===$c)>{{ $c }}</option>
              @endforeach
            </select>
          </div>
          <div>
            <label>
              State / Province
              <span style="font-size:.72rem;font-weight:400;color:var(--muted-foreground)">— required for accurate tax</span>
            </label>
            <select name="state" id="profile-state" class="select">
              <option value="">— Select State —</option>
              {{-- Pre-populated server-side for the saved country --}}
              @if($user->country && isset($countriesData[$user->country]))
                @foreach($countriesData[$user->country] as $s)
                <option value="{{ $s }}" @selected(old('state', $user->state)===$s)>{{ $s }}</option>
                @endforeach
              @endif
            </select>
          </div>
        </div>

        {{-- Address row --}}
        <div style="margin-bottom:1rem">
          <label>Address</label>
          <input type="text" name="address" class="input"
            value="{{ old('address', $user->address) }}" maxlength="300"
            placeholder="123 Main St, City">
        </div>

        {{-- Tax info notice --}}
        @php $taxInfo = user_tax_info(); @endphp
        @if($taxInfo['enabled'] && $taxInfo['rate'] > 0)
        <div style="display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;
          border-radius:var(--radius);background:var(--muted);border:1px solid var(--border);
          font-size:.8125rem;color:var(--muted-foreground);margin-bottom:1rem">
          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/>
          </svg>
          <span>
            Based on your location (<strong>{{ $taxInfo['country'] }}{{ $taxInfo['state'] ? ', '.$taxInfo['state'] : '' }}</strong>),
            a tax rate of <strong>{{ number_format($taxInfo['rate'], 3) }}%</strong> applies
            ({{ $taxInfo['rules']->pluck('name')->join(', ') }}).
            Prices in the Market will show tax-inclusive totals.
          </span>
        </div>
        @elseif($taxInfo['enabled'] && $user->country && $taxInfo['rate'] == 0)
        <div style="display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;
          border-radius:var(--radius);background:var(--muted);border:1px solid var(--border);
          font-size:.8125rem;color:var(--muted-foreground);margin-bottom:1rem">
          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          No tax rules configured for your location — tax-free pricing applies.
        </div>
        @elseif($taxInfo['enabled'] && !$user->country)
        <div style="display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;
          border-radius:var(--radius);background:#fffbeb;border:1px solid #fde68a;
          font-size:.8125rem;color:#92400e;margin-bottom:1rem">
          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
          </svg>
          Set your country and state above so the correct tax rate is applied to your orders.
        </div>
        @endif

        <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>

      {{-- Countries data + JS for dynamic state dropdown --}}
      <script>
      const PROFILE_COUNTRIES = @json($countriesData);
      function profileUpdateStates(country, selected) {
        const sel    = document.getElementById('profile-state');
        const states = PROFILE_COUNTRIES[country] || [];
        sel.innerHTML = '<option value="">— Select State —</option>';
        states.forEach(function(s) {
          const opt = document.createElement('option');
          opt.value = s; opt.textContent = s;
          if (s === selected) opt.selected = true;
          sel.appendChild(opt);
        });
        sel.disabled = states.length === 0;
      }
      // Re-sync if country is already selected on page load
      (function() {
        const c = document.getElementById('profile-country').value;
        if (c) profileUpdateStates(c, @json(old('state', $user->state ?? '')));
      })();
      </script>
    </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('customer.profile.password') }}" style="padding:1.375rem">
        @csrf

        <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 hint --}}
        <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>{{-- end right column --}}
</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"/>';
  }
}

// Password strength meter
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