{{-- Profile builder (design: Screens · Dashboard / Builder). Editor | Live preview. --}}
@extends('layouts.app')
@section('title', 'Profile builder — InLynq')
@section('heading', 'Profile builder')

@section('topbar')
  <span class="iq-muted app-hide-sm" style="font-size:13px" data-pending-count>
    @if ($profile->isPublished() && ! $profile->hasUnpublishedChanges()) All changes published
    @else {{ $profile->pending_changes ?: 'No' }} unpublished {{ \Illuminate\Support\Str::plural('change', $profile->pending_changes) }} @endif
  </span>
  <button type="button" class="iq-btn iq-btn-primary iq-btn-sm" data-publish="{{ route('profile.publish') }}" @disabled($profile->isPublished() && ! $profile->hasUnpublishedChanges())>{{ $profile->isPublished() && ! $profile->hasUnpublishedChanges() ? 'Published' : 'Publish' }}</button>
@endsection

@section('content')
<div class="app-builder" data-builder data-tab="edit"
  data-reorder-url="{{ route('sections.reorder') }}"
  data-sections-url="{{ url('/profile/sections') }}"
  data-theme-url="{{ route('theme.update') }}">

  <div class="app-builder-mobile-tabs"><div class="iq-seg" data-builder-tabs style="margin:12px 0"><button class="is-active" data-value="edit">Edit</button><button data-value="preview">Preview</button></div></div>

  <div class="app-builder-editor">
    <div style="padding:0 24px"><div class="iq-tabs" data-editor-tabs><button class="iq-tab is-active" data-value="content">Content</button><button class="iq-tab" data-value="design">Design</button><button class="iq-tab" data-value="settings">Settings</button></div></div>

    {{-- Content --}}
    <div class="app-builder-panel" data-panel="content">
      <div class="iq-card" style="padding:16px;display:flex;gap:14px;align-items:center">
        <x-iq.avatar :name="$user->name" :src="$user->avatar_url" size="lg" />
        <div style="flex:1;min-width:0"><div style="font-weight:600">Header</div><div class="iq-muted" style="font-size:13px">Photo, name, headline, location, CTA</div></div>
        <a class="iq-btn iq-btn-secondary iq-btn-sm" href="{{ route('profile.edit') }}"><x-iq.icon name="edit" /> Edit</a>
      </div>

      <div class="iq-stack" style="gap:8px">
        <div class="iq-row" style="justify-content:space-between">
          <span class="iq-overline">Sections · drag to reorder</span>
          @if (count($addable))
          <div class="app-menu-wrap">
            <button type="button" class="iq-btn iq-btn-quiet iq-btn-sm" data-menu-toggle aria-haspopup="menu" aria-expanded="false"><x-iq.icon name="plus" /> Add section</button>
            <div class="iq-menu app-menu" role="menu" hidden>
              <div class="iq-menu-head iq-overline">Add a section</div>
              @foreach ($addable as $type)
                <button type="button" class="iq-menu-item" role="menuitem" style="width:100%;border:0;background:none" data-add-section="{{ $type->value }}"><x-iq.icon :name="$type->icon()" /> {{ $type->label() }}</button>
              @endforeach
            </div>
          </div>
          @endif
        </div>
        <div class="iq-stack" style="gap:8px" data-section-list>
          @foreach ($sections as $s)
            <div class="iq-dragrow {{ $s['is_visible'] ? '' : 'is-hidden' }}" data-id="{{ $s['type']->value }}">
              <span class="grip"><x-iq.icon name="grip" /></span>
              <span class="lbl">{{ $s['title'] }}</span>
              <span class="cnt">{{ $s['count'] }}</span>
              <span class="acts">
                @if ($s['manage'])<a class="iq-btn iq-btn-quiet iq-btn-icon iq-btn-sm" href="{{ route($s['manage']) }}" aria-label="Edit {{ $s['title'] }}"><x-iq.icon name="edit" /></a>@endif
                <input type="checkbox" class="iq-switch" data-toggle-section="{{ $s['type']->value }}" aria-label="Show {{ $s['title'] }}" @checked($s['is_visible'])>
              </span>
            </div>
          @endforeach
        </div>
        <p class="iq-help" style="margin:4px 0 0">Empty sections are never shown publicly.</p>
      </div>
    </div>

    {{-- Design --}}
    <div class="app-builder-panel" data-panel="design" hidden>
      <div class="iq-stack" style="gap:12px">
        <span class="iq-overline">Theme</span>
        <div class="iq-seg" data-theme-mode>
          @foreach (['light' => 'Light', 'dark' => 'Dark', 'auto' => 'Auto'] as $v => $l)<button type="button" @class(['is-active' => $theme['mode'] === $v]) data-value="{{ $v }}">{{ $l }}</button>@endforeach
        </div>

        <div class="iq-field"><span class="iq-label">Accent colour</span>
          <div class="iq-row" style="gap:10px" data-theme-accent>
            @foreach ($accents as $key => $a)
              <button type="button" class="iq-swatch {{ ! $theme['custom_accent'] && $theme['accent'] === $key ? 'is-active' : '' }}" style="background:{{ $a['light'][0] }}" data-accent="{{ $key }}" data-c="{{ $a['light'][0] }}" data-k="{{ $a['light'][1] }}" data-t="{{ $a['light'][2] }}" aria-label="{{ $a['label'] }}" aria-pressed="{{ ! $theme['custom_accent'] && $theme['accent'] === $key ? 'true' : 'false' }}"></button>
            @endforeach
            @if ($can['custom_accent'])
              <label class="iq-row" style="gap:6px;font-size:13px"><input type="color" value="{{ $theme['custom_accent'] ?? '#0E5C46' }}" data-theme-custom aria-label="Custom accent colour" style="width:28px;height:28px;border:0;padding:0;background:none"> Custom</label>
            @else
              <a href="#" class="iq-badge iq-badge-pro" data-pro-locked>Pro: custom</a>
            @endif
          </div>
        </div>

        <div class="iq-field"><span class="iq-label">Typography</span>
          <div class="iq-seg" data-theme-font>
            @foreach ($fonts as $key => $f)
              @if ($f['premium'] && ! $can['premium_themes'])
                <button type="button" data-pro-locked>{{ $f['label'] }} <span class="iq-badge iq-badge-pro" style="height:18px;padding:0 5px;margin-left:4px">Pro</span></button>
              @else
                <button type="button" @class(['is-active' => $theme['font'] === $key]) data-value="{{ $key }}">{{ $f['label'] }}</button>
              @endif
            @endforeach
          </div>
        </div>

        <div class="iq-field"><span class="iq-label">Cards</span>
          <div class="iq-seg" data-theme-cards>
            <button type="button" @class(['is-active' => $theme['card_style'] === 'bordered']) data-value="bordered">Bordered</button>
            <button type="button" @class(['is-active' => $theme['card_style'] === 'flat']) data-value="flat">Flat</button>
          </div>
        </div>

        <label class="iq-row" style="justify-content:space-between;font-size:14px">Remove InLynq branding
          <span class="iq-row" style="gap:8px">@unless($can['remove_branding'])<span class="iq-badge iq-badge-pro">Pro</span>@endunless
            <input type="checkbox" class="iq-switch" data-theme-switch="remove_branding" @if(! $can['remove_branding']) data-pro="locked" @endif @checked($theme['remove_branding'] && $can['remove_branding'])></span>
        </label>
      </div>
    </div>

    {{-- Settings --}}
    <div class="app-builder-panel" data-panel="settings" hidden>
      <div class="iq-stack" style="gap:8px">
        <span class="iq-overline">Status</span>
        <div class="iq-row" style="justify-content:space-between"><span class="iq-badge {{ $profile->status->badgeClass() }}"><span class="dot"></span>{{ $profile->status->label() }}</span>
          @if ($profile->published_at)<span class="iq-muted" style="font-size:13px">Last published {{ $profile->published_at->diffForHumans() }}</span>@endif</div>
        <div data-unpublish-row @unless($profile->isPublished()) hidden @endunless>
          <form method="POST" action="{{ route('profile.unpublish') }}" data-confirm="Unpublish your profile?" data-confirm-body="Your page will stop showing to visitors. Your content is kept and you can publish again any time." data-confirm-action="Unpublish">
            @csrf<button class="iq-btn iq-btn-danger iq-btn-sm">Unpublish profile</button>
          </form>
        </div>
      </div>
      <div class="iq-hr"></div>
      <div class="iq-stack" style="gap:8px">
        <span class="iq-overline">Your link</span>
        <span class="iq-urlpill" style="align-self:flex-start">@if($profile->isPublished())<span class="live"></span>@endif{{ \App\Support\PublicUrl::display($user->username) }}</span>
        <a class="iq-link" style="font-size:14px" href="{{ route('profile.edit') }}#handle">Change handle, SEO and discovery settings</a>
      </div>
    </div>
  </div>

  <div class="app-builder-preview">
    <div class="iq-row" style="justify-content:space-between;width:100%">
      <div class="iq-seg" data-device><button type="button" class="is-active" data-value="mobile"><x-iq.icon name="phone" size="sm" /> Mobile</button><button type="button" data-value="desktop"><x-iq.icon name="monitor" size="sm" /> Desktop</button></div>
      <span class="iq-row iq-muted" style="gap:6px;font-size:12px"><span class="iq-status live">Live preview</span> · <span data-save-status>changes save automatically</span></span>
    </div>
    <div class="iq-device app-builder-frame" data-preview-frame>
      <iframe src="{{ route('builder.preview') }}" title="Live preview of your profile" loading="eager"></iframe>
    </div>
  </div>
</div>

@include('dashboard.partials.upgrade-dialog')
@endsection