@extends('layouts.auth')
@section('title', 'Set up your account')
@section('content')
  <div class="row" style="gap:12px"><span class="av sq c2">{{ $agency->initials() }}</span><div><strong>{{ $agency->name }}</strong><div class="small muted">invited you to {{ $invite->type === 'client' ? 'your client portal' : 'its AgencyDesk workspace' }}</div></div></div>
  <div class="steps" aria-hidden="true"><span class="on" id="st1"></span><span id="st2"></span></div>
  <form id="invite-form" method="POST" action="{{ route('invite.accept', $invite->token) }}">
    @csrf
    <div id="step1">
      <h1>Set up your account</h1>
      <p style="color:var(--ink-3);margin:8px 0 22px">You'll use this to {{ $invite->type === 'client' ? 'review work, message the team and pay invoices' : 'manage client projects, files and approvals' }}.</p>
      <div style="display:flex;flex-direction:column;gap:16px">
        <div class="field"><label>Email</label><input class="input" value="{{ $invite->email }}" readonly style="background:var(--bg)"></div>
        <div class="form-grid"><div class="field"><label for="fn">First name</label><input class="input" id="fn" name="first_name" value="{{ old('first_name', $user->first_name) }}" required></div><div class="field"><label for="ln">Last name</label><input class="input" id="ln" name="last_name" value="{{ old('last_name', $user->last_name) }}" required></div></div>
        <div class="field"><label for="ipw">Create a password</label><input class="input" id="ipw" name="password" type="password" required minlength="8" autocomplete="new-password"><span class="help">At least 8 characters</span></div>
        <label class="check"><input type="checkbox" name="terms" value="1" required> I agree to the <a href="#" onclick="return false">terms of use</a> and <a href="#" onclick="return false">privacy policy</a></label>
        @include('partials.errors')
        <button class="btn btn-primary btn-lg btn-block" type="button" id="next">Continue</button>
      </div>
    </div>
    <div id="step2" class="hidden">
      <h1>How should we reach you?</h1>
      <p style="color:var(--ink-3);margin:8px 0 22px">You can change this any time in Profile &amp; settings.</p>
      <div class="panel panel-body" style="padding:6px 18px">
        <div class="setting"><div><strong>Approval requests</strong><p>Email me when something needs my sign-off</p></div><label class="switch"><input type="checkbox" name="notify_approvals" value="1" checked><span></span></label></div>
        <div class="setting"><div><strong>New messages</strong><p>Email me about unread messages</p></div><label class="switch"><input type="checkbox" name="notify_messages" value="1" checked><span></span></label></div>
        <div class="setting"><div><strong>Weekly summary</strong><p>A short Monday update on all projects</p></div><label class="switch"><input type="checkbox" name="notify_weekly" value="1"><span></span></label></div>
      </div>
      <div class="field" style="margin-top:16px"><label for="lang">Portal language</label><select class="input" id="lang" name="locale"><option value="en">English</option><option value="ar">العربية</option></select></div>
      <button class="btn btn-primary btn-lg btn-block" style="margin-top:22px" type="submit">Go to my portal</button>
    </div>
  </form>
@endsection
@push('scripts')
<script>
document.getElementById("next").addEventListener("click", function(){
  var s1 = document.getElementById("step1"), fields = s1.querySelectorAll("input[required]");
  for (var i = 0; i < fields.length; i++) { if (!fields[i].reportValidity()) return; }
  s1.classList.add("hidden");
  document.getElementById("step2").classList.remove("hidden"); document.getElementById("st2").classList.add("on");
});
</script>
@endpush