@extends('admin.layout')


@push('css')
<style>
.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:'#icerik', height: 600});</script>

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


	var seoUrl = '';

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

	$('#seoBaslik').keyup(function() {
		$('.seo-onizleme .baslik').text($(this).val());
		if(urlEdit){
			$('#seoUrl').val(window.app.slugify($(this).val()));
		}
	});

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

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


	$('.gorsel-yukle').dmUploader({
	  url: '{{aurl('gorsel/yukle')}}',
	  maxFileSize: 20000000, // 3 Megs max
		fieldName:'gorsel',
	  allowedTypes: 'image/*',
	  extFilter: ['jpg','jpeg','png','gif'],
		extraData: function() { return {alt: $('#seoBaslik').val(), boyutKey:'sayfa'};},
		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('sayfalar/kaydet')}}', $('.ui.form').serialize(), function(d){
				if (d.status == 'ok') {
					window.app.formSuccess('.ui.form', 'Sayfa kaydedildi.');
					@if($item->id)
					window.app.contentBlurClose();
					@else
					setTimeout(function(){ location.href = '{{aurl('sayfalar/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: "Sayfa silinsin mi?", icon: "warning", buttons:['Vazgeç','Sil!'], dangerMode: true,}).then((sil) => {
			  if (sil) {
					window.app.contentBlur();
			    $.post('{{aurl('sayfalar/toplu')}}', {islem:'sil', id:[{{$item->id}}]}, function(d){
						if (d.status == 'ok') {
							setTimeout(function(){ location.href = '{{aurl('sayfalar')}}'; }, 1000);
						}
					});
			  }
			});
	 });
	 @endif

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


});
</script>
@endpush

@section('content')
<form class="ui form" method="post">
	<div class="ui grid">
		  <div class="six wide column">
				<a href="{{aurl('sayfalar')}}" class="ui small labeled icon button"><i class="angle left icon"></i> Sayfalar</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->url)
				<a href="{{$item->link()}}" target="_blank" class="ui yellow small labeled icon right floated button kaydet"><i class="external alternate icon"></i> Sayfaya Git</a>
				@endif

				@if(session()->has('yeni'))
				<a href="{{aurl('sayfalar/form')}}" class="ui teal small labeled icon right floated button"><i class="plus icon"></i> Yeni Sayfa</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> Sayfa kaydedildi.</div></div>
		@endif
	</div>

<div class="ui grid">


	<div class="sixteen wide column">

		<div class="ui horizontal segments">
			<div class="ui segment">
				<div class="ui vertical segment">
					<div class="field">
						<label>Arama motorlarındaki listeleme önizlemesi</label>
					</div>
					<div class="seo-onizleme">
						<div class="baslik">{{$item->baslik}}</div>
						<div class="url">{{$item->link()}}</div>
						<div class="aciklama">{{$item->aciklama}}</div>
					</div>
				</div>
				<div class="ui vertical segment seo-bilgileri">
					<div class="field">
						<label>Sayfa Başlığı</label>
						<input id="seoBaslik" type="text" name="baslik" value="{{$item->baslik}}">
					</div>
					<div class="field">
						<label>Meta Açıklaması</label>
						<textarea id="seoAciklama" name="aciklama" rows="2" cols="80">{{$item->aciklama}}</textarea>
					</div>

					@if(! $item->sabit)
					<div class="field">
						<label>Sayfa Adresi (Url)</label>
						<div class="ui labeled input">
							<div class="ui basic label">{{url('/')}}/</div>
							<input id="seoUrl" type="text" name="url" value="{{$item->url}}">
						</div>
					</div>
					@else
					<input type="hidden" name="url" value="{{$item->url}}">
					@endif

				</div>
			</div>
			<div class="ui segment">
				<div class="field">
					<label>Sayfaya Görsel Ekle
						<a data-fancybox data-type="ajax" data-src="{{aurl('ayarlar/boyutlar/sayfa')}}" class="ui mini image label">
							<span class="sayfa-byt">{{ayar('sayfa_bw','auto')}} x {{ayar('sayfa_bh','auto')}}</span>
							<span class="detail"><i class="fas fa-cog"></i></span>
						</a>
					</label>
				</div>

				<div class="gorseller" style="width:350px;">
					<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>




	@if($item->url == 'iletisim')
	<div class="ui segment">
		<div class="field">
			<label>İletişim formunun gönderileceği email adresi</label>
			<input type="email" name="iletisim_form_mail" value="{{ayar('iletisim_form_mail')}}">
		</div>
		<div class="field">
			<label>Harita Kodu (Google harita yerleştirme iframe kodu)</label>
			<textarea name="harita_kodu" rows="2" cols="80" style="min-height:100px;">{!! ayar('harita_kodu') !!}</textarea>
		</div>
	</div>
	@endif





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


	</div>

</div>


@if($item->id)
<input type="hidden" name="id" value="{{$item->id}}">
@endif

@if($item->id && ! $item->sabit)
	<div class="ui grid" style="margin-bottom:10px;">

		  <div class="six wide column">
				<span class="ui small labeled icon red button sil"><i class="trash icon"></i> Sayfayı Sil</span>
			</div>

		  <div class="ten wide column">

			</div>
	</div>
@endif
</form>

@endsection