@extends('adminlte::page')
@section('title', 'Editar notícia')
@section('content_header')
<i class="fa fa-users" aria-hidden="true"></i> Editar notícia {{$noticia->titol}}
@endsection
@section('breadcrumb')
<ol class="breadcrumb">
	<li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
	<li class="breadcrumb-item"><a href="{{ route('noticias.index') }}">Notícies</a></li>
	<li class="breadcrumb-item">Editar {{$noticia->name}}</a></li>
</ol>
@endsection
@section('css')
<script src="{{ asset('plugins/cropit/jquery.cropit.js') }}"></script>
<style>
      .cropit-preview {
        background-color: #f8f8f8;
        background-size: cover;
        border: 4px dashed #666;
        border-radius: 3px;
        margin-top: 7px;
        width: 308px;
        height: 233px;
        margin: 30px 0;
      }

      .cropit-preview:before {
      font-family: "Font Awesome 5 Free";
      content: "\f0c4";
      font-size: 22px;
      text-transform: rotate(90deg) scaleX(-1);
      margin-top: -18px;
      position: absolute;
      color: #555;
      }
      .cropit-image-zoom-input {margin-bottom: 20px;}

      .cropit-preview-image-container {
        cursor: move;
      }

      .cropit-preview-background {
        opacity: .05;
        cursor: auto;
        z-index: 1;
      }

      .image-size-label {
        margin-top: 10px;
      }

      input, .export {
        /* Use relative position to prevent from being covered by image background */
        position: relative;
        z-index: 10;
        display: block;
      }

      button {
        margin-top: 10px;
      }
      .imageeditor {overflow:  hidden;}

      .rotatebut button {background: none; border: none; font-size: 20px; color: #999; padding-right: 0!important;}
      .enlinea {display: inline; margin-left: 10px;}
      .enlinea:before {font-family: "Font Awesome 5 Free"; content: "\f03e"; margin-top: 10px; margin-left: -20px; position: absolute;}
      .enlinea:after {font-family: "Font Awesome 5 Free"; content: "\f03e"; font-size: 28px; margin-top: 20px;}
      input[type="range"] {width: 80%; display: inline;}
    </style>
    <link rel="stylesheet" href="{{ asset('plugins/trumbowyg/ui/trumbowyg.css') }}">
@endsection

@section('content')

<div class="col-lg-6 col-sm-8 col-xs-12">
	{{ html()->form('PUT')->route('noticias.update', $noticia->id)->open() }}

		<div class="form-group">
			{{ html()->input('id')->name('id')->value($noticia->id)->class(['hidden']) }}
		</div>

		<div class="form-group">
			{{ html()->label('Títol') }}
			{{ html()->input('title')->name('title')->value($noticia->title)->required(true)->class(['form-control']) }}
		</div>

		<div class="form-group">
      {{ html()->label('Data de publicació') }}
      <input id="datapublicacio" name="datapublicacio" type="date" value="{{ $noticia->datapublicacio }}" required class="form-control">
    </div>

		<div class="form-group">
			{{ html()->label('Descripció curta') }}
			{{ html()->textarea('shortcontent')->name('shortcontent')->value($noticia->shortcontent)->required(true)->class(['form-control textotrumbo']) }}
		</div>

		<div class="form-group">
			{{ html()->label('Descripció') }}
			{{ html()->textarea('content')->name('content')->value($noticia->content)->required(true)->class(['form-control textotrumbo']) }}
		</div>

		<b>Imatge</b>
		<p style="font-style: italic;">Imatge de la notícia</p>
		
		<div class="image-editor">

			<div class="imatgeactual">Imatge actual:<br>

			<img src="{{route('home')}}/images/noticias/{{$noticia->imatge}}" style="width:150px;">

	        </div>
	        <br>
	    <div>Canviar la imatge:<br>
        <input type="file" class="cropit-image-input">
        <div class="cropit-preview"></div>
        
        <div class="image-size-label">
          <span style="font-weight: bold; color: #FF0000;">Ajustar la mida: ajusti la mida perquè la foto ompli tot l'espai disponible</span>
        </div>
        <div class="row">
        	<div class="col-lg-3 col-xs-3 rotatebut">
        <button class="rotate-ccw"><i class="fa fa-undo" aria-hidden="true"></i></button>
		<button class="rotate-cw"><i class="fa fa-repeat" aria-hidden="true"></i></button>
			</div>
			<div class="col-lg-8 col-xs-8 enlinea">
        <input type="range" class="cropit-image-zoom-input">
        	</div>
        </div>
        <input type="hidden" id="" name="imagedata" class="hidden-image-data" />

      	</div>

	 	<script>
	      $(function() {
	        $('.image-editor').cropit({ allowDragNDrop: false, imageBackground: false, minZoom: 'fit', exportZoom: '1', onImageError: function() {$.alert({
	        backgroundDismiss: true,
        	icon: 'fa fa-times',
        	closeIcon: 'true',
        	type: 'red',
        	theme: 'modern',
            title: 'Error',
            content: 'La mida mínima és de 900x600 píxels'});} });

	        $('.image-editor').on('mouseleave', function() {
	          // Move cropped image data to hidden input
	          var imageData = $('.image-editor').cropit('export');
	          $('.hidden-image-data').val(imageData);

	          return false;
	        });
	      });

			$('.rotate-cw').click(function() {
				event.preventDefault();
			$('.image-editor').cropit('rotateCW');
        	});
			$('.rotate-ccw').click(function() {
				event.preventDefault();
			$('.image-editor').cropit('rotateCCW');
       		});
	    </script>		

		<div class="form-group">
			{{ html()->submit('Guardar')->class(['form-control']) }}
		</div>					

	{{ html()->form()->close() }}

</div>
@endsection
@section('js')
<script src="{{ asset('plugins/trumbowyg/trumbowyg.js') }}"></script>
<script type="text/javascript" src="{{ asset('plugins/trumbowyg/langs/es.min.js') }}"></script>
<script src="{{ asset('plugins/trumbowyg/plugins/cleanpaste/trumbowyg.cleanpaste.min.js') }}"></script>
<script>
  $('.textotrumbo').trumbowyg({
    lang: 'es',
    urlProtocol: false
  });
</script>
<script> 
$('form, input').each(function() {
$(this).attr('autocomplete', 'si_fuck_off_this_autocomplete');
});
</script> 
@endsection