@extends('front.layouts.marketplace')

@section('title', 'Publica tu evento y recibe cotizaciones de mariachis | Mariachis.co')
@section('meta_description', 'Describe tu evento, elige tu ciudad y recibe contacto directo de los mejores grupos de mariachi disponibles. Sin intermediarios, sin comisión.')
@section('body_page', 'publish-event')
@section('body_class', 'font-sans text-slate-900 antialiased has-fixed-site-header')

@section('content')
@push('styles')
<style>
  body[data-page="publish-event"] {
    background: #f8f5f2;
  }

  .pe-shell {
    min-height: 100svh;
    padding: 5rem 1rem 4rem;
  }

  .pe-layout {
    max-width: 680px;
    margin: 0 auto;
  }

  .pe-eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #006847;
    margin-bottom: 0.6rem;
  }

  .pe-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    color: #0a1a0d;
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
  }

  .pe-subtitle {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 2rem;
  }

  .pe-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    margin-bottom: 2.5rem;
  }

  .pe-trust__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
  }

  .pe-trust__icon {
    color: #006847;
    flex-shrink: 0;
  }

  .pe-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 20px;
    padding: 2rem 2rem 2.25rem;
    box-shadow: 0 8px 32px -16px rgba(15, 23, 42, 0.12);
  }

  .pe-section-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
  }

  .pe-card > .pe-section-label:first-child {
    padding-top: 0;
    border-top: none;
  }

  .pe-grid {
    display: grid;
    gap: 1rem;
  }

  .pe-grid--2 {
    grid-template-columns: 1fr 1fr;
  }

  .pe-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .pe-field label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #374151;
  }

  .pe-field label span {
    font-weight: 500;
    color: #94a3b8;
    margin-left: 0.3rem;
  }

  .pe-input,
  .pe-select,
  .pe-textarea {
    width: 100%;
    border: 1.5px solid rgba(15, 23, 42, 0.15);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    font-size: 0.92rem;
    color: #0f172a;
    background: #fdfdfd;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
  }

  .pe-input:focus,
  .pe-select:focus,
  .pe-textarea:focus {
    border-color: #006847;
    box-shadow: 0 0 0 3px rgba(0, 104, 71, 0.1);
    background: #fff;
  }

  .pe-textarea {
    resize: vertical;
    min-height: 90px;
  }

  .pe-submit {
    display: block;
    width: 100%;
    margin-top: 1.75rem;
    background: #006847;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    font-family: inherit;
  }

  .pe-submit:hover {
    background: #00563b;
  }

  .pe-submit:active {
    transform: scale(0.98);
  }

  .pe-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .pe-note {
    font-size: 0.78rem;
    color: #94a3b8;
    text-align: center;
    margin-top: 0.9rem;
    line-height: 1.5;
  }

  @media (max-width: 520px) {
    .pe-card { padding: 1.5rem 1.25rem 1.75rem; }
    .pe-grid--2 { grid-template-columns: 1fr; }
    .pe-shell { padding: 4.5rem 1rem 3rem; }
  }
</style>
@endpush

