@extends('layouts.app')

@section('content')

<style>
    .card {
      width: 100%;
      max-width: 650px;
      border-radius: 15px;
      box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
      background: #fff;
      margin: 40px auto;
      overflow: hidden;
      font-family: Arial, sans-serif;
      position: relative;
    }

    .card-header {
      background: linear-gradient(90deg, #ff6a00, #ff9800);
      height: 6px;
    }

    .card-body {
      padding: 25px;
    }

    /* Fila que contiene texto + icono */
    .header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .text-section {
      flex: 1;
      padding-right: 15px;
    }

    .text-section h4 {
      font-size: 20px;
      margin-bottom: 8px;
      font-weight: bold;
      color: #333;
    }

    .text-section p {
      font-size: 14px;
      color: #777;
      margin-bottom: 10px;
    }

    .form-group label {
      font-weight: bold;
      font-size: 14px;
    }

    .form-group input {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 6px;
    }

    .btn-primary {
      background-color: #ff9800;
      border-color: #ff9800;
      padding: 8px 25px;
      border-radius: 6px;
    }

    .btn-primary:hover {
      background-color: #e68900;
      border-color: #e68900;
    }

    .alert {
      margin-top: 15px;
    }

    /* Estilo del ícono dentro del bloque */
    .icon-block {
      flex-shrink: 0;
      background: linear-gradient(180deg, #ff6a00, #ff9800);
      color: #fff;
      width: 70px;
      height: 70px;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
    }

    /* Centrar el botón */
    .btn-container {
      text-align: center;
      margin-top: 10px;
    }

    @media(max-width: 600px) {
      .header-row {
        flex-direction: column;
        align-items: center;
      }
      .text-section {
        padding-right: 0;
        text-align: center;
      }
      .icon-block {
        margin-top: 15px;
      }
    }

</style>

<h1>TRACKING OS</h1>
<div class="content">
  <div class="container-fluid">
    <form method="POST" action="{{ route('order.search.submit') }}">
      @csrf

      <div class="card">
        <div class="card-header"></div>
        <div class="card-body">
          
          <!-- Texto + Icono alineados -->
          <div class="header-row">
            <div class="text-section">
              <h4>{{ __('BUSCAR ORDEN') }}</h4>
              <p>Ingrese el Número de Orden o Referencia para buscar</p>

              {{-- Mostrar alerta si existe un error --}}
              @if(session('error'))
                <div class="alert alert-danger">
                  {{ session('error') }}
                </div>
              @endif
            </div>
            <div class="icon-block">
              <!-- <span class="material-symbols-outlined material-mod ">search</span> -->
               <img src="{{ asset('images/search_icon.png') }}" alt="Logo" style="height: 80px;" />

            </div>
          </div>

          <div class="form-group">
            <label for="numero">Número de Orden o Referencia</label>
            <input type="text" class="form-control" id="numero" name="numero" required>
          </div>

          <!-- Botón centrado -->
          <div class="btn-container">
            <button type="submit" class="btn btn-primary">Buscar</button>
          </div>

        </div>
      </div>
    </form>
  </div>
</div>
@endsection