{{-- Links (design: LinkList). Inline add/edit; one featured row per profile. --}}
@extends('layouts.app')
@section('title', 'Links — InLynq')
@section('heading', 'Links')

@section('content')
<x-iq.page-head title="Links">
  <x-slot:sub>Your important links, in order. Social profiles live in your header instead.</x-slot:sub>
  @include('dashboard.partials.limit-note', ['count' => $links->count()])
  <a class="iq-btn iq-btn-secondary" href="{{ route('profile.edit') }}#socials">Social profiles</a>
</x-iq.page-head>

<div class="app-grid-main">
  <div class="iq-stack" style="gap:8px">
    @if ($links->isEmpty())
      <x-iq.empty icon="link" title="No links yet.">Add your website, booking link, newsletter or store.</x-iq.empty>
    @else
    <div class="iq-stack" style="gap:8px" data-reorder-url="{{ route('reorder', 'links') }}">
      @foreach ($links as $link)
        <div class="iq-dragrow {{ $link->is_visible ? '' : 'is-hidden' }}" data-id="{{ $link->id }}" style="height:auto;padding:10px 12px 10px 8px">
          <span class="grip"><x-iq.icon name="grip" /></span>
          <span class="iq-avatar sm a3" style="border-radius:10px"><x-iq.icon :name="$link->iconName()" size="sm" /></span>
          <span class="lbl">{{ $link->title }} @if($link->is_featured)<span class="iq-badge" style="margin-left:4px">Featured</span>@endif
            <span class="iq-num iq-muted" style="display:block;font-size:12px;font-weight:400">{{ \App\Support\Url::display($link->url) }}</span></span>
          <span class="cnt" title="Clicks">{{ number_format($link->click_count) }}</span>
          <span class="acts">
            <a class="iq-btn iq-btn-quiet iq-btn-icon iq-btn-sm" href="{{ route('links.index', ['edit' => $link->id]) }}" aria-label="Edit {{ $link->title }}"><x-iq.icon name="edit" /></a>
            <form method="POST" action="{{ route('links.destroy', $link) }}" class="app-inline-form" data-confirm="Delete {{ $link->title }}?" data-confirm-action="Delete">@csrf @method('DELETE')<button class="iq-btn iq-btn-quiet iq-btn-icon iq-btn-sm" aria-label="Delete {{ $link->title }}"><x-iq.icon name="trash" /></button></form>
          </span>
        </div>
      @endforeach
    </div>
    @endif
  </div>

  @php($edit = $editing ? $links->firstWhere('id', $editing) : null)
  <div class="iq-card" style="padding:24px;position:sticky;top:96px">
    <h3 style="margin:0 0 16px;font-size:16px;font-weight:600">{{ $edit ? 'Edit link' : 'Add a link' }}</h3>
    @if (! $edit && ! $canCreate)
      <div class="iq-banner"><x-iq.icon name="lock" /><div><b>You've used all {{ $limit }} links on Free.</b> <a class="iq-link" href="{{ route('checkout.show', 'pro-yearly') }}">Upgrade</a> for unlimited links.</div></div>
    @else
    <form method="POST" action="{{ $edit ? route('links.update', $edit) : route('links.store') }}" class="iq-stack">
      @csrf @if($edit) @method('PUT') @endif
      <x-iq.field label="Type" name="type"><x-iq.select name="type" :options="$types" :value="$edit?->type ?? 'website'" /></x-iq.field>
      <x-iq.field label="Title" name="title"><x-iq.input name="title" :value="$edit?->title" required maxlength="80" placeholder="Book a call" /></x-iq.field>
      <x-iq.field label="Link" name="url" help="A web address, or a phone number for WhatsApp."><x-iq.input name="url" :value="$edit?->url" required placeholder="cal.com/yourname" /></x-iq.field>
      <label class="iq-row" style="gap:12px;font-size:14px"><x-iq.switch name="is_featured" :checked="$edit?->is_featured ?? false" /> Feature this link (one per profile)</label>
      <label class="iq-row" style="gap:12px;font-size:14px"><x-iq.switch name="is_visible" :checked="$edit?->is_visible ?? true" /> Show on my profile</label>
      <div class="iq-row" style="justify-content:flex-end">@if($edit)<a class="iq-btn iq-btn-quiet" href="{{ route('links.index') }}">Cancel</a>@endif<button class="iq-btn iq-btn-primary">{{ $edit ? 'Save link' : 'Add link' }}</button></div>
    </form>
    @endif
  </div>
</div>
@endsection