@extends('layouts.app')

@section('content')
<div class="page-frame bg-pale-navy">
  <div class="content-wrapper">
    <section class="wrapper bg-light">
      <div class="container py-5 py-md-7">
        <div class="row">
          <div class="col-md-12">
            <ul class="nav nav-tabs nav-tabs-basic">
              <!-- <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab_tagihan">Cek Tagihan</a></li> -->
              <!-- <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab_data_kkpr">Data KKPR Non Berusaha</a> </li> -->
            </ul>

            <div class="tab-content mt-0 mt-md-5">

              {{-- Tab Cek Tagihan --}}
              <div class="tab-pane fade show active" id="tab_tagihan">
                <div class="card mb-4">
                  <!-- <div class="card-header">
                    
                  </div> -->
                  <div class="card-body px-5">
                    <h2 class="display-5"> Cek Tagihan PBB</h2>
                    <form id="form_cek_tagihan" method="post" action="{{ route('e_sppt.cek_tagihan') }}">
                      @csrf
                      <div class="row">
                        <div class="form-floating mb-4 col-8">
                          <input id="nop" name="nop" type="text" onkeypress="return event.keyCode != 13;" class="form-control nop" placeholder="00.00.000.000.000.0000.0" maxlength="24" autofocus>
                          <label for="nop">Masukkan NOP / Nomor Objek Pajak</label>
                        </div>
                        <div class="col-4">
                          <button type="button" onclick="valid_nop()" class="btn btn-sm btn-primary btn-icon btn-icon-start rounded"> <i class="uil uil-search "></i> Cek </button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                @if ($code==1)
                <div class="alert alert-success alert-icon alert-dismissible fade show" role="alert">
                  <i class="uil uil-check-circle"></i> {!! $message !!}
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>

                <div class="card">
                  <div class="card-body">
                    <div class="accordion accordion-wrapper" id="accordionEx">
                      <div class="card plain accordion-item">
                        <div class="card-header" id="heading1">
                          <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1"> Profil </button>
                        </div>

                        <div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="heading1" data-bs-parent="#accordionEx">
                          <p col-lg-6>
                            NOP : <br> <b>{!!$data_pbb[0]->nop!!}</b>
                          </p>
                          <p col-lg-6>
                            Nama WP : <br> <b>{{$data_pbb[0]->nama_wp}}</b>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card mb-4">
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <tr>
                          <th scope="col">No</th>
                          <th scope="col">Tahun Pajak</th>
                          <th scope="col">Tanggal Jatuh Tempo</th>
                          <th scope="col">Status Pembayaran</th>
                          <th scope="col">Tanggal Bayar</th>
                          <th scope="col">Pokok PBB</th>
                          <th scope="col">Denda</th>
                          <th scope="col">Jumlah yg Dibayar</th>
                        </tr>
                      </thead>
                      <tbody>
                        @php $no=1; @endphp
                        @foreach ($data_pbb as $key => $value)
                        <tr>
                          <th scope="row">{{$no}}</th>
                          <td>{{$value->tahun}}</td>
                          <td>{{$value->tgl_jatuh_tempo}}</td>
                          @if (is_null($value->tgl_bayar))
                          <td>Belum</td>
                          @else
                          <td>Sudah</td>
                          @endif
                          <td>{{$value->tgl_bayar}}</td>
                          <td>{{rupiah($value->pokok)}}</td>
                          <td>{{rupiah($value->denda)}}</td>
                          <td>{{rupiah($value->jumlah)}}</td>
                        </tr>
                        @php $no++; @endphp
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>

                @elseif ($code==2)
                <div class="alert alert-danger alert-icon alert-dismissible fade show" role="alert">
                  <i class="uil uil-times-circle"></i> {!! $message!!}
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                @else
                @endif
              </div>

            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<script>
  $(document).ready(function() {
    $('.nop').mask('00.00.000.000.000.0000.0');
  });

  function valid_nop() {
    var nop = $('#nop').val();
    var char = nop.length;
    if (char == 24) {
      showSwalLoading('Loading...', 'Mencari Data');
      $('#form_cek_tagihan').submit();
    } else {
      // alert('FORMAT NOP BELUM SESUAI');
      showSwal('warning', 'Gagal', 'Format NOP Tidak Sesuai');
    }
  }
</script>
@endsection