@extends('layouts.app')

@section('content')
<main class="sm:container sm:mx-auto sm:mt-10 my-auto">
    <div class="w-full sm:px-6">

        @if (session('status'))
            <div class="text-sm border border-t-8 rounded text-green-700 border-green-600 bg-green-100 px-3 py-4 mb-4" role="alert">
                {{ session('status') }}
            </div>
        @endif

        <section class="flex flex-col break-words bg-white sm:border-1 sm:rounded-md sm:shadow-lg">

            <header class="font-semibold bg-gray-200 text-gray-700 py-5 px-6 sm:py-6 sm:px-8 sm:rounded-t-md">
                Painel Público Principal
            </header>

                {{-- INÍCIO CORPO DO DASHBOARD --}}

                <div class="flex flex-col justify-center text-center items-center">

                    <div class="flex items-center justify-start py-9 px-8">

                        <div class="flex items-center flex-col text-center justify-center h-full">
                            <div>
                                <h1 class="mb-6 text-gray-600 font-light tracking-wider text-4xl sm:mb-8 sm:text-6xl">
                                    Seja Bem Vindo Visitante!
                                </h1>
                                
                                <h2 class="mb-6 text-gray-600 font-light tracking-wider text-3xl sm:mb-8 sm:text-4xl border-b-2 border-gray-300">
                                    Listagens de Credenciados:
                                </h2>

                                <ul class="flex flex-col space-y-2 sm:flex-row sm:flex-wrap sm:space-x-8 sm:space-y-0 justify-center">

                                    @foreach ($listagens as $listagem)
                                    
                                    <li class="flex max-w-sm rounded px-8 py-2 text-center justify-center items-start overflow-hidden shadow-lg bg-[#071D41] text-white text-2xl sm:text-3xl
                                    hover:bg-[#071D41]/75 focus:outline-none focus:ring-2 focus:ring-[#071D41] focus:ring-opacity-20">
                                        <a href="{{ route('listar-credenciados', $listagem->slug) }}" class="no-underline text-sm font-normal uppercase" title="Credenciado">Profissionais Credenciados de {{$listagem->nome}}</a>
                                    </li>

                                    @endforeach

                                </ul>

                                <h2 class="mb-6 mt-6 text-gray-600 font-light tracking-wider text-3xl sm:mb-8 sm:text-4xl border-b-2 border-gray-300">
                                    Listagens de Credenciados Contratados:
                                </h2>

                                <ul class="flex flex-col space-y-2 sm:flex-row sm:flex-wrap sm:space-x-8 sm:space-y-0 justify-center">
                                
                                    <li class="flex max-w-sm rounded px-6 py-4 text-center justify-center items-center overflow-hidden shadow-lg bg-[#071D41] text-white text-2xl sm:text-3xl
                                    hover:bg-[#071D41]/75 focus:outline-none focus:ring-2 focus:ring-[#071D41] focus:ring-opacity-20">
                                        <a href="{{ route('listar-contratacao') }}" class="no-underline text-sm font-normal uppercase" title="Credenciado">Profissionais Credenciados Contratados</a>
                                    </li>

                                </ul>    

                                <h2 class="mb-6 mt-6 text-gray-600 font-light tracking-wider text-3xl sm:mb-8 sm:text-4xl border-b-2 border-gray-300">
                                    Links Gerais:
                                </h2>

                                <ul class="flex flex-col space-y-2 sm:flex-row sm:flex-wrap sm:space-x-8 sm:space-y-0 justify-center">
                                
                                    <li class="flex max-w-sm rounded px-6 py-4 text-center justify-center items-center overflow-hidden shadow-lg bg-[#071D41] text-white text-2xl sm:text-3xl
                                    hover:bg-[#071D41]/75 focus:outline-none focus:ring-2 focus:ring-[#071D41] focus:ring-opacity-20">
                                        <a href="https://www.gov.br/funarte/pt-br" class="no-underline text-sm font-normal uppercase" title="Funarte">Website Funarte</a>
                                    </li>

                                </ul>   

                            </div>
                        </div>
                    </div>

                </div>

                {{-- FIM CORPO DO DASHBOARD --}}

            </div>
        </section>
    </div>
</main>
@endsection