@extends(auth()->check() ? 'user.layout' : 'user.public.layout')

@section('title','অর্ডার সফল')

@section('content')
<style>
:root{
  --orange:#ff5a00;
  --orange2:#ff7a00;
  --red:#ff303c;
  --green:#16a34a;
  --bg:#f8fafc;
  --text:#111827;
  --muted:#64748b;
  --border:#e5e7eb;
}

.success-page{
  background:var(--bg);
  min-height:100vh;
  padding:22px 12px 110px;
}

.success-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  padding:26px 16px 18px;
  text-align:center;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
  overflow:hidden;
  position:relative;
}

.success-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:7px;
  background:linear-gradient(135deg,var(--orange2),var(--red));
}

.success-icon{
  width:86px;
  height:86px;
  border-radius:50%;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  margin:10px auto 14px;
  box-shadow:0 12px 24px rgba(22,163,74,.28);
  border:6px solid #dcfce7;
}

.success-title{
  font-size:23px;
  font-weight:900;
  color:var(--text);
  margin:0 0 7px;
}

.success-sub{
  font-size:14px;
  color:var(--muted);
  font-weight:700;
  line-height:1.6;
  margin:0 0 14px;
}

.order-no{
  background:#fff7f2;
  border:1px dashed #ffb98f;
  border-radius:14px;
  padding:13px 10px;
  margin-bottom:14px;
}

.order-no small{
  display:block;
  font-size:11px;
  color:#9a5a35;
  font-weight:900;
  margin-bottom:4px;
}

.order-no strong{
  display:block;
  font-size:18px;
  color:var(--orange);
  font-weight:900;
  letter-spacing:.3px;
}

.amount-box{
  background:#f9fafb;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  margin-bottom:16px;
}

.amount-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #edf2f7;
}

.amount-row:last-child{
  border-bottom:0;
}

.amount-label{
  font-size:13px;
  font-weight:900;
  color:var(--muted);
}

.amount-value{
  font-size:16px;
  font-weight:900;
  color:var(--text);
  white-space:nowrap;
}

.amount-value.orange{
  color:var(--orange);
}

.amount-value.green{
  color:var(--green);
}

.btn-home{
  width:100%;
  height:48px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--orange2),var(--red));
  color:#fff!important;
  font-size:15px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none!important;
  border:0;
}

@media(max-width:420px){
  .success-page{
    padding-left:10px;
    padding-right:10px;
  }

  .success-title{
    font-size:21px;
  }
}
</style>

<div class="success-page">
  <div class="success-card">

    <div class="success-icon">
      <i class="fa-solid fa-check"></i>
    </div>

    <h2 class="success-title">অর্ডার সফল হয়েছে</h2>

    <p class="success-sub">
      আপনার অর্ডার সফলভাবে গ্রহণ করা হয়েছে।
    </p>

    <div class="order-no">
      <small>অর্ডার নাম্বার</small>
      <strong>{{ $order->order_no }}</strong>
    </div>

    <div class="amount-box">

      <div class="amount-row">
        <div class="amount-label">মোট অর্ডার</div>
        <div class="amount-value orange">
          ৳{{ number_format($order->total_amount,0) }}
        </div>
      </div>

      <div class="amount-row">
        <div class="amount-label">অগ্রিম পেমেন্ট</div>
        <div class="amount-value green">
          ৳{{ number_format($order->advance_amount,0) }}
        </div>
      </div>

      <div class="amount-row">
        <div class="amount-label">ডেলিভারির সময় দিতে হবে</div>
        <div class="amount-value orange">
          ৳{{ number_format($order->cod_amount,0) }}
        </div>
      </div>

    </div>

    <a href="{{ url('/') }}" class="btn-home">
      <i class="fa-solid fa-house"></i>
      হোমে ফিরে যান
    </a>

  </div>
</div>
@endsection