@extends('layouts/Layoutfront')

@section('title', 'Consulta')

@section('pageTitle')
<div class="d-flex flex-column">
  <h4 class="mb-1"> 
    <i class="bx bx-receipt"></i> Consulta scontrino
  </h4>
</div>
@endsection

@section('content')
<div class="row justify-content-center">
  <div class="col-12 col-md-8 col-lg-6">
    <div class="card mt-5 mb-5 shadow">
      <div class="card-body text-center">
        <div class="mb-4">
          <i class="bx bx-qr" style="font-size: 3rem; color: #3B3B3B;"></i>
        </div>
        <h5 class="mb-3 fw-semibold">Consulta il tuo scontrino</h5>
        <p class="text-muted mb-3">
          Per visualizzare il dettaglio del tuo ordine, scansiona il <strong>QR code</strong> che trovi stampato sullo scontrino.
        </p>
        <div class="my-4">
          <img src="{{ asset('images/qr-placeholder.png') }}" alt="Scansiona il QR code" style="width: 100px; opacity: 0.3;">
        </div>
        <p class="text-muted" style="font-size:95%">
          Dopo aver scansionato il QR code, accederai in automatico al dettaglio del tuo ordine.
        </p>
      </div>
    </div>
  </div>
</div>
@endsection
