@php
  use App\CardEvent;
@endphp

@extends('layout.padrao')
@section('content')
@include('cards.historico.modules')
@section('title', 'Sistema de Chamados - Histórico')
@if($errors->any())
  <div class="alert alert-danger">
  @foreach($errors->all() as $error)
      {{ $error }} <br>
  @endforeach
  </div>
@endif


{{-- @if (!Auth::user()->checkCharacteristics(['1', '2']))
   <style>
    .cke_wysiwyg_frame {
      display:none;
    }

    .cke_contents{
      background: #eee !important;
    }
   </style>
@endifcard_status_id --}}

<div class="col logoLineTitle">
    <img src="{!! asset('/image/csa_Logo150x143.png') !!}" alt="logoChamados CSA" class="height-78">
</div>

<span class="sep-line5"></span>
<script src="{{asset ('ckeditor4/ckeditor.js')}}"></script>

<form action="{{route('cards.update', $registersShow[0]->id)}}" method="POST" enctype="multipart/form-data"  onsubmit="checkStatus()">
    {{ method_field('PUT') }}
    {{ csrf_field() }}
    <div class="row folha-interna shadow col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded folhaForm padding-15">

        <div class="col-lg-5 col-sm-12 col-md-6 col-xs-12 margin-bottom-15">
            <label for="assunto">Assunto</label>
            <input type="text" name="assunto" class="form-control mr-sm-2 margin-bottom-15" readonly value="{{ $registersShow[0]->issue_summary }}">
        </div>

        <div class="col-lg-1 col-sm-12 col-md-12"></div>

        <!-- Informações gerais do card -->
        <div class="col-lg-6 col-md-12" style="color: #484848;">
          <div class="row" id="infoCard">
            <div class="col-lg-4 col-md-12 align-self-end" style="margin-bottom: 4px;">
              <h3 style="margin-bottom: 12px;">
                <b>
                  Card 
                  <input type="text" name="cards_id" class="mr-sm-2 inputTransparent" value="{{$registersShow[0]->id}}" style="margin-top: -27px; margin-left: 61px;" readonly>
                </b>
              </h3>
            </div>
            <div class="col text-center align-self-end margin-bottom-10" style="display: flex; justify-content: right; margin-left: 10px">
              <div class="row" style="display: flex; justify-content: right;">
                <div class="cardInfoBlueBg">
                  <p style="margin-bottom: 0px"><b>Status:</b> <span id="statusCard">{{$registersShow[0]->card_status->description}}</span></p>
                </div>
                <div class="cardInfoBlueBg" data-toggle="tooltip" data-placement="top" data-html="true" title="<p style='margin-bottom: 0px'> Date New Event </p>"  style="margin-left: 10px">
                  <div class="row">
                    <div class="col-4 text-right" style="margin-right: -42px; align-self: center;">
                      <i class="far fa-calendar-alt"></i>
                    </div>
                    <div class="col">
                      <input type="text" name="event_date" id="event_date" class="form-control mr-sm-2 inputTransparent text-center" style="margin: -8px 0 -6px 0" readonly>
                    </div>
                </div> 
                </div>
              </div>
            </div>
            
            <div class="w-100"></div>

            <div class="col cardInfoBg">
              <div class="row">
                <div class="col text-center border-right-1">
                  <b>Contract Ref.</b>
                  <input type="text" name="contract_reference" class="form-control mr-sm-2 inputTransparent text-center" value="{{$registersShow[0]->contract_reference}}" readonly>
                </div>
                <div class="col text-center border-right-1">
                  <b>Cargoo Ref.</b>
                  <input type="text" name="cargooRef" class="form-control mr-sm-2 inputTransparent text-center" value="{{$registersShow[0]->cargooReference}}" readonly>
                </div>
                <div class="col text-center">
                  <b>Booking</b>
                  <input type="text" name="booking" class="form-control mr-sm-2 inputTransparent text-center" value="{{$registersShow[0]->booking}}" readonly>
                </div>
              </div>
            </div>
            <div class="w-100"></div>
            <div class="col text-right margin-top-10">
              <p style="color: #737373;"><i class="fas fa-user-friends" style="color: #3A669F"></i> <b>IT Resp:</b> {{$registersShow[0]->listUserResponsible->nome ?? null}}</p>
            </div>
          </div>
        </div>

        <div class="w-100 sep-line3 margin-top-10 margin-bottom-10"></div>
        
        <div class="w-100 margin-top-15"></div>

        <!-- Inputs -->
        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 margin-bottom-15">
            <div class="row padding-10">

                <div class="col-lg-4 col-sm-12 col-md-12 col-xs-12 margin-bottom-15 {{ $errors->has('card_status_id')? 'has-error':''}}">
                  <label for="card_status_id_main" class="w-100">Card Status</label>
                  {!! Form::select('card_status_id_main', $select['status'], old('',$registersShow[0]->card_status_id), ['class' => 'card_status_id_main form-control',  (!Auth::user()->checkCharacteristics(['1', '2']) ? 'readonly' : '')]) !!} 
                
                  <label for="url" class="w-100 margin-top-15">URL</label>
                  <input type="text" name="url" value="{{$registersShow[0]->url}}" class="form-control mr-sm-2 {{!Auth::user()->checkCharacteristics(['1', '2']) ? 'readonly' : ''}}" >
                
                  <label for="required_to_user" class="w-100 margin-top-15">Requesting User</label>
                  {!! Form::select('required_to_user', $select['user_responsible'], (!Auth::user()->checkCharacteristics(['1', '2']) ? ($registersShow[0]->user_responsible ?? null) : ''), ['class' => 'required_to_user form-control', (!Auth::user()->checkCharacteristics(['1', '2']) ? 'readonly' : ''), 'multiple'=>'multiple']) !!} 

                  <label for="it_user_resposible" class="w-100 margin-top-15">IT Responsible</label>
                  {!! Form::select('it_user_resposible', $select['user_responsible_ti'], old('',($registersShow[0]->user_responsible ?? null)), ['class' => 'it_user_resposible form-control ',  (!Auth::user()->checkCharacteristics(['1', '2']) ? 'readonly' : '')]) !!} 

                  <label for="priority_level" class="w-100 margin-top-15">Priority Level</label>
                  <select class="form-control" name="priority_level" id="priority_level"></select>
                  
                  <label for="card_status_id" class="w-100 margin-top-15">Event Status</label>
                  {!! Form::select('card_status_id', $select['status'], old('', ($registersShow[0]->lastEvent->card_status_id ?? null)), ['class' => 'card_status_id form-control ', (!Auth::user()->checkCharacteristics(['1', '2']) ? 'readonly' : '')]) !!} 

                  <label for="card_events" class="w-100 margin-top-15">Card Events</label>
                  {!! Form::select('card_events[]', $select['cardEvents'], old('card_events[]', $allEventId), ['class' => 'cardEvents form-control', 'multiple'=>'multiple', (!Auth::user()->checkCharacteristics(['1', '2']) ? 'readonly' : '')]) !!} 

                  <label for="external_url" class="w-100 margin-top-15">Notion URL</label>
                  <input type="text" name="external_url"  value="{{$registersShow[0]->external_url}}" class="form-control mr-sm-2 margin-bottom-15" readonly>

                </div>

                <div class="col-lg-8 col-sm-12 col-md-12 margin-bottom-15 {{ $errors->has('observation')? 'has-error':''}}">
                  <label for="observation">Observation</label>
                  <textarea name="observation" id="observation" value="" class="form-control mr-sm-2 margin-bottom-15 enterNewLine " cols="30" rows="10" required></textarea>
                </div>
                
                <div class="w-100"></div>

          <!-- Attachments -->
          <div class="col">
            <div class="col">
              <h4>Attachment</h4>
            </div>
          </div>

          <div class="col-lg-12 col-sm-12 col-md-12 input-group control-group increment-attach" id="increment-attach" style="margin-left: 4%">
            <span id="attach-child">
              
              <div class="col-lg-11 col-sm-12 col-md-12 pb-3 increment" style="display: inline-flex; width: 80%;">
                <input type="file" name="filename[]" class="form-control" multiple="multiple" style="height:40px;">
              </div>
              <div id='btn_attach_change' class="col-lg-1 col-sm-1 col-md-1 input-group-btn"></div>
            </span>
          </div>

          <!-- Timeline History -->
          @yield('timeline-details')  
          
                   
          <!-- History Detail -->
          @yield('history-details')  

          <!-- Botões -->
          <div class="col-lg-12 col-md-12 col-sm-12 form-group text-right margin-top-20">
            @if(Auth::user()->checkCharacteristics(['1', '2']))
              <div style="margin-bottom:20px">
                <label class="form-check-label" for="notion" style="padding: 0 10px 0 0;">Criar card no Notion</label>
                <input class="form-check-input" name="notion" type="checkbox" value="Yes" id="notion">
              </div>
            @endif

            <button type="submit" name="submitBtn" class="btn btn-style btnForm" value="submit">Send</button>
            <button type="reset" name="resetBtn" class="btn btn-style btnForm" value="reset">Cancel</button>
          </div>
        </div>
    </div>
