@extends('template.template')
@section('title','Portfolio')
@section('main')
<div class="main">
	<h2><strong>Portfolio</strong></h2>
	<hr>
	<button class="btn black mt-2" data-bs-toggle="modal" data-bs-target="#adddata">Tambah Data</button>
	<br><br>
	<select id="portchange" onchange="portochange()" class="form-control">
		@foreach($kategori as $kat)
		<option value="{{$kat->id}}">{{$kat->nama_kategori}}</option>
		@endforeach
	</select>
	<br>
	<div class="data-content" id="check1">
		<h3>Adobe Ilustrator</h3>
		<div class=table-control>
			<table class="w-100 table table-home table-striped table-bordered" id="portfolio-table-1">
				<thead>
					<tr>
						<th>Thumbnail</th>
						<th>Judul</th>
						<th>Link</th>
						<th>Aksi</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
		</div>
	</div>
	<div class="clearfix"></div>
	<div class="data-content d-none" id="check2">
		<h3>Photoshop</h3>
		<div class=table-control>
			<table class="w-100 table table-home table-striped table-bordered" id="portfolio-table-2">
				<thead>
					<tr>
						<th>Thumbnail</th>
						<th>Judul</th>
						<th>Link</th>
						<th>Aksi</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
		</div>
	</div>
	<div class="data-content d-none" id="check3">
		<h3>After Effect</h3>
		<div class=table-control>
			<table class="w-100 table table-home table-striped table-bordered" id="portfolio-table-3">
				<thead>
					<tr>
						<th>Thumbnail</th>
						<th>Judul</th>
						<th>Link</th>
						<th>Aksi</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
		</div>
	</div>
	<div class="data-content d-none" id="check4">
		<h3>Premier Pro</h3>
		<div class=table-control>
			<table class="w-100 table table-home table-striped table-bordered" id="portfolio-table-4">
				<thead>
					<tr>
						<th>Thumbnail</th>
						<th>Judul</th>
						<th>Link</th>
						<th>Aksi</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
		</div>
	</div>
	<div class="data-content d-none" id="check5">
		<h3>Web App</h3>
		<div class=table-control>
			<table class="w-100 table table-home table-striped table-bordered" id="portfolio-table-5">
				<thead>
					<tr>
						<th>Thumbnail</th>
						<th>Judul</th>
						<th>Link</th>
						<th>Aksi</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
		</div>
	</div>
	<div class="data-content d-none" id="check6">
		<h3>Mobile App</h3>
		<div class=table-control>
			<table class="w-100 table table-home table-striped table-bordered" id="portfolio-table-6">
				<thead>
					<tr>
						<th>Thumbnail</th>
						<th>Judul</th>
						<th>Link</th>
						<th>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('portfolioadd') }}" method="post" enctype="multipart/form-data">
	   			@csrf
	   				<img name="imagechange" id="imgadd" class="w-25 mt-2">
	   				<div class="form-group">
	   					<label><strong>Thumbnail</strong></label>
	   					<input type="file" id="foto" name="thumbnail" required class="form-control">
	   				</div>
	   				<div class="form-group">
	   					<label><strong>Kategori</strong></label>
	   					<select class="form-control" name="id_kategori">
	   						@foreach($kategori as $kat)
							<option value="{{$kat->id}}">{{$kat->nama_kategori}}</option>
							@endforeach
	   					</select>
	   				</div>
	   				<div class="form-group">
	   					<label><strong>Judul</strong></label>
	   					<input type="text" name="judul" class="form-control" required>
	   				</div>
	   				<div class="form-group">
	   					<label><strong>Link</strong></label>
	   					<input type="text" name="link" 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('portfolioupdate') }}" method="post" enctype="multipart/form-data">
	   			@csrf
	   				<input type="hidden" name="id" >
	   				<img name="imagechange" id="imgchange" class="w-25 mt-2">
	   				<div class="form-group">
	   					<label><strong>Thumbnail</strong></label>
	   					<input type="file" id="gambar" name="gambar" class="form-control">
	   				</div>
	   				<div class="form-group">
	   					<label><strong>Judul</strong></label>
	   					<input type="text" name="judul" class="form-control" required>
	   				</div>
	   				<div class="form-group">
	   					<label><strong>Link</strong></label>
	   					<input type="text" name="linkupdate" 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]);
        }
    }

	let check1 = document.getElementById('check1');
	let check2 = document.getElementById('check2');
	let check3 = document.getElementById('check3');
	let check4 = document.getElementById('check4');
	let check5 = document.getElementById('check5');
	let check6 = document.getElementById('check6');

	function portochange(){
		let portchange = document.getElementById('portchange').value;
		if(portchange == 1){
			check1.classList.remove('d-none')
			check2.classList.add('d-none')
			check3.classList.add('d-none')
			check4.classList.add('d-none')
			check5.classList.add('d-none')
			check6.classList.add('d-none')
		} else if(portchange == 2){
			check1.classList.add('d-none')
			check2.classList.remove('d-none')
			check3.classList.add('d-none')
			check4.classList.add('d-none')
			check5.classList.add('d-none')
			check6.classList.add('d-none')
		} else if(portchange == 3){
			check1.classList.add('d-none')
			check2.classList.add('d-none')
			check3.classList.remove('d-none')
			check4.classList.add('d-none')
			check5.classList.add('d-none')
			check6.classList.add('d-none')
		} else if(portchange == 4){
			check1.classList.add('d-none')
			check2.classList.add('d-none')
			check3.classList.add('d-none')
			check4.classList.remove('d-none')
			check5.classList.add('d-none')
			check6.classList.add('d-none')
		} else if(portchange == 5){
			check1.classList.add('d-none')
			check2.classList.add('d-none')
			check3.classList.add('d-none')
			check4.classList.add('d-none')
			check5.classList.remove('d-none')
			check6.classList.add('d-none')
		} else if(portchange == 6){
			check1.classList.add('d-none')
			check2.classList.add('d-none')
			check3.classList.add('d-none')
			check4.classList.add('d-none')
			check5.classList.add('d-none')
			check6.classList.remove('d-none')
		}
	}
