@extends('layouts.app')
@section('metadata')
<title>Formació i ocupació - Ajuntament de Cardedeu</title>
@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: 208px;
        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="container">
<div class="row">
<div class="col-xl-6 col-md-12 bg-publicaroferta">
  <h2>Publicar oferta de feina</h2>
	{{ html()->form('POST')->route('ofertas.store')->open() }}

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

    <div class="form-group">
      {{ html()->label("Nom de l'empresa") }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label("Municipi de l'empresa") }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('CIF/NIF de l"empresa') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('Telèfon de contacte') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('Nom de la persona de contacte') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('Càrrec de la persona de contacte') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('Correu electrònic') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('Ocupació (neteja, administració, peó, etc.)') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('Descripció de les tasques a realitzar') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('Formació i/o titulació requerida pel lloc de treball') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('Coneixements específics que requereix el lloc de treball (idiomes, informàtica, carnets professionals, etc.)') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('Competències transversals (habilitats i/o destreses que siguin necessàries pel bon desenvolupament del lloc de treball)') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('Experiència laboral requerida (en mesos)') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group conegutradios">
      {{ html()->label('Carnet de conduir obligatori') }}<br>
      <input type="radio" name="carnetobligatori" value="si" required>Si<br>
      <input type="radio" name="carnetobligatori" value="no">No<br>
    </div>

    </div>
    <div class="col-xl-6 col-md-12 bg-publicaroferta">
      <br>

    <div class="form-group conegutradios">
      {{ html()->label('Vehicle propi obligatori') }}<br>
      <input type="radio" name="vehicleobligatori" value="si" required>Si<br>
      <input type="radio" name="vehicleobligatori" value="no">No<br>
    </div>

    <div class="form-group">
      {{ html()->label("Jornada laboral setmanal (nombre d'hores)") }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('Horari laboral concret') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('Sou mensual (en xifres) i número de pagues') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>
    <div class="form-group">
      {{ html()->label('Tipus i durada del contracte') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>

    <div class="form-group conegutradios">
      {{ html()->label('Municipi del lloc de treball') }}<br>
      <input type="radio" name="municipi" value="Cardedeu" required>Cardedeu<br>
      <input type="radio" name="municipi" value="Sant Antoni de Vilamajor">Sant Antoni de Vilamajor<br>
      <input type="radio" name="municipi" value="Sant Pere de Vilamajor">Sant Pere de Vilamajor<br>
      <input type="radio" name="municipi" value="Cànoves i Samalús">Cànoves i Samalús<br>
      <input type="radio" name="municipi" value="">Altre <input type="text" name="altre_municipi" />
    </div>

    <div class="form-group">
      {{ html()->label('Número de places a cobrir') }}
      {{ html()->input('name')->name('name')->required(true)->class(['form-control']) }}
    </div>


    <div class="form-group">
      {{ html()->label('Informació bàsica sobre protecció de dades') }}
      <div>*Responsable     Ajuntament de Cardedeu
      * Finalitat: Gestionar la informació i inscripció en accions formatives municipals
      * Marc Jurídic       Llei 39/2015 i Reglament General de Protecció de Dades
      Destinataris       No es cediran a tercers excepte obligació legal
      *Drets     Accés, rectificació, supressió, portabilitat, limitació, oposició i retirada de consentiment
      *Dades addicionals       Consulteu informació addicional i detallada a seu.cardedeu.cat a l'apartat Protecció de *Dades. També podeu contactar a protecciodades@cardedeu.cat</div><br>
      {{ html()->checkbox('protecciodades')->name('protecciodades')->required(true) }}
      <label for="protecciodadesoferta">Estic d'acord</label>
    </div>

    <div class="form-group">
      {{ html()->label("Compromisos que pren el Servei Local d'Ocupació per a la gestió de l'oferta:") }}
      <div>*Gestionar totes les ofertes de feina que compleixin els requisits del protocol de funcionament del servei.
      *Donar resposta a l'empresa en un termini màxim de 2 dies hàbils.
      *Mantenir l'oferta oberta fins al tancament del procés de selecció o fins a un màxim de 45 dies naturals. </div><br>
      {{ html()->checkbox('protecciodades')->name('protecciodades')->required(true) }}
      <label for="legalgestiooferta">Estic d'acord</label>
    </div>



<!--
		<div class="form-group">
			{{ html()->label('Títol') }}
			{{ 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ó llarga') }}
			{{ html()->input('descripcio')->name('descripcio')->required(true)->class(['form-control']) }}
		</div>


		<b>Foto*</b>
		<p style="font-style: italic;">Foto do rosto do atleta</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>
</div>
</div>
@endsection
@section('js')
<script> 
$('form, input').each(function() {
$(this).attr('autocomplete', 'si_fuck_off_this_autocomplete');
});
</script>
@endsection