</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js'></script>
<script>
    var userCaracteristica, statusCard = 0;
    CKEDITOR.replace( 'observation' );

    if($('#statusCard').val() == 'Closed'){
      $(':input').attr('readonly','readonly');
      $(':input').attr('disabled','disabled');

      statusCard = 1;
    } 

    if (userCaracteristica == 1 || statusCard == 1){
      $('#btn_attach_change').append(
        '<div class="btn btn-attachment attach-success marginAttach" disabled type="button" style="height:40px;">'+
          '<div class="circleIcon">'+
            '<img src="{!! asset("/image/plus.svg") !!}" class="botao-circular-add">'+
          '</div>'+
        '</div>'
      )
    } else{
      $('#btn_attach_change').append(
        '<div class="btn btn-attachment attach-success marginAttach" type="button" style="height:40px;">'+
          '<div class="circleIcon">'+
            '<img src="{!! asset("/image/plus.svg") !!}" class="botao-circular-add">'+
          '</div>'+
        '</div>'
      )
    }
    
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
      relogio();

      var dataSelectPriority = [
        {"id":"P1"},
        {"id":"P2"},
        {"id":"P3"},
        {"id":"P4"},
        {"id":"P5"},
        {"id":"P6"},
      ]
      
      $('#priority_level').empty();

      $("#priority_level").select2({
        data: dataSelectPriority,
        templateResult: format,
        templateSelection: format,
        minimumResultsForSearch: -1,
        escapeMarkup: function(m) {
          return m;
        },
        placeholder: "- Select -",
      }).val('{{ $registersShow[0]->priority_level }}').trigger("change");

      function format(state) {
        if (!state.id) return state.id;
        return '<img src="/image/chamadosPriority/' + state.id + '.png" />';
      }

      
      $(".required_to_user").select2({
          placeholder: "Select and Search",
          allowClear: true,
          default: null,
          maximumSelectionLength: 1,
      });
      $(".cardEvents").select2({
          placeholder: "Select and Search",
          allowClear: true,
          default: null,
          maximumSelectionLength: 100,
      });

      $('.arrowDropdown').on('click',function(){
        if($('#arrow').hasClass('fa-angle-down')){
            $('#arrow').addClass('fa-angle-up');
        } else {
            $('#arrow').addClass('fa-angle-down');
        }
      });
      
      $('.arrowDropdownHistory').on('click',function(){
        if($('#arrowHistory').hasClass('fa-angle-down')){
            $('#arrowHistory').addClass('fa-angle-up');
        } else {
            $('#arrowHistory').addClass('fa-angle-down');
        }
      });

      $('.enterNewLine').keypress(function (e) {
        if (e.keyCode == 13) {
          e.preventDefault();
          this.value = this.value.substring(0, this.selectionStart) + "" + "\n" + this.value.substring(this.selectionEnd, this.value.length);
        }
      });
    })

    // Configurando botões para rolar a timeline (chat)
    function scrollToTheBegin(){
        var div = document.getElementById('timelineArea');
        div.scrollLeft = -(div.scrollWidth);
    }

    function scrollToTheEnd(){
        var div = document.getElementById('timelineArea');
        div.scrollLeft = div.scrollWidth;
    }

    setInterval('relogio()', 1000);

    function relogio(){
      var today   = new Date();
      var mes     = today.getMonth()+1;
      var horas   = today.getHours();
      var minutos = today.getMinutes();

      var date = (today.getDate() < 10 ? '0'+today.getDate() : today.getDate()) + '-' + (mes < 10 ? '0'+mes : mes) + '-' + today.getFullYear();
      var time = (horas < 10 ? '0'+horas : horas) + ":" + (minutos < 10 ? '0'+minutos : minutos);
      var dateTime = date + ' ' + time;
      $("#event_date").val(dateTime);
    }
</script>

@extends('cards.historico.style')
@extends('cards.style')
@extends('cards.historico.script')
@endsection