@extends('layouts.master')
@section('page-css')
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datagrid/datatables/datatables.bundle.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/bootstrap-table.min.css')}}">
@endsection
@section('content')
<div class="subheader">
    <h1 class="subheader-title">
        {{$title}}
    </h1>
</div>
<div class="row">
    <div class="col-lg-12 mb-2 d-none" id="filter">
        <div class="card">
            <div class="card-body">
                <h5 class="mb-4"><i class="fal fa-filter"></i>&nbsp;Filter</h5>
                <div class="row" id="pencarian">
                    
                    <div class="col-md-12 mb-2">
                        <div class="row">
                            @if((session('group_alias') == 'administrator') || (session('group_alias') == 'dinas'))
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <select name="provinsi" class="form-control select2" id="provinsi">
                                            <option value="0">- PILIH PROVINSI -</option>
                                            @foreach($provinsi as $datProv)
                                            <option value="{{encode_id($datProv->MsProvinsiId)}}">{{$datProv->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <select name="kabupaten" class="form-control select2" id="kabupaten">
                                            <option value="0">- PILIH KABUPATEN/KOTA -</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <select name="kecamatan" class="form-control select2" id="kecamatan" required>
                                            <option value="0">- PILIH KECAMATAN -</option>
                                        </select>
                                    </div>
                                </div>
                            @else 
                                @if(@$kecamatan)
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <select name="kecamatan" class="form-control select2" id="kecamatan" required>
                                                <option value="0">- PILIH KECAMATAN -</option>
                                                @foreach($kecamatan as $dataKec)
                                                <option value="{{encode_id($dataKec->MsKecamatanId)}}">{{$dataKec->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div> 
                                @endif
                            @endif
                        </div>
                    </div>
                    <div class="col-md-12 mb-2">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <select name="tingkat" class="form-control select2">
                                        <option value="">-- PILIH TINGKAT --</option>
                                        <option value="1">SD</option>
                                        <option value="2">SMP</option>
                                        <option value="3">SMA</option>
                                        <option value="4">SMK</option>
                                        <option value="5">MI</option>
                                        <option value="6">MTs</option>
                                        <option value="7">MA</option>
                                        <option value="8">SD LB</option>
                                        <option value="9">SMP LB</option>
                                        <option value="10">SMA LM</option>
                                        <option value="11">SLB Khusus</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <select name="status_sekolah" class="form-control select2">
                                        <option value="">-- PILIH STATUS --</option>
                                        <option value="Negeri">Negeri</option>
                                        <option value="Swasta">Swasta</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <button id="ok" class="btn btn-success btn-block"><i class="fal fa-search"></i>&nbsp;Cari Data</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div id="panel-4" class="panel">
            <div class="panel-container show">
                <div class="panel-content">
                    <div id="toolbar">
                        <a class="btn btn-secondary btn-filter btn-sm text-white"><i class="fal fa-filter text-white"></i>&nbsp;Filter</a>
                    </div>

                    <table class="table w-100" 
                    data-search="true"
                    data-toggle="table"
                    data-pagination="true"
                    data-toolbar="#toolbar"
                    data-show-refresh="false"
                    data-url="{{route($route.'.grid')}}"
                    data-ajax-options='{"xhrFields": {"withCredentials": true}}'
                    data-sort-name="ids"
                    data-sort-order="desc"
                    data-page-size="10"
                    data-id-field="id"
                    data-query-params="queryParams"
                    id="grid-data">
                      <thead class="bg-primary-light text-primary">
                        <tr>
                          <!-- <th data-field="action">#</th> -->
                          <th data-field="no">No</th>
                          {{-- <th data-field="npsn">NPSN</th> --}}
                          <th data-field="sekolah">Sekolah</th>
                          <th data-field="wilayah">Wilayah</th>
                          <th data-field="kecamatan">Kecamatan</th>
                          {{-- <th data-field="status_level">Status Level</th> --}}
                          <!-- <th data-field="tanggal_level">Tanggal Level</th> -->
                        <th data-field="penghargaan">Penghargaan Terakhir</th>
                          <!-- <th data-field="dok">DOK Administrasi</th> -->
                          {{-- <th data-field="kriteria">Pemenuhan Kriteria</th> --}}
                          <th data-field="jenis_usulan">Jenis Usulan</th>
                          <th data-field="usulkan_csa">Status</th>
                          <!-- <th data-field="perpanjang_csa">Perpanjangan CSA</th> -->
                        </tr>
                      </thead>
                      <tbody></tbody>
                  </table>
                    <!-- datatable end -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page-js')
<script src="{{asset('assets/js/datagrid/datatables/datatables.bundle.js')}}"></script>
<script src="{{asset('assets/js/bootstrap-table.min.js')}}"></script>
<script type="text/javascript">
    var $table = $('#grid-data');
    var $ok = $('#ok');
    $('.btn-filter').on('click',function(){
        $('#filter').toggleClass('d-none');
    });
    $(function() {
        $ok.click(function() {
            $table.bootstrapTable('refresh');
        })
    });
    function queryParams(params) {
        $('#pencarian').find('input[name], select').each(function() {
        params[$(this).attr('name')] = $(this).val()
        })

        return params
    }
    $('select').on("select2:selecting", function(e) {
        var selectorOrigin = this.id;
        var id = e.params.args.data.id;
        
        
        if(selectorOrigin=='provinsi'){
        $('#loading-spinner').show();
        clear('kabupaten');
        selector = 'kabupaten';
        url_to = 'kabupaten';
        getSelect(id, selector, url_to);
        }

        if(selectorOrigin=='kabupaten'){
        $('#loading-spinner').show();
        clear('kecamatan');
        selector = 'kecamatan';
        url_to = 'kecamatan';
        getSelect(id, selector, url_to);
        }
        if(selectorOrigin=='kecamatan'){
        $('#loading-spinner').show();
        clear('sekolah');
        selector = 'sekolah';
        url_to = 'sekolah';
        getSelect(id, selector, url_to);
        }
    });

    function clear(elementId) {
        $('#' + elementId).empty();
        $('#' + elementId).select2();
    }

    function getSelect(id, selectTo, urlTo, selected = "") {
        id = id;
        var base_url = "{{url('/')}}";
        //alert(id);
        destino = "#" + selectTo;
        valor = $('#' + id).find(":selected").val();

        $.ajax({
                method: "POST",
                url: base_url + "/get/" + urlTo,
                data: {
                _token: '{{csrf_token()}}',
                    id: id
                }
            }).done(function(msg) {
                obj = msg.data;

                if (obj.length > 0) {
                //Clear the current options
                $(destino).empty();
                
                if(selectTo=='kabupaten'){
                    $(destino).append('<option value="">-PILIH KABUPATEN/KOTA-</option>').select2("val", "0");


                    
                    $.each(obj, function(index) {
                    value = obj[index].id;
                    text = obj[index].name;
                    $(destino).append('<option value=' + value + '>' + text + '</option>');
                    });
                    console.log(selected)
                    if (selected) {
                    $(destino).val(selected).trigger('change');
                    selected = "";
                    }
                }

                if(selectTo=='kecamatan'){
                    $(destino).append('<option value="">-PILIH KECAMATAN-</option>').select2("val", "0");
                    
                    $.each(obj, function(index) {
                    value = obj[index].id;
                    text = obj[index].name;
                    $(destino).append('<option value=' + value + '>' + text + '</option>');
                    });
                    console.log(selected)
                    if (selected) {
                    $(destino).val(selected).trigger('change');
                    selected = "";
                    }
                }

                
                } else {

                if(selectTo=='provinsi'){
                    $(destino).empty().append('<option value="0">-PILIH PROVINSI-</option>').select2("val", "0");
                }
                if(selectTo=='kabupaten'){
                    $(destino).empty().append('<option value="0">-PILIH KABUPATEN/KOTA-</option>').select2("val", "0");
                }
                if(selectTo=='kecamatan'){
                    $(destino).empty().append('<option value="0">-PILIH KECAMATAN-</option>').select2("val", "0");
                }
                
                }
                $('#loading-spinner').hide();
            });
            return false;
    }
</script>
@endsection