@extends('admin.template.layout')
@section('title', 'documentação')
@section('conteudo')
    <div class="card mt-3">
        <div class="card-header p-4 d-flex justify-content-center ">

            <div class="d-flex align-items-center gap-2">
                <i class="fas fa-upload fa-lg text-black"></i>
                <h6 class="text-black mb-0">Preenchimento de formulário do candidato</h6>
            </div>
        </div>
        <!-- card BODY -->
        <div class="card-body" id="esocial-wizard" data-esocial-id="{{ $formESocial->id ?? '' }}"
            data-process-id="{{ $process->id }}" data-current-step="{{ $process->step }}"
            data-esocial='@json($formESocial ?? (object) [])' style="min-height: 550px">

            <div class="alert alert-info-soft d-flex align-items-center mb-3">
                <i class="fas fa-info-circle me-2"></i>
                Preencha os campos obrigatórios para prosseguir com o envio do formulário.
            </div>

            <!-- STEPS -->
            <div class="wizard-container table-responsive py-2 px-2">


                <div class="wizard-icons">
                    <div class="wizard-step" data-target-step="1">
                        <a href="#" class="btn-click-steps btn-edit-step" data-go-step="1">
                            <div class="wizard-circle">

                                <span class="wizard-check">
                                    <i class="fa-solid fa-check"></i>
                                </span>
                                <i class="fa-solid fa-1 icon-step"></i>

                            </div>
                        </a>
                        <span class="wizard-text"><i class="fa-solid fa-person"></i> Informações</span>
                    </div>

                    <div class="wizard-step" data-target-step="2">
                        <a href="#" class="btn-click-steps btn-edit-step" data-go-step="2">
                            <div class="wizard-circle"><span class="wizard-check">
                                    <i class="fa-solid fa-check"></i>
                                </span><i class="fa-solid fa-2"></i></div>
                        </a>
                        <span class="wizard-text"><i class="fa-solid fa-map-location-dot"></i> Endereço</span>
                    </div>

                    <div class="wizard-step" data-target-step="3">
                        <a href="#" class="btn-click-steps btn-edit-step" data-go-step="3">
                            <div class="wizard-circle"><span class="wizard-check">
                                    <i class="fa-solid fa-check"></i>
                                </span><i class="fa-solid fa-3"></i></div>
                        </a>
                        <span class="wizard-text"><i class="fa-regular fa-id-card"></i> Dados Pessoais</span>
                    </div>

                    <div class="wizard-step" data-target-step="4">
                        <a href="#" class="btn-click-steps btn-edit-step" data-go-step="4">
                            <div class="wizard-circle"><span class="wizard-check">
                                    <i class="fa-solid fa-check"></i>
                                </span><i class="fa-solid fa-4"></i></div>
                            <span class="wizard-text"><i class="fa-solid fa-children"></i> Adicionais</span>
                        </a>
                    </div>

                    <div class="wizard-step" data-target-step="5">
                        <a href="#" class="btn-click-steps btn-edit-step" data-go-step="5">
                            <div class="wizard-circle"><span class="wizard-check">
                                    <i class="fa-solid fa-check"></i>
                                </span><i class="fa-solid fa-5"></i>
                            </div>
                        </a>
                        <span class="wizard-text"><i class="fa-solid fa-file"></i> Documentos Pessoais</span>
                    </div>

                    <div class="wizard-step" data-target-step="6">
                        <a href="#" class="btn-click-steps btn-edit-step" data-go-step="6">
                            <div class="wizard-circle"><span class="wizard-check">
                                    <i class="fa-solid fa-check"></i>
                                </span><i class="fa-solid fa-6"></i>
                            </div>
                        </a>
                        <span class="wizard-text"><i class="fa-solid fa-file"></i> Documentos Dependentes</span>
                    </div>

                    <div class="wizard-step" data-target-step="7">
                        <a href="#" class="btn-click-steps btn-edit-step" data-go-step="7">
                            <div class="wizard-circle"><span class="wizard-check">
                                    <i class="fa-solid fa-check"></i>
                                </span><i class="fa-solid fa-7"></i></div>
                        </a>
                        <span class="wizard-text"><i class="fa-solid fa-pen-to-square"></i> Confirmação</span>
                    </div>

                </div>
            </div>

            <!-- CONTEÚDO DAS ETAPAS -->
            <div class="step" data-step="1">@include('candidate.forms.formDocumentClt.steps.form-esocial-one')</div>
            <div class="step " data-step="2">@include('candidate.forms.formDocumentClt.steps.form-esocial-two')</div>
            <div class="step" data-step="3">@include('candidate.forms.formDocumentClt.steps.form-esocial-three')</div>
            <div class="step" data-step="4">@include('candidate.forms.formDocumentClt.steps.form-esocial-four')</div>
            <div class="step " data-step="5">@include('candidate.forms.formDocumentClt.steps.documents-personals')</div>
            <div class="step" data-step="6">@include('candidate.forms.formDocumentClt.steps.documents-dependents')</div>
            <div class="step" data-step="7">@include('candidate.forms.formDocumentClt.steps.confirm-form')</div>


        </div>


        <div class="card-footer border-0 px-3 pb-3 d-flex justify-content-center">
            <button class="btn btn-prevStep px-3 d-none" id="prevStep">Voltar</button>
            <button class="btn btn-nextStep px-4 fw-semibold ms-2" id="nextStep">
                <i class="fas fa-save me-2"></i> Avançar
            </button>
        </div>

        <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 2000">
        </div>




    </div>
@endsection