<?php
use Carbon\Carbon;
use App\Models\Config;
?>
<style>
[type="file"] {
  height: 0;
  overflow: hidden;
  width: 0;
}

[type="file"] + label {
  background: #3490dc;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: inherit;
  font-weight: 500;
  margin-bottom: 1rem;
  outline: none;
  padding: 1rem 10px;
  position: relative;
  transition: all 0.3s;
  vertical-align: middle;
  width: 95%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow-wrap: anywhere;

}
</style>

<x-app-layout>
  <x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
      <i class="fas fa-ticket-alt"></i> Firma rapporto d'intervento issue #{{ $issue->id}}
    </h2>
  </x-slot>

  {!! Form::open(['route' => 'issue.firma_rapporto', 'files' => true, 'id' => 'form_firma']) !!}
  {!! Form::hidden('issue_id', $issue->id) !!}

  <div class="row justify-content-center mb-4">
    <div class="col-xl-10 col-lg-12 col-md px-md-3 px-2">
      <div class="card">
        <div class="card-header"><i class="fas fa-info"></i> Dettagli intervento</div>
        <div class="card-body">

          <x-auth-validation-errors class="mb-4" :errors="$errors" />

          <div class="form-row">
            <div class="form-group col-md">
              {!! Form::label('spent_on', 'Data') !!}
              {!! Form::text('spent_on', Carbon::now()->format('d/m/Y'), ['class' => 'form-control']) !!}
            </div>

            <div class="form-group col-md">
              {!! Form::label('activity_id', 'Attività') !!}
              {!! Form::select('activity_id', $attivita, null, ['class' => 'form-control']) !!}
            </div>

            <div class="form-group col-md" id="div_stato_segnalazione" style="display: none">
              {!! Form::label('status_id', 'Stato segnalazione') !!}
              {!! Form::select('status_id', $issueStatus, Config::getValue(Config::STATO_DA_COMPLETARE), ['class' => 'form-control']) !!}
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-md">
              {!! Form::label('persona_riferimento', 'Referente cliente') !!}
              {!! Form::text('persona_riferimento', null, ['class' => 'form-control']) !!}
            </div>

            @if($sedeCliente != null)
            <div class="form-group col-md-4">
              {!! Form::label('sedeCliente', 'Sede intervento') !!}
              {!! $sedeCliente !!}
            </div>
            @endif
            {!! Form::hidden('sedeCliente', $sedeCliente) !!}
          </div>

          <div class="form-row">
            <div class="form-group col-md">
              {!! Form::label('ora_inizio', 'Inizio') !!}
              {!! Form::text('ora_inizio', Carbon::now()->format('H:i'), ['class' => 'form-control']) !!}
            </div>

            <div class="form-group col-md">
              {!! Form::label('ora_fine', 'Fine') !!}
              {!! Form::text('ora_fine', Carbon::now()->addMinutes(15)->format('H:i'), ['class' => 'form-control']) !!}
            </div>

            <div class="form-group col-md">
              {!! Form::label('ore_pausa', 'Ore pausa') !!}
              {!! Form::number('ore_pausa', 0, ['class' => 'form-control', 'step' => '0,01']) !!}
            </div>

            <div class="form-group col-md" id="div_button_ore_viaggio">
              <button class="btn btn-primary" onclick="imputa_ore_viaggio()" type="button">Imputa ore viaggio</button>
            </div>

            <div class="form-group col-md" id="div_ore_viaggio" style="display: none">
              {!! Form::label('ore_viaggio', 'Ore viaggio') !!}
              {!! Form::number('ore_viaggio', null, ['class' => 'form-control', 'min' => 0, 'step' => 0,01]) !!}
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-md">
              {!! Form::label('note', 'Descrizione') !!}
              {!! Form::textarea('note', null, ['class' => 'form-control']) !!}
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-md">
              {!! Form::label('materiale_utilizzato', 'Materiale utilizzato') !!}
              {!! Form::textarea('materiale_utilizzato', null, ['class' => 'form-control', 'rows' => 4]) !!}
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-md">
              {!! Form::label('merce_ritirata', 'Merce ritirata') !!}
              {!! Form::textarea('merce_ritirata', null, ['class' => 'form-control', 'rows' => 4]) !!}
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-md">
              {!! Form::label('merce_consegnata', 'Merce consegnata') !!}
              {!! Form::textarea('merce_consegnata', null, ['class' => 'form-control', 'rows' => 4]) !!}
            </div>
          </div>

          @if(count($altriTecnici) > 0)
          <div class="form-row">
            <div class="form-group col-md">
              {!! Form::label('altri_tecnici', 'Altri tecnici') !!}
              @foreach($altriTecnici as $key => $tecnico)
              <input type="checkbox" name="altro_tecnico[{{$key}}]" value="{{ $tecnico }}"/> {{ $tecnico }}<br>
              @endforeach
            </div>
          </div>
          @endif


        </div>
      </div>
    </div>
  </div>

  @if($altreSegnalazioni->count() > 0)
  <div class="row justify-content-center" style="margin-top: 20px;">
    <div class="col-xl-10 col-lg-12 col-md px-md-3 px-2">
      <div class="card">
        <div class="card-header"><i class="fas fa-link"></i> Segnalazioni correlate</div>
        <div class="card-body">
          <table class="table">
            <thead>
              <tr>
                <th></th>
                <th>ID</th>
                <th>Segnalazione</th>
                <th>Stato</th>
              </tr>
            </thead>

            @foreach($altreSegnalazioni as $segnalazione)
            @if($segnalazione->id == $issue->id)
            @continue
            @endif
            <tr>
              <td>{!! Form::checkbox('segnalazioneCorrelata[]', $segnalazione->id, false) !!}</td>
              <td>{{ $segnalazione->id }}</td>
              <td>{{ $segnalazione->subject }}</td>
              <td>{!! Form::select('segnalazioneCorrelataStatus['.$segnalazione->id.']', $issueStatus, $segnalazione->status->id, ['class' => 'form-control']) !!}</td>
            </tr>
            @endforeach

          </table>
        </div>
      </div>
    </div>
  </div>
  @endif

  <div class="row justify-content-center" style="margin-top: 20px;" id="div_allegati_ext">
    <div class="col-xl-10 col-lg-12 col-md px-md-3 px-2">
      <div class="card">
        <div class="card-header"><i class="fas fa-paperclip"></i> Allegati</div>
        <div class="card-body">
          <div class="row justify-content-center" style="margin-top: 20px;" id="div_allegati">
            <div class="col-md-4" style="height: 12em; text-align: center; margin-bottom: 20px;" id="div_allegato">
              <?php
              $time = time(); ?>
              <input type="file" id="file_{{$time}}" name="allegato[]" data-time="{{$time}}" onchange="file_selezionato(this)"/>
              <label for="file_{{$time}}" class="btn-3">
                <div id="div_{{$time}}"><i class="fas fa-cloud-upload-alt"></i> Aggiungi allegato</div>
                <span id="span_{{$time}}"></span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row justify-content-center" style="margin-top: 20px;" id="div_allegati_ext">
    <div class="col-xl-10 col-lg-12 col-md px-md-3 px-2">
      <div class="card">
        <div class="card-header"><i class="fas fa-signature"></i> Firme</div>
        <div class="card-body">
          <div class="form-row">
            <div class="form-group col-md-6">
              {!! Form::label('firma_tecnico', 'Firma tecnico') !!}

              @if($user->firma != null)

              @if(config('database.default') == 'mysql')
              <img src="data:image/png;base64,{!! base64_decode($user->firma) !!}" />
              @else
              <img src="data:image/png;base64,{!! stream_get_contents($user->firma) !!}" />
              @endif

              @endif
            </div>

            <div class="form-group col-md-6">
              {!! Form::label('firma_cliente', 'Firma cliente per presa visione') !!}
              <canvas id="signature-pad_cliente" class="signature-pad"></canvas>
              {!! Form::hidden('signature_image_cliente', null, ['id' => 'signature_image_cliente']) !!}
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-md">
              <button type="button" onclick="submitForm()" class="btn btn-primary">Salva</button>
            </div>
          </div>


        </div>
      </div>
    </div>
  </div>



  {!! Form::close() !!}

