{% extends 'base.html.twig' %}

{% block title %}Contexto Organizacional - Dashboard{% endblock %}

{% block body %}
{{ encore_entry_link_tags('cute-alert-css') }}

  <div class="no-max container-fluid box-no-bkg-color">
    <div class="initiative-panel box py-4 pb-0 mt-3 table1">
          <div class="row">
            <div class="col-lg-8 mb-4">
              <h2 class="page-title">Visão Estratégica</h2>
            </div>
            {% if releasedContext %}
                <div class="col-lg-4 d-flex mb-4">
                    <span class="fas fa-info-circle"></span>
                </div>
            {% endif %}
          </div>

        <div style="height: 400px;" class="tableContainer mb-2">
          <div style="height: 100%; max-width:100%;" class="ag-theme-material" id="table1"></div>
        </div>
    </div>


    <div class="initiative-panel box py-4 mt-3">
        <div class="mb-2">
          <div class="row">
            <div class="col-lg-8">
              <h2 class="page-title">Objetivos Estratégicos</h2>
            </div>
          </div>
        </div>
        <div style="height: 300px" class="tableContainer mb-3">
          <div style="height: 100%; max-width:100%;" class="ag-theme-material" id="table2"></div>
        </div>
    </div>


    <div class="initiative-panel box txt-center-mobile py-4 mt-3">
			<div class="title mb-5">
                <div class="row">
                    <div class="col-lg-6">
                        <h1 class="page-title" >Contexto Organizacional</h1>
                    </div>
                    <div class="col-lg-6 text-lg-right">
                      {% if releasedContext %}
                        <a class="btn btn-tqm" href="{{ path('organizational_context_create') }}">
                            <i class="fas fa-plus"></i>Novo contexto organizacional
                        </a>
                      {% endif %}
                    </div>
                </div>
            </div>
        <div style="height: 450px" class="tableContainer mb-3">
          <div style="height: 100%; max-width:100%;" class="ag-theme-material" id="table3"></div>
        </div>
    </div>


    <div class="initiative-panel box txt-center-mobile py-4 mt-3">
      <div class="title mb-5">
                <div class="row">
                    <div class="col-lg-6">
                        <h1 class="page-title" >Fator de Risco</h1>
                    </div>
                    <div class="col-lg-6 text-lg-right">
                        <a class="btn btn-tqm" href="{{ path('risk_factor_create') }}">
                            <i class="fas fa-plus"></i>Novo fator de risco
                        </a>
                    </div>
                </div>
            </div>
        <div style="height: 450px" class="tableContainer  mb-3">
          <div style="height: 100%; max-width:100%;" class="ag-theme-material" id="table4"></div>
        </div>
    </div>
  </div>

  <style>
    #table1 .ag-center-cols-container, #table1 .ag-cell-inline-editing {
      height: 100% !important;
    }
    #table1 .ag-row {
      border: 0;
      height: 100% !important;
    }
    #table1 .ag-cell {
      transition: background-color 0.3s;
      white-space: break-spaces !important;
    }
    #table1 .ag-cell:hover {
      background-color: var(--ag-header-cell-hover-background-color,#f2f2f2);
    }
    #table1 .ag-row-hover {
      background-color: #fff;
    }
    #table1 .ag-header {
      border: 0;
    }
    #table1 .ag-header-cell-text {
        font-size: 26px;
        font-family: Roboto;
        font-weight: 700;
        color: #6D8EBA;
        margin-top: -25px;
        height: 48%;
    }
    #table1 .ag-header-cell:nth-child(2) .ag-header-cell-text:before {
        background-image: url('/build/images/CO1.png');
        background-repeat: no-repeat;
        background-size: 65px 55px;
        margin-right: 10px;
        margin-bottom: -20px;
        display: inline-block;
        width: 65px;
        height: 55px;
        content: "";
    }
    #table1 .ag-header-cell:nth-child(1) .ag-header-cell-text:before {
        background-image: url('/build/images/CO2.png');
        background-repeat: no-repeat;
        background-size: 70px 60px;
        margin-right: 10px;
        margin-bottom: -25px;
        display: inline-block;
        width: 70px;
        height: 60px;
        content: "";
    }
    #table1 .ag-header-cell:nth-child(3) .ag-header-cell-text:before {
        background-image: url('/build/images/CO3.png');
        background-repeat: no-repeat;
        background-size: 65px 55px;
        margin-right: 10px;
        margin-bottom: -15px;
        display: inline-block;
        width: 65px;
        height: 55px;
        content: "";
    }
    #table1 .ag-cell-value {
        color: #596480;
        font-family: Roboto;
        font-style: normal;
        font-weight: normal;
        font-size: 15px;
        overflow-y: auto;
        line-height: 150%;
    }
    #table1 .ag-header, #table1 .ag-header-row , #table1 .ag-header-container, #table1 .ag-header-viewport {
        height: 120px !important;
        max-height: 120px !important;
    }
    #table1 .ag-header-cell-label {
        display: flex;
        padding-left: 10px;
        justify-content: start;
        color: #525F7F;
    }
    #table1 .ag-input-field-input.ag-text-area-input {
        height: 180px;
        width: 90%;
    }
    #table1 .ag-header-cell {
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }
    #table1 .ag-cell {
        padding-top: 10px !important;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    #table1 .ag-row, #table1 .ag-header-row {
        background-color: #F7FAFC;
        border-color: #F7FAFC;
    }
    #table1 .ag-cell, #table1 .ag-header-cell {
        background-color: #FFF;
    }
    #table1 .ag-cell:nth-child(1), #table1 .ag-header-cell:nth-child(1) {
        max-width: 32%;
        margin-right: 10px;
    }
    #table1 .ag-cell:nth-child(2), #table1 .ag-header-cell:nth-child(2) {
        max-width: 31%;
        margin-left: 10px;
    }
    #table1 .ag-cell:nth-child(3), #table1 .ag-header-cell:nth-child(3) {
        margin-left: 10px;
        max-width: 32%;
    }
    .table1 .alert-info {
        font-size: 14px;
        padding: 5px 10px;
        width: 600px;
    }
    .ag-header-cell {
      padding-left: 15px !important;
      padding-right: 15px !important;
    }

    .ag-cell {
      line-height: 1.3 !important;
      padding-top: 15px !important;
      padding-left: 15px !important;
      padding-right: 15px !important;
    }

    #table3 .ag-cell, #table4 .ag-cell {
      word-break: break-word !important;
      /* white-space: break-spaces !important; */
      /* line-height: 2 !important; */
    }


    .show-cell {
      white-space: break-spaces !important;
    }

    .cell-span-green {
      background-color: green;
    }
    .cell-span-red {
      background-color: red;
    }
    .cell-span-yellow {
      background-color: yellow;
    }

    .sidebar-menu a:nth-child(5), .sidebar-menu a:nth-child(7) {
      display: none !important;
    }
    .bg-green, .bg-red, .bg-yellow {
        padding: 10px 0px 25px !important;
        max-width: 83px !important;
        margin-left: 5px !important;
    }
    .ag-cell.bg-green, .ag-cell.bg-red, .ag-cell.bg-yellow {
        padding-left: 10px !important;
        margin
        padding-right: 10px !important;
    }

    .fas.fa-info-circle {
        cursor: pointer;
        font-size: 24px;
        color: #6D8EBA;
        margin-right: 10px;
        margin-left: auto;
    }
  </style>

  <script>
		var tableData1 = {{ tableData1|json_encode|raw }};
		var tableData2 = {{ tableData2|json_encode|raw }};
		var tableData3 = {{ tableData3|json_encode|raw }};
		var tableData4 = {{ tableData4|json_encode|raw }};

        var releasedContext = {{ releasedContext ? 'true' : 'false' }};
		var releasedRiskFactor = {{ releasedRiskFactor ? 'true' : 'false' }};
	</script>
	{{ encore_entry_script_tags('co') }}
{% endblock %}