@extends('portaria.portaria')



@section('content')
    <div class="bg-white max-w-screen max-h-auto max-w-auto mx-auto sm:w-full xl:w-11/12  rounded-lg mt-16 mb-16 pb-8 pt-8">
        <h1 class="text-orangeblack text-lg font-bold  m-3 mt-3 mb-3 p-3">Portaria - <span class="text-lg">Indicadores</span> </h1>
        <div class="bg-blueb rounded-lg mb-10 m-3 sm:p-2 p-1 max-w-full">

<div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-6">
    <div class="flex justify-between mb-3">
      <div class="flex items-center">
        <div class="flex justify-center items-center">
          <h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white pe-1">Fluxo - Portaria</h5>
          
          </div>
        </div>
      </div>
    </div>

    <div class="w-full bg-gray-50 mt-3 dark:bg-gray-700 p-3 rounded-lg">
      <h1 class="text-gray-900 font-bold text-center">MATRIZ - São Bernardo do Campo</h1>
      <div class="flex flex-col lg:flex-row justify-center  gap-3 mb-2">
        <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
          <dt class="w-48 h-48 rounded-full bg-orange-100 dark:bg-gray-500 text-orange-600 dark:text-orange-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalCadastrado }}</dt>
          <dd class="text-orange-600 dark:text-orange-300 text-sm font-medium">Total de Cadastros Ativos</dd>
        </dl>
        <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
          <dt class="w-48 h-48 rounded-full bg-yellow-100 dark:bg-gray-500 text-yellow-600 dark:text-teal-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalPendente }}</dt>
          <dd class="text-yellow-600 dark:text-teal-300 text-sm font-medium">Processos em Andamento</dd>
        </dl>
        <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
          <dt class="w-48 h-48 rounded-full bg-green-100 dark:bg-gray-500 text-green-600 dark:text-blue-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalFinalizado }}</dt>
          <dd class="text-green-600 dark:text-green-300 text-sm font-medium">Processos Finalizado</dd>
        </dl>
      </div>

  
    
      

    <!-- Radial Chart -->
    <div class="py-6" id="radial-chart"></div>

   

    </div>
    <div class="w-full bg-gray-50 mt-3 dark:bg-gray-700 p-3 rounded-lg">
      <h1 class="text-gray-900 font-bold text-center">Unidade - Congonhas</h1>
      <div class="flex flex-col lg:flex-row justify-center  gap-3 mb-2">
        <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
          <dt class="w-48 h-48 rounded-full bg-orange-100 dark:bg-gray-500 text-orange-600 dark:text-orange-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalCadastrado }}</dt>
          <dd class="text-orange-600 dark:text-orange-300 text-sm font-medium">Total de Cadastros Ativos</dd>
        </dl>
        <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
          <dt class="w-48 h-48 rounded-full bg-yellow-100 dark:bg-gray-500 text-yellow-600 dark:text-teal-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalPendente }}</dt>
          <dd class="text-yellow-600 dark:text-teal-300 text-sm font-medium">Processos em Andamento</dd>
        </dl>
        <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
          <dt class="w-48 h-48 rounded-full bg-green-100 dark:bg-gray-500 text-green-600 dark:text-blue-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalFinalizado }}</dt>
          <dd class="text-green-600 dark:text-green-300 text-sm font-medium">Processos Finalizado</dd>
        </dl>
      </div>

      
  </div>
  <div class="w-full bg-gray-50 mt-3 dark:bg-gray-700 p-3 rounded-lg">
    <h1 class="text-gray-900 font-bold text-center">Unidade - Guarulhos</h1>
    <div class="flex flex-col lg:flex-row justify-center  gap-3 mb-2">
      <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
        <dt class="w-48 h-48 rounded-full bg-orange-100 dark:bg-gray-500 text-orange-600 dark:text-orange-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalCadastrado }}</dt>
        <dd class="text-orange-600 dark:text-orange-300 text-sm font-medium">Total de Cadastros Ativos</dd>
      </dl>
      <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
        <dt class="w-48 h-48 rounded-full bg-yellow-100 dark:bg-gray-500 text-yellow-600 dark:text-teal-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalPendente }}</dt>
        <dd class="text-yellow-600 dark:text-teal-300 text-sm font-medium">Processos em Andamento</dd>
      </dl>
      <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
        <dt class="w-48 h-48 rounded-full bg-green-100 dark:bg-gray-500 text-green-600 dark:text-blue-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalFinalizado }}</dt>
        <dd class="text-green-600 dark:text-green-300 text-sm font-medium">Processos Finalizado</dd>
      </dl>
    </div>
  </div>
    <div class="w-full bg-gray-50 mt-3 dark:bg-gray-700 p-3 rounded-lg">
      <h1 class="text-gray-900 font-bold text-center">Unidade - Jaguaré</h1>
      <div class="flex flex-col lg:flex-row justify-center  gap-3 mb-2">
        <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
          <dt class="w-48 h-48 rounded-full bg-orange-100 dark:bg-gray-500 text-orange-600 dark:text-orange-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalCadastrado }}</dt>
          <dd class="text-orange-600 dark:text-orange-300 text-sm font-medium">Total de Cadastros Ativos</dd>
        </dl>
        <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
          <dt class="w-48 h-48 rounded-full bg-yellow-100 dark:bg-gray-500 text-yellow-600 dark:text-teal-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalPendente }}</dt>
          <dd class="text-yellow-600 dark:text-teal-300 text-sm font-medium">Processos em Andamento</dd>
        </dl>
        <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
          <dt class="w-48 h-48 rounded-full bg-green-100 dark:bg-gray-500 text-green-600 dark:text-blue-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalFinalizado }}</dt>
          <dd class="text-green-600 dark:text-green-300 text-sm font-medium">Processos Finalizado</dd>
        </dl>
      </div>


    </div>
    <div class="w-full bg-gray-50 mt-3 dark:bg-gray-700 p-3 rounded-lg">
      <h1 class="text-gray-900 font-bold text-center">Unidade - Limão</h1>
      <div class="flex flex-col lg:flex-row justify-center  gap-3 mb-2">
        <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
          <dt class="w-48 h-48 rounded-full bg-orange-100 dark:bg-gray-500 text-orange-600 dark:text-orange-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalCadastrado }}</dt>
          <dd class="text-orange-600 dark:text-orange-300 text-sm font-medium">Total de Cadastros Ativos</dd>
        </dl>
        <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
          <dt class="w-48 h-48 rounded-full bg-yellow-100 dark:bg-gray-500 text-yellow-600 dark:text-teal-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalPendente }}</dt>
          <dd class="text-yellow-600 dark:text-teal-300 text-sm font-medium">Processos em Andamento</dd>
        </dl>
        <dl class=" my-2 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
          <dt class="w-48 h-48 rounded-full bg-green-100 dark:bg-gray-500 text-green-600 dark:text-blue-300 text-2xl font-medium flex items-center justify-center mb-1">{{ $totalFinalizado }}</dt>
          <dd class="text-green-600 dark:text-green-300 text-sm font-medium">Processos Finalizado</dd>
        </dl>
      </div>

@endsection