@extends("layouts.zones.diagnose")
@section('content')
<div id="rs-services" class="mt-30 pb-130">
    <div class="container-fluid">
        <div class="row  text-center">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="empresarial">
                    <div class="empresarialh">
                      <h3 class="fuentesensi"></h3>
                        <p style="color: #000; font-size: 12px">
                        </p>
                        {{-- <div class="botones">
                            <div class="row">
                                <div class="col-md-6"> <button class="botonesap fuentesensip float-right" onclick="showHideNacional()">NACIONAL</button></div>
                                <div class="col-md-6"><button class="botonesap fuentesensip">INTERNACIONAL</button></div>
                            </div>
                        </div> --}}
                    </div>
                     
                  </div>
            </div> 

            <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="personal">
                    <div class="personalh">
                      <h2 class="fuentesensip">Test <br> personal</h2>
                        <p style="color: #000; font-size: 16px" class="fientelig">La diversidad es un factor social que de una u otra forma atraviesa
                            a todas las personas. Reconocerse en ella y evaluar la experiencia
                            personal con este test permitira poder aportar a las
                            transformaciones que requiera el entorno.
                        </p>
                        <div class="botones">
                            <div class="text-center">
                                <a href="{{url('/diagnosticar/q1')}}" type="button" class="btn btn-sm font-weight-bold btn-dark bg-black diagnose-text-color mt-1 rounded">
                                    HACER TEST <i class="ml-60 fa-solid fa-circle-plus"></i>
                                </a>
                            </div>
                            
                        </div>
                    </div>
                     
                  </div>
            </div> 

            

            {{-- <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="col-md-12 border border-dark card-body card-diagnose-personal d-block"  id="personalCard" onclick="selectCard(2)">
                    <div class="align-middle h-100">
                        <h2 class="mt-5">Test <br> personal</h2>
                        <img src="{{asset('assets/images/flecha-removebg-preview.png')}}" class="" alt="">
                    </div>
                </div>
                <div class="col-md-12 border border-dark card-body card-diagnose-personal strong-card d-none"  id="personalCardDescription" onclick="selectCard(2)">
                    <div class="align-middle h-100">
                        <h3 class="mb-0">Test <br> personal</h3>
                        <p class="m-0">La diversidad es un factor social que de una u otra forma atraviesa
                            a todas las personas. Reconocerse en ella y evaluar la experiencia
                            personal con este test permitira poder aportar a las
                            transformaciones que requiera el entorno.</p>
                        <div class="text-left">
                            <a href="{{url('/diagnosticar/q1')}}" type="button" class="btn btn-sm font-weight-bold btn-dark bg-black diagnose-text-color mt-1 rounded">
                                HACER TEST <i class="ml-60 fa-solid fa-circle-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>  --}}
        </div>
    </div>       
</div>

<section>
    <div class="row text-center">
        <div class="col-lg-1 col-md-1"></div>
        <div class="col-lg-2 col-md-2"><a href="sensibilizar.html" class="botonsr">Sensibilizar</a></div>
        <div class="col-lg-2 col-md-2"><a href="#" class="botonsr">Diagnosticar</a></div>
        <div class="col-lg-2 col-md-2"><a href="#" class="botonsr">Actuar</a></div>
        <div class="col-lg-2 col-md-2"><a href="#" class="botonsr">Evaluar</a></div>
        <div class="col-lg-2 col-md-2"><a href="sensibilizar.html" class="botonsr">Recomendados</a></div>
        <div class="col-lg-1 col-md-1"></div>
    </div>
</section>

@endsection

@section('scripts')

<script>
    function selectCard(card){
        if(card==1){
            $("#companyCard").addClass("strong-card");
            $("#personalCard").addClass("clarify");

            $("#companyCard").removeClass("clarify");
            $("#personalCard").removeClass("strong-card");


            $("#personalCard").addClass("d-block");
            $("#personalCard").removeClass("d-none");

            $("#personalCardDescription").removeClass("d-block");
            $("#personalCardDescription").addClass("d-none");
        }
        else{
            $("#personalCard").addClass("strong-card");
            $("#companyCard").addClass("clarify");
            $("#personalCard").removeClass("clarify");
            $("#companyCard").removeClass("strong-card");

            $("#personalCardDescription").addClass("d-block");
            $("#personalCardDescription").removeClass("d-none");

            $("#personalCard").removeClass("d-block");
            $("#personalCard").addClass("d-none");

        }
    }
</script>
@endsection