<main class="pe-shell">
  <div class="pe-layout">
    <nav class="city-breadcrumbs" aria-label="Migas de pan" style="margin-bottom:1.5rem;">
      <a href="{{ route('home') }}">Inicio</a>
      <span class="city-breadcrumb-sep">/</span>
      <span>Publicar evento</span>
    </nav>

    <p class="pe-eyebrow">Flujo invertido</p>
    <h1 class="pe-title">¿Quieres que los mariachis lleguen a ti?</h1>
    <p class="pe-subtitle">
      Cuéntanos sobre tu evento y notificaremos a los grupos disponibles en tu ciudad.
      Ellos te contactan directamente — sin intermediarios, sin comisión.
    </p>

    <div class="pe-trust">
      <span class="pe-trust__item">
        <svg class="pe-trust__icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
        Gratis para clientes
      </span>
      <span class="pe-trust__item">
        <svg class="pe-trust__icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
        Grupos te contactan por WhatsApp
      </span>
      <span class="pe-trust__item">
        <svg class="pe-trust__icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
        0% comisión
      </span>
    </div>

    @if($errors->any())
      <div style="background:#fef2f2;border:1px solid rgba(185,28,28,0.2);border-radius:12px;padding:1rem 1.25rem;margin-bottom:1.5rem;font-size:0.88rem;color:#991b1b;">
        <strong>Revisa los siguientes campos:</strong>
        <ul style="margin:0.4rem 0 0;padding-left:1.25rem;">
          @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <form method="POST" action="{{ route('publish-event.store') }}" class="pe-card" id="pe-form">
      @csrf

      {{-- Datos del evento --}}
      <p class="pe-section-label">Tu evento</p>
      <div class="pe-grid pe-grid--2" style="margin-bottom:1rem;">
        <div class="pe-field">
          <label for="event_type_id">Tipo de evento</label>
          <select id="event_type_id" name="event_type_id" class="pe-select">
            <option value="">Selecciona...</option>
            @foreach($eventTypes as $type)
              <option value="{{ $type->id }}"
                {{ (old('event_type_id', $prefillType) == $type->id || old('event_type_id') === $type->name) ? 'selected' : '' }}>
                {{ $type->name }}
              </option>
            @endforeach
          </select>
        </div>
        <div class="pe-field">
          <label for="marketplace_city_id">Ciudad <span>*</span></label>
          <select id="marketplace_city_id" name="marketplace_city_id" class="pe-select" required>
            <option value="">Selecciona...</option>
            @foreach($cities as $city)
              <option value="{{ $city->id }}"
                {{ old('marketplace_city_id') == $city->id ? 'selected' : '' }}
                data-name="{{ $city->name }}">
                {{ $city->name }}
              </option>
            @endforeach
          </select>
          <input type="hidden" name="event_city" id="event_city" value="{{ old('event_city') }}" />
        </div>
      </div>

      <div class="pe-grid pe-grid--2" style="margin-bottom:1rem;">
        <div class="pe-field">
          <label for="event_date">Fecha del evento <span>(opcional)</span></label>
          <input type="date" id="event_date" name="event_date" class="pe-input"
            value="{{ old('event_date') }}"
            min="{{ now()->addDay()->format('Y-m-d') }}" />
        </div>
        <div class="pe-field">
          <label for="duration_hours">Duración <span>(opcional)</span></label>
          <select id="duration_hours" name="duration_hours" class="pe-select">
            <option value="">No sé aún</option>
            <option value="1" {{ old('duration_hours') == 1 ? 'selected' : '' }}>1 hora</option>
            <option value="2" {{ old('duration_hours') == 2 ? 'selected' : '' }}>2 horas</option>
            <option value="3" {{ old('duration_hours') == 3 ? 'selected' : '' }}>3 horas</option>
            <option value="4" {{ old('duration_hours') == 4 ? 'selected' : '' }}>4 horas o más</option>
          </select>
        </div>
      </div>

      <div class="pe-grid pe-grid--2" style="margin-bottom:1rem;">
        <div class="pe-field">
          <label for="guest_count_range">Asistentes <span>(opcional)</span></label>
          <select id="guest_count_range" name="guest_count_range" class="pe-select">
            <option value="">No sé aún</option>
            <option value="Menos de 20" {{ old('guest_count_range') === 'Menos de 20' ? 'selected' : '' }}>Menos de 20</option>
            <option value="20 a 50" {{ old('guest_count_range') === '20 a 50' ? 'selected' : '' }}>20 a 50</option>
            <option value="50 a 100" {{ old('guest_count_range') === '50 a 100' ? 'selected' : '' }}>50 a 100</option>
            <option value="Más de 100" {{ old('guest_count_range') === 'Más de 100' ? 'selected' : '' }}>Más de 100</option>
          </select>
        </div>
        <div class="pe-field">
          <label for="budget_range">Presupuesto <span>(opcional)</span></label>
          <select id="budget_range" name="budget_range" class="pe-select">
            <option value="">No sé aún</option>
            <option value="Menos de $500.000" {{ old('budget_range') === 'Menos de $500.000' ? 'selected' : '' }}>Menos de $500.000</option>
            <option value="$500.000 a $1.000.000" {{ old('budget_range') === '$500.000 a $1.000.000' ? 'selected' : '' }}>$500.000 a $1.000.000</option>
            <option value="$1.000.000 a $2.000.000" {{ old('budget_range') === '$1.000.000 a $2.000.000' ? 'selected' : '' }}>$1.000.000 a $2.000.000</option>
            <option value="Más de $2.000.000" {{ old('budget_range') === 'Más de $2.000.000' ? 'selected' : '' }}>Más de $2.000.000</option>
          </select>
        </div>
      </div>

      <div class="pe-field" style="margin-bottom:1rem;">
        <label for="message">Cuéntanos más sobre tu evento <span>(opcional)</span></label>
        <textarea id="message" name="message" class="pe-textarea"
          placeholder="Ej: Serenata sorpresa para una boda en Chapinero, necesitamos repertorio romántico para 2 horas..."
          maxlength="800">{{ old('message') }}</textarea>
      </div>

      {{-- Datos de contacto --}}
      <p class="pe-section-label">Tus datos de contacto</p>
      <div class="pe-grid pe-grid--2" style="margin-bottom:1rem;">
        <div class="pe-field">
          <label for="client_name">Nombre <span>*</span></label>
          <input type="text" id="client_name" name="client_name" class="pe-input"
            value="{{ old('client_name') }}"
            placeholder="Tu nombre" required maxlength="120" />
        </div>
        <div class="pe-field">
          <label for="client_phone">Celular <span>*</span></label>
          <input type="tel" id="client_phone" name="client_phone" class="pe-input"
            value="{{ old('client_phone') }}"
            placeholder="3XX XXX XXXX" required maxlength="30" />
        </div>
      </div>
      <div class="pe-field">
        <label for="client_email">Correo electrónico <span>(opcional)</span></label>
        <input type="email" id="client_email" name="client_email" class="pe-input"
          value="{{ old('client_email') }}"
          placeholder="tu@correo.com" maxlength="160" />
      </div>

      <button type="submit" class="pe-submit" id="pe-submit-btn">
        Publicar mi evento y recibir cotizaciones
      </button>
      <p class="pe-note">
        Tus datos solo se comparten con los grupos de mariachi de tu ciudad.<br>
        Gratis · Sin registro · Sin comisión.
      </p>
    </form>
  </div>
</main>

@push('scripts')
<script>
(function () {
  // Sync city select → hidden event_city input
  const citySelect = document.getElementById('marketplace_city_id');
  const cityInput  = document.getElementById('event_city');

  function syncCity() {
    const opt = citySelect.options[citySelect.selectedIndex];
    cityInput.value = opt ? (opt.dataset.name || '') : '';
  }
  citySelect.addEventListener('change', syncCity);
  syncCity();

  // Disable submit while sending
  const form = document.getElementById('pe-form');
  const btn  = document.getElementById('pe-submit-btn');
  form.addEventListener('submit', function () {
    btn.disabled = true;
    btn.textContent = 'Enviando...';
  });
}());
</script>
@endpush
@endsection