@extends('template.template')
@section('title','Achievement')
@section('main')

<div class="main">
	<h2><strong>Achievement</strong></h2>
	<hr>
	<button class="btn black mt-2" data-bs-toggle="modal" data-bs-target="#adddata">Tambah Data</button>
	<br><br>
	<div class="data-content">
		<div class=table-control>
			<table class="table table-home table-striped table-bordered" id="prestasi-table">
				<thead>
					<tr>
						<th width="30%">Foto</th>
						<th width="50%">Judul Foto</th>
						<th width="20%">Aksi</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
		</div>
	</div>
</div>
<div class="modal fade" id="adddata" tabindex="-1" aria-labelledby="adddataLabel" aria-hidden="true">
    <div class="modal-dialog">
		<div class="modal-content">
   			<div class="modal-header">
   				<h1 class="modal-title fs-5" id="adddataLabel">Tambah Data</h1>
   				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
   			</div>
	   		<div class="modal-body">
	   			<form action="{{ route('achievementadd') }}" method="post" enctype="multipart/form-data">
	   			@csrf
	   				<div class="form-group">
	   					<label><strong>Judul Prestasi</strong></label>
	   					<input type="text" name="nama" class="form-control" required>
	   				</div>
	   				<img name="imagechange" id="imgadd" class="w-25 mt-2">
	   				<div class="form-group">
	   					<label><strong>Foto</strong></label>
	   					<input type="file" id="foto" name="foto" required class="form-control">
	   				</div>
      			<div class="text-center mt-3"></div>
  				<button type="submit" class="btn black">Simpan</button>
  				<div class="btn oren" data-bs-dismiss="modal" aria-label="Close" >Close</div>
	   			</form>
  			</div>
  		</div>	
	</div>
</div>

<div class="modal fade" id="updateData" tabindex="-1" aria-labelledby="updateDataLabel" aria-hidden="true">
    <div class="modal-dialog">
		<div class="modal-content">
   			<div class="modal-header">
   				<h1 class="modal-title fs-5" id="updateDataLabel">Update Data</h1>
   				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
   			</div>
	   		<div class="modal-body">
	   			<form id="updateDataTest" action="{{ route('achievementupdate') }}" method="post" enctype="multipart/form-data">
	   			@csrf
	   				<input type="hidden" name="id" >
	   				<div class="form-group">
	   					<label><strong>Judul Prestasi</strong></label>
	   					<input type="text" name="judul" class="form-control" required>
	   				</div>
	   				<img name="imagechange" id="imgchange" class="w-25 mt-2">
	   				<div class="form-group">
	   					<label><strong>Foto</strong></label>
	   					<input type="file" id="gambar" name="gambar" class="form-control">
	   				</div>
      			<div class="text-center mt-3"></div>
  				<button type="submit" class="btn black">Simpan</button>
  				<div class="btn oren" data-bs-dismiss="modal" aria-label="Close" >Close</div>
	   			</form>
  			</div>
  		</div>	
	</div>
</div>
@endsection
@section('script')
<script type="text/javascript">
	let icon = document.getElementById('gambar')
	let imagefet = document.getElementById('imgchange')

	let ft = document.getElementById('foto')
	let imageadd = document.getElementById('imgadd')

	icon.addEventListener('change', function () {
        gambar(this);
    })
    ft.addEventListener('change', function () {
        image(this);
    })
    function gambar(a) {
        if (a.files && a.files[0]) {     
            var reader = new FileReader();    
            reader.onload = function (e) {
                imagefet.src=e.target.result;
            }    
            reader.readAsDataURL(a.files[0]);
        }
    }
    function image(t) {
        if (t.files && t.files[0]) {     
            var baca = new FileReader();    
            baca.onload = function (e) {
                imageadd.src=e.target.result;
            }    
            baca.readAsDataURL(t.files[0]);
        }
    }

	$(function(){
	    $('#prestasi-table').DataTable({
	      	processing : true,
	      	serverSide : true,
	      	responsive : true,
	      	ajax: "{{ route('achievementjson') }}",
	      	columns: [
		        {data: 'image', name: 'image'},
		        {data: 'nama', name: 'nama'},
		        {data: 'aksi', name: 'aksi'}
	        ]
	    });
  	});

  	$(document).on('click', '.update', function(){
    let id = $(this).attr('id');
    var url = '{{route("achievementedit")}}';
    	$.get(url, {id:id}, function(data){
      		var updateList = $('#updateData');
			$(updateList).find('form#updateDataTest').find('input[name="id"]').val(data.data.id);
			$(updateList).find('form#updateDataTest').find('input[name="judul"]').val(data.data.nama);      
      		$('#updateData').modal('show');
    	//alert(id);
    	}, 'json');
  	});

  	$(document).on('click', '.hapus', function(){
      	let id = $(this).attr('id');
      	$.ajax({
        	url : "{{ route('achievementdelete') }}",
        	type : 'post',
        	data : {
          		id : id,
          		'_token' : "{{ csrf_token() }}"
        	},
        	success: function(params){
	          	alert(params.text);
	          	window.location = "{{route('achievement')}}"
	        },
        	error: function(xhr){
          		alert(xhr)
        	}
      	});
    });
</script>
@endsection