@extends('layouts.app')
@section('title','Malipo yamekamilika')

@section('content')
<div style="max-width:460px;margin:0 auto;text-align:center">
  <h1 style="margin-bottom:8px">Malipo yamekamilika ✅</h1>
  <p class="muted" style="margin-bottom:16px">
    Asante kwa kutumia <strong>BlueBando WiFi</strong>. Hapa chini ni voucher yako.
  </p>

  <div class="card full" style="padding:18px">
    <p style="margin-bottom:10px;font-size:13px" class="muted">
      Kifurushi: <strong>{{ optional($order->plan)->name }}</strong><br>
      Router: <strong>{{ optional($order->router)->name }}</strong><br>
      Namba ya simu: <strong>{{ $order->phone }}</strong>
    </p>

    <div style="margin:16px 0;padding:14px;border-radius:14px;
                border:1px dashed var(--bb-border);background:var(--bb-elev);">
      <div class="muted" style="font-size:12px;margin-bottom:4px">Voucher yako</div>
      <div style="font-size:26px;font-weight:800;letter-spacing:3px">
        {{ $order->voucher_code ?? 'INASUBIRI…' }}
      </div>
    </div>

    <p class="muted" style="font-size:12px">
      Voucher pia imetumwa kwenye simu yako kupitia SMS.
    </p>
  </div>
</div>
@endsection