@extends('layouts.app')

@section('content')

<section class="track-section d-flex align-items-center py-5">

<div class="container">

<div class="row justify-content-center">

<div class="col-lg-6 col-md-8">

    {{-- CARD PRINCIPAL --}}
    <div class="track-card shadow-lg">

        {{-- HEADER --}}
        <div class="text-center mb-4">

            <div class="icon-box mb-3">
                🔎
            </div>

            <h3 class="fw-bold text-white mb-2">
                Consultar Status do Pedido
            </h3>

            <p class="text mb-0">
                Digite o número do pedido para acompanhar em tempo real
            </p>

        </div>

        {{-- ERRO --}}
        @if(session('error'))
            <div class="alert alert-danger rounded-3">
                {{ session('error') }}
            </div>
        @endif

        {{-- FORM --}}
        <form method="POST" action="{{ route('public.consultar.search') }}">
            @csrf

            <div class="mb-3">
                <label class="form-label text-light fw-semibold">
                    Número do Pedido
                </label>

                <input type="text"
                       name="numero"
                       class="form-control form-control-lg track-input"
                       placeholder="Ex: PED-ABC123/2025"
                       required>
            </div>

            <button class="btn btn-track w-100 btn-lg fw-bold">
                Consultar Pedido
            </button>
        </form>

    </div>

</div>

</div>

</div>

</section>

@endsection
<style>

.track-section{
    min-height:80vh;
    background: radial-gradient(circle at top, #0b1220, #020617);
}

/* CARD */
.track-card{
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 22px;
    padding: 40px;
    border: 1px solid rgba(255,255,255,0.05);
    color: #fff;
}

/* ICON */
.icon-box{
    width:70px;
    height:70px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    background: linear-gradient(135deg,#38bdf8,#6366f1);
    border-radius:18px;
    box-shadow:0 10px 30px rgba(56,189,248,0.25);
}

/* INPUT */
.track-input{
    background:#0b1220;
    border:1px solid rgba(255,255,255,0.1);
    color:#fff;
    border-radius:14px;
    padding:14px;
    transition:.3s;
}

.track-input:focus{
    border-color:#38bdf8;
    box-shadow:0 0 0 3px rgba(56,189,248,0.15);
    background:#0b1220;
    color:#fff;
}

/* BUTTON */
.btn-track{
    background: linear-gradient(135deg,#38bdf8,#6366f1);
    border:none;
    padding:14px;
    border-radius:14px;
    color:#fff;
    transition:.3s;
}

.btn-track:hover{
    transform: translateY(-2px);
    box-shadow:0 12px 30px rgba(56,189,248,0.25);
}

/* MOBILE */
@media (max-width: 576px){
    .track-card{
        padding:25px;
    }

    .icon-box{
        width:60px;
        height:60px;
        font-size:24px;
    }
}

</style>