@include('master.header')
<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0">{{$config['title']}}</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                @foreach($config['breadcrumbs'] ?? array() as $item)
                                <li class="breadcrumb-item"><a
                                        href="{{ $item['url'] ?? '#' }}">{{ $item['title'] ?? '' }}</a></li>
                                @endforeach
                            </ol>
                        </div>

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

            
          
            <div class="row">
                <div class="col-sm-12 col-lg-12">
                    <div class="card">
                    <div class="card-header justify-content-between">
                        <div class="header-title">
                        <div class="row">
                            <div class="col-sm-6 col-lg-6">
                            <h4 class="card-title">{{$config['title']}} </h4>
                            </div>
                            <div class="col-sm-6 col-lg-6">
                            <a href="{{ route('survey.create') }}" class="btn btn-primary float-end">
                                <i class="bx bx-plus"></i> Tambah
                            </a>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                        <table id="dt" class="table table-bordered w-100">
                            <thead>
                            <tr>
                                <th>Judul</th>
                                <th>Tahun</th>
                                <th>Tgl Mulai</th>
                                <th>Tgl Berakhir</th>
                                <th>Lampiran</th>
                                <th>Status</th>
                                <th class="text-center">Action</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        </div>
                    </div>
                    </div>
                </div>
              </div>

            
        </div> 
    </div>
@include('master.footer')
    <script>
      $(document).ready(function () {
        $('#dt').dataTable({

          responsive: true,
          serverSide: true,
          processing: true,
          lengthMenu: [
                [ 10, 25, 50, -1 ],
                [ '10', '25', '50', 'All' ]
            ],
          ajax: {
            url: `{{ route('survey.index') }}`
          },
          columns: [
            {
              data: 'judul',
              name: 'judul'
            },
            {
              data: 'tahun',
              name: 'tahun'
            },
            {
              data: 'tgl_mulai',
              name: 'tgl_mulai'
            },
            {
              data: 'tgl_berakhir',
              name: 'tgl_berakhir'
            },
            // {
            //   data: 'kurs',
            //   name: 'kurs',
            //   render: $.fn.dataTable.render.number(',', '.', 2, '')
            // },
            {
              data: 'lampiran',
              name: 'lampiran',
              render: function (data){
                if (data != null) {
                  let url = '/public/storage/survey/'+ data;
                  return `<a href="${url}" class="btn btn-primary">Download</a>`;
                }else{
                  return ``;
                }
              }
            },
            {
              data: 'status',
              name: 'status',
              render : function(data){
                if (data == 0) {
                    return '<span class="badge rounded-pill bg-danger">Non Aktif</span>';
                }else{
                    return '<span class="badge rounded-pill bg-success">Aktif</span>';
                }
              }
            },
            // {
            //   data: 'markup',
            //   name: 'markup',
            //   render: $.fn.dataTable.render.number(',', '.', 2, '')
            // },
            {
              data: 'action',
              name: 'action',
              className: "text-center",
              orderable: false,
              searchable: false
            },
          ],
          rowCallback : function(row, data) {
            let api = this.api();
            $(row).find('.btn-delete').click(function(){
              let pk = $(this).data('id'),
                url = `{{ route("survey.index") }}/` + pk;
              Swal.fire({
                title   : "Anda Yakin ?",
                text    : "Data tidak dapat dikembalikan setelah di hapus!",
                icon    : "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Ya, Hapus!",
                cancelButtonText: "Tidak, Batalkan",
              }).then((result) => {
                if (result.value) {
                  $.ajax({
                    url: url,
                    type: "DELETE",
                    data: {
                      _token  : '{{ csrf_token() }}',
                      _method : 'DELETE'
                    },
                    error   : function(response){
                      toastr.error(response, 'Failed !');
                    },
                    success : function(response) {
                      if (response.status === "success") {
                        toastr.success(response.message, 'Success !');
                        api.draw();
                      } else {
                        toastr.error((response.message ? response.message : "Please complete your form"), 'Failed !');
                      }
                    }
                  });
                }
              });
            });
          }
        });
      });
    </script>
   </body>
</html>