@extends('layouts.master')

@section('css')
@endsection
@section('content')
<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
    <div class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="p-6 border-b border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">{{$title}}</h3>
                    {{-- <p class="text-xs text-slate-500 font-medium">Pengelolaan data masuk dari berbagai stasiun pemantauan.</p> --}}
                </div>
                <div class="flex items-center space-x-2" id="pencarian">
                    
                    <select name="tahun" class="p-2 border tahun rounded bg-white" id="">
                        @for($i = (date('Y')-2); date('Y') >= $i ;  $i++)
                            <option {{$i == date('Y') ? 'selected' : ''}} value="{{$i}}">{{$i}}</option>
                        @endfor
                    </select>
                    @if(access('is_create', $route.'.*','module',false) || access('is_update', $route.'.*','module',false))
                    <a href="{{route($route.'.update')}}" class="p-2 rounded-xl bg-blue-500 transition-colors flex items-center text-sm font-semibold text-white">
                        <i data-lucide="plus" class="w-4 h-4 mr-2"></i> Tambah Data
                    </a>
                    @endif
                    <button class="hidden p-2 bg-slate-900 text-white rounded-xl hover:bg-slate-800 transition-colors flex items-center text-sm font-semibold">
                        <i data-lucide="filter" class="w-4 h-4 mr-2"></i> Filter
                    </button>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse" 
                        data-search="false"
                        data-toggle="table"
                        data-pagination="true"
                        data-toolbar="#toolbar"
                        data-show-refresh="false"
                        data-url="{{route($route.'.grid')}}"
                        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-slate-100 border-b border-slate-100">
                        <tr class="">
                        <th class="text-[10px] border font-bold text-slate-900 text-center tengah" data-width="10" data-field="action">#</th>
                        <th class="text-[10px] border font-bold text-slate-900 text-center tengah" data-width="10" data-field="no">No</th>
                        <th class="text-[10px] border font-bold text-slate-900 text-center" data-field="instansi">Nama Instansi</th>
                        <th class="text-[10px] border font-bold text-slate-900 text-center" data-field="name">Nama Dataset</th>
                        <th class="text-[10px] border font-bold text-slate-900 text-center" data-field="template">Sumber Data</th>
                        <th class="text-[10px] border font-bold text-slate-900 text-center" data-field="tahun">Tahun Sistem</th>
                        <th class="text-[10px] border font-bold text-slate-900 text-center tengah" data-field="status">Status</th>
                        <th class="text-[10px] border font-bold text-slate-900 text-center" data-field="created_at">Tanggal Input</th>
                        </tr>
                    </thead>
                    <tbody class=""></tbody>
                </table>

            </div>
        </div>
</div>

@endsection
@section('js')
<script type="text/javascript">
var $table = $('#grid-data');
$('.tahun').on('change',function(){
    $table.bootstrapTable('refresh');
});
function queryParams(params) {
    $('#pencarian').find('input[name], select').each(function() {
        params[$(this).attr('name')] = $(this).val()
    })

    return params
}
$("#grid-data").on("click", ".remove_data", function() {
var base_url = $(this).attr('data-href');
var id = $(this).attr('data-id');
    swal({
         title: "Hapus Data!",
         text: "Apa anda yakin ingin menghapus data ini ?",
         type: "warning",
         showCancelButton: true,
         confirmButtonColor: "#DD6B55",
         confirmButtonText: "Ya Hapus Sekarang",
         cancelButtonText: "Tidak",
         closeOnConfirm: true,
         closeOnCancel: true
     },
     function(isConfirm) {
        if(isConfirm){
          
          request = $.ajax({
              url: base_url,
              type: "GET",
          });

          // Callback handler that will be called on success
          request.done(function(response, textStatus, jqXHR){
              console.log(response);
              toastr.success("Berhasil Menhapus Data", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
              $('#grid-data').bootstrapTable('refresh');
          });

          // 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", ".aktif_data", function() {
var base_url = $(this).attr('data-href');
var id = $(this).attr('data-id');
    swal({
         title: "Aktifkan Data!",
         text: "Apa anda yakin ingin aktifkan data ini ?",
         type: "warning",
         showCancelButton: true,
         confirmButtonColor: "#2dad62",
         confirmButtonText: "Ya Aktifkan Sekarang",
         cancelButtonText: "Tidak",
         closeOnConfirm: true,
         closeOnCancel: true
     },
     function(isConfirm) {
        if(isConfirm){
          
          request = $.ajax({
              url: base_url,
              type: "GET",
          });

          // Callback handler that will be called on success
          request.done(function(response, textStatus, jqXHR){
              console.log(response);
              toastr.success("Berhasil Mengaktifkan Data", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
              $('#grid-data').bootstrapTable('refresh');
          });

          // Callback handler that will be called on failure
          request.fail(function (jqXHR, textStatus, errorThrown){
              toastr.error(
                  "Gagal "+textStatus, errorThrown
              );
          });
        }
     }); 
    return false;
});
</script>
@endsection