@extends('admin.template.layout')

@section('title', 'home')
@section('conteudo')
    <div class="container-fluid px-4 py-5 ">
        <div class="row justify-content-center ">
            <div class="col-12 shadow-lg rounded-3 py-3 px-4 " style="max-width: 1400px;">
                {{-- Cabeçalho com Boas-vindas --}}
                <div class="d-sm-flex align-items-center justify-content-between mb-4">
                    <h1 class="h3 mb-0 text-orange-dark">Bem vindo, {{ Auth::user()->first_name }}</h1>
                </div>

                {{-- card-principal --}}

                <div class="card border-0 shadow-lg">
                    <div class="card-header py-3 px-4 mb-3 shadow-lg bg-opacity-10 border-0">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h5 class="mb-0 text-orange-dark">
                                    <i class="fas fa-folder me-2"></i>Processos
                                </h5>
                                <p class="text-muted small mb-0 mt-1">
                                    <i class="fas fa-info-circle me-1"></i>
                                    {{ $processCount }} processo(s) encontrado(s)
                                </p>
                            </div>
                            <div class="col-md-6">
                                
                            </div>
                        </div>
                    </div>
                    <div class="card-body shadow-sm">
                        <div class="mb-3 text-center">
                            <h3 class="m-3 px-3 py-2">Suas candidaturas</h3>


                            @if ($processCount === 0)
                                
                                <p id="texto-redirecionamento" class="mt-4 mb-3 mx-auto">
                                    Você ainda não se candidatou a nenhuma vaga. Explore as oportunidades disponíveis e encontre a vaga perfeita para você!
                                </p>
                                <a href="{{ route('dashboard') }}" id="buttom-dashboard" class="btn-sm-brown-900 text-sm mt-3 px-4 py-2">
                                   <i class="fa-solid fa-magnifying-glass"></i> Ver Vagas
                                </a>
                            @else
                                <span class="text-muted bg-light">
                                    Confira como está seu processo seletivo
                                </span>


                                @component('candidate._components.card_process', [
                                    'process' => $process,
                                    'formESocial' => $formESocial,
                                    'schoolOptions' => $schoolOptions,
                                    'dependentOptions' => $dependentOptions,
                                ])
                                @endcomponent


                            @endif

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

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


    <script>
        function showFormDocs(id) {
            document.getElementById('form-details-' + id).style.display = 'block';
            document.getElementById('sim-' + id).style.display = 'none';
            document.getElementById('enviar-' + id).style.display = 'inline-block';
        }
    </script>
@endsection

<style scoped>

    #texto-redirecionamento {
        max-width: 420px;
        line-height: 1.6;
        font-family: cursive;
        font-size: 1.2rem;
        text-align: center;
    }

    @media (max-width: 576px) {
        #texto-redirecionamento {
            font-size: 1rem;
            padding: 0 15px;
            font-family: cursive;
        }
    }

</style>