@extends('layout')
@section('title')
    Monitoring PSB SR Terbayar | {{env('APP_NAME')}}
@endsection
@section('content')
<div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
    <!-- begin:: Subheader -->
    <div class="kt-subheader   kt-grid__item" id="kt_subheader">
        <div class="kt-container  kt-container--fluid ">
            <div class="kt-subheader__main">
                <h3 class="kt-subheader__title">
                    Monitoring PSB SR Terbayar </h3>
                <span class="kt-subheader__separator kt-hidden"></span>
            </div>
            
        </div>
    </div>

    <!-- end:: Subheader -->

    <!-- begin:: Content -->
    <div class="kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid">

        <!--begin::Portlet-->
        <div class="row">
            <div class="col-12">
                <div class="kt-portlet kt-portlet--mobile {{($data == null) ? '' : 'kt-hide'}}" id="data">
                    <div class="kt-portlet__head kt-portlet__head--lg">
                        <div class="kt-portlet__head-label">
                            <span class="kt-portlet__head-icon">
                                <i class="la la-calendar kt-font-success"></i>
                            </span>
                            <h3 class="kt-portlet__head-title">
                                <span>
                                    <b>Daily Report</b> - Monitoring PSB SR Terbayar
                                </span>
                            </h3>
                        </div>
                    </div>                  
                    <div class="kt-portlet__body">
                        <div class="kt-portlet__body kt-portlet__body--fit">
                            <form class="kt-form kt-form--fit kt-form--label-align-right" method="post" action="{{route('monpbterbayar-cetak')}}" target="_blank">
                            <input type="hidden" name="_token" value="{{csrf_token()}}">
                            <!--begin: Search Form -->
                            
                            <div class="kt-form kt-form--label-right kt-margin-t-20 kt-margin-b-20">
                                <div class="col-sm-12 order-2 order-sm-1">
                                    <div class="row">
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <label>Tgl Terbayar</label>
                                                <div class="input-group date">
                                                    <input type="text" class="form-control kt_datepicker" id="tgl_start" name="tgl_start" value="{{date('Y-m-d')}}"/>
                                                    <div class="input-group-append">
                                                        <span class="input-group-text">
                                                            <i class="la la-calendar"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <label>s/d</label>
                                                <div class="input-group date">
                                                    <input type="text" class="form-control kt_datepicker" id="tgl_end" name="tgl_end" value="{{date('Y-m-d')}}"/>
                                                    <div class="input-group-append">
                                                        <span class="input-group-text">
                                                            <i class="la la-calendar"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <label>Wilayah</label>
                                                <select class="form-control kt-select2" style="width: 100%" name="fwilayah" id="fwilayah">
                                                    <option value="0">Semua</option>
                                                    <option value="B">Barat</option>
                                                    <option value="T">Timur</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <label>&nbsp;</label>
                                                <button type="button" class="form-control btn btn-success btn-sm" id="filter">Tampilkan Data</button>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <label>&nbsp;</label>
                                                <button type="submit" class="form-control btn btn-brand btn-sm" id="filter">Cetak Laporan</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <label>Kecamatan</label>
                                                <select class="form-control kt-select2" style="width: 100%" name="fkec" id="fkec">
                                                    <option value="">Semua</option>
                                                    @foreach($kec as $r)
                                                    <option value="{{$r->kode_kecamatan}}">{{$r->kecamatan}} - {{$r->kode_kecamatan}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <label>Kelurahan</label>
                                                <select class="form-control kt-select2" style="width: 100%" name="fkel" id="fkel">
                                                    <option value="0">Semua</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <label>Zona</label>
                                                <input type="text" class="form-control kt-input kt-input--air" name="fzona" id="fzona">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </form>
                            <table class="table table-striped- table-bordered table-hover table-checkable" id="tabel">
                                <thead>
                                    <tr>
                                        <th>No DaftarPB</th>
                                        <th>Nama</th>
                                        <th>Alamat</th>
                                        <th>Nopel</th>
                                        <th>No PA</th>
                                        <th>Zona</th>
                                        <th>Tgl KirimKas</th>
                                        <th>Tgl Lunas</th>
                                        <th>Rp Bayar</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end::Portlet-->
    </div>

    <!-- end:: Content -->
</div>
@endsection
@section('css')
<link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/vendors/general/select2/dist/css/select2.css')}}" rel="stylesheet" type="text/css" />
<style type="text/css">
    .modal-lg {
        max-width: 75%;
    }
</style>
@endsection
@section('js')
<!--begin::Page Vendors -->
<script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/general/select2/dist/js/select2.full.js')}}" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#tambah").click(function(){
            $("#data").addClass('kt-hide');
            $("#form").removeClass('kt-hide');
        });

        $('#ffilter').change(function(){ 
            var value = $(this).val();
            // alert(value);
            if (value == 4) {
                $("#tanggal").removeClass('kt-hide');
            }else{
                $("#tanggal").addClass('kt-hide');
            }
        });

        $('.kt_datepicker').datepicker({
            todayHighlight:1,
            autoclose:!0,
            clearBtn: true,
            format:"yyyy-mm-dd",
            orientation: "bottom left",
        });

        $('#tabel').DataTable({
            "responsive": true,
            "processing": true,
            "serverSide": true,
            // "ajax": "{{ route('monpbterbayar-data',['filter' => '0;'.date('Y-m-d').';'.date('Y-m-d')]) }}",
            "ajax": "{{ route('monpbterbayar-data',['filter' => date('Y-m-d').';'.date('Y-m-d').';;;;']) }}",
            "columns": [
                {data: 'no_daftarpb', defaultContent: '-'},
                {data: 'nama', defaultContent: '-'},
                {data: 'alamat', defaultContent: '-'},
                {data: 'nopel', defaultContent: '-'},
                {data: 'no_pa', defaultContent: '-'},
                {data: 'zona', defaultContent: '-'},
                {data: 'tgl_kirimkas', defaultContent: '-'},
                {data: 'tgl_lunas', defaultContent: '-'},
                {data: 'rp_bayar', defaultContent: '-'},
                // {data: 'menu', orderable: false, searchable: false}
            ],
            "columnDefs":[
                 {targets:6, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
                 {targets:7, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
                // {targets:9, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
                // {targets:10, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
                // {targets:11, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
                // {targets:12, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
                // {targets:13, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
                // {targets:14, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
                // {targets:15, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
            ],
        });

        $('.kt-select2').select2();

        $("#filter").click(function(){
            // var url = "{{ url('monpbterbayar-data') }}/" + $('#jenis').val() + ";" + $('#tgl_start').val() + ";" + $('#tgl_end').val();
            var url = "{{ url('monpbterbayar-data') }}/" + $('#tgl_start').val() + ";" + $('#tgl_end').val() + ";" + $('#fwilayah').val() + ";" + $('#fkec').val() + ";" + $('#fkel').val() + ";" + $('#fzona').val();
            alert(url);
            $('#tabel').DataTable().ajax.url(url).load();
        });

        $("#fkec").change(function(){
            var token = '{{csrf_token()}}';
            var kec = $('#fkec option:selected').val();
            alert(kec);
            $("#fkel").empty();
            $.ajax({
                url: "{{route('monpbterbayar-kelbykec')}}",
                type: 'POST',
                headers: {'X-CSRF-TOKEN': token},
                data: {kec: kec},
                cache: false,
                
                success: function (result) {
                    alert('A');
                    $("#fkel").empty();
                    $("#fkel").append('<option value="">Semua</option>');
                    for(i = 0; i < result.data.length; i++){
                        $("#fkel").append('<option value="'+result.data[i]['kode_kelurahan']+'">'+ result.data[i]['kelurahan'] + '</option>');
                    }
                }
            });
        });

    });

    </script>
@endsection