@extends('admin.layout')


@push('css')
<style>
.seo-bilgileri{
	display: none;
}
.seo-onizleme .baslik{
	font-size: 14px;
	font-weight: 700;
	color: #1a0dab;
	height: 20px;
	margin-bottom: 3px;
}
.seo-onizleme .url{
	font-size: 13px;
	color: #006621;
	height: 20px;
}
.seo-onizleme .aciklama{
	font-size: 13px;
	color: #545454;
	min-height: 20px;
}
</style>
@endpush

@push('js')
<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=6jopfba2oqjf8j7mbv3u21frtrnnjir7sjzp5itau4ylw5kf"></script>
<script src="{!! asset('js/tiny_tr.js') !!}"></script>
<script>editor({selector:'#yazi', height: 600});</script>

<script src="{!! asset('vendor/upload/jquery.dm-uploader.min.js') !!}"></script>
<script type="text/javascript">
$(function() {

	$('.seo-duzenle').click(function() {
		$('.seo-bilgileri').slideToggle();
	});

	var seoUrl = '';

	@if($item->id)
	var baslikEdit = false;
	var aciklamaEdit = false;
	@else
	var baslikEdit = true;
	var aciklamaEdit = true;
	@endif

	$('#baslik').keyup(function() {
			if (baslikEdit) {
				$('#seoBaslik').val($(this).val());
				$('.seo-onizleme .baslik').text($(this).val());

				seoUrl = window.app.slugify($(this).val());
				$('#seoUrl').val(seoUrl);
				$('.seo-onizleme .url').text('{{url('ekibimiz')}}/'+seoUrl);
			}
	});

	$('#aciklama').keyup(function() {
			if (baslikEdit) {
				$('#seoAciklama').val($(this).val());
				$('.seo-onizleme .aciklama').text($(this).val());
			}
	});



	$('#seoBaslik').keyup(function() {
		baslikEdit = false;
		$('.seo-onizleme .baslik').text($(this).val());
	});

	$('#seoAciklama').keyup(function() {
		aciklamaEdit = false;
		$('.seo-onizleme .aciklama').text($(this).val());
	});

	$('#seoUrl').keyup(function() {
		baslikEdit = false;
		seoUrl = window.app.slugify($(this).val());
		$(this).val(seoUrl)
		$('.seo-onizleme .url').text('{{url('ekibimiz')}}/'+seoUrl);
	});


	$('.gorsel-yukle').dmUploader({
	  url: '{{aurl('gorsel/yukle')}}',
	  maxFileSize: 30000000, // 3 Megs max
		fieldName:'gorsel',
	  allowedTypes: 'image/*',
	  extFilter: ['jpg','jpeg','png','gif'],
		extraData: function() { return {alt: $('#baslik').val(), boyutKey:'ekip'};},
		headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
		auto: true,
  	queue: true,
		multiple:false,
	  onNewFile: function(id, file){
			$('.gorseller').closest('.segment').addClass('loading');
	  },
	  onFileTypeError: function(file){
			swal({title: "Geçersiz Dosya!", text: "Lütfen bir resim dosyası seçin", icon: "error", button: "TAMAM"});
	  },
		onUploadSuccess: function(id, d){
			if (d.status == 'ok') {
				$('.gorseller').closest('.segment').removeClass('loading');
				$('.gorseller img.image').prop('src', d.data.kucuk);
				$('#gorselId').val(d.data.id);
				$('.gorseller .gorsel-yukle').hide();
				$('.gorseller .gorsel-btn').show();

				$('.gorseller .gorsel-btn').html(
					'<div class="ui inverted mini icon red button sil"><i class="trash icon"></i></div> '+
					'<div class="ui inverted mini icon button" data-fancybox="gallery" href="'+d.data.buyuk+'"><i class="eye icon"></i></div> '
				);

				@if($item->id)
				$('.ui.form').trigger('submit');
				@endif
			}

			if (d.status == 'error') {
				window.app.formError('.ui.form', d.errors);
			}

		},
		onUploadError: function(id, xhr, status, errorThrown){
			swal({title: "Görsel Yüklenemedi!",text: errorThrown,icon: "error", button: "TAMAM"});
		}
	});


	$('.gorseller').on('click', '.sil', function(){
		swal({title: "Görsel kalıcı olarak silinecektir?", icon: "warning", buttons:['Vazgeç','Sil!'], dangerMode: true}).then((sil) => {
			 if (sil) {
				 $.post('{{aurl('gorsel/sil')}}', {id:$('#gorselId').val()}, function(d){
					 if (d.status == 'ok') {
						 	$('.gorseller img.image').prop('src', '{{url('images/image.png')}}');
		 					$('#gorselId').val('');
							$('.gorseller .gorsel-yukle').show();
							$('.gorseller .gorsel-btn').hide();

							@if($item->id)
						 	$('.ui.form').trigger('submit');
							@endif
					 }
				 });
			 }
		 });
	});


	 $('.ui.form').on('submit', function(){
		 	$('.message-box').html('');
			window.app.contentBlur();

			$.post('{{aurl('ekip/kaydet')}}', $('.ui.form').serialize(), function(d){
				if (d.status == 'ok') {
					window.app.formSuccess('.ui.form', 'Kişi kaydedildi.');
					@if($item->id)
					window.app.contentBlurClose();
					@else
					setTimeout(function(){ location.href = '{{aurl('ekip/form')}}/'+d.data.id; }, 1000);
					@endif
				}

				if (d.status == 'error') {
					window.app.formError('.ui.form', d.errors);
					window.app.contentBlurClose();
				}
			});

			return false;
	 });


	 @if($item->id)
	 $('.sil').on('click', function(){
		 swal({title: "Kişi silinsin mi?", icon: "warning", buttons:['Vazgeç','Sil!'], dangerMode: true,}).then((sil) => {
			  if (sil) {
					window.app.contentBlur();
			    $.post('{{aurl('ekip/toplu')}}', {islem:'sil', id:[{{$item->id}}]}, function(d){
						if (d.status == 'ok') {
							setTimeout(function(){ location.href = '{{aurl('ekip')}}'; }, 1000);
						}
					});
			  }
			});
	 });
	 @endif

	 $('.gorseller .dimmable').dimmer({on: 'hover'});
	 $('.ui.checkbox').checkbox();
	 $('.ui.dropdown').dropdown();


});
</script>
@endpush

