@extends('layouts.app')
@section('title', 'Settings — InLynq')
@section('heading', 'Settings')

@section('content')
<div class="app-narrow" style="max-width:920px">
  <form method="POST" action="{{ route('user-profile-information.update') }}">
    @csrf @method('PUT')
    <x-iq.form-group title="Account" description="Your login details. Your public name is edited on My profile.">
      <x-iq.field label="Name" name="name"><input class="iq-input" name="name" id="name" value="{{ old('name', $user->name) }}" required maxlength="80"></x-iq.field>
      <x-iq.field label="Login email" name="email" help="Changing it asks you to confirm the new address."><input class="iq-input" type="email" name="email" id="email" value="{{ old('email', $user->email) }}" required></x-iq.field>
      <x-iq.field label="Timezone" name="timezone"><select class="iq-select" name="timezone" id="timezone">@foreach (['Africa/Lagos', 'Africa/Accra', 'Africa/Nairobi', 'Africa/Johannesburg', 'Africa/Cairo', 'Europe/London', 'America/New_York', 'UTC'] as $tz)<option @selected($user->timezone === $tz)>{{ $tz }}</option>@endforeach</select></x-iq.field>
      @foreach ($errors->updateProfileInformation->all() as $error)<span class="iq-error" style="grid-column:1/-1">{{ $error }}</span>@endforeach
      <div style="grid-column:1/-1"><button class="iq-btn iq-btn-primary iq-btn-sm">Save account</button></div>
    </x-iq.form-group>
  </form>

  <form method="POST" action="{{ route('user-password.update') }}">
    @csrf @method('PUT')
    <x-iq.form-group title="Password" description="Use at least 10 characters with letters and numbers.">
      <div class="iq-field" style="grid-column:1/-1"><label class="iq-label" for="current_password">Current password</label><input class="iq-input" type="password" name="current_password" id="current_password" autocomplete="current-password" required></div>
      <div class="iq-field"><label class="iq-label" for="password">New password</label><input class="iq-input" type="password" name="password" id="password" autocomplete="new-password" required></div>
      <div class="iq-field"><label class="iq-label" for="password_confirmation">Confirm new password</label><input class="iq-input" type="password" name="password_confirmation" id="password_confirmation" autocomplete="new-password" required></div>
      @foreach ($errors->updatePassword->all() as $error)<span class="iq-error" style="grid-column:1/-1">{{ $error }}</span>@endforeach
      <div style="grid-column:1/-1"><button class="iq-btn iq-btn-primary iq-btn-sm">Change password</button></div>
    </x-iq.form-group>
  </form>

  <x-iq.form-group title="Sessions" description="Where you're logged in. Sign out anywhere you don't recognise.">
    <div class="iq-stack" style="grid-column:1/-1;gap:8px">
      @forelse ($sessions as $s)
        <div class="app-row"><x-iq.icon name="{{ str_contains($s->device, 'iOS') || str_contains($s->device, 'Android') ? 'phone' : 'monitor' }}" /><div class="grow"><div class="app-row-title">{{ $s->device }}</div><div class="iq-muted" style="font-size:12px">{{ $s->ip }} · {{ $s->current ? 'This device' : 'Active '.$s->last_active }}</div></div>@if($s->current)<span class="iq-badge iq-badge-success"><span class="dot"></span>Current</span>@endif</div>
      @empty
        <p class="iq-muted" style="margin:0">Session list is available when sessions are stored in the database.</p>
      @endforelse
      <form method="POST" action="{{ route('settings.sessions.destroy') }}" class="iq-row" style="gap:8px;margin-top:8px;align-items:flex-start">
        @csrf @method('DELETE')
        <div class="iq-field" style="flex:1;min-width:200px"><input class="iq-input" type="password" name="password" placeholder="Your password" aria-label="Your password" required>@error('password')<span class="iq-error">{{ $message }}</span>@enderror</div>
        <button class="iq-btn iq-btn-secondary">Sign out other sessions</button>
      </form>
    </div>
  </x-iq.form-group>

  <x-iq.form-group title="Delete account" description="Permanently removes your profile and content. Payment records are kept for accounting, without your profile.">
    <form method="POST" action="{{ route('settings.account.destroy') }}" class="iq-stack" style="grid-column:1/-1;gap:12px" data-confirm="Delete your InLynq account?" data-confirm-body="This can't be undone. Your profile, companies, products and analytics will be deleted." data-confirm-action="Delete account">
      @csrf @method('DELETE')
      <div class="iq-grid-2">
        <x-iq.field label="Type your handle to confirm" name="confirm"><input class="iq-input" name="confirm" id="confirm" placeholder="{{ $user->username }}" autocomplete="off" required></x-iq.field>
        <x-iq.field label="Password" name="password_delete"><input class="iq-input" type="password" name="password" id="password_delete" required></x-iq.field>
      </div>
      <button class="iq-btn iq-btn-danger iq-btn-sm" style="align-self:flex-start"><x-iq.icon name="trash" /> Delete account</button>
    </form>
  </x-iq.form-group>
</div>
@endsection