@extends("layouts.zones.act")
@section('content')
<div id="rs-services" class="mt-30 pb-130">
    <div class="container-fluid">
        <div class="row  text-center">
            <div class="col-lg-5 col-md-5 col-sm-12">
                <div class="col-md-12 border border-dark card-body card-act-guide act-card" id="guide" onclick="showContentCard('guide')">
                    <div class="align-middle h-200">
                        <h2 class="mt-92">Guia <br> metodológica</h2>
                        <img class="mb-40 arrow-act" id="arrow-guide" src="{{asset('assets/images/flecha-removebg-preview.png')}}" class="" alt="">
                        <div id="description-guide" class="description-act d-none">
                            <p>Esta herramienta es una hoja de ruta para que
                                pueda facilitar un taller pedagógico y de sensibilización sobre conductas, prácticas y acciones discriminatorias, y las herramientas disponibles para
                                eliminarlas y construir espacios diversos.</p>
                                <button type="button " class="btn btn-light send-button font-weight-bold">Enviar respuestas</button>                                
                        </div>
                    </div>
                </div>
            </div> 
            <div class="col-lg-7 col-md-7 col-sm-12">
                <div class="row">
                    <div class="col-md-12 border border-dark card-body card-act-activities act-card"  id="activities" onclick="showContentCard('activities')">
                        <div class="align-middle h-100">
                            <h2 class="mb-0">Actividades</h2>
                            <img src="{{asset('assets/images/flecha-removebg-preview.png')}}" class="" alt="">
                        </div>
                    </div>
                </div>
                <div class="row pt-15">
                    <div class="col-md-6 border border-dark card-body card-act-deal act-card"  id="deal" onclick="showContentCard('deal')">
                        <div class="align-middle h-100">
                            <h2 class="mb-0">Acuerdo no <br> vinculante</h2>
                            <img src="{{asset('assets/images/flecha-removebg-preview.png')}}" class="" alt="">
                        </div>
                    </div>
    
                    <div class="pr-30 col-md-6 border border-dark card-body card-act-policy act-card"  id="policy" onclick="showContentCard('policy')">
                        <div class="align-middle h-100">
                            <h2 class="mb-0">Política de <br> trabajo</h2>
                            <img src="{{asset('assets/images/flecha-removebg-preview.png')}}" class="" alt="">
                        </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 showContentCard(card){
        $(".act-card").addClass("clarify");
        $(".act-card").removeClass("strong-card");
        $(`#${card}`).removeClass("clarify");
        $(`#${card}`).addClass("strong-card");
        
        $(".arrow-act").addClass("d-inline");
        $(".description-act").addClass("d-none");
        
        $(`#arrow-${card}`).addClass("d-none");
        $(`#arrow-${card}`).removeClass("d-inline");
        $( `#description-${card}`).removeClass("d-none");
        $(`#description-${card}`).addClass("cddd");
    }
</script>
@endsection