@extends('layouts.default')
@section('title', 'DashBoard')
@section('content')
<style>
    .small-box {
        height: 105px;
    }
    .link-dinamico .icon {
        font-size: 70px;
        top: 0;
        position: absolute;
        width: 100%;
        text-align: right;
        right: 15px;
    }
</style>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100" rel="stylesheet" />
<div class='form-row mt-3'>
    <div class="col-lg-4 col-sm-6">
        <div class="small-box bg-purple">
            <a href="{{ route('documentos_associado', []) }}" class="small-box-footer">

                <div class="inner">
                    <h3>Meus Documentos</h3>
                </div>
                <div class="icon">
                    <i class="fas fa-folder-open"></i>
                </div>
                <span class="text-white"> Acessar <i class="fa fa-arrow-circle-right"></i> </span>
            </a>
        </div>
    </div>
    <div class="col-lg-4 col-sm-6">
        <div class="small-box bg-info">
            <a href="{{ route('cobrancas_associado', []) }}" class="small-box-footer">

                <div class="inner">
                    <h3>Minhas cobranças</h3>
                </div>
                <div class="icon">
                    <i class="fas fa-search-dollar"></i>
                </div>
                <span class="text-white"> Acessar <i class="fa fa-arrow-circle-right"></i> </span>
            </a>
        </div>
    </div>
    <div class="col-lg-4 col-sm-6">
        <div class="small-box bg-blue">
            <a href="{{ route('associado.perfil', []) }}" class="small-box-footer">

                <div class="inner">
                    <h3>Meu Perfil</h3>
                </div>
                <div class="icon">
                    <i class="fas fa-user-circle"></i>
                </div>
                <span class="text-white"> Acessar <i class="fa fa-arrow-circle-right"></i> </span>
            </a>
        </div>
    </div>
    <div class="col-lg-4 col-sm-6">
        <div class="small-box bg-green">
            <a href="{{ route('cronogramas', []) }}" class="small-box-footer">
                <div class="inner">
                    <h3>Meu Cronograma</h3>
                </div>
                <div class="icon">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <span class="text-white"> Acessar <i class="fa fa-arrow-circle-right"></i> </span>
            </a>
        </div>
    </div>
    @if ($mostrar_relatorio_viagens_ao_associado)
        <div class="col-lg-4 col-sm-6"><div class="small-box bg-lime">
                <a href="{{ route($rotaDeDetalhamentoDeViagens) }}" class="small-box-footer">
                    <div class="inner">
                        <h3>Minhas Viagens</h3>
                    </div>
                    <div class="icon">
                        <i class="fas fa-bus-alt"></i>
                    </div>
                    <span class="text-white">
                        Acessar <i class="fa fa-arrow-circle-right"></i>
                    </span>
                </a>
            </div>
        </div>
    @endif
    <div class="col-lg-4 col-sm-6">
        <div class="small-box bg-red">
            <a href="{{ route('carteirinha', []) }}" class="small-box-footer">

                <div class="inner">
                    <h3>Gerar Carteirinha</h3>
                </div>
                <div class="icon">
                    <i class="fas fa-id-card-alt"></i>
                </div>
                <span class="text-white"> Acessar <i class="fa fa-arrow-circle-right"></i> </span>
            </a>
        </div>
    </div>
    @foreach($linksDinamicos as $link)
        <div class="col-lg-4 col-sm-6 link-dinamico">
            <div class="small-box bg-{{$possiveisCores[array_rand($possiveisCores, 1)]}}">
                <a href="{{ $link->url }}" class="small-box-footer" target="_blank">
                    <div class="inner">
                        <h3 style="font-size: 1.6rem">{{ $link->nome }}</h3>
                    </div>
                    <div class="icon">
                        <span class="material-symbols-outlined" style="font-size: 70px;">{{ $link->icon }}</span>
                    </div>
                    <span class="text-white"> Acessar <i class="fa fa-arrow-circle-right"></i> </span>
                </a>
            </div>
        </div>
    @endforeach
</div>
@stop