@extends('layouts/layoutMaster')

@section('title', 'Perfil del proveedor')

@section('vendor-style')
  @vite(['resources/assets/vendor/libs/select2/select2.scss'])
@endsection

@section('page-style')
  <style>
    .provider-profile-page {
      --artist-accent: #0f7a55;
      --artist-accent-strong: #0b5d42;
      --artist-accent-soft: #ecfdf3;
      --artist-accent-soft-2: #dff7ea;
      --artist-accent-border: rgba(15, 122, 85, 0.12);
      --artist-shadow: rgba(15, 23, 42, 0.32);
      max-width: 1160px;
      margin: 0 auto;
      padding-bottom: 2.5rem;
    }

    .provider-profile-surface {
      border: 1px solid var(--artist-accent-border);
      border-radius: 1.75rem;
      background:
        radial-gradient(circle at top left, rgba(223, 247, 234, 0.92), transparent 38%),
        linear-gradient(180deg, rgba(247, 251, 249, 0.96) 0%, #ffffff 24%, #ffffff 100%);
      box-shadow: 0 24px 80px -54px rgba(15, 23, 42, 0.4);
      overflow: hidden;
    }

    .provider-profile-hero {
      position: relative;
      overflow: hidden;
      border-radius: 1.75rem;
      border: 1px solid rgba(15, 122, 85, 0.12);
      background: #fff;
      box-shadow: 0 24px 70px -52px rgba(15, 23, 42, 0.46);
    }

    .provider-profile-hero__cover {
      position: relative;
      min-height: 180px;
      padding: 1rem;
      background: linear-gradient(135deg, #0b5d42 0%, #0f7a55 44%, #65c18c 100%);
      isolation: isolate;
    }

    .provider-profile-hero__cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(17, 24, 39, 0.04) 0%, rgba(17, 24, 39, 0.28) 100%);
      pointer-events: none;
    }

    .provider-profile-hero__cover img,
    .provider-profile-hero__cover-fallback {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .provider-profile-hero__cover img {
      object-fit: cover;
      display: block;
    }

    .provider-profile-hero__cover-fallback {
      background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.28), transparent 26%),
        linear-gradient(135deg, #0b5d42 0%, #0f7a55 44%, #65c18c 100%);
    }

    .provider-profile-hero__cover-note {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      border-radius: 999px;
      padding: 0.55rem 0.82rem;
      background: rgba(255, 255, 255, 0.92);
      color: var(--artist-accent-strong);
      font-size: 0.74rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .provider-profile-hero__body {
      position: relative;
      z-index: 3;
      margin-top: -3.8rem;
      padding: 0 1rem 1rem;
    }

    .provider-profile-hero__identity {
      display: flex;
      align-items: flex-end;
      gap: 0.95rem;
      margin-bottom: 1rem;
    }

    .provider-profile-hero__avatar,
    .provider-profile-hero__avatar img,
    .provider-profile-hero__avatar .avatar,
    .provider-profile-hero__avatar .avatar-initial {
      width: 88px;
      height: 88px;
      border-radius: 1.35rem;
    }

    .provider-profile-hero__avatar img {
      display: block;
      object-fit: cover;
      background: #fff;
      border: 4px solid #fff;
      box-shadow: 0 24px 50px -34px rgba(15, 23, 42, 0.58);
    }

    .provider-profile-hero__avatar .avatar-initial {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 4px solid #fff;
      background: linear-gradient(135deg, var(--artist-accent-soft-2) 0%, #f6fffa 100%);
      color: var(--artist-accent-strong);
      font-weight: 800;
      box-shadow: 0 24px 50px -34px rgba(15, 23, 42, 0.58);
    }

    .provider-profile-hero__meta {
      min-width: 0;
      flex: 1 1 auto;
    }

    .provider-profile-hero__eyebrow {
      margin: 0 0 0.3rem;
      color: var(--artist-accent);
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .provider-profile-public-title {
      margin: 0;
    }

    .provider-profile-public-title-display,
    .provider-profile-public-title-edit {
      min-width: 0;
    }

    .provider-profile-public-title-row {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      min-width: 0;
    }

    .provider-profile-public-title-row h1,
    .provider-profile-public-title-input {
      margin: 0;
      min-width: 0;
      color: #111827;
      font-size: clamp(1.65rem, 3vw, 2.35rem);
      line-height: 1.02;
      letter-spacing: -0.04em;
      font-weight: 800;
    }

    .provider-profile-public-title-row h1 {
      overflow-wrap: anywhere;
    }

    .provider-profile-public-title-btn {
      width: 2.45rem;
      height: 2.45rem;
      flex: 0 0 auto;
      border: 0;
      border-radius: 999px;
      background: #eefaf4;
      color: var(--artist-accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 0 0 1px rgba(15, 122, 85, 0.08);
      transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .provider-profile-public-title-btn:hover {
      background: #dff7ea;
      color: var(--artist-accent-strong);
      transform: translateY(-1px);
    }

    .provider-profile-public-title-btn svg {
      width: 1rem;
      height: 1rem;
    }

    .provider-profile-public-title-edit {
      display: none;
      align-items: center;
      gap: 0.65rem;
    }

    .provider-profile-public-title-edit.is-visible {
      display: flex;
    }

    .provider-profile-public-title-display.is-hidden {
      display: none;
    }

    .provider-profile-public-title-input {
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      outline: none;
      appearance: none;
    }

    .provider-profile-public-title-input::placeholder {
      color: #9ca3af;
    }

    .provider-profile-public-title-error {
      display: none;
      margin-top: 0.45rem;
      color: var(--artist-accent-strong);
      font-size: 0.84rem;
      font-weight: 700;
    }

    .provider-profile-public-title-error.is-visible {
      display: block;
    }

    .provider-profile-handle {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      margin-top: 0.55rem;
      color: #6b7280;
      font-size: 0.95rem;
      font-weight: 700;
      flex-wrap: wrap;
    }

    .provider-profile-handle a,
    .provider-profile-handle strong {
      color: var(--artist-accent);
      text-decoration: none;
      font-weight: 800;
    }

    .provider-profile-helper {
      margin-top: 0.65rem;
      color: #6b7280;
      font-size: 0.96rem;
      line-height: 1.55;
    }

    .provider-profile-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-top: 1rem;
    }

    .provider-profile-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      min-height: 2.3rem;
      border-radius: 999px;
      padding: 0.58rem 0.82rem;
      background: #fff;
      color: #374151;
      font-size: 0.83rem;
      font-weight: 800;
      line-height: 1;
      box-shadow: inset 0 0 0 1px rgba(15, 122, 85, 0.08);
    }

    .provider-profile-badge--accent {
      background: linear-gradient(135deg, var(--artist-accent) 0%, var(--artist-accent-strong) 100%);
      color: #fff;
      box-shadow: none;
    }

    .provider-profile-quick-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
      margin-top: 1rem;
    }

    .provider-profile-quick-action {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      min-height: 100%;
      border: 1px solid rgba(15, 122, 85, 0.08);
      border-radius: 1.25rem;
      padding: 0.95rem;
      background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
      color: #111827;
      text-decoration: none;
      box-shadow: 0 18px 40px -34px rgba(15, 23, 42, 0.32);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .provider-profile-quick-action:hover {
      transform: translateY(-1px);
      border-color: rgba(15, 122, 85, 0.16);
      box-shadow: 0 22px 42px -34px rgba(15, 122, 85, 0.22);
    }

    .provider-profile-quick-action__icon {
      width: 2.45rem;
      height: 2.45rem;
      border-radius: 999px;
      background: #eefaf4;
      color: var(--artist-accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
    }

    .provider-profile-quick-action__title {
      font-size: 0.92rem;
      font-weight: 800;
      line-height: 1.2;
    }

    .provider-profile-quick-action__text {
      color: #6b7280;
      font-size: 0.79rem;
      line-height: 1.45;
    }

    .provider-profile-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
      margin-top: 1rem;
    }

    .provider-profile-metric {
      border: 1px solid rgba(15, 122, 85, 0.08);
      border-radius: 1.25rem;
      padding: 0.95rem;
      background: rgba(255, 255, 255, 0.88);
    }

    .provider-profile-metric__label {
      display: block;
      margin-bottom: 0.4rem;
      color: #6b7280;
      font-size: 0.76rem;
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .provider-profile-metric__value {
      color: #111827;
      font-size: 1.3rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.03em;
    }

    .provider-profile-metric__text {
      margin-top: 0.35rem;
      color: #6b7280;
      font-size: 0.78rem;
      line-height: 1.4;
    }

    .provider-profile-sections {
      display: grid;
      gap: 1rem;
      padding: 1rem;
    }

    .provider-profile-card {
      border: 1px solid rgba(15, 122, 85, 0.08);
      border-radius: 1.45rem;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 18px 42px -34px rgba(15, 23, 42, 0.25);
      overflow: hidden;
    }

    .provider-profile-card__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1rem 0;
    }

    .provider-profile-card__eyebrow {
      margin: 0 0 0.32rem;
      color: var(--artist-accent);
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .provider-profile-card__title {
      margin: 0;
      color: #111827;
      font-size: 1.16rem;
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -0.03em;
    }

    .provider-profile-card__description {
      margin: 0.35rem 0 0;
      color: #6b7280;
      font-size: 0.9rem;
      line-height: 1.55;
    }

    .provider-profile-card__body {
      padding: 1rem;
    }

    .provider-profile-card__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }

    .provider-profile-card__grid > .provider-profile-card__full {
      grid-column: 1 / -1;
    }

    .provider-profile-icon-field {
      position: relative;
    }

    .provider-profile-icon-field__icon {
      position: absolute;
      top: 50%;
      left: 0.95rem;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #9ca3af;
      pointer-events: none;
      transform: translateY(-50%);
      transition: color 0.2s ease;
    }

    .provider-profile-icon-field__icon .icon-base {
      font-size: 1rem;
      line-height: 1;
    }

    .provider-profile-icon-field .form-control {
      padding-left: 2.75rem;
    }

    .provider-profile-icon-field--textarea .provider-profile-icon-field__icon {
      top: 1rem;
      transform: none;
    }

    .provider-profile-icon-field:focus-within .provider-profile-icon-field__icon {
      color: var(--artist-accent);
    }

    .provider-profile-phone-row {
      display: flex;
      gap: 0.75rem;
    }

    .provider-profile-phone-row__country {
      flex: 0 0 8.25rem;
      max-width: 8.25rem;
    }

    .provider-profile-phone-row__number {
      flex: 1 1 auto;
      min-width: 0;
    }

    .provider-profile-phone-select + .select2 {
      width: 100% !important;
    }

    .provider-profile-phone-select + .select2 .select2-selection--single {
      height: var(--bs-select-height) !important;
      min-height: var(--bs-select-height) !important;
      display: flex;
      align-items: center;
      border-radius: var(--bs-border-radius);
      border-color: var(--bs-border-color);
    }

    .provider-profile-phone-select + .select2 .select2-selection__rendered {
      display: flex !important;
      align-items: center;
      gap: 0.55rem;
      padding-left: 0.95rem !important;
      padding-right: 2rem !important;
      line-height: calc(var(--bs-select-height) - 2px) !important;
    }

    .provider-profile-phone-select + .select2 .select2-selection__arrow {
      height: 100% !important;
      right: 0.6rem !important;
    }

    .provider-profile-phone-option {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      min-width: 0;
    }

    .provider-profile-phone-option__flag {
      font-size: 1rem;
      line-height: 1;
      flex: 0 0 auto;
    }

    .provider-profile-phone-option__dial {
      font-weight: 700;
      color: #111827;
      flex: 0 0 auto;
    }

    .provider-profile-phone-option__name {
      color: #6b7280;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .provider-profile-phone-option--selected .provider-profile-phone-option__name {
      display: none;
    }

    .provider-profile-upload-card {
      height: 100%;
      border: 1px dashed rgba(15, 122, 85, 0.18);
      border-radius: 1.2rem;
      background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
      padding: 1rem;
    }

    .provider-profile-upload-card h6 {
      margin-bottom: 0.32rem;
      color: #111827;
      font-size: 1rem;
      font-weight: 800;
    }

    .provider-profile-upload-card p {
      margin-bottom: 0.85rem;
      color: #6b7280;
      font-size: 0.87rem;
      line-height: 1.55;
    }

    .provider-profile-control-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }

    .provider-profile-control-card {
      height: 100%;
      border: 1px solid rgba(15, 122, 85, 0.08);
      border-radius: 1.25rem;
      background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
      padding: 1rem;
      box-shadow: 0 18px 40px -34px rgba(15, 23, 42, 0.24);
    }

    .provider-profile-control-card__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.8rem;
      margin-bottom: 0.8rem;
    }

    .provider-profile-control-card__label {
      margin: 0 0 0.28rem;
      color: var(--artist-accent);
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .provider-profile-control-card__title {
      margin: 0;
      color: #111827;
      font-size: 1.02rem;
      font-weight: 800;
      line-height: 1.25;
    }

    .provider-profile-control-card__text {
      margin: 0;
      color: #6b7280;
      font-size: 0.88rem;
      line-height: 1.55;
    }

    .provider-profile-control-card__meta {
      display: grid;
      gap: 0.55rem;
      margin-top: 0.95rem;
    }

    .provider-profile-control-card__meta-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      font-size: 0.83rem;
      color: #4b5563;
    }

    .provider-profile-control-card__meta-item strong {
      color: #111827;
      font-weight: 800;
    }

    .provider-profile-control-card__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-top: 1rem;
    }

    .provider-profile-payment-list {
      display: grid;
      gap: 0.75rem;
    }

    .provider-profile-payment-item {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      border: 1px solid rgba(15, 122, 85, 0.08);
      border-radius: 1rem;
      padding: 0.85rem 0.95rem;
      background: rgba(255, 255, 255, 0.84);
    }

    .provider-profile-payment-item__title {
      margin: 0 0 0.2rem;
      color: #111827;
      font-size: 0.92rem;
      font-weight: 800;
      line-height: 1.3;
    }

    .provider-profile-payment-item__text {
      margin: 0;
      color: #6b7280;
      font-size: 0.8rem;
      line-height: 1.45;
    }

    .provider-profile-payment-item__amount {
      color: #111827;
      font-size: 0.92rem;
      font-weight: 800;
      line-height: 1.2;
      text-align: right;
      white-space: nowrap;
    }

    .provider-profile-footer {
      position: static;
      z-index: 12;
      margin: 1.15rem;
      border: 1px solid rgba(15, 122, 85, 0.1);
      border-radius: 1.35rem;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 30px 48px -34px rgba(15, 23, 42, 0.38);
      padding: 0.9rem;
    }

    .provider-profile-footer__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.85rem;
    }

    .provider-profile-footer__title {
      margin: 0;
      color: #111827;
      font-size: 0.98rem;
      font-weight: 800;
      line-height: 1.2;
    }

    .provider-profile-footer__text {
      margin: 0.25rem 0 0;
      color: #6b7280;
      font-size: 0.82rem;
      line-height: 1.45;
    }

    .provider-profile-footer__actions {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 0.75rem;
      align-items: center;
    }

    .provider-profile-footer__links {
      display: flex;
      gap: 0.55rem;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .provider-profile-footer__links .btn {
      min-height: 2.85rem;
    }

    .provider-profile-footer__actions .btn-primary {
      min-height: 3rem;
      border-color: var(--artist-accent);
      background: linear-gradient(135deg, var(--artist-accent) 0%, var(--artist-accent-strong) 100%);
      box-shadow: 0 18px 36px -26px rgba(15, 122, 85, 0.34);
    }

    .provider-profile-footer__actions .btn-primary:hover {
      border-color: var(--artist-accent-strong);
      background: linear-gradient(135deg, var(--artist-accent-strong) 0%, #094532 100%);
    }

    @media (max-width: 991.98px) {
      .provider-profile-page {
        max-width: 720px;
      }

      .provider-profile-surface {
        border-radius: 1.4rem;
      }

      .provider-profile-card__grid,
      .provider-profile-control-grid,
      .provider-profile-quick-actions,
      .provider-profile-metrics {
        grid-template-columns: 1fr;
      }

      .provider-profile-phone-row {
        flex-direction: column;
      }

      .provider-profile-phone-row__country {
        flex-basis: auto;
        max-width: none;
      }

      .provider-profile-footer__actions {
        grid-template-columns: 1fr;
      }

      .provider-profile-footer__links {
        justify-content: stretch;
      }

      .provider-profile-footer__links .btn {
        flex: 1 1 0;
      }
    }

    @media (max-width: 767.98px) {
      .provider-profile-page {
        padding-bottom: 10rem;
      }

      .provider-profile-hero__cover {
        min-height: 138px;
        padding: 0.85rem;
      }

      .provider-profile-hero__cover-note {
        font-size: 0.68rem;
        letter-spacing: 0.06em;
      }

      .provider-profile-hero__body {
        margin-top: -3.2rem;
        padding: 0 0.85rem 0.85rem;
      }

      .provider-profile-hero__identity {
        align-items: flex-start;
      }

      .provider-profile-hero__avatar,
      .provider-profile-hero__avatar img,
      .provider-profile-hero__avatar .avatar,
      .provider-profile-hero__avatar .avatar-initial {
        width: 76px;
        height: 76px;
        border-radius: 1.1rem;
      }

      .provider-profile-public-title-row {
        align-items: flex-start;
      }

      .provider-profile-public-title-row h1,
      .provider-profile-public-title-input {
        font-size: 1.8rem;
      }

      .provider-profile-card__header,
      .provider-profile-card__body,
      .provider-profile-sections {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
      }

      .provider-profile-sections {
        gap: 0.85rem;
      }

      .provider-profile-footer {
        position: sticky;
        bottom: calc(env(safe-area-inset-bottom) + 5rem);
        margin: 0.85rem;
        padding: 0.8rem;
        backdrop-filter: blur(16px);
      }
    }
  </style>
@endsection

@section('vendor-script')
  @vite(['resources/assets/vendor/libs/select2/select2.js'])
@endsection

@section('content')
  @php
    $publicHandle = $profile->slug ?: 'm-xxxxxxx';
    $displayName = $profile->avatarDisplayName();
    $avatarInitials = $profile->avatarInitials();
    $canManageProfilePhoto = $profile->canManageProfilePhoto();
    $showProfilePhoto = $profile->shouldShowProfilePhoto();
    $canManageProfileCover = $profile->canManageProfileCover();
    $showProfileCover = $profile->shouldShowProfileCover();
    $publicProfileUrl = \Illuminate\Support\Facades\Route::has('mariachi.provider.public.show') && filled($profile->slug)
      ? route('mariachi.provider.public.show', ['handle' => $profile->slug])
      : null;

    $profileChecklist = [
      ['label' => 'Nombre', 'done' => filled($profile->business_name)],
      ['label' => 'Descripcion', 'done' => filled($profile->short_description)],
      ['label' => 'Telefono', 'done' => filled($defaultPhoneNumber)],
      ['label' => 'WhatsApp', 'done' => filled($profile->whatsapp)],
      ['label' => 'Logo', 'done' => $showProfilePhoto],
      ['label' => 'Portada', 'done' => $showProfileCover],
      ['label' => 'Instagram', 'done' => filled($profile->instagram)],
      ['label' => 'Facebook', 'done' => filled($profile->facebook)],
    ];

    $completedProfileItems = collect($profileChecklist)->where('done', true)->count();
    $profileCompletion = (int) round(($completedProfileItems / max(count($profileChecklist), 1)) * 100);
    $mediaReadyCount = collect([
      $showProfilePhoto,
      $showProfileCover,
      filled($profile->instagram),
      filled($profile->facebook),
      filled($profile->tiktok),
      filled($profile->youtube),
    ])->filter()->count();
    $requiresActivation = $user->requiresActivation();
    $activeSubscription = $profile->activeSubscription;
    $activePlan = $activeSubscription?->plan;
    $activationStatusMeta = match (true) {
      $requiresActivation => [
        'label' => 'Pendiente',
        'class' => 'warning',
        'title' => 'Tu acceso todavía necesita activación',
        'description' => 'Primero activa la cuenta. Después eliges planes por anuncio cuando quieras publicar con visibilidad.',
      ],
      filled($activePlan?->name) => [
        'label' => 'Operativo',
        'class' => 'success',
        'title' => 'Tu cuenta ya puede operar con anuncios',
        'description' => 'Tu acceso está activo. Los planes y upgrades se gestionan por anuncio desde el panel de publicaciones.',
      ],
      default => [
        'label' => 'Listo',
        'class' => 'secondary',
        'title' => 'Tu acceso está habilitado',
        'description' => 'Completa el perfil y luego elige visibilidad por anuncio según cada campaña.',
      ],
    };
    $verificationBaseAmount = (int) (collect($verificationPlans ?? [])->min('amount_cop') ?? 0);
    $verificationStatusMeta = match ((string) $profile->verification_status) {
      'verified' => $profile->hasActiveVerification()
        ? ['label' => 'Verificado', 'class' => 'success', 'description' => 'Tu insignia está activa y ya puedes usar handle premium y mejores señales de confianza.']
        : ['label' => 'Vencida', 'class' => 'warning', 'description' => 'La verificación venció. Puedes renovarla cuando quieras desde este mismo flujo.'],
      'payment_pending' => ['label' => 'En revisión', 'class' => 'warning', 'description' => 'El pago y los documentos ya entraron a revisión manual.'],
      'rejected' => ['label' => 'Rechazada', 'class' => 'danger', 'description' => 'La última solicitud fue rechazada. Revisa el motivo y vuelve a intentarlo.'],
      default => ['label' => 'Sin verificación', 'class' => 'secondary', 'description' => 'Actívala para sumar confianza, insignia y handle premium.'],
    };
  @endphp

  <div class="provider-profile-page">
    @if(session('status'))
      <div class="alert alert-success">{{ session('status') }}</div>
    @endif

    @if($errors->any())
      <div class="alert alert-danger">
        <strong>Hay errores de validacion.</strong>
        <ul class="mb-0 mt-2 ps-3">
          @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <form method="POST" action="{{ route('mariachi.provider-profile.update') }}" enctype="multipart/form-data">
      @csrf
      @method('PATCH')

      <div class="provider-profile-surface">
        <section class="provider-profile-hero m-3 mb-0">
          <div class="provider-profile-hero__cover">
            @if($showProfileCover)
              <img src="{{ $profile->coverUrlForVariant('large') }}" alt="Portada del perfil" loading="lazy" decoding="async" />
            @else
              <div class="provider-profile-hero__cover-fallback" aria-hidden="true"></div>
            @endif

            <span class="provider-profile-hero__cover-note">
              <i class="icon-base ti tabler-user-circle"></i>
              Perfil del artista
            </span>
          </div>

          <div class="provider-profile-hero__body">
            <div class="provider-profile-hero__identity">
              <div class="provider-profile-hero__avatar">
                @if($showProfilePhoto)
                  <img src="{{ $profile->logoUrlForVariant('large') }}" alt="Foto del proveedor" loading="lazy" decoding="async" width="{{ $profile->logo_width ?: 512 }}" height="{{ $profile->logo_height ?: 512 }}" />
                @else
                  <div class="avatar">
                    <span class="avatar-initial fs-2">{{ $avatarInitials }}</span>
                  </div>
                @endif
              </div>

              <div class="provider-profile-hero__meta">
                <p class="provider-profile-hero__eyebrow">Panel de identidad</p>

                <div
                  class="provider-profile-public-title"
                  data-provider-name-editor
                  data-update-url="{{ route('mariachi.provider-profile.update') }}"
                  data-initial-name="{{ $displayName }}"
                >
                  <div class="provider-profile-public-title-display" data-provider-name-display>
                    <div class="provider-profile-public-title-row">
                      <h1 data-provider-name-text>{{ $displayName }}</h1>
                      <button type="button" class="provider-profile-public-title-btn" data-provider-name-edit-btn aria-label="Editar nombre">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                          <path d="m4 20 4.5-1 9.5-9.5a2.1 2.1 0 1 0-3-3L5.5 16 4 20Z" />
                          <path d="m13.5 6.5 4 4" />
                        </svg>
                      </button>
                    </div>
                  </div>

                  <div class="provider-profile-public-title-edit" data-provider-name-edit>
                    <input
                      type="text"
                      class="provider-profile-public-title-input"
                      data-provider-name-input
                      value="{{ $displayName }}"
                      maxlength="140"
                      autocomplete="off"
                    />
                    <button type="button" class="provider-profile-public-title-btn" data-provider-name-save-btn aria-label="Guardar nombre">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <path d="M5 21h14a1 1 0 0 0 1-1V7.4a1 1 0 0 0-.3-.7l-2.4-2.4a1 1 0 0 0-.7-.3H5a1 1 0 0 0-1 1v15a1 1 0 0 0 1 1Z" />
                        <path d="M8 21v-6h8v6" />
                        <path d="M8 4v5h7" />
                      </svg>
                    </button>
                  </div>

                  <div class="provider-profile-public-title-error" data-provider-name-error></div>
                </div>

                <div class="provider-profile-handle">
                  @if($publicProfileUrl)
                    <a href="{{ $publicProfileUrl }}" rel="noopener noreferrer" target="_blank">&#64;{{ $publicHandle }}</a>
                  @else
                    <strong>&#64;{{ $publicHandle }}</strong>
                  @endif
                  <span>Actualiza foto, texto y enlaces para que el perfil convierta mejor.</span>
                </div>

                <p class="provider-profile-helper">
                  Este perfil es la base para responder clientes mas rapido, mostrar confianza y publicar anuncios sin friccion.
                </p>
              </div>
            </div>

            <div class="provider-profile-badges">
              <span class="provider-profile-badge provider-profile-badge--accent">{{ $profileCompletion }}% completo</span>
              <span class="provider-profile-badge">{{ $completedProfileItems }}/{{ count($profileChecklist) }} campos clave listos</span>
              <span class="provider-profile-badge">{{ $showProfileCover ? 'Portada activa' : 'Portada pendiente' }}</span>
            </div>

            <div class="provider-profile-quick-actions">
              @if($publicProfileUrl)
                <a href="{{ $publicProfileUrl }}" class="provider-profile-quick-action" target="_blank" rel="noopener noreferrer">
                  <span class="provider-profile-quick-action__icon"><i class="icon-base ti tabler-eye"></i></span>
                  <span class="provider-profile-quick-action__title">Ver perfil</span>
                  <span class="provider-profile-quick-action__text">Revisa como te ve el cliente.</span>
                </a>
              @else
                <div class="provider-profile-quick-action">
                  <span class="provider-profile-quick-action__icon"><i class="icon-base ti tabler-at"></i></span>
                  <span class="provider-profile-quick-action__title">Alias pendiente</span>
                  <span class="provider-profile-quick-action__text">Completa el perfil para publicar tu URL.</span>
                </div>
              @endif

              <a href="{{ route('mariachi.account.security.edit') }}" class="provider-profile-quick-action">
                <span class="provider-profile-quick-action__icon"><i class="icon-base ti tabler-settings"></i></span>
                <span class="provider-profile-quick-action__title">Configuración</span>
                <span class="provider-profile-quick-action__text">Seguridad y notificaciones de la cuenta.</span>
              </a>

              <a href="{{ route('mariachi.listings.index') }}" class="provider-profile-quick-action">
                <span class="provider-profile-quick-action__icon"><i class="icon-base ti tabler-speakerphone"></i></span>
                <span class="provider-profile-quick-action__title">Anuncios</span>
                <span class="provider-profile-quick-action__text">Gestiona tus publicaciones desde un solo lugar.</span>
              </a>
            </div>

            <div class="provider-profile-metrics">
              <div class="provider-profile-metric">
                <span class="provider-profile-metric__label">Perfil</span>
                <div class="provider-profile-metric__value">{{ $profileCompletion }}%</div>
                <div class="provider-profile-metric__text">Completitud para publicar y responder mejor.</div>
              </div>
              <div class="provider-profile-metric">
                <span class="provider-profile-metric__label">Contacto</span>
                <div class="provider-profile-metric__value">{{ filled($profile->whatsapp) ? 'OK' : 'Pend.' }}</div>
                <div class="provider-profile-metric__text">{{ filled($profile->whatsapp) ? 'WhatsApp listo para clientes.' : 'Agrega WhatsApp para acelerar respuestas.' }}</div>
              </div>
              <div class="provider-profile-metric">
                <span class="provider-profile-metric__label">Media</span>
                <div class="provider-profile-metric__value">{{ $mediaReadyCount }}</div>
                <div class="provider-profile-metric__text">Activos visuales y redes conectadas.</div>
              </div>
            </div>
          </div>
        </section>

        <div class="provider-profile-sections">
          <section class="provider-profile-card">
            <div class="provider-profile-card__header">
              <div>
                <p class="provider-profile-card__eyebrow">Cuenta y visibilidad</p>
                <h2 class="provider-profile-card__title">Controla acceso, pagos y verificación desde un solo lugar</h2>
                <p class="provider-profile-card__description">Aquí se separa claramente tu perfil público como artista de la configuración técnica de la cuenta.</p>
              </div>
            </div>

            <div class="provider-profile-card__body">
              <div class="provider-profile-control-grid">
                <div class="provider-profile-control-card">
                  <div class="provider-profile-control-card__top">
                    <div>
                      <p class="provider-profile-control-card__label">Acceso y suscripción</p>
                      <h3 class="provider-profile-control-card__title">{{ $activationStatusMeta['title'] }}</h3>
                    </div>
                    <span class="badge bg-label-{{ $activationStatusMeta['class'] }}">{{ $activationStatusMeta['label'] }}</span>
                  </div>

                  <p class="provider-profile-control-card__text">{{ $activationStatusMeta['description'] }}</p>

                  <div class="provider-profile-control-card__meta">
                    <div class="provider-profile-control-card__meta-item">
                      <span>Estado de la cuenta</span>
                      <strong>{{ $user->statusLabel() }}</strong>
                    </div>
                    <div class="provider-profile-control-card__meta-item">
                      <span>Activación</span>
                      <strong>
                        @if($requiresActivation)
                          ${{ number_format((int) ($activationPlan?->amount_cop ?? $activationPayment?->amount_cop ?? 0), 0, ',', '.') }} COP
                        @elseif($activePlan)
                          {{ $activePlan->name }}
                        @else
                          Sin bloqueo
                        @endif
                      </strong>
                    </div>
                    <div class="provider-profile-control-card__meta-item">
                      <span>Siguiente paso</span>
                      <strong>
                        @if($requiresActivation)
                          {{ $user->daysUntilActivationDeadline() !== null ? $user->daysUntilActivationDeadline().' día(s)' : 'Activar cuenta' }}
                        @elseif($activeSubscription?->renews_at)
                          Renueva {{ $activeSubscription->renews_at->format('Y-m-d') }}
                        @elseif($activeSubscription?->ends_at)
                          Vigente hasta {{ $activeSubscription->ends_at->format('Y-m-d') }}
                        @else
                          Elegir plan por anuncio
                        @endif
                      </strong>
                    </div>
                  </div>

                  <div class="provider-profile-control-card__actions">
                    @if($requiresActivation)
                      <a href="{{ route('mariachi.account.activation') }}" class="btn btn-primary">Activar cuenta</a>
                    @else
                      <a href="{{ route('mariachi.listings.index') }}" class="btn btn-primary">Gestionar anuncios</a>
                    @endif
                    <a href="{{ route('mariachi.listings.create') }}" class="btn btn-outline-secondary">Crear anuncio</a>
                  </div>
                </div>

                <div class="provider-profile-control-card">
                  <div class="provider-profile-control-card__top">
                    <div>
                      <p class="provider-profile-control-card__label">Verificación</p>
                      <h3 class="provider-profile-control-card__title">Refuerza confianza y marca pública</h3>
                    </div>
                    <span class="badge bg-label-{{ $verificationStatusMeta['class'] }}">{{ $verificationStatusMeta['label'] }}</span>
                  </div>

                  <p class="provider-profile-control-card__text">{{ $verificationStatusMeta['description'] }}</p>

                  <div class="provider-profile-control-card__meta">
                    <div class="provider-profile-control-card__meta-item">
                      <span>Precio base</span>
                      <strong>${{ number_format($verificationBaseAmount, 0, ',', '.') }} COP</strong>
                    </div>
                    <div class="provider-profile-control-card__meta-item">
                      <span>Handle</span>
                      <strong>&#64;{{ $publicHandle }}</strong>
                    </div>
                    <div class="provider-profile-control-card__meta-item">
                      <span>Vigencia</span>
                      <strong>{{ $profile->verification_expires_at?->format('Y-m-d') ?: 'Sin vigencia activa' }}</strong>
                    </div>
                  </div>

                  <div class="provider-profile-control-card__actions">
                    <a href="{{ route('mariachi.verification.edit') }}" class="btn btn-primary">Gestionar verificación</a>
                    <a href="{{ route('mariachi.verification.edit') }}" class="btn btn-outline-secondary">Ver planes</a>
                  </div>
                </div>

                <div class="provider-profile-card__full">
                  <div class="provider-profile-control-card">
                    <div class="provider-profile-control-card__top">
                      <div>
                        <p class="provider-profile-control-card__label">Pagos recientes</p>
                        <h3 class="provider-profile-control-card__title">Ten contexto de lo que ya moviste en la cuenta</h3>
                      </div>
                      <a href="{{ route('mariachi.account.billing.edit') }}" class="btn btn-sm btn-outline-secondary">Ver historial</a>
                    </div>

                    @if($recentListingPayments->isEmpty() && ! $activationPayment && ! $latestVerificationPayment)
                      <p class="provider-profile-control-card__text mb-0">Todavía no hay movimientos recientes. Cuando actives cuenta, pagues anuncios o verificación, aparecerán aquí.</p>
                    @else
                      <div class="provider-profile-payment-list">
                        @if($activationPayment)
                          <div class="provider-profile-payment-item">
                            <div>
                              <p class="provider-profile-payment-item__title">Activación de cuenta</p>
                              <p class="provider-profile-payment-item__text">{{ $activationPayment->statusLabel() }} · {{ $activationPayment->reviewed_at?->format('Y-m-d H:i') ?: 'Pendiente de revisión' }}</p>
                            </div>
                            <div class="provider-profile-payment-item__amount">${{ number_format((int) $activationPayment->amount_cop, 0, ',', '.') }}</div>
                          </div>
                        @endif

                        @if($latestVerificationPayment)
                          <div class="provider-profile-payment-item">
                            <div>
                              <p class="provider-profile-payment-item__title">Verificación {{ $latestVerificationPayment->plan_code }}</p>
                              <p class="provider-profile-payment-item__text">{{ $latestVerificationPayment->statusLabel() }} · {{ $latestVerificationPayment->duration_months }} mes(es)</p>
                            </div>
                            <div class="provider-profile-payment-item__amount">${{ number_format((int) $latestVerificationPayment->amount_cop, 0, ',', '.') }}</div>
                          </div>
                        @endif

                        @foreach($recentListingPayments as $payment)
                          <div class="provider-profile-payment-item">
                            <div>
                              <p class="provider-profile-payment-item__title">{{ $payment->listing?->title ?: 'Anuncio' }}</p>
                              <p class="provider-profile-payment-item__text">{{ \Illuminate\Support\Str::headline($payment->targetPlanCode()) }} · {{ $payment->statusLabel() }}</p>
                            </div>
                            <div class="provider-profile-payment-item__amount">${{ number_format($payment->chargedAmountCop(), 0, ',', '.') }}</div>
                          </div>
                        @endforeach
                      </div>
                    @endif
                  </div>
                </div>
              </div>
            </div>
          </section>

          <section class="provider-profile-card">
            <div class="provider-profile-card__header">
              <div>
                <p class="provider-profile-card__eyebrow">Contacto rapido</p>
                <h2 class="provider-profile-card__title">Datos para que te escriban sin vueltas</h2>
                <p class="provider-profile-card__description">Pon lo esencial primero para que editar correo, telefono y WhatsApp sea rapido y claro.</p>
              </div>
            </div>

            <div class="provider-profile-card__body">
              <div class="provider-profile-card__grid">
                <div>
                  <label class="form-label">Correo</label>
                  <div class="provider-profile-icon-field">
                    <span class="provider-profile-icon-field__icon" aria-hidden="true">
                      <i class="icon-base ti tabler-mail"></i>
                    </span>
                    <input type="email" class="form-control" name="email" value="{{ old('email', $user->email) }}" required />
                  </div>
                </div>

                <div>
                  <label class="form-label" for="phone_country_iso2">Telefono</label>
                  <div class="provider-profile-phone-row">
                    <div class="provider-profile-phone-row__country">
                      <select class="form-select select2-phone-country provider-profile-phone-select @error('phone_country_iso2') is-invalid @enderror" id="phone_country_iso2" name="phone_country_iso2">
                        @foreach($phoneCountryOptions as $countryOption)
                          <option
                            value="{{ $countryOption['iso2'] }}"
                            data-country-iso2="{{ $countryOption['iso2'] }}"
                            data-dial-code="{{ $countryOption['dial_code'] }}"
                            data-country-name="{{ $countryOption['name'] }}"
                            @selected(old('phone_country_iso2', $defaultPhoneCountryIso2) === $countryOption['iso2'])>
                            {{ $countryOption['dial_code'] }} {{ $countryOption['name'] }}
                          </option>
                        @endforeach
                      </select>
                      @error('phone_country_iso2')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                    <div class="provider-profile-phone-row__number">
                      <div class="provider-profile-icon-field">
                        <span class="provider-profile-icon-field__icon" aria-hidden="true">
                          <i class="icon-base ti tabler-phone"></i>
                        </span>
                        <input class="form-control @error('phone_number') is-invalid @enderror" id="phone_number" name="phone_number" value="{{ old('phone_number', $defaultPhoneNumber) }}" maxlength="20" inputmode="tel" placeholder="300 123 4567" />
                      </div>
                      @error('phone_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                  </div>
                </div>

                <div>
                  <label class="form-label">WhatsApp</label>
                  <div class="provider-profile-icon-field">
                    <span class="provider-profile-icon-field__icon" aria-hidden="true">
                      <i class="icon-base ti tabler-brand-whatsapp"></i>
                    </span>
                    <input class="form-control" name="whatsapp" value="{{ old('whatsapp', $profile->whatsapp) }}" maxlength="30" placeholder="3001234567" />
                  </div>
                </div>

                <div>
                  <label class="form-label">Sitio web</label>
                  <div class="provider-profile-icon-field">
                    <span class="provider-profile-icon-field__icon" aria-hidden="true">
                      <i class="icon-base ti tabler-world-www"></i>
                    </span>
                    <input type="url" class="form-control" name="website" value="{{ old('website', $profile->website) }}" placeholder="https://..." />
                  </div>
                </div>
              </div>
            </div>
          </section>

          <section class="provider-profile-card">
            <div class="provider-profile-card__header">
              <div>
                <p class="provider-profile-card__eyebrow">Presentacion</p>
                <h2 class="provider-profile-card__title">Cuenta quien eres en pocas lineas</h2>
                <p class="provider-profile-card__description">Tu resumen debe servir para publicar anuncios, responder mensajes y dar claridad al instante.</p>
              </div>
            </div>

            <div class="provider-profile-card__body">
              <div class="provider-profile-card__grid">
                <div class="provider-profile-card__full">
                  <label class="form-label">Descripcion corta</label>
                  <div class="provider-profile-icon-field provider-profile-icon-field--textarea">
                    <span class="provider-profile-icon-field__icon" aria-hidden="true">
                      <i class="icon-base ti tabler-file-description"></i>
                    </span>
                    <textarea class="form-control" name="short_description" rows="4" maxlength="280" required>{{ old('short_description', $profile->short_description) }}</textarea>
                  </div>
                  <div class="form-text">Resume lo esencial del grupo en una descripcion breve, clara y util desde la primera lectura.</div>
                </div>
              </div>
            </div>
          </section>

          <section class="provider-profile-card">
            <div class="provider-profile-card__header">
              <div>
                <p class="provider-profile-card__eyebrow">Redes y confianza</p>
                <h2 class="provider-profile-card__title">Conecta tus canales visibles</h2>
                <p class="provider-profile-card__description">Agrega solo lo que ayude a validar el grupo y llevar clientes a una conversacion real.</p>
              </div>
            </div>

            <div class="provider-profile-card__body">
              <div class="provider-profile-card__grid">
                <div>
                  <label class="form-label">Instagram</label>
                  <div class="provider-profile-icon-field">
                    <span class="provider-profile-icon-field__icon" aria-hidden="true">
                      <i class="icon-base ti tabler-brand-instagram"></i>
                    </span>
                    <input type="url" class="form-control" name="instagram" value="{{ old('instagram', $profile->instagram) }}" />
                  </div>
                </div>

                <div>
                  <label class="form-label">Facebook</label>
                  <div class="provider-profile-icon-field">
                    <span class="provider-profile-icon-field__icon" aria-hidden="true">
                      <i class="icon-base ti tabler-brand-facebook"></i>
                    </span>
                    <input type="url" class="form-control" name="facebook" value="{{ old('facebook', $profile->facebook) }}" />
                  </div>
                </div>

                <div>
                  <label class="form-label">TikTok</label>
                  <div class="provider-profile-icon-field">
                    <span class="provider-profile-icon-field__icon" aria-hidden="true">
                      <i class="icon-base ti tabler-brand-tiktok"></i>
                    </span>
                    <input type="url" class="form-control" name="tiktok" value="{{ old('tiktok', $profile->tiktok) }}" />
                  </div>
                </div>

                <div>
                  <label class="form-label">YouTube</label>
                  <div class="provider-profile-icon-field">
                    <span class="provider-profile-icon-field__icon" aria-hidden="true">
                      <i class="icon-base ti tabler-brand-youtube"></i>
                    </span>
                    <input type="url" class="form-control" name="youtube" value="{{ old('youtube', $profile->youtube) }}" />
                  </div>
                </div>
              </div>
            </div>
          </section>

          @if($canManageProfilePhoto || $canManageProfileCover)
            <section class="provider-profile-card">
              <div class="provider-profile-card__header">
                <div>
                  <p class="provider-profile-card__eyebrow">Imagenes</p>
                  <h2 class="provider-profile-card__title">Logo y portada para que el perfil se vea serio</h2>
                  <p class="provider-profile-card__description">Sube solo lo necesario. El flujo debe sentirse simple y directo en cualquier pantalla.</p>
                </div>
              </div>

              <div class="provider-profile-card__body">
                <div class="provider-profile-card__grid">
                  @if($canManageProfilePhoto)
                    <div>
                      <div class="provider-profile-upload-card">
                        <h6>Cambiar foto</h6>
                        <p>JPG, PNG o WEBP. Maximo 3 MB. La optimizamos a 512 x 512 para que cargue rapido.</p>
                        <input type="file" class="form-control" name="logo" accept="image/png,image/jpeg,image/webp" />
                      </div>
                    </div>
                  @endif

                  @if($canManageProfileCover)
                    <div>
                      <div class="provider-profile-upload-card">
                        <h6>Cambiar portada</h6>
                        <p>JPG, PNG o WEBP. Maximo 5 MB. Recomendado entre 1200 y 1600 px de ancho.</p>
                        <input type="file" class="form-control" name="cover" accept="image/png,image/jpeg,image/webp" />
                      </div>
                    </div>
                  @endif
                </div>
              </div>
            </section>
          @endif
        </div>

        <div class="provider-profile-footer">
          <div class="provider-profile-footer__top">
            <div>
              <p class="provider-profile-footer__title">Guarda y sigue afinando tu presencia</p>
              <p class="provider-profile-footer__text">Deja este perfil listo para que anuncios, chats y verificacion trabajen en el mismo flujo.</p>
            </div>
            <span class="provider-profile-badge provider-profile-badge--accent">{{ $profileCompletion }}%</span>
          </div>

          <div class="provider-profile-footer__actions">
            <button class="btn btn-primary" type="submit">Guardar cambios</button>

            <div class="provider-profile-footer__links">
              <a href="{{ route('mariachi.account.security.edit') }}" class="btn btn-outline-success">Configuración</a>
              <a href="{{ route('mariachi.listings.index') }}" class="btn btn-outline-secondary">Anuncios</a>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const phoneCountry = document.querySelector('.select2-phone-country');
      if (phoneCountry && window.jQuery && window.jQuery.fn.select2) {
        const getFlagEmoji = iso2 => {
          const normalized = String(iso2 || '').trim().toUpperCase();
          if (!/^[A-Z]{2}$/.test(normalized)) {
            return '🌐';
          }

          return String.fromCodePoint(...normalized.split('').map(char => 127397 + char.charCodeAt(0)));
        };

        const renderPhoneOption = option => {
          if (!option.id) {
            return option.text;
          }

          const element = option.element;
          const dialCode = element?.dataset?.dialCode || option.text || '';
          const flag = getFlagEmoji(element?.dataset?.countryIso2 || option.id);
          const optionMarkup = document.createElement('span');

          optionMarkup.className = 'provider-profile-phone-option provider-profile-phone-option--selected';
          optionMarkup.innerHTML = `
            <span class="provider-profile-phone-option__flag">${flag}</span>
            <span class="provider-profile-phone-option__dial">${dialCode}</span>
          `;

          return optionMarkup;
        };

        window.jQuery(phoneCountry).select2({
          width: '100%',
          minimumResultsForSearch: 8,
          templateResult: option => renderPhoneOption(option),
          templateSelection: option => renderPhoneOption(option),
          escapeMarkup: markup => markup
        });
      }
    });

    (function () {
      const editor = document.querySelector('[data-provider-name-editor]');
      if (!editor) {
        return;
      }

      const display = editor.querySelector('[data-provider-name-display]');
      const text = editor.querySelector('[data-provider-name-text]');
      const edit = editor.querySelector('[data-provider-name-edit]');
      const input = editor.querySelector('[data-provider-name-input]');
      const editButton = editor.querySelector('[data-provider-name-edit-btn]');
      const saveButton = editor.querySelector('[data-provider-name-save-btn]');
      const error = editor.querySelector('[data-provider-name-error]');
      const initialName = editor.dataset.initialName || '';
      const updateUrl = editor.dataset.updateUrl || '';
      const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}';

      const setEditing = isEditing => {
        display.classList.toggle('is-hidden', isEditing);
        edit.classList.toggle('is-visible', isEditing);
        error.classList.remove('is-visible');
        error.textContent = '';

        if (isEditing) {
          input.focus();
          input.select();
        }
      };

      const setBusy = isBusy => {
        input.disabled = isBusy;
        saveButton.disabled = isBusy;
        editButton.disabled = isBusy;
      };

      const saveName = async () => {
        const businessName = input.value.trim();
        if (!businessName) {
          error.textContent = 'Escribe un nombre para continuar.';
          error.classList.add('is-visible');
          input.focus();
          return;
        }

        setBusy(true);

        try {
          const formData = new FormData();
          formData.append('_method', 'PATCH');
          formData.append('_token', csrfToken);
          formData.append('business_name', businessName);

          const response = await fetch(updateUrl, {
            method: 'POST',
            headers: {
              Accept: 'application/json',
              'X-Requested-With': 'XMLHttpRequest',
            },
            body: formData,
          });

          const payload = await response.json().catch(() => ({}));
          if (!response.ok) {
            const message = payload?.errors?.business_name?.[0] || payload?.message || 'No se pudo guardar el nombre.';
            throw new Error(message);
          }

          const nextName = String(payload.business_name || businessName);
          text.textContent = nextName;
          input.value = nextName;
          editor.dataset.initialName = nextName;
          setEditing(false);
        } catch (err) {
          error.textContent = err instanceof Error ? err.message : 'No se pudo guardar el nombre.';
          error.classList.add('is-visible');
        } finally {
          setBusy(false);
        }
      };

      editButton.addEventListener('click', () => {
        input.value = text.textContent.trim() || initialName;
        setEditing(true);
      });

      saveButton.addEventListener('click', () => {
        void saveName();
      });

      input.addEventListener('keydown', event => {
        if (event.key === 'Enter') {
          event.preventDefault();
          void saveName();
        }

        if (event.key === 'Escape') {
          input.value = editor.dataset.initialName || initialName;
          setEditing(false);
        }
      });
    })();
  </script>
@endsection