@extends('layout.padrao')
@section('content')
@include('Intranet.menu')

<div class="col col-12 margin-bottom-30 ajusteMobile">
  <div class="col margin-bottom-30"></div>

  <div id="tabsProcedimentos">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#1" data-toggle="tab">Procedimentos Operacionais</a>
      </li>
      <li>
        <a href="#2" data-toggle="tab">Financeiro</a>
      </li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="1">
        <div class="col col-sm-12 col-md-12 col-lg-12 shadow folha-interna folha-azul rounded">
          <div class="row col box padding-15">
            <div class="col-sm-12 col-md-12 col-lg-12 display-flex margin-top-10 margin-bottom-10">
              <h2>Procedimentos Operacionais</h2>
            </div>
            <div class="w-100"></div>

            <div class="col col-lg-12 col-sm-12 col-md-12 display-flex justify-content-right align-items-center">
              <span style="margin-right: 5px; color: #166fbc">Trocar modo de visualização para: </span>

              <div class="badge badge-primary align-self-center align-items-center msgTable1 changeView display-flex">
                TABELA
              </div>
              <div class="badge badge-primary align-self-center align-items-center msgCard1 changeView display-none">
                CARDS
              </div>
              <button class="border-none bg-transparent" onclick="changeView('1')">
                <img src="{!! asset('/image/icons/ic_round-change-circle.svg') !!}" id="circle1" class="roundIcon" style="height:35px">
              </button>
            </div>

            <div class="col col-lg-12 col-sm-12 col-md-12 table1 display-none">
              @include('Intranet.procedimentos.tabelas.procedimentosOperacionaisTable')
            </div>

            <div class="row col col-lg-12 col-sm-12 col-md-12 list1 procedimentosOperacionaisListagem"></div>

            <div class="sep-line3"></div>

            <div class="col-sm-12 col-md-12 col-lg-12 display-flex margin-top-10 margin-bottom-10">
              <h2>Conhecimentos Operacionais</h2>
            </div>
            <div class="w-100"></div>

            <div class="col col-lg-12 col-sm-12 col-md-12 display-flex justify-content-right align-items-center">
              <span style="margin-right: 5px; color: #166fbc">Trocar modo de visualização para: </span>

              <div class="badge badge-primary align-self-center align-items-center msgTable3 changeView display-flex">
                TABELA
              </div>
              <div class="badge badge-primary align-self-center align-items-center msgCard3 changeView display-none">
                CARDS
              </div>
              <button class="border-none bg-transparent" onclick="changeView('3')">
                <img src="{!! asset('/image/icons/ic_round-change-circle.svg') !!}" id="circle3" class="roundIcon" style="height:35px">
              </button>
            </div>

            <div class="col col-lg-12 col-sm-12 col-md-12 table3 display-none">
              @include('Intranet.procedimentos.tabelas.conhecimentosOperacionaisTable')
            </div>

            <div class="row col col-lg-12 col-sm-12 col-md-12 list3 conhecimentosOperacionais"></div>

          </div>
        </div>
      </div>
      <div class="tab-pane" id="2">
        <div class="col col-sm-12 col-md-12 col-lg-12 shadow folha-interna folha-azul rounded">
          <div class="row col box padding-15">
            <div class="col-sm-12 col-md-12 col-lg-12 display-flex margin-top-10 margin-bottom-10">
              <h2>Financeiro</h2>
            </div>
            <div class="w-100"></div>

            <div class="col col-lg-12 col-sm-12 col-md-12 display-flex justify-content-right align-items-center">
              <span style="margin-right: 5px; color: #166fbc">Trocar modo de visualização para: </span>

              <div class="badge badge-primary align-self-center align-items-center msgTable2 changeView display-flex">
                TABELA
              </div>
              <div class="badge badge-primary align-self-center align-items-center msgCard2 changeView display-none">
                CARDS
              </div>
              <button class="border-none bg-transparent" onclick="changeView('2')">
                <img src="{!! asset('/image/icons/ic_round-change-circle.svg') !!}" id="circle2" class="roundIcon" style="height:35px">
              </button>
            </div>

            <div class="col col-lg-12 col-sm-12 col-md-12 table2 display-none">
              @include('Intranet.procedimentos.tabelas.procedimentosFinanceirosTable')
            </div>

            <div class="row col col-lg-12 col-sm-12 col-md-12 list2 procedimentosFinanceiros"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@include('Intranet.style')
@include('Intranet.procedimentos.style')
@include('Intranet.procedimentos.script')
@include('Intranet.politicasDaEmpresa.style')
@include('bibliotecas.bootstrapExport')
@endSection