@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 p-3" id="pjCoop-wizard" data-pj-Coop-id="{{ $formPjCoop->id ?? '' }}"
            data-current-step="{{ $process->step }}" data-process-id="{{ $process->id }}"
            data-pj-Coop='@json($formPjCoop ?? (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"></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="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-money-check-dollar"></i></i> Dados Bancarios</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-solid fa-file"></i> Documentos 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>
                        </a>
                        <span class="wizard-text"><i class="fa-solid fa-file"></i> Documentos Dependentes</span>
                    </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-pen-to-square"></i> Confirmação</span>
                    </div>

                </div>
            </div>

            <!-- CONTEÚDO DAS ETAPAS -->
            <div class="step" data-step="1">@include('candidate.forms.formDocumentPjCoop.steps.form')</div>
            <div class="step" data-step="2">@include('candidate.forms.formDocumentPjCoop.steps.bank_data')</div>
            <div class="step" data-step="3">@include('candidate.forms.formDocumentPjCoop.steps.documents-personals')</div>
            <div class="step" data-step="4">@include('candidate.forms.formDocumentPjCoop.steps.documents-dependents')</div>
            <div class="step" data-step="5">@include('candidate.forms.formDocumentPjCoop.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