@extends('install.layout')
@section('width', '600px')

@section('content')
<div><h1>Your site</h1><p class="iq-muted" style="margin:4px 0 0">You can change any of this later.</p></div>

<form method="POST" action="{{ route('install.site.save') }}" class="iq-stack" style="gap:24px">
  @csrf
  <div class="iq-stack">
    <x-iq.field label="Site address" name="url" help="Use https:// once SSL is on (cPanel → SSL/TLS Status)."><x-iq.input name="url" :value="$site['url']" required /></x-iq.field>
    <x-iq.field label="Site name" name="name"><x-iq.input name="name" :value="$site['name']" required maxlength="60" /></x-iq.field>
  </div>

  <div class="iq-stack">
    <div><h3 style="margin:0;font-size:15px;font-weight:600">Email</h3>
      <p class="iq-help" style="margin:2px 0 0">For sign-up confirmations, password resets and receipts. Create the mailbox in <b>cPanel → Email Accounts</b>; <b>Connect Devices</b> shows the server details.</p></div>
    <div class="iq-seg" data-bind="[data-mailer]" style="align-self:flex-start">
      <button type="button" @class(['is-active' => old('mailer', $site['mail']['mailer']) === 'smtp']) data-value="smtp">Send email</button>
      <button type="button" @class(['is-active' => old('mailer', $site['mail']['mailer']) === 'log']) data-value="log">Set up later</button>
    </div>
    <input type="hidden" name="mailer" value="{{ old('mailer', $site['mail']['mailer']) }}" data-mailer>
    <div class="iq-grid-2">
      <x-iq.field label="Mail server" name="mail_host" optional><x-iq.input name="mail_host" :value="$site['mail']['host']" /></x-iq.field>
      <x-iq.field label="Port" name="mail_port" optional help="465 (SSL) or 587."><x-iq.input name="mail_port" :value="$site['mail']['port']" inputmode="numeric" /></x-iq.field>
      <x-iq.field label="Mailbox username" name="mail_username" optional><x-iq.input name="mail_username" :value="$site['mail']['username']" autocomplete="off" /></x-iq.field>
      <x-iq.field label="Mailbox password" name="mail_password" optional><x-iq.input type="password" name="mail_password" autocomplete="new-password" /></x-iq.field>
      <x-iq.field label="Send emails from" name="mail_from" optional span><x-iq.input type="email" name="mail_from" :value="$site['mail']['from']" /></x-iq.field>
    </div>
  </div>

  <div class="iq-stack">
    <div><h3 style="margin:0;font-size:15px;font-weight:600">Paystack <span class="iq-muted" style="font-weight:400">· optional</span></h3>
      <p class="iq-help" style="margin:2px 0 0">Paystack dashboard → Settings → API Keys &amp; Webhooks. Start with test keys. Leave empty to add later.</p></div>
    <div class="iq-grid-2">
      <x-iq.field label="Public key" name="paystack_public" optional><x-iq.input name="paystack_public" :value="$site['paystack']['public'] ?? ''" placeholder="pk_test_…" autocomplete="off" /></x-iq.field>
      <x-iq.field label="Secret key" name="paystack_secret" optional><x-iq.input type="password" name="paystack_secret" placeholder="sk_test_…" autocomplete="off" /></x-iq.field>
    </div>
  </div>

  <div class="iq-row" style="justify-content:space-between">
    <a class="iq-btn iq-btn-quiet" href="{{ route('install.database') }}"><x-iq.icon name="chevronLeft" /> Back</a>
    <button class="iq-btn iq-btn-primary">Continue</button>
  </div>
</form>
@endsection