@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',
        text: "{{ session('failed') }}",
      })
    </script>
  @endif
@endpush

@section('app-content')
  <div class="container pt-3 pb-5">
    <nav>
      <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <button class="nav-link active" id="token-listrik-tab" data-bs-toggle="tab" data-bs-target="#token-listrik"
          type="button" role="tab" aria-controls="token-listrik" aria-selected="true">Token Listrik</button>
        <button class="nav-link" id="tagihan-listrik-tab" data-bs-toggle="tab" data-bs-target="#tagihan-listrik"
          type="button" role="tab" aria-controls="tagihan-listrik" aria-selected="false">Tagihan Listrik</button>
      </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">

      {{-- TAB TOKEN LISTRIK --}}
      <div class="tab-pane fade show active" id="token-listrik" role="tabpanel" aria-labelledby="token-listrik-tab"
        tabindex="0">
        <div class="card">
          <div class="card-body">
            <form action="{{ route('layanan-digital.listrik.token') }}" method="post" id="form-token">
              @csrf
              <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" required
                  name="id_pelanggan" placeholder="Masukkan ID pelanggan anda">
              </div>
              <div class="mb-3">
                <label for="nama" class="form-label">Nama Pelanggan PLN</label>
                <input type="text" class="form-control" id="nama" aria-describedby="nama" required name="nama" placeholder="Masukkan nama pelanggan PLN">
              </div>
              <hr>
              <h6>Nominal Token</h6>
              <div class="row">
                @foreach ($pilihan_hargas as $index => $pil_harga)
                  <div class="col-12 mb-2">
                    <label class="card border" for="{{ $index }}">
                      <div class="card-body border d-flex justify-content-between rounded text-white" style="background: #9e0e13;">
                        <div>
                          <h6 class="m-0">
                            <input type="radio" name="pilihan_harga" id="{{ $index }}"
                              style="vertical-align: middle; margin-right: 5px" required value="{{ $pil_harga }}"><span class="text-white">Rp.
                            {{ number_format($pil_harga->nominal, 0, 0, '.') }}</span>
                          </h6>
                          <small>Dikenakan Biaya Admin Rp. {{ number_format($pil_harga->biaya_admin, 0, 0, '.') }}</small>
                        </div>
                        <span class="badge text-bg-primary font-weight-bold" 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>
              <hr>
              <button class="btn btn-warning w-100 mt-3" type="button" data-bs-toggle="modal"
                data-bs-target="#modal-token">Beli
                Token</button>
              <!-- Modal konfirmasi beli token -->
              <div class="modal fade" id="modal-token" tabindex="-1" aria-labelledby="modal-tokenLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h1 class="modal-title fs-5" id="exampleModalLabel">Konfirmasi Pembelian Token</h1>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      Lanjutkan Pembelian Token Listrik ?
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                      <button type="submit" class="btn btn-primary" id="submit-token">Beli</button>
                    </div>
                  </div>
                </div>
                @push('scripts')
                  <script>
                    $('#form-token').submit(function(e) {
                      $('#submit-token').attr('disabled', true);

                    });
                  </script>
                @endpush
              </div>
            </form>
          </div>
        </div>
      </div>

      {{-- TAB TAGIHAN LISTRIK --}}
      <div class="tab-pane fade" id="tagihan-listrik" role="tabpanel" aria-labelledby="tagihan-listrik-tab"
        tabindex="0">
        <div class="card px-3 py-4">
          <form method="GET" action="{{ route('layanan-digital.listrik.tagihan-listrik') }}">
            <div class="mb-3">
              <label for="id_pelanggan" class="form-label">ID Pelanggan Tagihan PLN</label>
              <input type="text" class="form-control" id="id_pelanggan" aria-describedby="idPelanggan"
                name="id_pelanggan" placeholder="Masukkan ID Pelanggan PLN Anda">
            </div>
            <button type="submit" class="w-100 mt-3 btn btn-primary">Cek Tagihan</button>

          </form>
        </div>
      </div>
    </div>
  </div>
@endsection