@php use Illuminate\Support\Str; @endphp
@extends('layouts/layoutMaster')

@section('title', 'Leads — Pipeline')

@section('page-style')
<style>
  .leads-pipeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    align-items: start;
  }
  @media (max-width: 900px) {
    .leads-pipeline { grid-template-columns: 1fr; }
  }

  .pipeline-col {
    background: #f8f9fa;
    border-radius: 14px;
    padding: 0.85rem;
    min-height: 200px;
  }
  .pipeline-col--nuevos    { border-top: 3px solid #0d6efd; }
  .pipeline-col--contactados { border-top: 3px solid #198754; }
  .pipeline-col--descartados { border-top: 3px solid #adb5bd; }

  .pipeline-col__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
  }
  .pipeline-col__title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #495057;
    margin: 0;
  }
  .pipeline-col__count {
    font-size: 0.72rem;
    font-weight: 700;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    color: #6c757d;
  }
  .pipeline-col__hint {
    font-size: 0.7rem;
    color: #adb5bd;
    margin-bottom: 0.7rem;
  }

  /* ── Lead card ── */
  .lead-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 0.85rem 0.9rem;
    margin-bottom: 0.65rem;
    transition: box-shadow 0.15s ease;
  }
  .lead-card:last-child { margin-bottom: 0; }
  .lead-card:hover { box-shadow: 0 4px 16px -8px rgba(0,0,0,0.14); }
  .lead-card--contacted { border-left: 3px solid #198754; }
  .lead-card--dismissed { opacity: 0.55; }

  .lead-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
  }
  .lead-card__event {
    font-size: 0.88rem;
    font-weight: 700;
    color: #212529;
    margin: 0;
    line-height: 1.3;
  }
  .lead-card__city {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
  }
  .lead-card__age {
    font-size: 0.7rem;
    color: #adb5bd;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .lead-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
  }
  .lead-card__meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .lead-card__message {
    font-size: 0.78rem;
    color: #495057;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.55rem;
    line-height: 1.45;
    border-left: 2px solid #dee2e6;
  }

  /* Contact reveal */
  .lead-card__contact {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.55rem;
    display: none;
  }
  .lead-card__contact.is-open { display: block; }
  .lead-card__contact-label {
    font-size: 0.67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #166534;
    margin-bottom: 0.35rem;
  }
  .lead-card__contact-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.2rem;
  }
  .lead-card__contact-row a { color: #166534; text-decoration: none; }
  .lead-card__contact-row a:hover { text-decoration: underline; }

  /* Actions */
  .lead-card__actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .lead-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    background: none;
    font-family: inherit;
  }
  .lead-btn--primary {
    background: #198754;
    color: #fff;
    border-color: #198754;
  }
  .lead-btn--primary:hover { background: #146c43; border-color: #146c43; }
  .lead-btn--outline {
    background: #fff;
    color: #198754;
    border-color: #198754;
  }
  .lead-btn--outline:hover { background: #f0fdf4; }
  .lead-btn--wa {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
  }
  .lead-btn--wa:hover { background: #1ebe5d; }
  .lead-btn--done {
    background: #e9ecef;
    color: #6c757d;
    border-color: #dee2e6;
  }
  .lead-btn--done:hover { background: #dee2e6; }
  .lead-btn--dismiss {
    background: none;
    color: #adb5bd;
    border-color: #dee2e6;
  }
  .lead-btn--dismiss:hover { color: #dc3545; border-color: #f5c2c7; background: #fff5f5; }
  .lead-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Empty state */
  .pipeline-empty {
    text-align: center;
    padding: 1.5rem 0.5rem;
    color: #adb5bd;
    font-size: 0.82rem;
  }
  .pipeline-empty i { font-size: 1.8rem; display: block; margin-bottom: 0.4rem; }
</style>
@endsection

@section('content')

<div class="card mb-4">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
      <div>
        <h5 class="mb-1">Pipeline de Leads</h5>
        <p class="mb-0 text-muted small">
          Eventos publicados por clientes en tu ciudad.
          Los nuevos desaparecen tras <strong>14 días</strong> si no los atiendes.
          Los contactados se archivan a los <strong>30 días</strong>.
        </p>
      </div>
      <div class="d-flex gap-2 flex-wrap">
        <span class="badge bg-label-primary">{{ $nuevos->count() }} nuevos</span>
        <span class="badge bg-label-success">{{ $contactados->count() }} contactados</span>
        @if($descartados->count())
          <span class="badge bg-label-secondary">{{ $descartados->count() }} descartados</span>
        @endif
      </div>
    </div>
  </div>
</div>

@if(! $profile)
  <div class="alert alert-warning">Completa tu perfil de mariachi para ver los leads disponibles.</div>
@else

@php $csrfToken = csrf_token(); @endphp

<div class="leads-pipeline">

  {{-- ── COLUMNA 1: NUEVOS ── --}}
  <div class="pipeline-col pipeline-col--nuevos">
    <div class="pipeline-col__header">
      <p class="pipeline-col__title">
        <i class="ti tabler-sparkles me-1" style="color:#0d6efd;"></i>Nuevos
      </p>
      <span class="pipeline-col__count">{{ $nuevos->count() }}</span>
    </div>
    <p class="pipeline-col__hint">Últimos 14 días · Haz clic para revelar el contacto</p>

    @forelse($nuevos as $lead)
      <div class="lead-card" id="lcard-{{ $lead->uuid }}">
        <div class="lead-card__top">
          <div>
            <p class="lead-card__event">{{ $lead->eventTypeDisplayName() }}</p>
            <span class="lead-card__city">{{ $lead->event_city }}</span>
          </div>
          <span class="lead-card__age">{{ $lead->created_at->diffForHumans(['short' => true]) }}</span>
        </div>

        <div class="lead-card__meta">
          @if($lead->event_date)
            <span class="lead-card__meta-item">
              <i class="ti tabler-calendar" style="font-size:0.8rem;"></i>
              {{ $lead->event_date->translatedFormat('d M') }}
            </span>
          @endif
          @if($lead->budget_range)
            <span class="lead-card__meta-item">
              <i class="ti tabler-coin" style="font-size:0.8rem;"></i>
              {{ $lead->budget_range }}
            </span>
          @endif
          @if($lead->guest_count_range)
            <span class="lead-card__meta-item">
              <i class="ti tabler-users" style="font-size:0.8rem;"></i>
              {{ $lead->guest_count_range }}
            </span>
          @endif
          @if($lead->duration_hours)
            <span class="lead-card__meta-item">
              <i class="ti tabler-clock" style="font-size:0.8rem;"></i>
              {{ $lead->duration_hours }}h
            </span>
          @endif
        </div>

        @if($lead->message)
          <div class="lead-card__message">{{ Str::limit($lead->message, 120) }}</div>
        @endif

        <div class="lead-card__contact" id="lcontact-{{ $lead->uuid }}">
          <p class="lead-card__contact-label">Datos del cliente</p>
          <div class="lead-card__contact-row">
            <i class="ti tabler-user" style="color:#166534;font-size:0.9rem;"></i>
            <span id="lname-{{ $lead->uuid }}"></span>
          </div>
          <div class="lead-card__contact-row">
            <i class="ti tabler-brand-whatsapp" style="color:#166534;font-size:0.9rem;"></i>
            <span id="lphone-{{ $lead->uuid }}"></span>
          </div>
          <div class="lead-card__contact-row" id="lemail-wrap-{{ $lead->uuid }}" style="display:none">
            <i class="ti tabler-mail" style="color:#166534;font-size:0.9rem;"></i>
            <a id="lemail-{{ $lead->uuid }}" href="#"></a>
          </div>
        </div>

        <div class="lead-card__actions">
          <button
            type="button"
            class="lead-btn lead-btn--primary"
            id="lbtn-claim-{{ $lead->uuid }}"
            data-action="claim"
            data-uuid="{{ $lead->uuid }}"
            data-claim-url="{{ route('mariachi.leads.claim', $lead->uuid) }}"
            data-csrf="{{ $csrfToken }}"
          >
            <i class="ti tabler-eye"></i> Ver contacto
          </button>
          <button
            type="button"
            class="lead-btn lead-btn--dismiss"
            data-action="dismiss"
            data-uuid="{{ $lead->uuid }}"
            data-dismiss-url="{{ route('mariachi.leads.dismiss', $lead->uuid) }}"
            data-csrf="{{ $csrfToken }}"
          >
            <i class="ti tabler-x"></i> No me interesa
          </button>
        </div>
      </div>
    @empty
      <div class="pipeline-empty">
        <i class="ti tabler-inbox"></i>
        Sin leads nuevos en tu ciudad
      </div>
    @endforelse
  </div>

  {{-- ── COLUMNA 2: CONTACTADOS ── --}}
  <div class="pipeline-col pipeline-col--contactados">
    <div class="pipeline-col__header">
      <p class="pipeline-col__title">
        <i class="ti tabler-phone-call me-1" style="color:#198754;"></i>Contactados
      </p>
      <span class="pipeline-col__count">{{ $contactados->count() }}</span>
    </div>
    <p class="pipeline-col__hint">Leads que atendiste · Se archivan a los 30 días</p>

    @forelse($contactados as $claim)
      @php $ev = $claim->eventRequest; @endphp
      <div class="lead-card lead-card--contacted" id="lcard-{{ $ev->uuid }}">
        <div class="lead-card__top">
          <div>
            <p class="lead-card__event">{{ $ev->eventTypeDisplayName() }}</p>
            <span class="lead-card__city">{{ $ev->event_city }}</span>
          </div>
          <span class="lead-card__age">{{ $claim->claimed_at->diffForHumans(['short' => true]) }}</span>
        </div>

        <div class="lead-card__meta">
          @if($ev->event_date)
            <span class="lead-card__meta-item">
              <i class="ti tabler-calendar" style="font-size:0.8rem;"></i>
              {{ $ev->event_date->translatedFormat('d M') }}
            </span>
          @endif
          @if($ev->budget_range)
            <span class="lead-card__meta-item">
              <i class="ti tabler-coin" style="font-size:0.8rem;"></i>
              {{ $ev->budget_range }}
            </span>
          @endif
        </div>

        <div class="lead-card__contact is-open">
          <p class="lead-card__contact-label">Cliente</p>
          <div class="lead-card__contact-row">
            <i class="ti tabler-user" style="color:#166534;font-size:0.9rem;"></i>
            {{ $ev->client_name }}
          </div>
          <div class="lead-card__contact-row">
            <i class="ti tabler-brand-whatsapp" style="color:#166534;font-size:0.9rem;"></i>
            @php $waDigits = preg_replace('/\D/', '', $ev->client_phone);
                 $waText   = 'Hola '.$ev->client_name.', soy mariachi de Mariachis.co. Quiero cotizarte para tu evento en '.$ev->event_city.'.';
            @endphp
            <a href="https://wa.me/{{ $waDigits }}?text={{ rawurlencode($waText) }}" target="_blank" rel="noopener">
              {{ $ev->client_phone }}
            </a>
          </div>
          @if($ev->client_email)
            <div class="lead-card__contact-row">
              <i class="ti tabler-mail" style="color:#166534;font-size:0.9rem;"></i>
              <a href="mailto:{{ $ev->client_email }}">{{ $ev->client_email }}</a>
            </div>
          @endif
        </div>

        <div class="lead-card__actions">
          @if($claim->status === 'claimed')
            <button
              type="button"
              class="lead-btn lead-btn--outline"
              data-action="mark-contacted"
              data-uuid="{{ $ev->uuid }}"
              data-url="{{ route('mariachi.leads.contacted', $ev->uuid) }}"
              data-csrf="{{ $csrfToken }}"
            >
              <i class="ti tabler-check"></i> Marcar como contactado
            </button>
          @else
            <span class="lead-btn lead-btn--done">
              <i class="ti tabler-circle-check"></i> Contactado
            </span>
          @endif
          <a
            href="https://wa.me/{{ $waDigits }}?text={{ rawurlencode($waText) }}"
            target="_blank"
            rel="noopener"
            class="lead-btn lead-btn--wa"
          >
            <i class="ti tabler-brand-whatsapp"></i> WhatsApp
          </a>
          <button
            type="button"
            class="lead-btn lead-btn--dismiss"
            data-action="dismiss"
            data-uuid="{{ $ev->uuid }}"
            data-dismiss-url="{{ route('mariachi.leads.dismiss', $ev->uuid) }}"
            data-csrf="{{ $csrfToken }}"
          >
            <i class="ti tabler-x"></i> No me interesa
          </button>
        </div>
      </div>
    @empty
      <div class="pipeline-empty">
        <i class="ti tabler-phone-off"></i>
        Aún no has contactado ningún lead
      </div>
    @endforelse
  </div>

  {{-- ── COLUMNA 3: DESCARTADOS ── --}}
  <div class="pipeline-col pipeline-col--descartados">
    <div class="pipeline-col__header">
      <p class="pipeline-col__title">
        <i class="ti tabler-x me-1" style="color:#adb5bd;"></i>No me interesó
      </p>
      <span class="pipeline-col__count">{{ $descartados->count() }}</span>
    </div>
    <p class="pipeline-col__hint">Se ocultan automáticamente a los 7 días</p>

    @forelse($descartados as $claim)
      @php $ev = $claim->eventRequest; @endphp
      <div class="lead-card lead-card--dismissed">
        <div class="lead-card__top">
          <div>
            <p class="lead-card__event">{{ $ev->eventTypeDisplayName() }}</p>
            <span class="lead-card__city">{{ $ev->event_city }}</span>
          </div>
          <span class="lead-card__age">{{ $claim->dismissed_at->diffForHumans(['short' => true]) }}</span>
        </div>
        @if($ev->budget_range)
          <div class="lead-card__meta">
            <span class="lead-card__meta-item">
              <i class="ti tabler-coin" style="font-size:0.8rem;"></i>
              {{ $ev->budget_range }}
            </span>
          </div>
        @endif
      </div>
    @empty
      <div class="pipeline-empty">
        <i class="ti tabler-thumb-up"></i>
        Ninguno descartado
      </div>
    @endforelse
  </div>

</div>
@endif

@endsection

@section('page-script')
<script>
(function () {
  function request(url, csrf, callback) {
    fetch(url, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrf,
        'X-Requested-With': 'XMLHttpRequest',
      },
    })
    .then(function (r) { return r.json(); })
    .then(callback)
    .catch(function () { alert('Error al procesar. Recarga e inténtalo de nuevo.'); });
  }

  document.addEventListener('click', function (e) {
    var btn = e.target.closest('[data-action]');
    if (! btn) return;

    var action = btn.dataset.action;
    var uuid   = btn.dataset.uuid;
    var csrf   = btn.dataset.csrf;

    // ── Ver contacto ──
    if (action === 'claim') {
      btn.disabled = true;
      btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';

      request(btn.dataset.claimUrl, csrf, function (json) {
        if (! json.ok) { btn.disabled = false; btn.innerHTML = '<i class="ti tabler-eye"></i> Ver contacto'; return; }

        // Rellenar datos
        var name  = document.getElementById('lname-' + uuid);
        var phone = document.getElementById('lphone-' + uuid);
        if (name)  name.textContent = json.client_name || '';
        if (phone) {
          var digits  = (json.client_phone || '').replace(/\D/g, '');
          var waText  = encodeURIComponent('Hola ' + (json.client_name || '') + ', soy mariachi de Mariachis.co. Quiero cotizarte para tu evento en ' + (json.event_city || '') + '.');
          phone.innerHTML = '<a href="https://wa.me/' + digits + '?text=' + waText + '" target="_blank" rel="noopener">' + (json.client_phone || '') + '</a>';
        }
        if (json.client_email) {
          var ewrap = document.getElementById('lemail-wrap-' + uuid);
          var elink = document.getElementById('lemail-' + uuid);
          if (ewrap && elink) { elink.href = 'mailto:' + json.client_email; elink.textContent = json.client_email; ewrap.style.display = 'flex'; }
        }

        // Mostrar box de contacto
        var contactBox = document.getElementById('lcontact-' + uuid);
        if (contactBox) contactBox.classList.add('is-open');

        // Cambiar botón a WhatsApp
        var digits2 = (json.client_phone || '').replace(/\D/g, '');
        var waText2 = encodeURIComponent('Hola ' + (json.client_name || '') + ', soy mariachi de Mariachis.co. Quiero cotizarte para tu evento en ' + (json.event_city || '') + '.');
        btn.outerHTML =
          '<a href="https://wa.me/' + digits2 + '?text=' + waText2 + '" target="_blank" rel="noopener" class="lead-btn lead-btn--wa">' +
          '<i class="ti tabler-brand-whatsapp"></i> WhatsApp</a>';
      });
    }

    // ── Descartar ──
    if (action === 'dismiss') {
      var card = document.getElementById('lcard-' + uuid);
      btn.disabled = true;

      request(btn.dataset.dismissUrl, csrf, function (json) {
        if (json.ok && card) {
          card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
          card.style.opacity    = '0';
          card.style.transform  = 'scale(0.95)';
          setTimeout(function () { card.remove(); }, 320);
        } else {
          btn.disabled = false;
        }
      });
    }

    // ── Marcar como contactado ──
    if (action === 'mark-contacted') {
      btn.disabled = true;
      request(btn.dataset.url, csrf, function (json) {
        if (json.ok) {
          btn.outerHTML = '<span class="lead-btn lead-btn--done"><i class="ti tabler-circle-check"></i> Contactado</span>';
        } else {
          btn.disabled = false;
        }
      });
    }
  });
}());
</script>
@endsection