@php
    if(!Auth::user()->checkCharacteristics(['1', '2'] )){
      $sReadonly = 'readonly';
    } else {
      $sReadonly = '';
    }
  @endphp

  @extends('layout.padrao')
  @section('content')
  @section('title', 'Sistema de Chamados - Abertura')

  @if($errors->any())
    <div class="alert alert-danger">
    @foreach($errors->all() as $error)
        {{ $error }} <br>
    @endforeach
    </div>
  @endif

  @include('cards.abertura.style')

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

  <span class="sep-line5"></span>
  {{ Form::open(array('method' => 'post', 'enctype'=>'multipart/form-data', 'route'=> 'storeCard' , 'id'=>'card_create')) }}
    {{ csrf_field() }}
    <div class="row folha-interna shadow col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded folhaForm">
      <div class="row folha-interna folha-branca-soft shadow col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded">
        <div class="col-12">
          <div class="row margin-top-30">                   
            <div class="col-xl-3 col-lg-3 col-sm-12 col-md-12 col-xs-12">
              {!! Form::label('card_status_id', 'Status', [ 'class' => 'w-100']) !!}
              {!! Form::select('card_status_id', $select['status'], old('',$idOpened), ['class' => 'card_status_id form-control ', $sReadonly]) !!} 
            </div>
            <div class="col-xl-3 col-lg-3 col-sm-12 col-md-12 col-xs-12">
              {!! Form::label('it_user_resposible', 'IT User Responsible', [ 'class' => 'w-100 ']) !!}
              {!! Form::text('it_user_resposible', null, ['class' => 'form-control', 'readonly']) !!}
            </div>

            <div class="col-xl-6 col-lg-6 col-sm-12 col-md-12 col-xs-12 margin-top-15">
              <table class="table table-responsive-sm bordered">
                <thead>
                  <tr>
                    <th class="text-center colorFontTable borderRightBlue borderBottomBlue leftTh">
                      <label for="multipleCardEvents">Data de </br> Abertura</label>
                    </th>
                    <th class="text-center colorFontTable borderRightBlue borderBottomBlue centerTh">
                      <label for="multipleCardEvents">Data de </br> Recebimento</label>
                    </th>
                    <th class="text-center colorFontTable borderBottomBlue rightTh">
                      <label for="multipleCardEvents">Data de </br> Encerramento</label>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="text-center">
                    <td scope="row" class="bg-white borderRightBlue">
                      <input type="text" name="openingDate" id="openingDate" class="form-control" readonly></input> 
                    </td>
                    <td class="bg-white borderRightBlue">
                      <input type="text" name="receiptDate" id="receiptDate" class="form-control" readonly></input>
                    </td>
                      <td class="bg-white"><input type="text"name="closingDate" id="closingDate" class="form-control" readonly></input>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="w-100 margin-top-15"></div>
          </div>           
        </div>
        <div class="sep-line3"></div>
        <div class="w-100"></div>
        <div class="col-xl-6 col-lg-6 col-sm-12 col-md-12 col-xs-12">
          <div class="row margin-top-15">
            <div class="col-xl-6 col-lg-6 col-sm-12 col-md-12 col-xs-12 {{ $errors->has('card_types_id')? 'has-error':''}}">
              {!! Form::label('card_types_id', 'Card Type(*)', [ 'class' => 'w-100 ']) !!}
              {!! Form::select('card_types_id', $select['type'], null, ['class' => 'card_types_id form-control']) !!}          
            </div>
            <div class="col-xl-6 col-lg-6 col-sm-12 col-md-12 col-xs-12">
              {!! Form::label('departament_id', 'Departamento', [ 'class' => 'w-100 ']) !!}
              {!! Form::select('departament_id', $select['departamentos'], old(Auth::user()->departamento,Auth::user()->departamento), ['class' => 'departament_id form-control', 'readonly']) !!} 
            </div>
          </div>

          <div class="w-100"></div> 

          <div class="row otherLineForm">  
            <div class="col-xl-6 col-lg-6 col-sm-12 col-md-12 col-xs-12 margin-top-7">
              {!! Form::label('card_events[]', 'Card Events', [ 'class' => 'w-100 ']) !!}
              {!! Form::select('card_events[]', $select['cardEvents'], null, ['class' => 'cardEvents form-control', 'multiple'=>'multiple', $sReadonly]) !!} 
            </div>
            <div class="col-xl-6 col-lg-6 col-sm-12 col-md-12 col-xs-12 margin-top-7 {{ $errors->has('it_user_resposible')? 'has-error':''}}">
              {!! Form::label('it_user_resposible', 'IT Responsible', [ 'class' => 'w-100 ']) !!}
              {!! Form::select('it_user_resposible', $select['user_responsible_ti'], null, ['class' => 'it_user_resposible form-control ', !Auth::user()->checkCharacteristics(['1', '2']) ? 'disabled' : '']) !!} 
            </div>
            <div class="col-xl-6 col-lg-6 col-sm-12 col-md-12 col-xs-12 margin-top-7">
              {!! Form::label('card_events[]', 'Priority Level', [ 'class' => 'w-100 ']) !!}
              <select class="form-control" name="priority_level" id="priority_level"></select>
            </div>
          </div>

     
          <div class="w-100"></div>
          <div class="row margin-top-15 otherLineForm">
            <div class="col-xl-4 col-lg-4 col-sm-12 col-md-12 col-xs-12  {{ $errors->has('issue_summary')? 'has-error':''}}" >
              {!! Form::label('issue_summary', 'Assunto(*)', [ 'class' => 'w-100 ']) !!}
              {!! Form::text('issue_summary', old('issue_summary'), ['class' => 'issue_summary form-control margin-bottom-15 mr-sm-2']) !!}
            </div>
            <div class="col-xl-4 col-lg-4 col-sm-12 col-md-12 col-xs-12 {{ $errors->has('routine_description')? 'has-error':''}}">
              {!! Form::label('routine_description', 'Rotina usada(*)', [ 'class' => 'w-100 ']) !!}
              {!! Form::text('routine_description', old('routine_description', null), ['class' => 'form-control margin-bottom-15 routine_description']) !!}
            </div>
            <div class="col-xl-4 col-lg-4 col-sm-12 col-md-12 col-xs-12 {{ $errors->has('url')? 'has-error':''}}">
              {!! Form::label('url', 'Link - URL', [ 'class' => 'w-100 ']) !!}
              {!! Form::text('url', null, ['class' => 'form-control margin-bottom-15 mr-sm-2']) !!}
            </div>
          </div>

          <div class="w-100"></div>
            <div class="row margin-top-15 otherLineForm">
              <div class="col-xl-12 col-lg-12 col-sm-12 col-md-12 col-xs-12 {{ $errors->has('issue_details')? 'has-error':''}}">
                {!! Form::label('issue_details', 'Descrição(*)', [ 'class' => 'w-100 ']) !!}
                {!! Form::textarea('issue_details', old('issue_details'), ['class' => 'enterNewLine issue_details form-control mr-sm-2 textsAreaSuper margin-bottom-15', 'rows' => '10', 'cols' => '30', 'style' =>'height:180px; min-height: 180px;' ]) !!}
              </div>
            </div>
              <div class="w-100"></div>
              <div class="col otherLineForm margin-bottom-20">
                <div class="col-xl-12 col-lg-12 col-sm-12 col-md-12 col-xs-12"></div>
              </div>
          </div>

          <div class="col-xl-6 col-lg-6 col-sm-12 col-md-12 col-xs-12">
            <div class="row">
              <div class="col-xl-12 col-lg-12 col-sm-12 col-md-12 col-xs-12 mb-5">
                <div class="folha-branca-contorno-azul-claro rounded padding-15">
                  {!! Form::label('booking', 'Booking', [ 'class' => 'w-100 ']) !!}
                  {!! Form::text('booking', old('booking'), ['class' => 'booking form-control margin-bottom-30 mr-sm-2']) !!}

                  {!! Form::label('contract_reference', 'Contract Ref.', [ 'class' => 'w-100 ']) !!}
                  {!! Form::text('contract_reference', old('contract_reference'), ['class' => 'contract_reference form-control margin-bottom-30 mr-sm-2']) !!}

                  {!! Form::label('cargooReference', 'Cargoo Ref.', [ 'class' => 'w-100 ']) !!}
                  {!! Form::text('cargooReference', old('cargooReference'), ['class' => 'cargooReference form-control margin-bottom-30 mr-sm-2']) !!}
                  {{-- <p class="font-small margin-bottom-15">É necessário preencher pelo menos 1 (uma) referência.</p> --}}
                </div>        
              </div>
              <div class="w-100"></div>
              {{-- @can('internalRoutineTITeamOnly', App\Usuario::class)
                <div class="col-xl-12 col-lg-12 col-sm-12 col-md-12 col-xs-12">
                  {!! Form::label('closing_description', 'Observation from Closed Status ONLY', [ 'class' => 'w-100 ']) !!}
                  {!! Form::textarea('closing_description', old('closing_description'), [$sReadonly, 'class' => 'enterNewLine closing_description form-control mr-sm-2 textsAreaSuper margin-bottom-15','rows' => '10', 'cols' => '30', 'style' => 'height: 105px; min-height: 105px; max-height: 275px']) !!}
                </div>
              @endcan --}}
            </div>
          </div>
        </div>

        <!-- Attachment -->
        
        <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" wire:model="filename" 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 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>
            </div>
          </span>
        </div>

        <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">
              <input class="form-check-input" type="checkbox" value="Yes" name="notion" id="notion" disabled>
              <label class="form-check-label" for="notion">Criar card no Notion</label>
            </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 src="{{asset ('js/jquery.inputmask.js')}}"></script> 
  <script src="{{asset ('ckeditor4/ckeditor.js')}}"></script>
  <script>
    CKEDITOR.config.removeButtons = 'NumberedList';

    CKEDITOR.replace('closing_description');
    // $(document).ready(function() {
    //   CKEDITOR.config.removePlugins = 'NumberedList';
    // });
 
    
    $(function(){
      relogio();
      $('.cardEvents, .user_resposible, .card_types_id, .departament_id').select2();

      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 Required -",
      }).val('{{ $registersShow[0]->priority_level ?? null }}').trigger("change");

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

      $('.card_status_id').on('change', function(){
       var status = $(this).find('option[value="'+$(this).val()+'"]').text();
      });

      // Enter pula uma linha no comments 
      $('.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);
        }
      });

      $('.cardEvents').on('change', function(){
        var status = $('#card_status_id option:selected').text();
        var iTotalEventoSelecionado = $('.cardEvents > option:selected').length;
        if(iTotalEventoSelecionado > 0 && status != 'Cancelled'){
          $('#notion').attr('disabled',false);
        } else {
          $('#notion').attr('disabled',true);
        }
      });

      $('#card_status_id').on('change', function(){
        var status = $('#card_status_id option:selected').text();
        var iTotalEventoSelecionado = $('.cardEvents > option:selected').length;
        if(iTotalEventoSelecionado > 0 && status != 'Cancelled'){
          $('#notion').attr('disabled',false);
        } else {
          $('#notion').attr('disabled',true);
        }
      });

      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 Required -",
      }).val(null).trigger("change");
      
      function format(state) {
        if (!state.id) return state.id;
        return '<img src="/image/chamadosPriority/' + state.id + '.png" />';
      }
    });

    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;
      $("#openingDate").val(dateTime);
    }

  </script>

  @extends('cards.style')
@endsection