@extends('templates.master')

@section('breadcrumb')
  <div class="content content-full">
    <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
      <div class="flex-grow-1">
        <h1 class="h3 fw-bold mb-2">
          @php
          $title = "LAPORAN OUTSANDING PEMBIAYAAN"
          @endphp
          {{ strtoupper($title) }}
        </h1>
      </div>
      <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
        <ol class="breadcrumb breadcrumb-alt">
          <li class="breadcrumb-item">
            <a class="link-fx" href="javascript:void(0)">Dashboard</a>
          </li>
          <li class="breadcrumb-item" aria-current="page">
            {{ ucfirst($title) }}
          </li>
        </ol>
      </nav>
    </div>
  </div>
@endsection

@section('content')
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">{{ $title }}</h3>
      <div class="block-options">
            {{-- <a href="{{ url('transaksi/penerimaan-setoran') }}/{{ session()->get('kantor') }}"> --}}
                <button type="button" class="btn-block-option">
                    <i class="si si-arrow-left"></i>
                </button>
            </a>
            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="fullscreen_toggle">
                <i class="si si-size-fullscreen"></i>
            </button>
        </div>
      {{-- <a href="{{ url('anggota-ketua-rembug') }}/edit/{{ session()->get('kantor') }}/{{ $item['IDMAJELIS']}}" class="btn btn-sm btn-alt-secondary">
        <i class="fa fa-pencil-alt"></i>
      </a> --}}
    </div>
    <div class="block-content block-content-full">
      <div class="row mb-3">
        <div class="col-md-4">
           <div class="form-group">
           <label>KECAMATAN</label>
           <select name="kecamatan" id="kecamatan" class="form-control mb-4">
              <option value="" hidden>-- Pilih --</option>
              @foreach($kecamatan as $data)
              <option value="{{ $data['IDKECAMATAN'] }}">{{ $data['NAMAKECAMATAN'] }}</option>
              @endforeach
           </select>
           </div>
        </div>

         <div class="col-md-4">
            <div class="form-group">
            <label>PRODUK PEMBIAYAAN</label>
            <select name="produk" id="produk" class="form-control mb-4">
               <option value="" hidden>-- Pilih --</option>
               @foreach($produk as $data)
               <option value="{{ $data['KDPROD'] }}">{{ $data['NMPROD'] }}</option>
               @endforeach
            </select>
            </div>
         </div>
      </div>
        
      
      <div id="success_message"></div>
      <div id="tbl-rabani" class="table-container">
        <div id="pembiayaan"></div>
      </div> 
    </div>
  </div>

  

