@extends('layouts.app')
@section('title', 'My profile')
@section('page', 'profile')
@section('content')
@php $sw = fn ($key, $label, $p = null) => '<div class="setting"><div><strong>'.e($label).'</strong>'.($p ? '<p>'.e($p).'</p>' : '').'</div><label class="switch"><input type="checkbox" name="'.$key.'" value="1"'.($u->pref($key) ? ' checked' : '').'><span></span></label></div>'; @endphp
<div class="page-head"><div><h1>My profile</h1><p>Your own account.@if (auth()->user()->allows('manage_workspace')) Workspace-wide options are in <a href="{{ route('admin.settings') }}">Settings</a>.@endif</p></div></div>
<div class="tabs" data-tabs>
  <button class="tab active" data-tab="pr-profile">Profile</button><button class="tab" data-tab="pr-notify">Notifications</button><button class="tab" data-tab="pr-signature">Message signature</button><button class="tab" data-tab="pr-security">Security</button>
</div>
<div class="tab-panel active" id="pr-profile"><section class="panel panel-body">
  <form method="POST" action="{{ route('admin.profile.update') }}" enctype="multipart/form-data" data-ajax id="profile-form">@csrf
  <div class="row" style="gap:16px;margin-bottom:22px">{{ av($u, 'lg') }}<div><strong>Profile photo</strong><div class="small muted">Clients see this next to your messages</div><label class="btn btn-sm mt-8" style="cursor:pointer"><input type="file" name="photo" accept="image/*" class="sr-only" id="photo-in">Change photo</label></div></div>
  <div class="form-grid">
    <div class="field"><label for="pf-first">First name</label><input class="input" id="pf-first" name="first_name" value="{{ $u->first_name }}" required></div>
    <div class="field"><label for="pf-last">Last name</label><input class="input" id="pf-last" name="last_name" value="{{ $u->last_name }}"></div>
    <div class="field"><label for="pf-email">Email</label><input class="input" id="pf-email" type="email" name="email" value="{{ $u->email }}" required></div>
    <div class="field"><label for="pf-phone">Phone</label><input class="input" id="pf-phone" name="phone" value="{{ $u->phone }}"></div>
    <div class="field"><label for="pf-title">Job title shown to clients</label><input class="input" id="pf-title" name="job_title" value="{{ $u->job_title }}"></div>
    <div class="field"><label for="pf-tz">Time zone</label><select class="input" id="pf-tz" name="timezone">@foreach ($timezones as $tz => $label)<option value="{{ $tz }}" @selected($u->timezone === $tz)>{{ $label }}</option>@endforeach</select></div>
  </div><div class="form-actions"><button class="btn btn-primary" type="submit">Save changes</button></div></form>
</section></div>
<div class="tab-panel" id="pr-notify"><section class="panel panel-body">
  <form method="POST" action="{{ route('admin.profile.notifications') }}" data-ajax="stay">@csrf
  {!! $sw('approvals', 'Client approves or requests changes', 'Only for projects you manage') !!}
  <div class="setting"><div><strong>New client messages</strong></div><select class="input" style="width:auto" name="messages" aria-label="New client messages">@foreach (['Instantly', 'Hourly digest', 'Off'] as $o)<option @selected($u->pref('messages', 'Instantly') === $o)>{{ $o }}</option>@endforeach</select></div>
  {!! $sw('payments', 'Payments and overdue invoices') !!}
  {!! $sw('handover', 'Desk Assistant hands a client over to me') !!}
  {!! $sw('daily_summary', 'Daily summary email', 'Every morning at 8am') !!}
  <div class="form-actions"><button class="btn btn-primary" type="submit">Save settings</button></div>
  </form>
</section></div>
<div class="tab-panel" id="pr-signature"><section class="panel panel-body">
  <form method="POST" action="{{ route('admin.profile.signature') }}" data-ajax="stay">@csrf
    <div class="field"><label for="sig">Signature added to emails sent from the portal</label><textarea class="input" id="sig" name="email_signature" style="min-height:120px">{{ $u->email_signature }}</textarea></div>
    <label class="check mt-12"><input type="checkbox" name="signature_on_emails" value="1" @checked($u->signature_on_emails)> Add my signature to invoice and approval emails</label>
    <div class="form-actions"><button class="btn btn-primary" type="submit">Save signature</button></div>
  </form>
</section></div>
<div class="tab-panel" id="pr-security"><section class="panel panel-body">
  <form method="POST" action="{{ route('admin.profile.password') }}" data-ajax="stay" id="pw-form">@csrf<div class="form-grid">
    <div class="field"><label for="pw-cur">Current password</label><input class="input" id="pw-cur" type="password" name="current_password" required autocomplete="current-password"></div><div></div>
    <div class="field"><label for="pw-new">New password</label><input class="input" id="pw-new" type="password" name="password" required minlength="8" autocomplete="new-password"><span class="help">At least 8 characters</span></div>
    <div class="field"><label for="pw-conf">Confirm new password</label><input class="input" id="pw-conf" type="password" name="password_confirmation" required autocomplete="new-password"></div>
  </div><div class="form-actions"><button class="btn btn-primary" type="submit">Update password</button></div></form>
  <div class="setting mt-20"><div><strong>Two-step verification</strong><p>{{ $twoFactorRequired ? 'Required by your workspace' : 'Enter a code when you sign in on a new device' }}</p></div>{{ badge($twoFactorRequired || $u->two_factor_enabled ? 'On' : 'Off', $twoFactorRequired || $u->two_factor_enabled ? 'b-green' : '') }}</div>
  <div class="setting"><div><strong>Active sessions</strong><p>{{ $sessions->map(fn ($s) => $s['device'].($s['ip'] ? ', '.$s['ip'] : '').($s['current'] ? ' (this device)' : ''))->implode('. ') ?: 'Only this device.' }}</p></div>@if ($sessions->count() > 1)<button class="btn btn-sm btn-danger" data-action="{{ route('admin.profile.sessions') }}">Sign out others</button>@endif</div>
</section></div>
@endsection
@push('scripts')
<script>
document.getElementById("photo-in").addEventListener("change", function(){
  if (!this.files[0]) return;
  var fd = new FormData(document.getElementById("profile-form")); fd.append("photo_only", "1");
  AD.post("{{ route('admin.profile.update') }}", fd).then(function(r){ AD.toast(r.message); setTimeout(function(){ location.reload(); }, 700); }).catch(function(){});
});
</script>
@endpush