@extends('backend.layouts.app')
@section('main')
@section('title', 'Order Now')

    <!-- Main page content-->
    <div class="row">
        
            <div class="text mt-3 mb-4">
                <h1 class="text-primary mb-2">Choose your plan</h1>
                <p class="lead">Pilih lisensi starbill radius sesuai kebutuhanmu</p>
            </div>
            <div class="row">
                <div class="col-sm-6 col-lg-4">
                  <div class="card">
                    <div class="card-body">
                      <span class="fw-bolder text-uppercase fs-2 d-block mb-7">CLOUD BRONZE</span>
                      <div class="my-4">
                        <img src="/assets/starbill/dist/images/backgrounds/bronze.png" alt="modernize-img" class="img-fluid" width="80" height="80">
                      </div>
                      <div class="d-flex mb-3">
                        <h5 class="fw-bolder fs-6 mb-0">RP</h5>
                        <h2 class="fw-bolder fs-8 ms-2 mb-0">200.000</h2>
                        <span class="ms-2 fs-4 d-flex align-items-center">/ bulan</span>
                      </div>
                      <ul class="list-unstyled mb-7">
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Unlimited NAS</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Maks 200 PPPoE User</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Maks 10.000 Hotspot User</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Free VPN</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">WhatsApp Gateway</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-x text-muted fs-4"></i>
                          <span class="text-muted">Payment Gateway</span>
                        </li>
            
                      </ul>
                      <a href="/order/1" class="btn btn-primary fw-bolder py-6 w-100 text-capitalize">PILIH CLOUD BRONZE</a>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                  <div class="card">
                    <div class="card-body pt-6">
                      <div class="text-end">
                        <span class="badge fw-bolder py-1 bg-warning-subtle text-warning text-uppercase fs-2 rounded-3">POPULAR</span>
                      </div>
                      <span class="fw-bolder text-uppercase fs-2 d-block mb-7">CLOUD SILVER</span>
                      <div class="my-4">
                        <img src="/assets/starbill/dist/images/backgrounds/silver.png" alt="modernize-img" class="img-fluid" width="80" height="80">
                      </div>
                      <div class="d-flex mb-3">
                        <h5 class="fw-bolder fs-6 mb-0">RP</h5>
                        <h2 class="fw-bolder fs-8 ms-2 mb-0">300.000</h2>
                        <span class="ms-2 fs-4 d-flex align-items-center">/ bulan</span>
                      </div>
                      <ul class="list-unstyled mb-7">
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Unlimited NAS</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Maks 300 PPPoE User</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Maks 30.000 Hotspot User</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Free VPN</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">WhatsApp Gateway</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Payment Gateway</span>
                        </li>
            
                      </ul>
                      <a href="/order/2" class="btn btn-primary fw-bolder py-6 w-100 text-capitalize">PILIH CLOUD SILVER</a>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                  <div class="card">
                    <div class="card-body">
                      <span class="fw-bolder text-uppercase fs-2 d-block mb-7">CLOUD GOLD</span>
                      <div class="my-4">
                        <img src="/assets/starbill/dist/images/backgrounds/gold.png" alt="modernize-img" class="img-fluid" width="80" height="80">
                      </div>
                      <div class="d-flex mb-3">
                        <h5 class="fw-bolder fs-6 mb-0">RP</h5>
                        <h2 class="fw-bolder fs-8 ms-2 mb-0">500.000</h2>
                        <span class="ms-2 fs-4 d-flex align-items-center">/ bulan</span>
                      </div>
                      <ul class="list-unstyled mb-7">
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Unlimited NAS</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Maks 1.000 PPPoE User</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Maks 50.000 Hotspot User</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Free VPN</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">WhatsApp Gateway</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Payment Gateway</span>
                        </li>
            
                      </ul>
                      <a href="/order/3" class="btn btn-primary fw-bolder py-6 w-100 text-capitalize">PILIH CLOUD GOLD</a>
                    </div>
                  </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-lg-4">
                  <div class="card">
                    <div class="card-body">
                      <span class="fw-bolder text-uppercase fs-2 d-block mb-7">VPS PLATINUM</span>
                      <div class="my-4">
                        <i class="fas fa-medal fa-4x text-primary"></i>
                      </div>
                      <div class="d-flex mb-3">
                        <h5 class="fw-bolder fs-6 mb-0">RP</h5>
                        <h2 class="fw-bolder fs-8 ms-2 mb-0">600.000</h2>
                        <span class="ms-2 fs-4 d-flex align-items-center">/ bulan</span>
                      </div>
                      <ul class="list-unstyled mb-7">
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Dedicated Server</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">vCPU4 - RAM 4GB</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Custom Domain</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Unlimited NAS</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Unlimited PPPoE User</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Unlimited Hotspot User</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Free VPN</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">WhatsApp Gateway</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Payment Gateway</span>
                        </li>
            
                      </ul>
                      <a href="https://wa.wizard.id/725cda" class="btn btn-primary fw-bolder py-6 w-100 text-capitalize">HUBUNGI KAMI</a>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                  <div class="card">
                    <div class="card-body">
                      {{-- <div class="text-end">
                        <span class="badge fw-bolder py-1 bg-warning-subtle text-warning text-uppercase fs-2 rounded-3">POPULAR</span>
                      </div> --}}
                      <span class="fw-bolder text-uppercase fs-2 d-block mb-7">VPS DIAMOND</span>
                      <div class="my-4">
                        <i class="fas fa-medal fa-4x text-secondary"></i>
                      </div>
                      <div class="d-flex mb-3">
                        <h5 class="fw-bolder fs-6 mb-0">RP</h5>
                        <h2 class="fw-bolder fs-8 ms-2 mb-0">1.000.000</h2>
                        <span class="ms-2 fs-4 d-flex align-items-center">/ bulan</span>
                      </div>
                      <ul class="list-unstyled mb-7">
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Dedicated Server</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">vCPU8 - RAM 8GB</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Custom Domain</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Unlimited NAS</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Unlimited PPPoE User</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Unlimited Hotspot User</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Free VPN</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">WhatsApp Gateway</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Payment Gateway</span>
                        </li>
            
                      </ul>
                      <a href="https://wa.wizard.id/8742a9" class="btn btn-primary fw-bolder py-6 w-100 text-capitalize">HUBUNGI KAMI</a>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                  <div class="card">
                    <div class="card-body">
                      <span class="fw-bolder text-uppercase fs-2 d-block mb-7">LOCAL RADIUS</span>
                      <div class="my-4">
                        <i class="fas fa-medal fa-4x text-warning"></i>
                      </div>
                      <div class="d-flex mb-3">
                        <h5 class="fw-bolder fs-6 mb-0">RP</h5>
                        <h2 class="fw-bolder fs-8 ms-2 mb-0">20.000.000</h2>
                        <span class="ms-2 fs-4 d-flex align-items-center">/ instalasi</span>
                      </div>
                      <ul class="list-unstyled mb-7">
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Full Local Server (App & Radius)</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">vCPU8 - RAM 16GB | SSD 128GB</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Tanpa Biaya Bulanan</span>
                          </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Unlimited NAS</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Unlimited PPPoE User</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">Unlimited Hotspot User</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                            <i class="ti ti-check text-primary fs-4"></i>
                            <span class="text-dark">WhatsApp Gateway</span>
                        </li>
                        <li class="d-flex align-items-center gap-2 py-2">
                          <i class="ti ti-check text-primary fs-4"></i>
                          <span class="text-dark">Payment Gateway</span>
                        </li>
                        <p class="mt-2">Instalasi offline sudah termasuk perangkat server, syarat dan ketentuan berlaku</p>
            
                      </ul>
                      <a href="https://wa.wizard.id/321b50" class="btn btn-primary fw-bolder py-6 w-100 text-capitalize">HUBUNGI KAMI</a>
                    </div>
                  </div>
                </div>
            </div>
    </div>
@endsection