@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; }
  }
</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. ORD-20260608-1234)" value="{{ request('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 pago y comienza con <strong>ORD-</strong>.</span>
      </div>

      <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>

      @if(request('codigo'))
        <div class="lav-track-hint" style="margin-top:24px; justify-content:center;">
          <i class="bi bi-info-circle-fill"></i>
          <span>Búsqueda de demostración — aún no está conectada a un sistema de órdenes real.</span>
        </div>
      @endif

    </div>
  </section>

@endsection