@extends('front.layouts.marketplace')

@section('title', 'Tu evento fue publicado | Mariachis.co')
@section('meta_description', 'Tu solicitud fue enviada a los grupos de mariachi disponibles en tu ciudad. Pronto recibirás contacto directo.')
@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; }
  .pet-shell {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 1rem 4rem;
  }
  .pet-card {
    max-width: 560px;
    width: 100%;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.09);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    box-shadow: 0 12px 40px -20px rgba(15,23,42,0.14);
    text-align: center;
  }
  .pet-icon {
    width: 64px;
    height: 64px;
    background: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: #006847;
  }
  .pet-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.9rem;
    font-weight: 800;
    color: #0a1a0d;
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem;
  }
  .pet-body {
    font-size: 1rem;
    color: #475569;
    line-height: 1.65;
    margin: 0 0 1.75rem;
  }
  .pet-summary {
    background: #f8fdf9;
    border: 1px solid rgba(22,101,52,0.12);
    border-radius: 14px;
    padding: 1.25rem;
    text-align: left;
    margin-bottom: 1.75rem;
    font-size: 0.88rem;
    line-height: 1.7;
    color: #374151;
  }
  .pet-summary strong { color: #0a1a0d; }
  .pet-notified {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #006847;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
  }
  .pet-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .pet-btn {
    display: block;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s;
  }
  .pet-btn--primary { background: #006847; color: #fff; }
  .pet-btn--primary:hover { background: #00563b; }
  .pet-btn--ghost { background: #f1f5f9; color: #374151; }
  .pet-btn--ghost:hover { background: #e2e8f0; }
</style>
@endpush

<main class="pet-shell">
  <div class="pet-card">
    <div class="pet-icon" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
      </svg>
    </div>

    <h1 class="pet-title">¡Tu evento fue publicado!</h1>
    <p class="pet-body">
      Los grupos de mariachi en <strong>{{ $eventRequest->event_city }}</strong> ya recibieron tu solicitud.
      Espera su contacto directo por WhatsApp o teléfono.
    </p>

    @if($eventRequest->notified_count > 0)
      <div class="pet-notified">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
        {{ $eventRequest->notified_count }} {{ $eventRequest->notified_count === 1 ? 'grupo notificado' : 'grupos notificados' }}
      </div>
    @endif

    <div class="pet-summary">
      <strong>{{ $eventRequest->eventTypeDisplayName() }}</strong> · {{ $eventRequest->event_city }}<br>
      @if($eventRequest->event_date)
        📅 {{ $eventRequest->event_date->translatedFormat('d \d\e F \d\e Y') }}<br>
      @endif
      @if($eventRequest->duration_hours)
        ⏱ {{ $eventRequest->duration_hours }} hora{{ $eventRequest->duration_hours > 1 ? 's' : '' }}<br>
      @endif
      @if($eventRequest->budget_range)
        💰 {{ $eventRequest->budget_range }}<br>
      @endif
      📞 Contacto: {{ $eventRequest->client_name }} · {{ $eventRequest->client_phone }}
    </div>

    <div class="pet-actions">
      <a href="{{ route('home') }}" class="pet-btn pet-btn--primary">Volver al inicio</a>
      <a href="{{ route('publish-event.create') }}" class="pet-btn pet-btn--ghost">Publicar otro evento</a>
    </div>
  </div>
</main>
@endsection