@extends('layouts.app')

@section('title', 'Seguimiento de tu orden | Lavaustral')
@section('description', 'Consulta el estado de tu orden de lavado industrial con Lavaustral usando tu código de seguimiento.')
@section('body-class', 'tracking-page')

@push('styles')
<style>
  .lav-track-section{
    background:#eef1f6;
    padding: 48px 0 64px;
  }
  .lav-track-breadcrumb{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:14px;
    color:#6b7280;
    margin-bottom:28px;
  }
  .lav-track-breadcrumb a{
    color:#6b7280;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .lav-track-breadcrumb a:hover{ color:#141a63; }
  .lav-track-breadcrumb .current{ color:#141a63; font-weight:600; }
  .lav-track-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 36px;
  }
  .lav-track-header h1{
    color:#141a63;
    font-weight:800;
    font-size:2.4rem;
    margin-bottom:14px;
  }
  .lav-track-header p{
    color:#5b6472;
    font-size:1.05rem;
    margin:0;
  }
  .lav-track-search-wrap{
    max-width:720px;
    margin:0 auto 20px;
  }
  .lav-track-search{
    display:flex;
    align-items:stretch;
    background:#fff;
    border:1px solid #e2e5ec;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(20,26,99,0.06);
  }
  .lav-track-search .icon{
    display:flex;
    align-items:center;
    padding:0 18px;
    color:#9199a8;
    font-size:1.1rem;
  }
  .lav-track-search input{
    border:none;
    outline:none;
    flex:1;
    font-size:1rem;
    padding:16px 8px;
    color:#141a63;
  }
  .lav-track-search input::placeholder{ color:#9199a8; }
  .lav-track-search button{
    border:none;
    background:#141a63;
    color:#fff;
    font-weight:600;
    padding:0 28px;
    display:flex;
    align-items:center;
    gap:8px;
    transition:background .2s ease;
  }
  .lav-track-search button:hover{ background:#0f1450; }
  .lav-track-hint{
    max-width:720px;
    margin:0 auto 32px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:#5b6472;
    font-size:.92rem;
  }
  .lav-track-hint i{ color:#141a63; margin-top:2px; }
  .lav-track-hint strong{ color:#141a63; }
  .lav-track-steps{
    max-width:720px;
    margin:0 auto;
    background:#fff;
    border-radius:16px;
    box-shadow:0 6px 18px rgba(20,26,99,0.06);
    padding:28px 24px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
  }
  .lav-track-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
  }
  .lav-track-step .step-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    background:#eaf2ff;
    color:#141a63;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
  }
  .lav-track-step span{
    font-weight:700;
    color:#141a63;
    font-size:.92rem;
  }
  .lav-track-arrow{
    color:#c3c8d6;
    font-size:1.2rem;
  }
  @media (max-width: 576px){
    .lav-track-steps{ flex-wrap:wrap; gap:20px 10px; }
    .lav-track-search button span{ display:none; }
  }

  /* ---- Resultado de búsqueda ---- */
  .lav-track-result{
    max-width:720px;
    margin:0 auto;
  }
  .lav-track-notfound{
    max-width:720px;
    margin:0 auto;
    background:#fff5f5;
    border:1px solid #ffd7d7;
    color:#a12626;
    border-radius:14px;
    padding:18px 22px;
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:.95rem;
  }
  .lav-track-notfound i{ font-size:1.2rem; margin-top:1px; }

  .lav-track-card{
    background:#fff;
    border-radius:18px;
    box-shadow:0 6px 18px rgba(20,26,99,0.08);
    padding:28px 26px;
    margin-bottom:20px;
  }
  .lav-track-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:22px;
    padding-bottom:18px;
    border-bottom:1px solid #eef0f5;
  }
  .lav-track-code{
    font-weight:800;
    color:#141a63;
    font-size:1.3rem;
    letter-spacing:.02em;
  }
  .lav-track-date{
    color:#8890a0;
    font-size:.85rem;
  }
  .lav-track-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    border-radius:999px;
    font-weight:700;
    font-size:.85rem;
  }
  .lav-track-badge-pendiente{ background:#fdeaea; color:#c23434; }
  .lav-track-badge-received,
  .lav-track-badge-washing,
  .lav-track-badge-drying{ background:#e7f1ff; color:#1d5fbf; }
  .lav-track-badge-folding,
  .lav-track-badge-bagging{ background:#fff4e0; color:#a9711a; }
  .lav-track-badge-ready{ background:#e6f8ed; color:#1f8a4c; }
  .lav-track-badge-dispatched{ background:#eaeaff; color:#3f3fbf; }

  .lav-track-pay-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 12px;
    border-radius:999px;
    font-weight:600;
    font-size:.78rem;
  }
  .lav-track-pay-0{ background:#fff4e0; color:#a9711a; }
  .lav-track-pay-1{ background:#e6f8ed; color:#1f8a4c; }
  .lav-track-pay-2{ background:#fdeaea; color:#c23434; }

  /* Stepper del estado (versión cliente, sólo lectura) */
  .lav-track-stepper-wrap{
    overflow-x:auto;
    padding:6px 0 2px;
    margin-bottom:8px;
  }
  .lav-track-stepper{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    position:relative;
    min-width:560px;
  }
  .lav-track-stepper::before{
    content:'';
    position:absolute;
    top:16px;
    left:15px;
    right:15px;
    height:2px;
    background-color:#e9ecef;
    z-index:1;
  }
  .lav-track-stepper-item{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:1;
    text-align:center;
  }
  .lav-track-stepper-node{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#fff;
    border:2px solid #dee2e6;
    color:#6c757d;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
  }
  .lav-track-stepper-text{
    font-size:11px;
    font-weight:600;
    color:#6c757d;
    margin-top:6px;
    white-space:nowrap;
  }
  .lav-track-stepper-item.is-completed .lav-track-stepper-node{
    background:#141a63; border-color:#141a63; color:#fff;
  }
  .lav-track-stepper-item.is-completed .lav-track-stepper-text{ color:#212529; }
  .lav-track-stepper-item.is-current .lav-track-stepper-node{
    background:#198754; border-color:#198754; color:#fff;
    box-shadow:0 0 0 3px rgba(25,135,84,.25);
  }
  .lav-track-stepper-item.is-current .lav-track-stepper-text{
    color:#198754; font-weight:700;
  }

  .lav-track-info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .lav-track-info-grid dt{
    font-size:.78rem;
    color:#8890a0;
    margin-bottom:2px;
  }
  .lav-track-info-grid dd{
    font-weight:600;
    color:#141a63;
    margin:0;
  }
  @media (max-width: 480px){
    .lav-track-info-grid{ grid-template-columns:1fr; }
  }

  .lav-track-items{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .lav-track-item-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid #f1f2f6;
  }
  .lav-track-item-row:last-child{ border-bottom:none; }
  .lav-track-item-qty{
    background:#eef1f6;
    color:#141a63;
    font-weight:700;
    font-size:.8rem;
    padding:4px 10px;
    border-radius:999px;
    flex-shrink:0;
  }

  .lav-track-search-again{
    text-align:center;
    margin-top:6px;
  }
  .lav-track-search-again a{
    color:#141a63;
    font-weight:600;
    font-size:.9rem;
    text-decoration:none;
  }
  .lav-track-search-again a:hover{ text-decoration:underline; }
</style>
@endpush

@section('content')

  <section class="lav-track-section">
    <div class="container">

      <div class="lav-track-breadcrumb">
        <a href="{{ route('welcome') }}"><i class="bi bi-house-door-fill"></i> Inicio</a>
        <span>/</span>
        <span class="current">Seguimiento</span>
      </div>

      <div class="lav-track-header">
        <h1>Seguimiento de tu orden</h1>
        <p>Ingresa el número de orden para ver el estado de tu lavado en tiempo real.</p>
      </div>

      <form action="{{ route('tracking') }}" method="get" class="lav-track-search-wrap">
        <div class="lav-track-search">
          <span class="icon"><i class="bi bi-upc-scan"></i></span>
          <input type="text" name="codigo" placeholder="Número de orden (ej. 260911-9553)" value="{{ $codigo }}" required>
          <button type="submit">
            <span>Buscar</span>
            <i class="bi bi-search"></i>
          </button>
        </div>
      </form>

      <div class="lav-track-hint">
        <i class="bi bi-info-circle-fill"></i>
        <span>¿Dónde encuentro mi número de orden? Aparece al confirmar tu reserva y en el correo/WhatsApp de confirmación.</span>
      </div>

      @if($order)
        {{-- ===================== RESULTADO: ORDEN ENCONTRADA ===================== --}}
        <div class="lav-track-result">

          <div class="lav-track-card">
            <div class="lav-track-card-head">
              <div>
                <div class="lav-track-code">{{ $order->order_code }}</div>
                <div class="lav-track-date">Creada el {{ $order->created_at->format('d-m-Y H:i') }}</div>
              </div>

              @php
                $badgeClass = 'lav-track-badge-' . $order->status;
              @endphp
              <span class="lav-track-badge {{ $badgeClass }}">
                <i class="bi bi-gear-wide-connected"></i> {{ $order->statusLabel() }}
              </span>
            </div>

            @php
              $workflowSteps = [
                  'pendiente'  => ['label' => 'Pendiente',  'icon' => 'bi-hourglass-split'],
                  'received'   => ['label' => 'Recibido',   'icon' => 'bi-box-seam'],
                  'washing'    => ['label' => 'Lavado',     'icon' => 'bi-water'],
                  'drying'     => ['label' => 'Secado',     'icon' => 'bi-wind'],
                  'folding'    => ['label' => 'Doblado',    'icon' => 'bi-layers'],
                  'bagging'    => ['label' => 'Embolsado',  'icon' => 'bi-bag-check'],
                  'ready'      => ['label' => 'Listo',      'icon' => 'bi-check-circle'],
                  'dispatched' => ['label' => 'Entregado',  'icon' => 'bi-truck'],
              ];
              $stepKeys = array_keys($workflowSteps);
              $currentIndex = array_search($order->status, $stepKeys);
              if ($currentIndex === false) { $currentIndex = 0; }
            @endphp

            <div class="lav-track-stepper-wrap">
              <div class="lav-track-stepper">
                @foreach ($workflowSteps as $key => $step)
                  @php
                    $stepIdx = array_search($key, $stepKeys);
                    $isCompleted = $stepIdx < $currentIndex;
                    $isCurrent = $stepIdx === $currentIndex;
                  @endphp
                  <div class="lav-track-stepper-item {{ $isCompleted ? 'is-completed' : '' }} {{ $isCurrent ? 'is-current' : '' }}">
                    <div class="lav-track-stepper-node">
                      <i class="bi {{ $isCompleted ? 'bi-check-lg' : $step['icon'] }}"></i>
                    </div>
                    <span class="lav-track-stepper-text">{{ $step['label'] }}</span>
                  </div>
                @endforeach
              </div>
            </div>

            @if((int) $order->payment_status !== 1)
              @php
                $payConfig = [
                    0 => ['class' => 'lav-track-pay-0', 'icon' => 'bi-hourglass-split', 'label' => 'Pago pendiente'],
                    2 => ['class' => 'lav-track-pay-2', 'icon' => 'bi-x-circle-fill',   'label' => 'Pago fallido/rechazado'],
                ];
                $pay = $payConfig[(int) $order->payment_status] ?? $payConfig[0];
              @endphp
              <div class="mt-2">
                <span class="lav-track-pay-badge {{ $pay['class'] }}">
                  <i class="bi {{ $pay['icon'] }}"></i> {{ $pay['label'] }}
                </span>
                @if((int) $order->payment_status === 2)
                  <div class="lav-track-hint" style="margin:10px 0 0;">
                    <i class="bi bi-exclamation-circle-fill"></i>
                    <span>Tu pago no se pudo procesar. Escríbenos por WhatsApp y te ayudamos a completar tu reserva.</span>
                  </div>
                @endif
              </div>
            @endif
          </div>

          <div class="lav-track-card">
            <h6 class="fw-bold mb-3" style="color:#141a63;">Detalle de la orden</h6>
            <dl class="lav-track-info-grid">
              @if($order->contact_name)
                <div>
                  <dt>Nombre</dt>
                  <dd>{{ $order->contact_name }}</dd>
                </div>
              @endif
              @if($order->contact_phone)
                <div>
                  <dt>Teléfono</dt>
                  <dd>{{ $order->contact_phone }}</dd>
                </div>
              @endif
              @if($order->contact_email)
                <div style="grid-column: 1 / -1;">
                  <dt>Correo</dt>
                  <dd>{{ $order->contact_email }}</dd>
                </div>
              @endif
              <div>
                <dt>Fecha de retiro</dt>
                <dd>{{ $order->pickup_date?->format('d-m-Y') ?? '—' }}</dd>
              </div>
              <div>
                <dt>Fecha de entrega</dt>
                <dd>{{ $order->delivery_date?->format('d-m-Y') ?? 'Por confirmar' }}</dd>
              </div>
              @if($order->pickup_address)
                <div style="grid-column: 1 / -1;">
                  <dt>Dirección</dt>
                  <dd>{{ $order->pickup_address }}</dd>
                </div>
              @endif
              @if($order->total_amount)
                <div>
                  <dt>Total</dt>
                  <dd>${{ number_format($order->total_amount, 0, ',', '.') }}</dd>
                </div>
              @endif
            </dl>
          </div>

          @if($order->items->isNotEmpty())
            <div class="lav-track-card">
              <h6 class="fw-bold mb-3" style="color:#141a63;">Prendas / servicios</h6>
              <div class="lav-track-items">
                @foreach($order->items as $item)
                  <div class="lav-track-item-row">
                    <div>
                      <div class="fw-semibold" style="color:#141a63;">{{ $item->garment_type }}</div>
                      @if($item->notes)
                        <div class="small text-muted">{{ $item->notes }}</div>
                      @endif
                    </div>
                    <span class="lav-track-item-qty">{{ $item->quantity }} {{ $item->unit }}</span>
                  </div>
                @endforeach
              </div>
            </div>
          @endif

          <div class="lav-track-search-again">
            <a href="{{ route('tracking') }}">
              <i class="bi bi-arrow-counterclockwise me-1"></i> Buscar otra orden
            </a>
          </div>

        </div>

      @elseif($notFound)
        {{-- ===================== RESULTADO: SIN COINCIDENCIAS ===================== --}}
        <div class="lav-track-notfound mb-4">
          <i class="bi bi-exclamation-triangle-fill"></i>
          <span>
            No encontramos ninguna orden con el código <strong>{{ $codigo }}</strong>.
            Verifica que esté bien escrito o contáctanos por WhatsApp si necesitas ayuda.
          </span>
        </div>
      @else
        {{-- ===================== ESTADO INICIAL: SIN BÚSQUEDA ===================== --}}
        <div class="lav-track-steps">
          <div class="lav-track-step">
            <span class="step-icon"><i class="bi bi-calendar-check"></i></span>
            <span>Reserva</span>
          </div>
          <span class="lav-track-arrow"><i class="bi bi-chevron-right"></i></span>
          <div class="lav-track-step">
            <span class="step-icon"><i class="bi bi-credit-card"></i></span>
            <span>Paga</span>
          </div>
          <span class="lav-track-arrow"><i class="bi bi-chevron-right"></i></span>
          <div class="lav-track-step">
            <span class="step-icon"><i class="bi bi-truck"></i></span>
            <span>Sigue tu pedido</span>
          </div>
        </div>
      @endif

    </div>
  </section>

@endsection