{{-- "My profile": header, about, contact, socials, handle, SEO. Form-group pattern from the creator screens. --}}
@extends('layouts.app')
@section('title', 'My profile — InLynq')
@section('heading', 'My profile')

@section('content')
<div class="app-narrow" style="max-width:920px">
  <x-iq.page-head title="Header & about" crumb="Profile builder" :crumb-href="route('builder.show')">
    <x-slot:sub>Changes are saved here and go live when you publish.</x-slot:sub>
    <a class="iq-btn iq-btn-secondary" href="{{ route('builder.show') }}"><x-iq.icon name="eye" /> Preview</a>
  </x-iq.page-head>

  <div class="app-formgroup">
    <div><h3>Photo</h3><p class="iq-muted">A clear, recent photo of your face. Square, at least 256px.</p></div>
    <form method="POST" action="{{ route('profile.avatar') }}" enctype="multipart/form-data" class="iq-stack" style="gap:8px">
      @csrf
      <x-iq.upload name="image" shape="avatar" :src="$user->avatar_url" :initials="$user->initials" label="Upload a photo" help="PNG, JPG or WebP. Under 5MB." />
      <div class="iq-row"><button class="iq-btn iq-btn-primary iq-btn-sm">Save photo</button>
      </div>
    </form>
    @if ($user->avatar_path)
      <span></span>
      <form method="POST" action="{{ route('profile.avatar.destroy') }}" data-confirm="Remove your photo?" data-confirm-action="Remove">@csrf @method('DELETE')<button class="iq-btn iq-btn-quiet iq-btn-sm">Remove photo</button></form>
    @endif
  </div>

  <form method="POST" action="{{ route('profile.update') }}">
    @csrf @method('PUT')
    <x-iq.form-group title="Header" description="The first thing visitors read.">
      <x-iq.field label="Name" name="name"><x-iq.input name="name" :value="$user->name" maxlength="80" required /></x-iq.field>
      <x-iq.field label="Headline" name="headline" optional help="Your role, e.g. Founder & Operator."><x-iq.input name="headline" :value="$user->headline" maxlength="80" /></x-iq.field>
      <x-iq.field label="One-line bio" name="bio" :counter="mb_strlen((string) $user->bio).' / 160'" span><x-iq.textarea name="bio" :value="$user->bio" max="160" style="min-height:72px" placeholder="What you build, and for whom." /></x-iq.field>
      <x-iq.field label="Location" name="location" optional><x-iq.input name="location" :value="$user->location" placeholder="Lagos, Nigeria" /></x-iq.field>
      <x-iq.field label="Website" name="website" optional><x-iq.affix name="website" prefix="https://" :value="preg_replace('#^https?://#', '', (string) $user->website)" placeholder="yourname.com" /></x-iq.field>
    </x-iq.form-group>

    <x-iq.form-group title="About" description="A few sentences in your own voice. Leave a blank line between paragraphs.">
      <x-iq.field label="About" name="about" :counter="mb_strlen((string) $profile->about).' / '.config('inlynq.profile.about_max')" span>
        <x-iq.textarea name="about" :value="$profile->about" :max="config('inlynq.profile.about_max')" style="min-height:160px" placeholder="I grew up in… Since then I've…" />
      </x-iq.field>
    </x-iq.form-group>

    <x-iq.form-group title="Contact" description="Powers the Contact me and Book a call buttons. Leave empty to hide them.">
      <x-iq.field label="Public contact email" name="contact_email" optional help="Shown to visitors. Can differ from your login email."><x-iq.input name="contact_email" type="email" :value="$profile->contact_email" /></x-iq.field>
      <x-iq.field label="Booking link" name="booking_url" optional><x-iq.affix name="booking_url" prefix="https://" :value="preg_replace('#^https?://#', '', (string) $profile->booking_url)" placeholder="cal.com/yourname" /></x-iq.field>
    </x-iq.form-group>

    <x-iq.form-group title="Discovery" description="Let people find you in the InLynq directory.">
      <label class="iq-row" style="gap:12px;font-size:14px;grid-column:1/-1"><x-iq.switch name="is_discoverable" :checked="$profile->is_discoverable" /> Show me in Discover once published</label>
    </x-iq.form-group>

    <div class="app-formactions"><a class="iq-btn iq-btn-quiet" href="{{ route('builder.show') }}">Cancel</a><button class="iq-btn iq-btn-primary">Save changes</button></div>
  </form>

  <div class="app-formgroup" id="socials">
    <div><h3>Social profiles</h3><p class="iq-muted">Shown as pills under your name. Paste a link or an @handle.</p></div>
    <div class="iq-stack" style="gap:8px">
      <div class="iq-stack" style="gap:8px" data-reorder-url="{{ route('reorder', 'socials') }}">
        @forelse ($user->socialProfiles as $social)
          <div class="iq-dragrow" data-id="{{ $social->id }}">
            <span class="grip"><x-iq.icon name="grip" /></span>
            <span class="lbl">{{ $social->label() }} <span class="cnt">{{ \App\Support\Url::display($social->url) }}</span></span>
            <span class="acts">
              <form method="POST" action="{{ route('socials.destroy', $social) }}" data-confirm="Remove {{ $social->label() }}?" data-confirm-action="Remove">@csrf @method('DELETE')<button class="iq-btn iq-btn-quiet iq-btn-icon iq-btn-sm" aria-label="Remove {{ $social->label() }}"><x-iq.icon name="trash" /></button></form>
            </span>
          </div>
        @empty
          <p class="iq-muted" style="margin:0;font-size:14px">No social profiles yet.</p>
        @endforelse
      </div>
      <form method="POST" action="{{ route('socials.store') }}" class="iq-row" style="gap:8px;flex-wrap:wrap;align-items:flex-start">
        @csrf
        <x-iq.select name="platform" :options="$platforms" value="linkedin" style="width:160px" aria-label="Platform" />
        <div class="iq-field" style="flex:1;min-width:200px"><x-iq.input name="url" placeholder="linkedin.com/in/you or @handle" aria-label="Profile link or handle" required />@error('url')<span class="iq-error">{{ $message }}</span>@enderror</div>
        <button class="iq-btn iq-btn-secondary"><x-iq.icon name="plus" /> Add</button>
      </form>
    </div>
  </div>

  <form method="POST" action="{{ route('profile.username') }}" id="handle">
    @csrf @method('PUT')
    <x-iq.form-group title="Your link" description="Changing it breaks links you've already shared.">
      <x-iq.field label="Handle" name="username" span><x-iq.affix name="username" :prefix="\App\Support\PublicUrl::host().'/'" :value="$user->username" maxlength="30" data-username-check="#handle-status" /></x-iq.field>
      <span id="handle-status" class="iq-help" hidden style="grid-column:1/-1"></span>
      <div style="grid-column:1/-1"><button class="iq-btn iq-btn-secondary iq-btn-sm">Change handle</button></div>
    </x-iq.form-group>
  </form>

  <form method="POST" action="{{ route('profile.seo') }}">
    @csrf @method('PUT')
    <x-iq.form-group title="Search & sharing" description="How your profile looks in Google and link previews. Leave empty to use your name and bio.">
      <x-iq.field label="Title" name="seo_title" optional span><x-iq.input name="seo_title" :value="$profile->seo_title" maxlength="70" :placeholder="$user->name.($user->headline ? ' — '.$user->headline : '').' | InLynq'" /></x-iq.field>
      <x-iq.field label="Description" name="seo_description" optional span><x-iq.textarea name="seo_description" :value="$profile->seo_description" max="160" style="min-height:72px" :placeholder="$user->bio" /></x-iq.field>
      <div style="grid-column:1/-1"><button class="iq-btn iq-btn-secondary iq-btn-sm">Save search settings</button></div>
    </x-iq.form-group>
  </form>
</div>
@endsection