@extends('card.layout')

@section('title', 'Edit Card — TAPLY')

@php
  $coverGradients = [
    'Teal'     => 'linear-gradient(160deg,#14b8a6,#0ea5e9)',
    'Violet'   => 'linear-gradient(160deg,#7c5cff,#4b2fb8)',
    'Indigo'   => 'linear-gradient(160deg,#5e6cff,#2a3aa1)',
    'Sunset'   => 'linear-gradient(160deg,#ff7a59,#c83a1f)',
    'Emerald'  => 'linear-gradient(160deg,#34d399,#0f766e)',
    'Fuchsia'  => 'linear-gradient(160deg,#f472b6,#9d174d)',
    'Midnight' => 'linear-gradient(160deg,#222,#000)',
  ];
  $coverName = old('cover_name', $profile->cover_name->value);
  $layout    = old('layout',     $profile->layout->value);
  $appearance = old('appearance', $profile->appearance->value);

  $profilePhotoUrl = $profile->profile_photo_path ? \Illuminate\Support\Facades\Storage::url($profile->profile_photo_path) : null;
  $companyLogoUrl  = $profile->company_logo_path  ? \Illuminate\Support\Facades\Storage::url($profile->company_logo_path)  : null;

  $initials = collect(preg_split('/\s+/', trim($profile->full_name)))
    ->filter()->take(2)->map(fn ($w) => mb_strtoupper(mb_substr($w, 0, 1)))->implode('');
  $companyInitials = mb_strtoupper(mb_substr($profile->company_display_name ?: 'CO', 0, 3));

  $phonePlaceholders = [
    'linkedin' => 'https://linkedin.com/in/username',
    'x' => 'https://x.com/username',
    'instagram' => 'https://instagram.com/username',
    'facebook' => 'https://facebook.com/username',
    'youtube' => 'https://youtube.com/@channel',
    'tiktok' => 'https://tiktok.com/@username',
    'github' => 'https://github.com/username',
    'whatsapp' => 'https://wa.me/15551234567',
    'telegram' => 'https://t.me/username',
    'snapchat' => 'https://snapchat.com/add/username',
    'pinterest' => 'https://pinterest.com/username',
    'website' => 'https://yourdomain.com',
    'other' => 'https://...',
  ];

  $platformLabels = [
    'linkedin' => 'LinkedIn',
    'x' => 'X / Twitter',
    'instagram' => 'Instagram',
    'facebook' => 'Facebook',
    'youtube' => 'YouTube',
    'tiktok' => 'TikTok',
    'github' => 'GitHub',
    'whatsapp' => 'WhatsApp',
    'telegram' => 'Telegram',
    'snapchat' => 'Snapchat',
    'pinterest' => 'Pinterest',
    'website' => 'Website',
    'other' => 'Other',
  ];

  $platformIcons = [
    'linkedin' => 'bi-linkedin',
    'x' => 'bi-twitter-x',
    'instagram' => 'bi-instagram',
    'facebook' => 'bi-facebook',
    'youtube' => 'bi-youtube',
    'tiktok' => 'bi-tiktok',
    'github' => 'bi-github',
    'whatsapp' => 'bi-whatsapp',
    'telegram' => 'bi-telegram',
    'snapchat' => 'bi-snapchat',
    'pinterest' => 'bi-pinterest',
    'website' => 'bi-globe2',
    'other' => 'bi-link-45deg',
  ];

  $oldPhones  = old('phones',  $phones->map(fn ($p)  => ['label' => $p->label->value,   'number'   => $p->number])->all());
  $oldEmails  = old('emails',  $emails->map(fn ($e)  => ['label' => $e->label->value,   'address'  => $e->address])->all());
  $oldSocials = old('socials', $socials->map(fn ($s) => ['platform' => $s->platform->value, 'url' => $s->url])->all());
@endphp

