@extends('pwa.template.app.main')

@section('app-content')
  <div class="container pt-3 pb-5">
    <form action="" method="post">
      <div class="mb-3">
        <label for="nama" class="form-label">Nama</label>
        <input type="text" class="form-control" id="nama" aria-describedby="nama">
      </div>
      <div class="mb-3">
        <label for="id_pelanggan" class="form-label">ID Pelanggan</label>
        <input type="text" class="form-control" id="id_pelanggan" aria-describedby="id_pelanggan">
      </div>
      <hr>
      <h6>Nominal Token</h6>
      <div class="row">
        <div class="col-4 mb-2">
          <label class="card" for="1">
            <div class="card-body px-0 text-center">
              <h6 class="m-0">
                <input type="radio" name="pilihan_harga" id="1"
                  style="vertical-align: middle; margin-right: 5px">Rp. 20.000
              </h6>
              <p style="white-space: nowrap" class="text-primary mb-0">Harga Rp. 21.000</p>
            </div>
          </label>
        </div>
        <div class="col-4 mb-2">
          <label class="card" for="2">
            <div class="card-body px-0 text-center">
              <h6 class="m-0">
                <input type="radio" name="pilihan_harga" id="2"
                  style="vertical-align: middle; margin-right: 5px">Rp. 50.000
              </h6>
              <p style="white-space: nowrap" class="text-primary mb-0">Harga Rp. 51.000</p>
            </div>
          </label>
        </div>
        <div class="col-4 mb-2">
          <label class="card" for="3">
            <div class="card-body px-0 text-center">
              <h6 class="m-0">
                <input type="radio" name="pilihan_harga" id="3"
                  style="vertical-align: middle; margin-right: 5px">Rp. 100.000
              </h6>
              <p style="white-space: nowrap" class="text-primary mb-0">Harga Rp. 101.000</p>
            </div>
          </label>
        </div>
        <div class="col-4 mb-2">
          <label class="card" for="4">
            <div class="card-body px-0 text-center">
              <h6 class="m-0">
                <input type="radio" name="pilihan_harga" id="4"
                  style="vertical-align: middle; margin-right: 5px">Rp. 200.000
              </h6>
              <p style="white-space: nowrap" class="text-primary mb-0">Harga Rp. 201.000</p>
            </div>
          </label>
        </div>
        <div class="col-4 mb-2">
          <label class="card" for="5">
            <div class="card-body px-0 text-center">
              <h6 class="m-0">
                <input type="radio" name="pilihan_harga" id="5"
                  style="vertical-align: middle; margin-right: 5px">Rp. 500.000
              </h6>
              <p style="white-space: nowrap" class="text-primary mb-0">Harga Rp. 501.000</p>
            </div>
          </label>
        </div>
        <div class="col-4 mb-2">
          <label class="card" for="6">
            <div class="card-body px-0 text-center">
              <h6 class="m-0">
                <input type="radio" name="pilihan_harga" id="6"
                  style="vertical-align: middle; margin-right: 5px">Rp. 1.000.000
              </h6>
              <p style="white-space: nowrap" class="text-primary mb-0">Harga Rp. 1.000.000</p>
            </div>
          </label>
        </div>
      </div>
    </form>
  </div>
@endsection