@extends('layouts.app')
@section('metadata')
<title>Borsa de treball - Ajuntament de Cardedeu</title>
@endsection
@section('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>
@endsection
@section('content')    
  <section class="cabecera">  
    <div class="container">

      <div class="">
        <br>
        <h2 class="text-center">Borsa de treball</h2>
        <br>

        <table class="table table-striped table-bordered" id="tablaofertas">
          <thead>
            <th>Foto</th>
            <th>Nom</th>
            <th>Gènere</th>
            <th>Categories</th>
            <th class="select-filter">Municipi</th>
            <th>Data de naixement</th>
            <th>Curriculum</th>
          </thead>
          <tbody>
            @foreach($curriculums as $curriculum)
              <tr id="{{ $curriculum->id }}" name="{{ $curriculum->user->name }}">
                <td><img src="{{route('home')}}/images/curriculums/{{$curriculum->imatge}}" style="width:100px;!important"></td>
                <td>{{$curriculum->user->name}} {{$curriculum->user->cognom1}} {{$curriculum->user->cognom2}}</td>
                <td class="upperclass">{{$curriculum->user->genere}}</td>
                <td>{{$curriculum->getcategorias($curriculum->categorias)}}</td>
                <td>{{$curriculum->user->municipi}}</td>
                <td>{{ App\Helpers\helpers::getdatedayhelper($curriculum->user->datanaixement) }}</td>
                <td><a href="/curriculumver/{{$curriculum->id}}" target="_blank">Veure curriculum</a></td>
              </tr>
            @endforeach
          </tbody>
            
        </table>

      </div>
    </div>
  </section>
          
  <div class="clearfix"></div>
@endsection

@section('bottomscripts')
<script>
$(document).ready(function() {
    //$.fn.dataTable.ext.search.pop(); -> posible reset

    var oTable = $('#tablaofertas').DataTable( {
        "order": [[ 1, "desc" ]],
        responsive : true,
      "language": {
                search: "",
                emptyTable: "No hi ha candidats",
                zeroRecords: "No hi ha candidats per aquesta cerca",
                lengthMenu: "Mostrar _MENU_ candidats",
                info: "Mostrant _START_ a _END_ de _TOTAL_ candidats",
                infoEmpty: "No hi ha candidats",
                infoFiltered:   "(filtrat de _MAX_ candidats en total)",
                searchPlaceholder: "Buscar...",
                selectPlaceholder: "Buscar...",
                paginate: {
            first:      "Primer",
            previous:   "Anterior",
            next:       "Següent",
            last:       "Últim"
        },
            },
       "dom": '<"datatablesofertas"f><l<t>ip>',
      "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": [6],
        } ],

        initComplete: function () {
    
 
      // Remove accented character from search input as well
      $('#tablaofertas_filter input').keyup( function () {
        oTable
          .search(
            jQuery.fn.DataTable.ext.type.search.string( this.value )
          )
          .draw()
      } );
      //end remove special characters

            this.api().columns('.select-filter').every( function () {
                var column = this;
                var th = $("#tablaofertas").find("th").eq(column.index());
                var select = $('<select class="form-control"><option value="">' + 'Filtrar ' + th.text() + '</option></select>')
                    //.appendTo( $(column.footer()).empty() )
                    .appendTo( $('.datatablesofertas'))
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
            
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    }  );
} );

</script>
@endsection