</script>
<!-- Read Data JSON -->
	<script type="text/javascript">
		$(function(){
		    $('#portfolio-table-1').DataTable({
		      	processing : true,
		      	serverSide : true,
		      	responsive : true,
		      	ajax: "{{ route('portfoliojson1') }}",
		      	columns: [
			        {data: 'image', name: 'image'},
			        {data: 'judul', name: 'judul'},
			        {data: 'link', name: 'link'},
			        {data: 'aksi', name: 'aksi'}
		        ]
		    });
	  	});

	  	$(function(){
		    $('#portfolio-table-2').DataTable({
		      	processing : true,
		      	serverSide : true,
		      	responsive : true,
		      	ajax: "{{ route('portfoliojson2') }}",
		      	columns: [
			        {data: 'image', name: 'image'},
			        {data: 'judul', name: 'judul'},
			        {data: 'link', name: 'link'},
			        {data: 'aksi', name: 'aksi'}
		        ]
		    });
	  	});

	  	$(function(){
		    $('#portfolio-table-3').DataTable({
		      	processing : true,
		      	serverSide : true,
		      	responsive : true,
		      	ajax: "{{ route('portfoliojson3') }}",
		      	columns: [
			        {data: 'image', name: 'image'},
			        {data: 'judul', name: 'judul'},
			        {data: 'link', name: 'link'},
			        {data: 'aksi', name: 'aksi'}
		        ]
		    });
	  	});

	  	$(function(){
		    $('#portfolio-table-4').DataTable({
		      	processing : true,
		      	serverSide : true,
		      	responsive : true,
		      	ajax: "{{ route('portfoliojson4') }}",
		      	columns: [
			        {data: 'image', name: 'image'},
			        {data: 'judul', name: 'judul'},
			        {data: 'link', name: 'link'},
			        {data: 'aksi', name: 'aksi'}
		        ]
		    });
	  	});

	  	$(function(){
		    $('#portfolio-table-5').DataTable({
		      	processing : true,
		      	serverSide : true,
		      	responsive : true,
		      	ajax: "{{ route('portfoliojson5') }}",
		      	columns: [
			        {data: 'image', name: 'image'},
			        {data: 'judul', name: 'judul'},
			        {data: 'link', name: 'link'},
			        {data: 'aksi', name: 'aksi'}
		        ]
		    });
	  	});

	  	$(function(){
		    $('#portfolio-table-6').DataTable({
		      	processing : true,
		      	serverSide : true,
		      	responsive : true,
		      	ajax: "{{ route('portfoliojson6') }}",
		      	columns: [
			        {data: 'image', name: 'image'},
			        {data: 'judul', name: 'judul'},
			        {data: 'link', name: 'link'},
			        {data: 'aksi', name: 'aksi'}
		        ]
		    });
	  	});
	</script>
<!-- End Read -->

<!-- Update Data -->
	<script type="text/javascript">
		$(document).on('click', '.update', function(){
	    let id = $(this).attr('id');
	    var url = '{{route("portfolioedit")}}';
	    	$.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.judul);
				$(updateList).find('form#updateDataTest').find('input[name="linkupdate"]').val(data.data.link);      
	      		$('#updateData').modal('show');
	    	//alert(id);
	    	}, 'json');
	  	});
	</script>
<!-- End Update Data -->

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