@extends('layout.padrao')
@include('Client.modules')
@section('title', 'Update' . ' - ' . ($cliente->type))
@section('content')

  <style>
    #main{
      padding-bottom: 1000px !important;
    }

    #btnRemoveEmailGenericGroups{
      margin-top: 5px;
      margin-left: 5px;
    }

    #btnAddEmailGenericGroups{
      margin-left: 7px;
    }

    .swal2-html-container{
      font-size: 15px;
    }
  </style>

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

  <script>
    jQuery(function () {
      $("#ShowTabs").click(function () {
          $("#tabs").show();
      });

      $("#HideTabs").click(function () {
          $("#tabs").hide();
      });
    });

    $(document).ready(function(){
      $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
          localStorage.setItem('activeTab', $(e.target).attr('href'));
      });
      var activeTab = localStorage.getItem('activeTab');
      if(activeTab){
          $('#myTab a[href="' + activeTab + '"]').tab('show');
      }
    });
  </script>

  {{ Form::open(array('id'=>'profileClient', 'method' => 'post', 'files'=>true, 'enctype'=>'multipart/form-data', 'route'=>array('updateClient', $cliente->id))) }}
    {{method_field('PUT')}}
    {{ csrf_field() }}
    <div class="tabbable"> <!--  Only required for left/right tabs -->
      <ul class="nav nav-tabs" id='myTab'>
        <li class="active"><a href="#tab1" data-toggle="tab" class="tab-link">Client</a></li>
        @if((Auth::user()->departamento == 'IT' || Auth::user()->checkCharacteristics(['5','7','6', '13']) ) && ($cliente->type == 'Client' ||  $cliente->type == 'Buyer'))
          @if((Auth::user()->departamento == 'IT' || Auth::user()->checkCharacteristics(['5','7', '13'])) && ($cliente->type == 'Client' ||  $cliente->type == 'Buyer'))
            <li><a href="#tab2" data-toggle="tab" class="tab-link">Client Profile</a></li>
          @endif
          @if((Auth::user()->departamento == 'IT' || Auth::user()->checkCharacteristics(['5','7'])) && ($cliente->type == 'Client' ||  $cliente->type == 'Buyer'))
            <li><a href="#tab3" data-toggle="tab" class="tab-link">Template</a></li>
            <li><a href="#tab4" data-toggle="tab" class="tab-link">Attach Template</a></li>
          @endif
        @endif
        @can('internalRoutineFinanceTeamOnly', App\Usuario::class)
            <li><a href="#tab6" id="MyTab6" data-toggle="tab" class="tab-link">Finance</a></li>
        @endcan
        @if((Auth::user()->departamento == 'IT' || Auth::user()->checkCharacteristics(['3','7']) ))
          <li><a href="#tab5" data-toggle="tab" class="tab-link">SOP Template</a></li>
          <li><a href="#tab7" data-toggle="tab" class="tab-link">Email Groups</a></li>   
        @endif
        @if($cliente->type <> 'Shipper')
          <li><a href="#tab9" data-toggle="tab" class="tab-link">Client Characteristic</a></li> 
        @endif  
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          @include('Client.editClient')
          @include('include.btn_atualizar')
        </div>
        @if(( Auth::user()->departamento == 'IT' || Auth::user()->checkCharacteristics(['5','7', '13'])) && $cliente->type == 'Client')
          <div class="tab-pane" id="tab2">
            @include('Client.editClientProfile')
          </div>
        @endif
        <div class="tab-pane" id="tab3">
              @include('Client.editIMOCargo')
        </div>
        <div class="tab-pane" id="tab4">
            @include('Client.attachTemplate')
        </div>
        <div class="tab-pane" id="tab5">
            @include('Client.SOPtab')
        </div>
        @can('internalRoutineFinanceTeamOnly', App\Usuario::class)
          <div class="tab-pane" id="tab6">
              @include('Client.editFinance')
          </div>
        @endcan
        <div class="tab-pane" id="tab7">
            @include('Client.editEmailGroupContacts')
        </div>        
  
        <div class="tab-pane" id="tab9">
            @include('Client.editClientCharacteristics')
        </div>   
      </div>
    </div>
  </form>

  @include('include.modal_deletar', ["rota" => "template"])
  @include('include.modal_template')
  @include('Client.modal_editSOP')
  @include('Client.modal_supplier_insert')

  <script src="{{asset ('js/jquery.inputmask.js')}}"></script>
  @include('Client.script')
  <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>
  @include('bibliotecas.sweetAlert')
  <script>
    var folhaHeight = document.getElementById('folhaTabex').clientHeight;
    var tamanhoPag = document.getElementById('main');

    // Ajustes no Sidebar 
    if (folhaHeight > 600) {
      tamanhoPag.style.paddingBottom = "900px !important";                     
    } 

    // declarando edição do formulário
    let isFormEdited = false;

    // Selecionar os links das abas
    const tabLinks = document.querySelectorAll('.tab-link');

    function fieldEdited() {
      isFormEdited = true;
    }

    // Desabilitar os links das abas
    function disableTabLinks() {
      tabLinks.forEach((link) => {
        link.classList.add('disabled');
        link.removeAttribute('data-toggle'); // Remove o atributo 'data-toggle' para desabilitar o comportamento do Bootstrap
      });
    }

    // Habilitar os links das abas
    function enableTabLinks() {
      tabLinks.forEach((link) => {
        link.classList.remove('disabled');
        link.setAttribute('data-toggle', 'tab'); // Adiciona o atributo 'data-toggle' para habilitar o comportamento do Bootstrap
      });
    }

    // Manipular o evento de clique nos links das abas
    tabLinks.forEach((link) => {
      link.addEventListener('click', (event) => {
        if (isFormEdited) {
          event.preventDefault();
          disableTabLinks();
          Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'Por favor, salve as alterações antes de trocar de aba.'
          });   
        }
      });
    });

    // Manipular o evento de clique no botão de salvar
    const saveButton = document.getElementById('nodoubleclick');
    saveButton.addEventListener('click', () => {
      enableTabLinks();
    });
    const saveButtonTemplate = document.getElementById('saveTemplate');
    saveButtonTemplate.addEventListener('click', () => {
      enableTabLinks();
    });
    const saveAttachTemplate = document.getElementById('saveAttachTemplate');
    saveAttachTemplate.addEventListener('click', () => {
      enableTabLinks();
    });
    const saveSOP = document.getElementById('saveSOP');
    saveSOP.addEventListener('click', () => {
      enableTabLinks();
    });
    const saveFinance = document.getElementById('saveFinance');
    saveFinance.addEventListener('click', () => {
      enableTabLinks();
    });
    const saveEmailGroup = document.getElementById('saveEmailGroup');
    saveEmailGroup.addEventListener('click', () => {
      enableTabLinks();
    });
  </script>

  @if(!Auth::user()->checkCharacteristics(['1', '2','4','5','6','7']))
    <script>
        $(document).ready(function(){
            $("[name=address]").prop("readonly", true);
            $("[name=countries_id]").prop("disabled", true);
            $("[name=state_id2]").prop("disabled", true);
            $("[name=city]").prop("disabled", true);
            $("[name=zipCode]").prop("disabled", true);
            $("[name=CNPJ]").prop("disabled", true);
            $("[name=status]").prop("disabled", true);
            $("[name^=suppliers_id]").prop("disabled", true);
            $("[name^=cities_id]").prop("disabled", true);
            $("[name^=brands]").prop("disabled", true);
            $("[name^=platform]").prop("disabled", true);
            $(".loadingplant-success").prop("hidden", true);
            $(".div-botao-circular-add").prop("hidden", true);
            $(".loadingplant-danger").prop("hidden", true);
        });
    </script>
  @endif
@endSection