@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="overflow-x-auto">
            <div id="toolbar" class="flex gap-2">
                <a href="{{url('master/tabel-data/')}}" class="p-2 rounded bg-blue-500 text-white flex items-center"><i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i><span>Lihat Daftar Tabel</a>
                <a href="{{url('master/tabel-data/kolom/'.@$keyId.'/update')}}" class="p-2 rounded bg-emerald-500 text-white flex items-center"><i data-lucide="plus" class="w-4 h-4 mr-2"></i><span>Tambah Data</span></a>
            </div>
            <table class="w-full text-left border-collapse" 
                    data-search="true"
                    data-toggle="table"
                    data-pagination="true"
                    data-toolbar="#toolbar"
                    data-show-refresh="false"
                    data-url="{{url('master/tabel-data/kolom/'.@$keyId.'/grid')}}"
                    data-sort-name="ids"
                    data-sort-order="desc"
                    data-page-size="10"
                    data-id-field="id"
                    id="grid-data">
                  <thead class="bg-slate-50/50 border-b border-slate-100">
                    <tr>
                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-width="10" data-field="action">#</th>
                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-width="10" data-field="no">No</th>
                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-field="name">Name</th>
                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-center" data-field="order">Order</th>
                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-center" data-field="key">Key</th>
                    </tr>
                  </thead>
                  <tbody></tbody>
              </table>
        </div>
    </div>
</div>

<div class="flex flex-col gap-6">
    <div class="card">
        <div class="card-header">
            <div class="flex justify-between items-center">
                <h4 class="card-title">Data {{$title}}</h4>
            </div>
        </div>
        <div class="p-6">
            
            
        </div>
    </div>
</div>

@endsection
@section('js')
<script type="text/javascript">
$("#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;
});
</script>
@endsection