@extends('layouts.app')
@section('metadata')
<title>El meu compte - Ajuntament de Cardedeu</title>
@endsection
@section('css')
<link rel="stylesheet" href="{{ asset('plugins/trumbowyg/ui/trumbowyg.css') }}">
<script src="{{ asset('plugins/cropit/jquery.cropit.js') }}"></script>

<link rel="stylesheet" href="{{ asset('plugins/chosen/chosen.css') }}">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" ></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<style>
      .cropit-preview {
        background-color: #f8f8f8;
        background-size: cover;
        border: 4px dashed #666;
        border-radius: 3px;
        margin-top: 7px;
        width: 208px;
        height: 258px;
        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('content')
<section class="cabecera">  
  <div class="container">
    <div class="row">
        <div class="col-md-6">
              <div class="row" id="editcurriculum">
                {{ html()->form('PUT')->id('myform2')->route('updatecurriculumfront', $user->curriculum->id)->acceptsFiles()->open() }}
                <div class="form-group">
                  {{ html()->input('id')->name('id')->value($user->curriculum->id)->class(['hidden']) }}
                </div>
                <div class="col-md-10">

                  <div class="form-group">
                    {{ html()->label('Perfil professional') }}
                    {{ html()->textarea('perfil')->name('perfil')->value($user->curriculum->perfil)->class(['form-control textoeditor']) }}
                  </div>

                  <div class="form-group">
                    {{ html()->label('Estudis') }}
                    {{ html()->textarea('estudis')->name('estudis')->value($user->curriculum->estudis)->class(['form-control textoeditor']) }}
                  </div>

                  <div class="form-group">
                    {{ html()->label('Experiència laboral') }}
                    {{ html()->textarea('experiencia')->name('experiencia')->value($user->curriculum->experiencia)->class(['form-control textoeditor']) }}
                  </div>

                    <div class="form-group">
                      <label>Adjuntar DNI</label>
                      <input type="file" name="dniruta" class="form-control" id="dniruta" style="max-width: 300px;">
                      <p style="font-style: italic; font-size: 12px;">Adjunti el seu currículum (format .pdf)</p>
                    </div>

                    <div class="form-group">
                      <label>Adjuntar DARDO</label>
                      <input type="file" name="dardoruta" class="form-control" id="dardoruta" style="max-width: 300px;">
                      <p style="font-style: italic; font-size: 12px;">Adjunti la vida laboral(format .pdf)</p>
                    </div>

                    <div class="form-group">
                      <label>Adjuntar currículum</label>
                      <input type="file" name="curriculumruta" class="form-control" id="curriculumruta" style="max-width: 300px;">
                      <p style="font-style: italic; font-size: 12px;">Adjunti el seu currículum (format .pdf)</p>
                    </div>

                    <div class="form-group">
                      <label>Adjuntar vida laboral</label>
                      <input type="file" name="vidalaboralruta" class="form-control" id="vidalaboralruta" style="max-width: 300px;">
                      <p style="font-style: italic; font-size: 12px;">Adjunti la vida laboral(format .pdf)</p>
                    </div>

                </div>
            </div>
            </div>
            <div class="col-md-6">
            <br>
              <div class="form-group competenciescheckbox" id="competenciescheckbox">
                {{ html()->label("Competències") }}<br>
                <span style="font-weight: bold; color: #999; font-size: 14px;">Seleccioni les seves competències(màxim 6)</span>
                  <ul>
                  @foreach($competencias as $competencia)
                  <li><input type="checkbox" id="competencies" value="{{$competencia->id}}" name="competencies[]" class="item-list" @php  $competencia->chekifischecked($competencia, $user) @endphp><label data-toggle="tooltip" data-placement="top" title="{{$competencia->content}}">{{$competencia->title}}</label></li>
                  @endforeach
                  </ul>
                </select>
              </div>

              <div class="form-group">
                {{ html()->label("Categories d'interés") }}<br>
                <span style="font-weight: bold; color: #999; font-size: 14px;">Seleccioni les categories per les que li interessa trobar feina (màxim 5)</span>
                <select id="categorias" name="categorias[]" class="form-control chosen-select" multiple data-placeholder="Seleccioni">
                  <!--<option value="" disabled selected>Seleccioni les categories per les que li interessa trobar feina</option>-->
                  @foreach($categorias as $categoria)
                  <option value="{{$categoria->id}}" name="categorias" @if($user->getselectcategorias($categoria,$user)) {{"selected=selected"}} @endif>{{$categoria->name}}</option>
                  @endforeach
                </select>
              </div>


              <b>Foto</b>
    <p style="font-style: italic;">Fotografia del candidat tipus carnet</p>
    
    <div class="image-editor">

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

      <img src="{{route('home')}}/images/curriculums/{{$user->curriculum->imatge}}" style="width:150px;!important">

          </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 300x200 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 inlinebuttons">
                {{ html()->submit('Guardar')->class(['form-control']) }}
                <input type="button" name="cancelar" class="btn btn-danger cancelformbutton" value="{{ __('Cancel·lar') }}" onclick="showDiv2()" />
              </div>
            </div>       

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

          </div>

        </div>
</div></div>
</section>
@endsection

@section('bottomscripts2')
<script>
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })
</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script src="{{ asset('plugins/chosen/chosen.jquery.js') }}"></script>
<script>
  $(".chosen-select").chosen({max_selected_options: 5});
</script>
<script>
  $(".chosen-select6").chosen({max_selected_options: 6});
</script>

<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>
  $('.textoeditor').trumbowyg({
    lang: 'es',
    urlProtocol: false
  });
</script>

<script>
function onlyOneCheckBox() {
  var checkboxgroup = document.getElementById('competenciescheckbox').getElementsByTagName("input");
  
    //Note #2 Change max limit here as necessary
    var limit = 6;
  
  for (var i = 0; i < checkboxgroup.length; i++) {
    checkboxgroup[i].onclick = function() {
      var checkedcount = 0;
        for (var i = 0; i < checkboxgroup.length; i++) {
        checkedcount += (checkboxgroup[i].checked) ? 1 : 0;
      }
      if (checkedcount > limit) {
        console.log("You can select maximum of " + limit + " checkbox.");
        alert("Pots sel·leccionar un màxim de " + limit + " competències.");
        this.checked = false;
      }
    }
  }
}
</script>

<script type="text/javascript">
  onlyOneCheckBox()
</script>
@endsection