@extends('layouts.app')

@section('conteudo')

<br>
<center>
  @if (session('erro'))
  <div class="alert alert-danger">
    {{ session('erro') }}
  </div>
  @endif
</center>


<!-- Hero -->
<div class="bg-dark" style="margin-top: 5%;">
  <div class="bg-black-75">
    <div class="content ">
      <div class="py-4 text-center" style="margin-top:-3%">
        <h1 class="fw-bold text-white mb-2">
          {{$categoria->descricao}}
        </h1>
        <h2 class="h3 fw-normal text-white-75">

        </h2>

      </div>
      <div style="margin-left:90%; margin-top:-5%">
        @can('pode_editar_categoria')
        <a class="btn btn-primary" href="/editar_categoria/{{$categoria->id}}" data-toggle="click-ripple">
          <i class="fa fa-pencil-alt" aria-hidden="true"></i>
        </a>
        @endcan
        @can('pode_visualizar_categoria')
        <a class="btn  btn-primary my-2" href="/categorias">
          <i class="fa fa-reply" aria-hidden="true"></i>
        </a>
        @endcan
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->

{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_categoria')

<!-- Page Content -->
<div class="content content-boxed">
  <!-- Meta -->
  <div class="row items-push">
    <!-- <div class="col-md-6">
      <a class="block block-rounded block-bordered block-link-shadow h-100 mb-0" href="javascript:void(0)">
        <div class="block-content block-content-full text-center bg-body-light">
          <img class="img-avatar img-avatar-thumb" src="{{$categoria->foto}}" alt="">
          <div class="mt-2">
            <p class="fw-semibold mb-0">
              Sigla: {{$categoria->sigla}}
            </p>
          </div>
        </div>
        <div class="block-content block-content-full text-center">
          <div class="row g-sm">
            <div class="col-6">
              <div class="item item-circle mx-auto">
                <i class="fa fa-fw fa-boxes fa-2x text-dark"></i>
              </div>
              <p class="text-muted mb-0">
                {{$categoria->cor}}
              </p>
            </div>
            <div class="col-6">
              <div class="item item-circle mx-auto">
                <i class="fa fa-fw fa-users fa-2x text-dark"></i>
              </div>
              <p class="text-muted mb-0">
                {{$categoria->cor_texto}}
              </p>
            </div>
          </div>
        </div>
      </a>
    </div> -->
    <div class="col-md-12">
      <div class="block block-rounded block-bordered block-link-shadow h-100 mb-0">
        <div class="block-content">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td>
                  <span class="text-warning">
                    <i class="fa fa-fw fa-star"></i>
                  </span>
                  Nome: {{$categoria->descricao}}
                </td>
              </tr>
              <tr>
                <td>
                  <span class="text-warning">
                    <i class="fa fa-fw fa-asterisk"></i>
                  </span>
                  Sigla: {{$categoria->sigla}}
                </td>
              </tr>
              <tr>
                <td>
                  <span class="text-warning">
                    <i class="fa fa-fw fa-asterisk"></i>
                  </span>
                  Área: {{$categoria->area}}
                </td>
              </tr>
              <tr>
                <td>
                  <span class="text-warning">
                    <i class="fa fa-fw fa-asterisk"></i>
                  </span>
                  Ordem: {{$categoria->ordem}}
                </td>
              </tr>
              <tr>
                <td>
                  <span class="text-warning">
                    <i class="fa fa-fw fa-asterisk"></i>
                  </span>
                  Status: {{$categoria->status}}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- <div class="row">
    <div class="col-sm-6">
      <div class="block block-rounded">
        <div class="block-header block-header-default">
          <h3 class="block-title">Endereço</h3>
        </div>
        <div class="block-content">
          <div class="fs-4 mb-1">{{$categoria->endereco}}</div>
          <address class="fs-sm">
            {{$categoria->numero}}<br>
            {{$categoria->complemento}}<br>
            {{$categoria->bairro}}<br>
            {{$categoria->telefone1}}<br>
          </address>
        </div>
      </div>
    </div> -->
  <!-- <div class="col-sm-6">
      <div class="block block-rounded">
        <div class="block-header block-header-default">
          <h3 class="block-title">Outras Informações</h3>
        </div>
        <div class="block-content">
          <div class="fs-4 mb-1">Assinatura: {{$categoria->assinatura}}</div>
          <address class="fs-sm">
            Organização: {{$categoria->organizacao_id}}<br>
            Projeto: {{$categoria->projeto_id}}<br>
            Prestador: {{$categoria->funcionario_id}}<br>
            Período:{{$categoria->categoria_id}}<br>
          </address>
        </div>
      </div>
    </div> -->
</div>


<br><br><br>


<!-- Pagination -->
<!-- <nav aria-label="Photos Search Navigation">
    <ul class="pagination justify-content-end mt-2">
      <li class="page-item">
        <a class="page-link" href="javascript:void(0)" tabindex="-1" aria-label="Previous">
          Prev
        </a>
      </li>
      <li class="page-item active">
        <a class="page-link" href="javascript:void(0)">1</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:void(0)">2</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:void(0)">3</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:void(0)">4</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:void(0)" aria-label="Next">
          Next
        </a>
      </li>
    </ul>
  </nav> -->
<!-- END Pagination -->
</div>
<!-- END All Products -->
<!-- END Page Content -->
{{-- Pra quem não tem permissão de visualizar essa página aparecerá a mensagem abaixo --}}
@else

<center>
  <br>
  <div class="alert alert-danger" role="alert">
    Você não tem permissão pra visualizar essa página!
  </div>
</center>

@endcan


@endsection