@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"> Cari Laporan</h2>
                    <form id="form_cek_laporan" method="post" action="{{ route('halo_masbup.cek_laporan') }}">
                      @csrf
                      <div class="row">
                        <div class="form-floating mb-4 col-8">
                          <input id="nik" name="nik" type="text" class="form-control nik" onkeypress="return event.keyCode != 13;" placeholder="00000000000000" maxlength="16" autofocus>
                          <label for="nik">Masukkan NIK / Nomor Induk Kependudukan</label>
                        </div>
                        <div class="col-4">
                          <button type="button" onclick="valid_nik()" class="btn btn-sm btn-primary btn-icon btn-icon-start rounded"> <i class="uil uil-search"></i> Cari </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 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 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() {
    $('.nik').mask('0000000000000000');
  });

  function valid_nik(){
      var nik = $('#nik').val();
        var char = nik.length;
        if(char == 16)
        {
            // showSwalLoading('Loading...','Mencari Data');
            $('#form_cek_laporan').submit();
        }else{
            showSwal('warning','Gagal','Format NIK Tidak Sesuai');
        }
    }
</script>
@endsection