@include('header')
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css"> -->
<div class="padding">
    <div class="row">
        <div class="col-md-12" style="width: 100%;">
            <div class="box">
                {{-- <div class="box-header">
                </div> --}}
                <div class="box-divider m-0"></div>
                <div class="box-header bg-dark"><h4 class="text-white">Document</h4></div>
                <form id="hapuscu" method="POST" action="{{route('dokumen.deldoc')}}">
                    {{csrf_field()}}
                    <div class="box-body">
                      <div class="col-md-12">
                        <a class="btn btn-success" href="{{ url('/addoc')}}"><i
                                    class="fa fa-plus-circle"></i> Tambah
                        </a>
                        <button type="submit" style="margin: 5px;" class="btn btn-danger" data-url=""><i
                                    class="fa fa-trash"></i> Delete
                        </button>
                      </div>
                      <br>
                      <div class="col-md-12">
                          <div class="col-md-3" style="top: 3px;float: left;">
                            <div class="row">
                              <lable>Dokumen</label>
                            </div>
                            <div class="row">
                              <select class="form-control select2" id="filter" style="float: right; width: 80%;">
                                <option selected="selected" value="">SEMUA</option>
                                @foreach($data['dokumen'] as $dt)
                                    <option value="{{ $dt->second_id }}">{{ $dt->second_id }}
                                        - {{ $dt->name }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>
                          <div class="col-md-3 subjenis_frame" style="top: 3px;float: left; display:none;">
                            <div class="row">
                              <lable>Sub Jenis Peraturan</label>
                            </div>
                            <div class="row">
                              <select class="form-control select2" id="filter_subjenis" style="float: right; width: 80%;"></select>
                            </div>
                          </div>
                          <div class="col-md-3" style="top: 3px;float: left;">
                            <div class="row">
                              <lable>Nomor</label>
                            </div>
                            <div class="row">
                              <input type="text" class="form-control" id="filter_nomor" style="float: right; width: 80%;">
                              {{-- <select class="form-control select2" id="filter_nomor" style="float: right; width: 80%;">
                                <option selected="selected" value="">SEMUA</option>
                                @foreach($data['nomor'] as $dt)
                                    <option value="{{ $dt->nomor_peraturan }}">{{ $dt->nomor_peraturan }}</option>
                                @endforeach
                              </select> --}}
                            </div>
                          </div>
                          <div class="col-md-3" style="top: 3px;float: left;">
                            <div class="row">
                              <lable>Tahun</label>
                            </div>
                            <div class="row">
                              <select class="form-control select2" id="filter_tahun" style="float: right; width: 80%;">
                                <option selected="selected" value="">SEMUA</option>
                                @foreach($data['tahun'] as $dt)
                                    <option value="{{ $dt->tahun_terbit }}">{{ $dt->tahun_terbit }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>

                              <br><br><br><br>
                        </div>
                            <div class="col-md-12">
                                <table id="table_dokumen" class="table table-bordered table-striped">
                                    <thead class="bg-success text-white">
                                    <tr>
                                        <th width="5%">
                                          <!-- <input type="checkbox" id="check_all"> -->

                                        </th>
                                        <th width="33%">
                                            <center>JUDUL</center>
                                        </th>
                                        <th width="8%">
                                            <center>TAHUN</center>
                                        </th>
                                        <th width="8%">
                                            <center>PENERBIT</center>
                                        </th>
                                        <th width="8%">
                                            <center>TANGGAL PEMBUATAN</center>
                                        </th>
                                        <th width="8%">
                                            <center>PENGUBAH</center>
                                        </th>
                                        <th width="8%">
                                            <center>TANGGAL PERUBAHAN</center>
                                        </th>
                                        <th width="8%">
                                            <center>STATUS</center>
                                        </th>
                                        <th width="8%">
                                            <center>AKSI</center>
                                        </th>
                                    </tr>
                                    </thead>
                                </table>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<!-- <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script> -->
<script type="text/javascript">
@if(Session::has('success'))
swal({
    type: 'success',
    title: "Berhasil!",
    icon: "success",
    button: false,
    text: "{{ Session::get('success') }}",
    timer: 2000,
    showConfirmButton: false
});
@endif
@if(Session::has('error'))
swal({
    type: 'error',
    title: 'error',
    text: "{{ Session::get('error') }}",
    timer: 2000,
    showConfirmButton: false
});
@endif

    function edit(obj) {
        $('#modal-editgmd').modal('show');

        var item = $(obj).data('item');

        console.log(item);
        $("#id_m").val(item.id);
        $("#gmd").val(item.name);
    }

    $(document).ready(function () {

      var table =  $('#table_dokumen').DataTable({
            "scrollCollapse": true,
            "paging": true,
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url":'{!! route('dokumen.index.getdata') !!}',
                "dataType":"json",
                "type":"POST",
                "data":function (data){
                  data._token = '{{csrf_token()}}';
                  data.filter = $('#filter').val();
                  data.filter_subjenis = $('#filter_subjenis').val();
                  data.filter_nomor = $('#filter_nomor').val();
                  data.filter_tahun = $('#filter_tahun').val();
                }
            },
            "columns": [
                {data: 'ckbx'},
                {data: 'judul'},
                {data: 'tahun_terbit'},
                {data: 'penerbit'},
                {data: 'created_at'},
                {data: '_updated_by'},
                {data: 'updated_at'},
                {data: 'status'},
                {data: 'aksi'},
            ],
            language: {
                processing: "Sedang memproses...",
                lengthMenu: "Tampilkan _MENU_ entri",
                zeroRecords: "Tidak ditemukan data yang sesuai",
                emptyTable: "Tidak ada data yang tersedia pada tabel ini",
                info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
                infoEmpty: "Menampilkan 0 sampai 0 dari 0 entri",
                infoFiltered: "(disaring dari _MAX_ entri keseluruhan)",
                infoPostFix: "",
                search: "Cari:",
                url: "",
                infoThousands: ".",
                loadingRecords: "Sedang memproses...",
                paginate: {
                    first: "<<",
                    last: ">>",
                    next: "Selanjutnya",
                    previous: "Sebelum"
                },
                aria: {
                    sortAscending: ": Aktifkan untuk mengurutkan kolom naik",
                    sortDescending: ": Aktifkan untuk mengurutkan kolom menurun"
                }
            }
        });

        $('.select2').select2();
        $('#filter').change(function(){ //button filter event click
            console.log($('#filter').val());
            $('.subjenis_frame').show();
            table.ajax.reload(); //just reload table
            if ($('#filter').val() != "") {
              $.get('{{ URL::to('docHirarki') }}', {id: $('#filter').val()}, function (e) {
                $('#filter_subjenis').html(e);
              });
            }else{
              $('.subjenis_frame').hide();
            }
        }); 

        $('#filter_subjenis, #filter_nomor, #filter_tahun').change(function(){
          table.ajax.reload();
        });

        // $('#filter_nomor').keypress(function() {
        //   // table.ajax.reload();
        //   console.log($('#filter_nomor').val());
        // });

        $('#check_all').on('click', function (e) {

            if ($(this).is(':checked', true)) {

                $(".checkbox").prop('checked', true);

            } else {

                $(".checkbox").prop('checked', false);

            }

        });

        $('.checkbox').on('click', function () {

            if ($('.checkbox:checked').length == $('.checkbox').length) {

                $('#check_all').prop('checked', true);

            } else {

                $('#check_all').prop('checked', false);

            }

        });
    });

</script>

<style>
    .gfg {
        font-size: 40px;
        color: green;
        font-weight: bold;
        text-align: center;
    }

    .geeks {
        font-size: 17px;
        text-align: center;
        margin-bottom: 20px;
    }

    th, td { whitespace: nowrap; }
    div.dataTables_wrapper {
        width: 100%;
        margin: 0;
    }
</style>


@include('footer')