@extends('layouts.app')
@section('title', 'Account')
@if($secret)@push('head')<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>@endpush @endif
@section('content')
<h1 class="h1">Account</h1>
<div class="mt-6 grid gap-6 lg:grid-cols-2">

 <form method="post" action="{{ route('account.profile') }}" class="card space-y-3">@csrf
  <h2 class="h2">Profile</h2>
  <div><label class="lbl">Name</label><input class="input" name="name" value="{{ old('name',$user->name) }}" required></div>
  <div class="grid grid-cols-2 gap-3">
   <div><label class="lbl">Workspace type</label><select class="input" name="profile_type">@foreach($types as $k=>$l)<option value="{{ $k }}" @selected($user->profile_type===$k)>{{ $l }}</option>@endforeach</select></div>
   <div><label class="lbl">Country</label><select class="input" name="country">@foreach($countries as $c)<option @selected($user->country===$c)>{{ $c }}</option>@endforeach</select></div>
  </div>
  <div><label class="lbl">Mobile number</label><input class="input" name="phone" value="{{ old('phone',$user->phone) }}"></div>
  <div><label class="lbl">Research topic</label><input class="input" name="research_topic" value="{{ old('research_topic',$user->research_topic) }}"></div>
  <div><label class="lbl">Industry</label><input class="input" name="industry" value="{{ old('industry',$user->industry) }}"></div>
  <button class="btn">Save profile</button>
 </form>

 <div class="space-y-6">
  <form method="post" action="{{ route('account.password') }}" class="card space-y-3">@csrf
   <h2 class="h2">{{ $user->password ? 'Change password' : 'Set a password' }}</h2>
   @if($user->password)<div><label class="lbl">Current password</label><input class="input" type="password" name="current_password"></div>@endif
   <div class="grid grid-cols-2 gap-3">
    <div><label class="lbl">New password</label><input class="input" type="password" name="password"></div>
    <div><label class="lbl">Confirm</label><input class="input" type="password" name="password_confirmation"></div>
   </div>
   <button class="btn">Update password</button>
  </form>

  <div class="card">
   <h2 class="h2">Two-factor authentication</h2>
   @if($user->mfa_enabled)
    <p class="muted mt-1">Two-factor authentication is on. Enter a current code to turn it off.</p>
    <form method="post" action="{{ route('mfa.disable') }}" class="mt-3 flex gap-2">@csrf
     <input class="input" name="code" placeholder="6-digit code" inputmode="numeric"><button class="btn btn-red">Turn off</button></form>
   @elseif($secret)
    <p class="muted mt-1">Scan this code with Google Authenticator, Authy or a similar app, then enter the 6-digit code it shows.</p>
    <div id="qr" class="my-3 inline-block rounded bg-white p-2"></div>
    <p class="muted">Can't scan? Enter this key manually: <code class="font-mono text-ink">{{ $secret }}</code></p>
    <script>new QRCode(document.getElementById('qr'), {text: @json($uri), width: 160, height: 160});</script>
    <form method="post" action="{{ route('mfa.confirm') }}" class="mt-3 flex gap-2">@csrf
     <input class="input" name="code" placeholder="6-digit code" inputmode="numeric"><button class="btn">Confirm and turn on</button></form>
   @else
    <p class="muted mt-1">Add a second step at login with an authenticator app.</p>
    <form method="post" action="{{ route('mfa.setup') }}" class="mt-3">@csrf<button class="btn">Set up two-factor</button></form>
   @endif
  </div>
 </div>

 <div class="card lg:col-span-2">
  <h2 class="h2">API tokens</h2>
  <p class="muted mt-1">Use a token to read your surveys from your own tools: <code>Authorization: Bearer TOKEN</code> on <code>{{ url('/api/v1/surveys') }}</code>.</p>
  @if(session('new_token'))<div class="mt-3 rounded-md bg-sun/25 p-3 text-sm">Copy your new token now, it will not be shown again:<br><code class="break-all font-mono">{{ session('new_token') }}</code></div>@endif
  <form method="post" action="{{ route('tokens.create') }}" class="mt-3 flex gap-2">@csrf<input class="input max-w-xs" name="name" placeholder="Token name, e.g. Excel export" required><button class="btn">Create token</button></form>
  @if($tokens->count())<table class="tbl mt-4"><tr><th>Name</th><th>Last used</th><th></th></tr>
   @foreach($tokens as $t)<tr><td>{{ $t->name }}</td><td>{{ $t->last_used_at?->diffForHumans() ?? 'Never' }}</td>
    <td><form method="post" action="{{ route('tokens.destroy',$t->id) }}">@csrf @method('DELETE')<button class="underline">Revoke</button></form></td></tr>@endforeach</table>@endif
 </div>
</div>
@endsection