@extends('admin.layout')


@push('css')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.semanticui.min.css"/>
@endpush

@push('js')
<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/1.10.19/js/dataTables.semanticui.min.js"></script>
<script type="text/javascript">
$(function() {
    var dataTable = $('#dataTable').DataTable({
        ajax: '{!! aurl('programlar/data') !!}',
        columns: [
						{data: 'sec', name: 'sec', width:'5px', sortable: false, searchable: false},
            {data: 'gorsel', name: 'gorsel', width:'5px', sortable: false, searchable: false },
            {data: 'baslik', name: 'baslik' },
            {data: 'yayinda', name: 'yayinda', width:'100px', searchable: false },
            {data: 'secenekler', name: 'secenekler', width:'5px', sortable: false, searchable: false},
        ],
				columnDefs: [
				{
            targets: 0,
            render: function (data, type, full, meta)  {
              return '<div class="ui checkbox"><input value="'+full.id+'" type="checkbox" tabindex="0" class="hidden data-sec"></div>';
            },
        },
        {
            targets: 1,
            className: "image",
            render: function (data, type, full, meta)  {
              if (full.gorsel_id) {
                return '<img data-fancybox href="'+full.gorsel_buyuk+'" style="cursor:pointer" src="'+data+'">';
              }
              return '<img src="'+data+'">';
            },
        },
				{
            targets: -1,
						className: "duzenle",
            render: function (data, type, full, meta)  {
              return '<a href="{{aurl('programlar/form')}}/'+full.id+'" class="ui icon mini button"><i class="fas fa-pen"></i></a>';
            },
        }
				]
    });

		$('#dataTableAra').keyup(function(){
		    dataTable.search($(this).val()).draw();
		});

    $('.sil').on('click', function(){
 		 swal({
 			  title: "Seçilenler silinsin mi?",
 			  icon: "warning",
 			  buttons:['Vazgeç','Sil!'],
 			  dangerMode: true,
 			})
 			.then((sil) => {
 			  if (sil) {
          $('#dataTable_processing').show();
 			    $.post('{{aurl('programlar/toplu')}}', {islem:'sil', id:window.app.dataTableChecked()}, function(d){
 						if (d.status == 'ok') {
              $('.data-table .data-sec-tumu').prop('checked', false);
              $('.toplu-islem').hide();
 							dataTable.draw();
 						}
 					});

 			  }
 			});
 	 });


});
</script>
@endpush

@section('content')

<div class="ui grid" style="margin-bottom:10px;">
	  <div class="eight wide column">
			<div class="ui fluid left icon input">
			  <i class="search icon"></i>
			  <input id="dataTableAra" type="text" placeholder="Ara">
			</div>
		</div>
	  <div class="eight wide column">
			<a href="{{aurl('programlar/form')}}" class="ui teal small labeled icon right floated button"><i class="plus icon"></i> Yeni Ekle</a>
		</div>
</div>





<div class="data-table">
	<div class="ui mini borderless menu toplu-islem" style="display:none;">
		<div class="header item">Seçilenleri : </div>
		<div class="item">
			<button class="ui icon red button sil"><i class="trash icon"></i> Sil</button>
		</div>
	</div>
  <table id="dataTable" class="ui single line table" style="display:none;">
      <thead>
          <tr>
              <th>
                <div class="ui checkbox"><input type="checkbox" tabindex="0" class="hidden data-sec-tumu"></div>
              </th>
              <th></th>
              <th>Başlık</th>
              <th>Yayın Durumu</th>
              <th class="duzenle"></th>
          </tr>
      </thead>
  </table>
</div>
@endsection