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

@push('scripts')
  @if (session('success'))
    <script>
      Swal.fire({
        icon: 'success',
        title: 'Sukses',
        text: "{{ session('success') }}",
      })
    </script>
  @elseif(session('failed'))
    <script>
      Swal.fire({
        icon: 'error',
        title: 'Gagal Isi Pulsa',
        text: "{{ session('failed') }}",
      })
    </script>
  @endif
@endpush

@section('app-content')
  <div class="container pt-3 pb-5">
    <form action="{{ route('isiPulsa.store') }}" method="post">
      @csrf
      <div class="mb-3">
        <label for="nomor" class="form-label">Nomor Handphone</label>
        <input type="text" class="form-control" id="nomor" aria-describedby="nomor" required name="nomor" placeholder="Masukkan No. Hp Anda">
      </div>
      <hr>
      <h6>Nominal Pulsa</h6>
      <div class="row">
        @foreach ($pilihan_hargas as $index => $pil_harga)
          <div class="col-12 mb-2">
            <label class="card" for="{{ $index }}">
              <div class="card-body d-flex justify-content-between">
                <div>
                  <h6 class="m-0">
                    <input type="radio" name="pilihan_harga" id="{{ $index }}"
                      style="vertical-align: middle; margin-right: 5px" required value="{{ $pil_harga }}">Rp.
                    {{ number_format($pil_harga->nominal, 0, 0, '.') }}
                  </h6>
                  <small>Dikenakan Biaya Admin Rp. {{ number_format($pil_harga->biaya_admin, 0, 0, '.') }}</small>
                </div>
                <span class="badge text-bg-primary" style="height: fit-content">Rp.
                  {{ number_format($pil_harga->nominal + $pil_harga->biaya_admin, 0, 0, '.') }}</span>
                {{-- <p style="white-space: nowrap" class="text-primary mb-0">Harga Rp.
                  {{ number_format($pil_harga->nominal + $pil_harga->biaya_admin, 0, 0, '.') }}</p> --}}
              </div>
            </label>
          </div>
        @endforeach
      </div>

      <button class="btn btn-primary w-100 mt-3 ">Isi Pulsa</button>
    </form>
  </div>
@endsection