@extends('theme::layout.layout_dashboard')

@section('title', ''.env('APP_NAME_DASHBOARD').' | Dashboard')

@section('content')
<div>
	<div>
		<h2>Bem-vindo ao Dashboard!</h2>
		<dl class="mt-2 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
			<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden">
			  <dt>
			    <div class="absolute bg-indigo-500 rounded-md p-3">
			      <i data-feather="users" style='width: 1.2em; color: #fff;' class='mr-1  ml-1'></i>
			    </div>
			    <p class="ml-16 text-sm font-medium text-gray-500 truncate">Usuários</p>
			  </dt>
			  <dd class="ml-16 pb-6 flex items-baseline sm:pb-7">
			    <p class="text-2xl font-semibold text-gray-900">{{ \Illuminate\Support\Facades\DB::table('users')->count() }}</p>
			    @if($percentage_users > 0)
			        <p class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
			    	    <svg class="self-center flex-shrink-0 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
				           <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
				        </svg>
				        {{ $percentage_users }}%
				    </p>
				@else
				    <p class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
					    <svg class="self-center flex-shrink-0 h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
				           <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
				        </svg>
				        {{ $percentage_users }}%
				    </p>
				@endif
			    <div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6">
			      <div class="text-sm">
			        <a href="{{ url('/admin/users') }}" class="font-medium text-indigo-600 hover:text-indigo-500" style="text-transform: uppercase; font-size: 0.9em;"> Ver tudo</a>
			      </div>
			    </div>
			  </dd>
			</div>

			<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden">
			  <dt>
			    <div class="absolute bg-indigo-500 rounded-md p-3">
			      <!-- Heroicon name: outline/mail-open -->
			      <i data-feather="user" style='width: 1.2em; color: #fff;' class='mr-1  ml-1'></i>
			    </div>
			    <p class="ml-16 text-sm font-medium text-gray-500 truncate">Moderadores</p>
			  </dt>
			  <dd class="ml-16 pb-6 flex items-baseline sm:pb-7">
			    <p class="text-2xl font-semibold text-gray-900">{{ \Illuminate\Support\Facades\DB::table('admins')->count() }}</p>
			    @if($percentage_admins > 0)
			        <p class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
			    	    <svg class="self-center flex-shrink-0 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
				           <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
				        </svg>
				        {{ $percentage_admins }}%
				    </p>
				@else
				    <p class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
					    <svg class="self-center flex-shrink-0 h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
				           <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
				        </svg>
				        {{ $percentage_admins }}%
				    </p>
				@endif
			    <div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6">
			      <div class="text-sm">
			        <a href="{{ url('/admin/admins') }}" class="font-medium text-indigo-600 hover:text-indigo-500" style="text-transform: uppercase; font-size: 0.9em;"> Ver tudo</a>
			      </div>
			    </div>
			  </dd>
			</div>

			<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden">
			  <dt>
			    <div class="absolute bg-indigo-500 rounded-md p-3">
			      <i data-feather="layout" style='width: 1.2em; color: #fff;' class='mr-1  ml-1'></i>
			    </div>
			    <p class="ml-16 text-sm font-medium text-gray-500 truncate">Páginas</p>
			  </dt>
			  <dd class="ml-16 pb-6 flex items-baseline sm:pb-7">
			    <p class="text-2xl font-semibold text-gray-900">{{ \Illuminate\Support\Facades\DB::table('pages')->count() }}</p>
			    @if($percentage_Pages > 0)
			        <p class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
			    	    <svg class="self-center flex-shrink-0 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
				           <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
				        </svg>
				        {{ $percentage_Pages }}%
				    </p>
				@else
				    <p class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
					    <svg class="self-center flex-shrink-0 h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
				           <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
				        </svg>
				        {{ $percentage_Pages }}%
				    </p>
				@endif
			    <div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6">
			      <div class="text-sm">
			        <a href="{{ url('/admin/pages') }}" class="font-medium text-indigo-600 hover:text-indigo-500" style="text-transform: uppercase; font-size: 0.9em;"> Ver tudo</a>
			      </div>
			    </div>
			  </dd>
			</div>
		</dl>
	</div>
</div>
@endsection