<script type='text/javascript'>
  $('#produk').change(function(){
    var id = $(this).val();  
    var kec = $('#kecamatan').val();
    if(id){
      $.ajax({
        type:"GET",
        url:"{{url('getOutsdPembiayaan')}}/{{ session()->get('kantor') }}/"+id+"/"+kec,
        success:function(res){        
        if(res){
          $("#pembiayaan").empty();
          $("#pembiayaan").append("<table class='table table-bordered table-vcenter table-hover' id='example2' style='width:50%'> <thead> <tr style='border-bottom: 1px;'>\
            <th colspan='2' style='border-top: solid;border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>ANGGOTA</th>\
            <th rowspan='2' style='border-top: solid;border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>KANTOR</th>\
            <th rowspan='2' style='border-top: solid;border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>REMBUG</th>\
            <th rowspan='2' style='border-top: solid;border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>DESA</th>\
            <th rowspan='2' style='border-top: solid;border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>TGL. DROPING</th>\
            <th rowspan='2' style='border-top: solid;border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>POKOK</th>\
            <th rowspan='2' style='border-top: solid;border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>MARGIN</th>\
            <th rowspan='2' style='border-top: solid;border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>COUNTER BAYAR</th>\
            <th colspan='4' style='border-top: solid;border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>SALDO</th>\
            <th colspan='3' style='border-top: solid;border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>TERTUNGAK</th>\
            <th rowspan='2' style='border-top: solid;border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>JENIS PRODUK</th>\
            <th rowspan='2' style='border-top: solid;border-left: solid; border-right: solid;border-bottom: solid; text-align:center;font-size: 10px'>KOLEKTABILITAS</th>\
           	</tr><tr>\
            <th style='border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>NO REKENING</th>\
            <th style='border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>NAMA</th>\
            <th style='border-left: solid;border-bottom: solid; text-align:center;font-size: 10px'>COUNTER</th>\
            <th style='border-left: solid;border-bottom: solid; text-align:center;font-size: 10px''>POKOK</th>\
            <th style='border-left: solid;border-bottom: solid; text-align:center;font-size: 10px''>MARGIN</th>\
            <th style='border-left: solid;border-bottom: solid; text-align:center;font-size: 10px''>SIM. WAJIB</th>\
            <th style='border-left: solid;border-bottom: solid; text-align:center;font-size: 10px''>COUNTER</th>\
            <th style='border-left: solid;border-bottom: solid; text-align:center;font-size: 10px''>POKOK</th>\
            <th style='border-left: solid;border-bottom: solid; text-align:center;font-size: 10px''>MARGIN</th>\
            </tr></thead> <tbody id='pembiayaan'></tbody> </table>");
          $.each(res, function(key, value) {
            //$('#example').DataTable( {
              //INSERTING ROWS INTO TABLE 
             //console.log(res);
              $(document).ready(function() {
                $('#example2').DataTable({
                  destroy: true,
                  dom: '<"dt-top-container"<l><"dt-center-in-div"B><f>r>t<"dt-filter-spacer"f><ip>',
                  lengthMenu: [
                      [ 10, 25, 50, -1 ],
                      [ '10 rows', '25 rows', '50 rows', 'Show all' ]
                  ],
                  buttons: [
                      {
                          extend: 'excelHtml5',
                          text:      'EXCEL',
                          title: 'OUTSTANDING PEMBIAYAAN ANGGOTA',
                      },
                      {
                        extend:    'pdfHtml5',
                        text:      'PDF',
                        title: 'OUTSTANDING PEMBIAYAAN ANGGOTA',
                        download: 'open',
                        orientation: 'landscape',
                        pageSize: 'B3'
                      }
                  ]
              });
              } );

              var today = new Date(value.TGDROP);
              var dd = String(today.getDate()).padStart(2, '0');
              var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
              var yyyy = today.getFullYear();

              today = dd + '/' + mm + '/' + yyyy;
              //document.write(today);
              $("#pembiayaan table tbody").append('<tr>\
                <td style="border-left: solid; text-align:center;font-size: 10px">' + value.NO_REKENING + '</td>\
                <td style="font-size: 10px">' + value.NAMA + '</td>\
                <td style="font-size: 10px">' + value.KANTOR + '</td>\
                <td style="font-size: 10px">' + value.NAMAMAJELIS + '</td>\
                <td style="font-size: 10px">' + value.NAMADESA + '</td>\
                <td style="text-align:center;font-size: 10px">' + today + '</td>\
                <td style="text-align:right;font-size: 10px">' + (value.PLAFON * 1).toLocaleString('en-id') + '</td>\
                <td style="text-align:right;font-size: 10px">' + (value.MARGIN * 1).toLocaleString('en-id') + '</td>\
                <td style="text-align:center;font-size: 10px">' + value.CONBYR + '</td>\
                <td style="text-align:center;font-size: 10px">' + (value.JWAKTU - value.CONBYR) + '</td>\
                <td style="text-align:right;font-size: 10px">' + (value.PLAFON - value.TOBANP).toLocaleString('en-id') + '</td>\
                <td style="text-align:right;font-size: 10px">' + (value.MARGIN - value.TOBANM).toLocaleString('en-id') + '</td>\
                <td style="text-align:right;font-size: 10px">' + (value.SALWJB * 1).toLocaleString('en-id') + '</td>\
                <td style="text-align:center;font-size: 10px">' + value.CONTGK + '</td>\
                <td style="text-align:right;font-size: 10px">' + (value.CONTGK * value.ANGPKK).toLocaleString('en-id')  + '</td>\
                <td style="text-align:right;font-size: 10px">' + (value.CONTGK * value.ANGMGN).toLocaleString('en-id')  + '</td>\
                <td style="font-size: 10px">' + value.NMPROD + '</td>\
                <td style="border-right: solid;font-size: 10px">' + value.KDKOLE + '</td>\
                </tr>');
                
          });
          
        }else{
          $("#pembiayaan").empty();
        }
        }
      });
    }else{
      $("#pembiayaan").empty();
       }   
    });
  
     
  </script>

@endsection