@extends('adminlte::page')
@section('title', 'Nou curs/taller')
@section('content_header')
<i class="fa fa-users" aria-hidden="true"></i> Crear nou curs/taller
@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('cursos.index') }}">Cursos</a></li>
	<li class="breadcrumb-item">Crear nou curs/taller</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>
@endsection
@section('title', 'Nou curs/taller')

@section('content')
<div class="col-xl-6 col-md-12">
	{{ html()->form('POST')->route('cursos.store')->open() }}

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

		<div class="form-group">
			{{ html()->label('Nom') }}
			{{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
		</div>

		<div class="form-group">
			{{ html()->label('Descripció curta') }}
			{{ html()->input('descripciocurta')->name('descripciocurta')->required(true)->class(['form-control']) }}
		</div>

		<div class="form-group">
			{{ html()->label('Descripció') }}
			{{ html()->input('descripcio')->name('descripcio')->required(true)->class(['form-control']) }}
		</div>

		<div class="form-group">
			{{ html()->label("Tipus") }}
			<select name="type" class="form-control" required>
				<option value="" disabled selected>Seleccioni si és curs o taller</option>
			 	<option value="curs" name="usuari">Curs</option>
			 	<option value="taller" name="admin">Taller</option>
			</select>
		</div>

		<div class="form-group">
			{{ html()->label("Categoria") }}
			<select name="categoriasformacio" class="form-control">
				<option value="" disabled selected>Seleccioni la categoria</option>
			 	<option value="ocupacional" name="ocupacional">Ocupacional</option>
			 	<option value="ocupabilitat" name="ocupabilitat">Ocupabilitat</option>
			 	<option value="competencies" name="competencies">Competències</option>
			 	<option value="joves" name="joves">Joves</option>
			</select>
		</div>

		<div class="form-group">
			{{ html()->label('Objectius') }}
			{{ html()->input('objectius')->name('objectius')->required(true)->class(['form-control']) }}
		</div>

		<div class="form-group">
			{{ html()->label('Continguts') }}
			{{ html()->input('continguts')->name('continguts')->required(true)->class(['form-control']) }}
		</div>

		<div class="form-group">
			{{ html()->label('Requisits') }}
			{{ html()->input('requisits')->name('requisits')->required(true)->class(['form-control']) }}
		</div>



		<b>Foto*</b>
		<p style="font-style: italic;">Imatge del curs/taller</p>

		<div class="image-editor">
        <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-2 col-xs-2 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-6 col-xs-6 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> 
$('form, input').each(function() {
$(this).attr('autocomplete', 'si_fuck_off_this_autocomplete');
});
</script>
@endsection