</x-app-layout>

<script>
$(document).ready(function(){
  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': '{{csrf_token()}}'
    }
  });

  setTimeout(init_canvas(), 2000);

  $('#spent_on').datetimepicker({
    locale: 'it',
    format: 'DD/MM/YYYY',
    // inline: true,
    sideBySide: true,
    icons: {
      time: "fa fa-clock-o",
      date: "fa fa-calendar",
      up: "fa fa-arrow-up",
      down: "fa fa-arrow-down",
      previous: "fa fa-chevron-left",
      next: "fa fa-chevron-right",
      today: "fa fa-clock-o",
      clear: "fa fa-trash-o"
    }
  });

  $('#ora_inizio').datetimepicker({
    locale: 'it',
    format: 'HH:mm',
    // inline: true,
    sideBySide: true,
    icons: {
      time: "fa fa-clock-o",
      date: "fa fa-calendar",
      up: "fa fa-arrow-up",
      down: "fa fa-arrow-down",
      previous: "fa fa-chevron-left",
      next: "fa fa-chevron-right",
      today: "fa fa-clock-o",
      clear: "fa fa-trash-o"
    }
  });

  $('#ora_fine').datetimepicker({
    locale: 'it',
    format: 'HH:mm',
    // inline: true,
    sideBySide: true,
    icons: {
      time: "fa fa-clock-o",
      date: "fa fa-calendar",
      up: "fa fa-arrow-up",
      down: "fa fa-arrow-down",
      previous: "fa fa-chevron-left",
      next: "fa fa-chevron-right",
      today: "fa fa-clock-o",
      clear: "fa fa-trash-o"
    }
  });
});