@section('body')
  <main class="app-shell">

    <header class="edit-topbar">
      <a class="btn-text" href="{{ route('card.index') }}">Cancel</a>
      <div class="title">{{ $isOwner ? 'Edit Card' : 'Edit · '.$target->name }}</div>
      <a class="btn-preview" href="{{ $isOwner ? route('card.preview') : route('card.preview', $target) }}">Preview <i class="bi bi-eye"></i></a>
    </header>

    @if ($errors->any())
      <div class="alert alert-danger small mb-3">
        <ul class="mb-0 ps-3">
          @foreach ($errors->all() as $err)
            <li>{{ $err }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    @if (session('status'))
      <div class="alert alert-success small mb-3">{{ session('status') }}</div>
    @endif

    <form id="editForm" method="POST" action="{{ $isOwner ? route('card.update') : route('card.update', $target) }}">
      @csrf

      {{-- Hidden carriers for non-input state (selected cover/layout/appearance, image data URLs, clear flags). --}}
      <input type="hidden" name="cover_name" id="coverNameInput" value="{{ $coverName }}">
      <input type="hidden" name="layout"     id="layoutInput"    value="{{ $layout }}">
      <input type="hidden" name="appearance" id="appearanceInput" value="{{ $appearance }}">
      <input type="hidden" name="profile_photo"       id="profilePhotoData">
      <input type="hidden" name="profile_photo_clear" id="profilePhotoClear" value="0">
      <input type="hidden" name="company_logo"        id="companyLogoData">
      <input type="hidden" name="company_logo_clear"  id="companyLogoClear" value="0">

      <div class="section-label">Profile</div>
      <div class="profile-photo-card">
        <div class="avatar-md" id="profileThumb">
          @if ($profilePhotoUrl)
            <img src="{{ $profilePhotoUrl }}" alt="">
          @else
            {{ $initials ?: 'ME' }}
          @endif
        </div>
        <div class="meta">
          <div class="label">Profile photo</div>
          <div class="hint">PNG or JPG &middot; max 2MB &middot; square works best</div>
        </div>
        <button type="button" id="profileRemove" class="btn-change" @if (! $profilePhotoUrl) hidden @endif>Remove</button>
        <label class="btn-change" for="profilePhoto" style="cursor:pointer;">Change</label>
        <input type="file" id="profilePhoto" accept="image/png,image/jpeg" hidden>
      </div>

      <div class="field-group mt-2">
        <label class="form-label-sm" for="fullName">Full name</label>
        <input id="fullName" name="full_name" type="text" class="form-control-dark w-100" value="{{ old('full_name', $profile->full_name) }}" required>
      </div>
      <div class="field-group">
        <label class="form-label-sm" for="role">Role</label>
        <input id="role" name="role_title" type="text" class="form-control-dark w-100" value="{{ old('role_title', $profile->role_title) }}">
      </div>
      <div class="field-group">
        <label class="form-label-sm" for="company">Company</label>
        <input id="company" name="company_display_name" type="text" class="form-control-dark w-100" value="{{ old('company_display_name', $profile->company_display_name) }}">
      </div>
      <div class="field-group">
        <label class="form-label-sm">Company logo</label>
        <div class="upload-row">
          <div class="upload-thumb" id="logoThumb">
            @if ($companyLogoUrl)
              <img src="{{ $companyLogoUrl }}" alt="">
            @else
              {{ $companyInitials }}
            @endif
          </div>
          <div class="upload-meta">
            <div class="hint">PNG, JPG or SVG &middot; max 2MB &middot; square works best</div>
          </div>
          <button type="button" id="logoRemove" class="btn-change" @if (! $companyLogoUrl) hidden @endif>Remove</button>
          <label class="btn-change" for="companyLogo" style="cursor:pointer;">Upload</label>
          <input type="file" id="companyLogo" accept="image/png,image/jpeg,image/svg+xml" hidden>
        </div>
      </div>
      <div class="field-group">
        <label class="form-label-sm" for="bio">Bio</label>
        <textarea id="bio" name="bio" rows="3" class="form-control-dark w-100">{{ old('bio', $profile->bio) }}</textarea>
      </div>

      <div class="section-label">Card cover</div>
      <div class="swatch-row pb-3">
        @foreach ($coverGradients as $name => $gradient)
          <div class="swatch" data-cover-name="{{ $name }}" data-cover-gradient="{{ $gradient }}">
            <span class="swatch-color" style="background:{{ $gradient }}">
              <span class="swatch-check"><i class="bi bi-check-lg"></i></span>
            </span>
            <span class="swatch-name">{{ $name }}</span>
          </div>
        @endforeach
      </div>

      <div class="section-label">Profile layout</div>
      <div class="tile-row">
        <div class="layout-tile" data-layout="centered">
          <div class="preview centered">
            <span class="lp-avatar"></span>
            <span class="lp-line w-60"></span>
            <span class="lp-line w-40"></span>
          </div>
          <div class="tile-meta">
            <span>Centered</span>
            <i class="bi bi-check-circle-fill tile-check"></i>
          </div>
        </div>
        <div class="layout-tile" data-layout="left">
          <div class="preview left">
            <span class="lp-avatar"></span>
            <span class="lp-lines">
              <span class="lp-line"></span>
              <span class="lp-line short"></span>
            </span>
          </div>
          <div class="tile-meta">
            <span>Left</span>
            <i class="bi bi-check-circle-fill tile-check"></i>
          </div>
        </div>
        <div class="layout-tile" data-layout="magazine">
          <div class="preview magazine">
            <span class="lp-lines">
              <span class="lp-line w-60"></span>
              <span class="lp-line w-40"></span>
            </span>
            <span class="lp-avatar square"></span>
          </div>
          <div class="tile-meta">
            <span>Magazine</span>
            <i class="bi bi-check-circle-fill tile-check"></i>
          </div>
        </div>
      </div>

      <div class="section-label">Card appearance</div>
      <div class="tile-row" style="grid-template-columns: 1fr 1fr;">
        <div class="appearance-tile dark" data-appearance="dark">
          <div class="preview"><span class="ap-chip"></span></div>
          <div class="tile-meta">
            <span class="ap-radio"></span>
            <span class="ap-label">Dark</span>
            <i class="bi bi-check-circle-fill tile-check"></i>
          </div>
        </div>
        <div class="appearance-tile light" data-appearance="light">
          <div class="preview"><span class="ap-chip"></span></div>
          <div class="tile-meta">
            <span class="ap-radio"></span>
            <span class="ap-label">Light</span>
            <i class="bi bi-check-circle-fill tile-check"></i>
          </div>
        </div>
      </div>

      <div class="section-label">Phone numbers</div>
      <div id="phoneNumbers">
        @forelse ($oldPhones as $i => $row)
          <div class="field-group repeatable-row">
            <label class="form-label-sm">Phone number</label>
            <div class="row-control">
              <select class="form-select-dark" name="phones[{{ $i }}][label]">
                @foreach ($phoneLabels as $label)
                  <option value="{{ $label }}" @selected(($row['label'] ?? 'Mobile') === $label)>{{ $label }}</option>
                @endforeach
              </select>
              <input type="tel" name="phones[{{ $i }}][number]" class="form-control-dark flex-grow-1" value="{{ $row['number'] ?? '' }}">
              <button type="button" class="icon-btn row-remove" aria-label="Remove"><i class="bi bi-trash"></i></button>
            </div>
          </div>
        @empty
        @endforelse
      </div>
      <button type="button" class="add-another" id="addPhone"><i class="bi bi-plus-lg"></i> Add another</button>

      <template id="phoneTemplate">
        <div class="field-group repeatable-row">
          <label class="form-label-sm">Phone number</label>
          <div class="row-control">
            <select class="form-select-dark" data-name="phones[__i__][label]">
              @foreach ($phoneLabels as $label)
                <option value="{{ $label }}" @selected($label === 'Mobile')>{{ $label }}</option>
              @endforeach
            </select>
            <input type="tel" data-name="phones[__i__][number]" class="form-control-dark flex-grow-1" placeholder="+1 555 555 5555">
            <button type="button" class="icon-btn row-remove" aria-label="Remove"><i class="bi bi-trash"></i></button>
          </div>
        </div>
      </template>

      <div class="section-label">Email addresses</div>
      <div id="emailAddresses">
        @forelse ($oldEmails as $i => $row)
          <div class="field-group repeatable-row">
            <label class="form-label-sm">Email address</label>
            <div class="row-control">
              <select class="form-select-dark" name="emails[{{ $i }}][label]">
                @foreach ($emailLabels as $label)
                  <option value="{{ $label }}" @selected(($row['label'] ?? 'Personal') === $label)>{{ $label }}</option>
                @endforeach
              </select>
              <input type="email" name="emails[{{ $i }}][address]" class="form-control-dark flex-grow-1" value="{{ $row['address'] ?? '' }}">
              <button type="button" class="icon-btn row-remove" aria-label="Remove"><i class="bi bi-trash"></i></button>
            </div>
          </div>
        @empty
        @endforelse
      </div>
      <button type="button" class="add-another" id="addEmail"><i class="bi bi-plus-lg"></i> Add another</button>

      <template id="emailTemplate">
        <div class="field-group repeatable-row">
          <label class="form-label-sm">Email address</label>
          <div class="row-control">
            <select class="form-select-dark" data-name="emails[__i__][label]">
              @foreach ($emailLabels as $label)
                <option value="{{ $label }}" @selected($label === 'Personal')>{{ $label }}</option>
              @endforeach
            </select>
            <input type="email" data-name="emails[__i__][address]" class="form-control-dark flex-grow-1" placeholder="name@example.com">
            <button type="button" class="icon-btn row-remove" aria-label="Remove"><i class="bi bi-trash"></i></button>
          </div>
        </div>
      </template>

      <div class="section-label">Quick contact</div>
      <div class="field-group">
        <label class="form-label-sm">WhatsApp number</label>
        <input type="tel" name="whatsapp" class="form-control-dark w-100" value="{{ old('whatsapp', $profile->whatsapp) }}">
      </div>
      <div class="field-group">
        <label class="form-label-sm">Website</label>
        <input type="url" name="website" class="form-control-dark w-100" value="{{ old('website', $profile->website) }}" placeholder="https://">
      </div>

      <div class="section-label">Address</div>
      <div class="field-group">
        <label class="form-label-sm">Office</label>
        <textarea name="address" rows="3" class="form-control-dark w-100">{{ old('address', $profile->address) }}</textarea>
      </div>

      <div class="section-label">Social links</div>
      <div id="socialLinks">
        @forelse ($oldSocials as $i => $row)
          @php $platform = $row['platform'] ?? 'other'; @endphp
          <div class="field-group social-link">
            <div class="row-control">
              <i class="bi {{ $platformIcons[$platform] ?? 'bi-link-45deg' }} social-icon"></i>
              <select class="form-select-dark social-platform" name="socials[{{ $i }}][platform]" aria-label="Platform">
                @foreach ($socialPlatforms as $p)
                  <option value="{{ $p }}" @selected($p === $platform)>{{ $platformLabels[$p] ?? ucfirst($p) }}</option>
                @endforeach
              </select>
              <input type="url" name="socials[{{ $i }}][url]" class="form-control-dark flex-grow-1 social-url" value="{{ $row['url'] ?? '' }}" placeholder="{{ $phonePlaceholders[$platform] ?? 'https://...' }}">
              <button type="button" class="icon-btn social-remove" aria-label="Remove"><i class="bi bi-trash"></i></button>
            </div>
          </div>
        @empty
        @endforelse
      </div>
      <button type="button" class="add-another" id="addSocial"><i class="bi bi-plus-lg"></i> Add social link</button>

      <template id="socialLinkTemplate">
        <div class="field-group social-link">
          <div class="row-control">
            <i class="bi bi-link-45deg social-icon"></i>
            <select class="form-select-dark social-platform" data-name="socials[__i__][platform]" aria-label="Platform">
              @foreach ($socialPlatforms as $p)
                <option value="{{ $p }}" @selected($p === 'other')>{{ $platformLabels[$p] ?? ucfirst($p) }}</option>
              @endforeach
            </select>
            <input type="url" data-name="socials[__i__][url]" class="form-control-dark flex-grow-1 social-url" placeholder="https://...">
            <button type="button" class="icon-btn social-remove" aria-label="Remove"><i class="bi bi-trash"></i></button>
          </div>
        </div>
      </template>

      <div class="section-label">Account</div>
      @php $actor = auth()->user(); @endphp
      @if ($actor->hasRole(\App\Enums\UserRole::Admin))
        <a class="account-row" href="{{ url('/dashboard') }}">
          <span class="icon"><i class="bi bi-grid-3x3-gap"></i></span>
          <span>Admin dashboard</span>
        </a>
      @elseif ($actor->hasRole(\App\Enums\UserRole::Company))
        <a class="account-row" href="{{ route('portal.index') }}">
          <span class="icon"><i class="bi bi-buildings"></i></span>
          <span>{{ $actor->company?->name ?? 'Company portal' }}</span>
        </a>
      @endif
      <button type="button" class="account-row" onclick="document.getElementById('logoutForm').submit();">
        <span class="icon"><i class="bi bi-box-arrow-right"></i></span>
        <span>Sign out of TAPLY</span>
      </button>

      <div class="sticky-actions">
        <button type="submit" class="btn btn-primary-purple"><i class="bi bi-check2 me-1"></i> SAVE CHANGES</button>
      </div>
    </form>

    <form id="logoutForm" method="POST" action="{{ route('card.logout') }}" class="d-none">
      @csrf
    </form>

    <div id="cropModal" class="crop-modal" hidden>
      <div class="crop-card">
        <div class="crop-header">
          <button type="button" class="btn-text" id="cropCancel">Cancel</button>
          <div class="crop-title">Adjust image</div>
          <button type="button" class="btn-preview" id="cropSave">Done</button>
        </div>
        <div class="crop-stage" id="cropStage">
          <img id="cropImg" alt="" draggable="false">
          <div class="crop-mask" id="cropMask"></div>
        </div>
        <div class="crop-controls">
          <i class="bi bi-zoom-out"></i>
          <input type="range" id="cropZoom" min="1" max="4" step="0.01" value="1" aria-label="Zoom">
          <i class="bi bi-zoom-in"></i>
        </div>
      </div>
    </div>
  </main>
@endsection

@push('scripts')
  <script>
    window.TAPLY_STATE = {
      coverName:  @json($coverName),
      cover:      @json($coverGradients[$coverName] ?? $coverGradients['Teal']),
      layout:     @json($layout),
      appearance: @json($appearance),
      companyLogo:  @json($companyLogoUrl),
      profilePhoto: @json($profilePhotoUrl),
    };
    window.TAPLY_COVER_GRADIENTS = @json($coverGradients);
  </script>
  <script src="{{ asset('assets/js/cropper.js') }}"></script>
  <script src="{{ asset('assets/js/state.js') }}"></script>
  @verbatim
  <script>
    (function () {
      var state = window.TAPLY_STATE;

      function syncUI() {
        document.querySelectorAll('.swatch').forEach(function (el) {
          el.classList.toggle('active', el.dataset.coverName === state.coverName);
        });
        document.querySelectorAll('.layout-tile').forEach(function (el) {
          el.classList.toggle('active', el.dataset.layout === state.layout);
        });
        document.querySelectorAll('.appearance-tile').forEach(function (el) {
          el.classList.toggle('active', el.dataset.appearance === state.appearance);
        });
        document.getElementById('coverNameInput').value = state.coverName;
        document.getElementById('layoutInput').value = state.layout;
        document.getElementById('appearanceInput').value = state.appearance;
      }
      syncUI();
      TaplyState.apply(state);

      document.querySelectorAll('.swatch').forEach(function (el) {
        el.addEventListener('click', function () {
          state.coverName = el.dataset.coverName;
          state.cover = el.dataset.coverGradient;
          syncUI();
          TaplyState.apply(state);
        });
      });
      document.querySelectorAll('.layout-tile').forEach(function (el) {
        el.addEventListener('click', function () {
          state.layout = el.dataset.layout;
          syncUI();
          TaplyState.apply(state);
        });
      });
      document.querySelectorAll('.appearance-tile').forEach(function (el) {
        el.addEventListener('click', function () {
          state.appearance = el.dataset.appearance;
          syncUI();
          TaplyState.apply(state);
        });
      });

      function bindImageUpload(opts) {
        var fileEl = document.getElementById(opts.inputId);
        var thumbEl = document.getElementById(opts.thumbId);
        var removeEl = document.getElementById(opts.removeId);
        var dataEl = document.getElementById(opts.dataInputId);
        var clearEl = document.getElementById(opts.clearInputId);

        function renderFromState() {
          if (state[opts.stateKey]) {
            thumbEl.textContent = '';
            var img = document.createElement('img');
            img.src = state[opts.stateKey];
            img.alt = '';
            thumbEl.appendChild(img);
            removeEl.hidden = false;
          } else {
            thumbEl.textContent = opts.placeholder;
            removeEl.hidden = true;
          }
        }
        renderFromState();

        fileEl.addEventListener('change', function (e) {
          var file = e.target.files && e.target.files[0];
          if (!file) return;
          if (file.size > opts.maxBytes) {
            alert(opts.label + ' must be ' + (opts.maxBytes / 1024 / 1024) + 'MB or smaller.');
            fileEl.value = '';
            return;
          }
          var reader = new FileReader();
          reader.onload = function (ev) {
            TaplyCropper.open({
              src: ev.target.result,
              shape: opts.shape,
              outputSize: opts.outputSize,
              onDone: function (cropped) {
                state[opts.stateKey] = cropped;
                dataEl.value = cropped;
                clearEl.value = '0';
                renderFromState();
                TaplyState.apply(state);
              }
            });
            fileEl.value = '';
          };
          reader.readAsDataURL(file);
        });

        removeEl.addEventListener('click', function () {
          state[opts.stateKey] = null;
          dataEl.value = '';
          clearEl.value = '1';
          fileEl.value = '';
          renderFromState();
          TaplyState.apply(state);
        });
      }

      bindImageUpload({
        inputId: 'companyLogo',
        thumbId: 'logoThumb',
        removeId: 'logoRemove',
        dataInputId: 'companyLogoData',
        clearInputId: 'companyLogoClear',
        stateKey: 'companyLogo',
        placeholder: 'CO',
        maxBytes: 2 * 1024 * 1024,
        label: 'Logo',
        shape: 'square',
        outputSize: 256
      });

      bindImageUpload({
        inputId: 'profilePhoto',
        thumbId: 'profileThumb',
        removeId: 'profileRemove',
        dataInputId: 'profilePhotoData',
        clearInputId: 'profilePhotoClear',
        stateKey: 'profilePhoto',
        placeholder: 'ME',
        maxBytes: 2 * 1024 * 1024,
        label: 'Photo',
        shape: 'circle',
        outputSize: 512
      });

      // Repeatable rows (phones, emails) — use data-name on template inputs and rewrite to name=… with the row index on append.
      function reindex(listId, fieldKey) {
        var list = document.getElementById(listId);
        if (!list) return;
        Array.from(list.querySelectorAll('.repeatable-row')).forEach(function (row, i) {
          row.querySelectorAll('[name^="' + fieldKey + '"], [data-name]').forEach(function (el) {
            var template = el.getAttribute('data-name') || el.getAttribute('name');
            if (!template) return;
            var newName = template.replace(/__i__/g, i).replace(/\[\d+\]/, '[' + i + ']');
            el.setAttribute('name', newName);
            el.removeAttribute('data-name');
          });
        });
      }

      function bindRepeatable(listId, addBtnId, templateId, fieldKey) {
        var list = document.getElementById(listId);
        var addBtn = document.getElementById(addBtnId);
        var tpl = document.getElementById(templateId);
        if (!list || !addBtn || !tpl) return;

        function bindRow(row) {
          var rm = row.querySelector('.row-remove');
          if (rm) rm.addEventListener('click', function () {
            row.remove();
            reindex(listId, fieldKey);
          });
        }
        list.querySelectorAll('.repeatable-row').forEach(bindRow);

        addBtn.addEventListener('click', function () {
          var clone = tpl.content.firstElementChild.cloneNode(true);
          list.appendChild(clone);
          bindRow(clone);
          reindex(listId, fieldKey);
          var inp = clone.querySelector('input');
          if (inp) inp.focus();
        });
      }
      bindRepeatable('phoneNumbers', 'addPhone', 'phoneTemplate', 'phones');
      bindRepeatable('emailAddresses', 'addEmail', 'emailTemplate', 'emails');

      var PLATFORMS = {
        linkedin:  { icon: 'bi-linkedin',    placeholder: 'https://linkedin.com/in/username' },
        x:         { icon: 'bi-twitter-x',   placeholder: 'https://x.com/username' },
        instagram: { icon: 'bi-instagram',   placeholder: 'https://instagram.com/username' },
        facebook:  { icon: 'bi-facebook',    placeholder: 'https://facebook.com/username' },
        youtube:   { icon: 'bi-youtube',     placeholder: 'https://youtube.com/@channel' },
        tiktok:    { icon: 'bi-tiktok',      placeholder: 'https://tiktok.com/@username' },
        github:    { icon: 'bi-github',      placeholder: 'https://github.com/username' },
        whatsapp:  { icon: 'bi-whatsapp',    placeholder: 'https://wa.me/15551234567' },
        telegram:  { icon: 'bi-telegram',    placeholder: 'https://t.me/username' },
        snapchat:  { icon: 'bi-snapchat',    placeholder: 'https://snapchat.com/add/username' },
        pinterest: { icon: 'bi-pinterest',   placeholder: 'https://pinterest.com/username' },
        website:   { icon: 'bi-globe2',      placeholder: 'https://yourdomain.com' },
        other:     { icon: 'bi-link-45deg',  placeholder: 'https://...' }
      };
      function updateSocialRow(row) {
        var sel = row.querySelector('.social-platform');
        var icon = row.querySelector('.social-icon');
        var input = row.querySelector('.social-url');
        var info = PLATFORMS[sel.value] || { icon: 'bi-link-45deg', placeholder: 'https://...' };
        icon.className = 'bi ' + info.icon + ' social-icon';
        input.placeholder = info.placeholder;
      }
      function bindSocialRow(row) {
        row.querySelector('.social-platform').addEventListener('change', function () {
          updateSocialRow(row);
        });
        row.querySelector('.social-remove').addEventListener('click', function () {
          row.remove();
          reindexSocials();
        });
      }
      function reindexSocials() {
        var list = document.getElementById('socialLinks');
        Array.from(list.querySelectorAll('.social-link')).forEach(function (row, i) {
          row.querySelectorAll('[name^="socials"], [data-name]').forEach(function (el) {
            var template = el.getAttribute('data-name') || el.getAttribute('name');
            if (!template) return;
            var newName = template.replace(/__i__/g, i).replace(/\[\d+\]/, '[' + i + ']');
            el.setAttribute('name', newName);
            el.removeAttribute('data-name');
          });
        });
      }
      document.querySelectorAll('.social-link').forEach(bindSocialRow);

      var socialList = document.getElementById('socialLinks');
      var socialTpl = document.getElementById('socialLinkTemplate');
      document.getElementById('addSocial').addEventListener('click', function () {
        var clone = socialTpl.content.firstElementChild.cloneNode(true);
        socialList.appendChild(clone);
        bindSocialRow(clone);
        reindexSocials();
        updateSocialRow(clone);
        clone.querySelector('.social-platform').focus();
      });
    })();
  </script>
  @endverbatim
@endpush