@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">
        <div id="panel-4" class="panel">
            <div class="panel-container show">
                <div class="panel-content">
                    <div id="toolbar" class="d-flex gap-2 align-items-center">
                        <div>
                            <span>Filter :</span>
                        </div>
                        <div>
                            <select name="tahun" class="form-control numberInput filterTahun">
                                @for ($i = date('Y')-3;   date('Y') >= $i; $i++)
                                    <option {{ $i == date('Y') ? 'selected' : '' }} value="{{$i}}">{{$i}}</option>
                                @endfor
                            </select>
                        </div>
                        {{-- <a class="btn btn-secondary btn-filter btn-sm text-white"><i class="fal fa-filter text-white"></i>&nbsp;Filter</a> --}}
                        @if(session('group_alias') == 'sekolah')
                            <div>
                                <a data-toggle="modal" data-target="#modal" class="btn btn-success btn-sm text-white"><i class="fal fa-plus text-white"></i>&nbsp;Tambah Data</a>
                            </div>
                        @endif
                    </div>
                    <table class="table w-100 wrap" 
                    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>
                          @if(session('group_alias') == 'sekolah')
                          <th data-field="action">#</th>
                          @endif
                          @if(session('group_alias') != 'sekolah')
                          <th data-field="sekolah">Sekolah</th>
                          @endif
                          {{-- <th data-field="mitra">Mitra</th> --}}
                          <th data-field="tahun">Tahun</th>
                          <th data-field="bulan">Bulan</th>
                          <th data-field="organik">Organik (Kg)</th>
                          <th data-field="sampah_anorganik">An Organik (Kg)</th>
                          <th data-field="b3">B3 (Kg)</th>
                          <th data-field="residu">Residu (Kg)</th>
                        </tr>
                      </thead>
                      <tbody></tbody>
                  </table>
                    <!-- datatable end -->
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-secondary">
                <h5><b>Tambah Data Timbulan Sampah</b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                </button>
            </div>
            <form action="{{ route($route.'.store') }}" method="POST">
                    {{ csrf_field() }}
                <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="col-xl-12 form-label">Tahun</label>
                                    <div class="col-12 pr-1">
                                        <input type="text" class="form-control" name="tahun" value="{{ date('Y') }}" disabled>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="col-xl-12 form-label">Bulan</label>
                                    <div class="col-12 pr-1">
                                        <select name="bulan" class="form-control is-required @error('bulan') is-invalid @enderror" id="" required>
                                            <option value="">-- Pilih Bulan --</option>
                                            <option value="1">Januari</option>
                                            <option value="2">Februari</option>
                                            <option value="3">Maret</option>
                                            <option value="4">April</option>
                                            <option value="5">Mei</option>
                                            <option value="6">Juni</option>
                                            <option value="7">Juli</option>
                                            <option value="8">Agustus</option>
                                            <option value="9">September</option>
                                            <option value="10">Oktober</option>
                                            <option value="11">November</option>
                                            <option value="12">Desember</option>
                                        </select>
                                        @error('bulan')
                                            <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="col-xl-12 form-label">Sampah Organik</label>
                                    <div class="col-12 pr-1">
                                        <div class="input-group">
                                            <input type="text" name="organik" class="form-control numberInput @error('organik') is-invalid @enderror" placeholder="Masukan Jumlah Sampah Organik" required>
                                            <div class="input-group-append">
                                                <button class="btn btn-default waves-effect waves-themed" type="button">Kg</button>
                                            </div>
                                        </div>
                                        @error('organik')
                                            <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="col-xl-12 form-label">Sampah An Organik</label>
                                    <div class="col-12 pr-1">
                                        <div class="input-group">
                                            <input type="text" name="anorganik" class="form-control numberInput @error('anorganik') is-invalid @enderror" placeholder="Masukan Jumlah Sampah An Organik" required>
                                            <div class="input-group-append">
                                                <button class="btn btn-default waves-effect waves-themed" type="button">Kg</button>
                                            </div>
                                        </div>
                                        @error('anorganik')
                                            <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="col-xl-12 form-label">Sampah B3</label>
                                    <div class="col-12 pr-1">
                                        <div class="input-group">
                                            <input type="text" name="b3" class="form-control numberInput @error('b3') is-invalid @enderror" placeholder="Masukan Jumlah Sampah B3" required>
                                            <div class="input-group-append">
                                                <button class="btn btn-default waves-effect waves-themed" type="button">Kg</button>
                                            </div>
                                        </div>
                                        @error('b3')
                                            <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="col-xl-12 form-label">Sampah Residu</label>
                                    <div class="col-12 pr-1">
                                        <div class="input-group">
                                            <input type="text" name="residu" class="form-control numberInput @error('residu') is-invalid @enderror" placeholder="Masukan Jumlah Sampah Residu" required>
                                            <div class="input-group-append">
                                                <button class="btn btn-default waves-effect waves-themed" type="button">Kg</button>
                                            </div>
                                        </div>
                                        @error('residu')
                                            <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </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');
    $('.btn-filter').on('click',function(){
        $('#filter').toggleClass('d-none');
    });
    function queryParams(params) {
        $('#toolbar').find('input[name], select').each(function() {
            params[$(this).attr('name')] = $(this).val()
        })

        return params
    }
    $(function() {
        $('.filterTahun').on('change',function(){
            $table.bootstrapTable('refresh');
        });
    });
    $("#grid-data").on("click", ".tolak", function() {
        var base_url = $(this).attr('data-href');
        var id = $(this).attr('data-id');
        swal({
             title: "Tolak Kuesioner!",
             text: "Apa anda yakin ingin tolak kuesioner ini ?",
             type: "warning",
             showCancelButton: true,
             confirmButtonColor: "#BF3131",
             confirmButtonText: "Tolak Sekarang",
             cancelButtonText: "Batal",
             closeOnConfirm: true,
             closeOnCancel: true
         },
         function(isConfirm) {
            if(isConfirm){
              
              request = $.ajax({
                  url: base_url,
                  xhrFields: {
                    withCredentials: true
                },
                  type: "GET",
              });

              // Callback handler that will be called on success
              request.done(function(response, textStatus, jqXHR){
                  console.log(response);
                  toastr.success("Berhasil Login", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
                  window.location.href = '{{url("/kuesioner")}}';
                  history.pushState(null, null, location.href);
                  window.onpopstate = function () {
                      history.go(1);
                  };
              });

              // Callback handler that will be called on failure
              request.fail(function (jqXHR, textStatus, errorThrown){
                  toastr.error(
                      "Gagal "+textStatus, errorThrown
                  );
              });
            }
         }); 
        return false;
    });
    $("#grid-data").on("click", ".verifikasi", function() {
        var base_url = $(this).attr('data-href');
        var id = $(this).attr('data-id');
        swal({
             title: "Verifikasi Kuesioner!",
             text: "Apa anda yakin ingin verifikasi kuesioner ini ?",
             type: "warning",
             showCancelButton: true,
             confirmButtonColor: "#3F7D58",
             confirmButtonText: "Approve Sekarang",
             cancelButtonText: "Batal",
             closeOnConfirm: true,
             closeOnCancel: true
         },
         function(isConfirm) {
            if(isConfirm){
              
              request = $.ajax({
                  url: base_url,
                  xhrFields: {
                    withCredentials: true
                },
                  type: "GET",
              });

              // Callback handler that will be called on success
              request.done(function(response, textStatus, jqXHR){
                  console.log(response);
                  toastr.success("Berhasil Login", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
                  window.location.href = '{{url("/kuesioner")}}';
                  history.pushState(null, null, location.href);
                  window.onpopstate = function () {
                      history.go(1);
                  };
              });

              // Callback handler that will be called on failure
              request.fail(function (jqXHR, textStatus, errorThrown){
                  toastr.error(
                      "Gagal "+textStatus, errorThrown
                  );
              });
            }
         }); 
        return false;
    });
    $('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,
                        xhrFields: {
                            withCredentials: true
                        },
                        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