function init_canvas(){
  $.each(['cliente'], function(index, value){
    try{
      var canvas = document.getElementById("signature-pad_"+value);
      window["signaturePad_"+value] = new SignaturePad(canvas, {
        onEnd: function () {
          $("#signature_image_"+value).val(this.toDataURL());
        }
      });
      window.addEventListener("resize", resizeCanvas(canvas));
      resizeCanvas(canvas);
    }catch(exception){

    }
  });
}

function resizeCanvas(canvas){
  var parentWidth = $(canvas).parent().outerWidth();
  canvas.setAttribute("width", parentWidth);
}

function file_selezionato(input){
  if(input.files.length == 1){
    // Clono blocco
    var clone = $("#div_allegato").clone();
    clone.attr("id","");
    var seconds = Date.now();
    clone.find("input").attr("id","file_"+seconds);
    clone.find("input").attr("data-time",seconds);
    clone.find("input").val('');
    clone.find("label").attr("for","file_"+seconds);
    clone.find("label > span").attr("id","span_"+seconds).hide();
    clone.find("label > div").attr("id","div_"+seconds).show();

    clone.appendTo("#div_allegati");
    // Aggiorno nome file
    var fileName = input.files[0].name;
    var span = $("#span_" + $(input).data('time'));
    span.text(fileName);
    span.show();
    $("#div_" + $(input).data('time')).hide();
  }
}

function imputa_ore_viaggio(){
  $('#div_stato_segnalazione').show();
  $('#div_button_ore_viaggio').hide();
  $('#div_ore_viaggio').show();
}

function submitForm(){
  // controllo se le ore del viaggio sono state imputate
  if($("#div_ore_viaggio").is(":visible") && isNaN(parseInt($('#ore_viaggio').val()))){
    bootbox.alert("Devi imputare le ore di viaggio!");
    return;
  }

  if($('#signature_image_cliente').val() == ''){
    bootbox.alert("Manca la firma del cliente!");
    return;
  }
  $('#form_firma').submit();
}
</script>