@section('content')
<form class="ui form" method="post">
	<div class="ui grid">
		  <div class="six wide column">
				<a href="{{aurl('ekip')}}" class="ui small labeled icon button"><i class="angle left icon"></i> Ekip</a>
			</div>
		  <div class="ten wide column">
				<button class="ui green small labeled icon right floated button kaydet" type="submit"><i class="check icon"></i> Kaydet</button>
				@if($item->id)
				<a href="{{$item->link()}}" target="_blank" class="ui yellow small labeled icon right floated button kaydet"><i class="external alternate icon"></i> Kişi Sayfasına Git</a>
				@endif
				@if(session()->has('yeni'))
				<a href="{{aurl('ekip/form')}}" class="ui teal small labeled icon right floated button"><i class="plus icon"></i> Yeni Kişi</a>
				@endif
			</div>
	</div>

	<div class="message-box">
		@if(session()->has('yeni'))
		<div class="message-success"><div class="message-title"><i class="fas fa-check-circle"></i> Kişi kaydedildi.</div></div>
		@endif
	</div>

<div class="ui grid">
	<div class="twelve wide column">


		<div class="ui segment">
			<div class="field">
				<label>Ad Soyad</label>
				<input id="baslik" type="text" name="baslik" value="{{$item->baslik}}">
			</div>
			<div class="field">
				<label>Ünvan</label>
				<input id="aciklama" type="text" name="aciklama" value="{{$item->aciklama}}">
			</div>
		</div>

		<div class="ui segments" style="overflow: hidden;">
			<div class="ui segment">
				<div class="field">
					<label>
						Arama motorlarındaki listeleme önizlemesi
						<span class="ui mini basic button right floated seo-duzenle"><i class="edit icon"></i>Seo Bilgilerini Düzenle</span>
					</label>
				</div>
				<div class="seo-onizleme">
					<div class="baslik">{{$item->seo_baslik}}</div>
					<div class="url">{{$item->link()}}</div>
					<div class="aciklama">{{$item->seo_aciklama}}</div>
				</div>
			</div>
			<div class="ui segment seo-bilgileri">
				<div class="field">
					<label>Sayfa Başlığı</label>
					<input id="seoBaslik" type="text" name="seo_baslik" value="{{$item->seo_baslik}}">
				</div>
				<div class="field">
					<label>Meta Açıklaması</label>
					<textarea id="seoAciklama" name="seo_aciklama" rows="2" cols="80">{{$item->seo_aciklama}}</textarea>
				</div>
				<div class="field">
					<label>Url</label>
					<div class="ui labeled input">
						<div class="ui basic label">{{url('ekip')}}/</div>
						<input id="seoUrl" type="text" name="url" value="{{$item->url}}">
					</div>
				</div>
			</div>
		</div>

		<div>
				<textarea id="yazi" name="yazi" rows="2" cols="80">{!! $item->yazi !!}</textarea>
		</div>

	</div>

	<div class="four wide column">
		<div class="ui segments">
			<div class="ui segment">
				<div class="inline field">
					<div class="ui toggle checkbox">
						<input name="yayinda" type="checkbox" tabindex="0" class="hidden" {{(! $item->id || $item->yayinda)?'checked':''}}>
						<label>Yayın Durumu</label>
					</div>
				</div>
			</div>


			<div class="ui segment">
				<div class="field">
					<label>Fotoğraf
						<a data-fancybox data-type="ajax" data-src="{{aurl('ayarlar/boyutlar/ekip')}}" class="ui mini image label">
							<span class="ekip-byt">{{ayar('ekip_bw','auto')}} x {{ayar('ekip_bh','auto')}}</span>
							<span class="detail"><i class="fas fa-cog"></i></span>
						</a>
					</label>
				</div>

				<div class="gorseller">
					<div class="dimmable">
						<div class="ui dimmer">
							<div class="content">
								<label class="gorsel-yukle" {!! $item->gorsel_id?'style="display:none"':'' !!}>
									<div class="ui inverted active button"><i class="cloud upload icon"></i> Görsel Seç</div><input type="file" name="gorsel" style="display:none;" />
								</label>
								<div class="gorsel-btn">
									@if($item && $item->gorsel_id)
									<div class="ui inverted mini icon red button sil"><i class="trash icon"></i></div>
									<div class="ui inverted mini icon button" data-fancybox="gallery" href="{{$item->gorsel->buyuk()}}"><i class="eye icon"></i></div>
									@endif
								</div>
							</div>
						</div>
						<img class="ui fluid image" src="{{$item->gorsel_id?$item->gorsel->kucuk():url('images/image.png')}}">
						<input id="gorselId" type="hidden" name="gorsel_id" value="{{$item->gorsel->id}}">
					</div>
				</div>

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





	<div class="ui grid" style="margin-bottom:10px;">

		  <div class="six wide column">
				@if($item->id)
				<input type="hidden" name="id" value="{{$item->id}}">
				<span class="ui small labeled icon red button sil"><i class="trash icon"></i> Sil</span>
				@endif
			</div>

		  <div class="ten wide column">

			</div>
	</div>

</form>

@endsection