@extends('manual.layout')
@section('header_content')
<style type="text/css">
    @media (max-width: 600px) {
        .container-img img{
            width: 30% !important;
            border-radius: 50%;
            max-height: 90px !important;

        }
        ._card{
            display: block !important;
            padding-top: 20px !important;
            margin-bottom: 30px;
        }
        .container-img{
            padding: 0px 30px 0px 30px;
            width: 100% !important;
            display: flex  !important;
            justify-content: center !important;
            align-items: center !important;
            max-height: 90px !important;
        }

        .content-event {
            width: 100% !important;
            display: block;
            padding: 15px;
        }

        .options-buttons {
            justify-content: flex-start;
            text-align: center;
        }
        .name-event{
            text-align: center;
        }
        .name-event h2{
            margin-bottom: 0px;
        }
        .button-2{
            margin-right: 0px !important;
        }
    }

    .name-event h2{
        margin-bottom: 0px;
    }
    .name-event p{
        margin-bottom: 5px;
    }
    ._card{
        background: #fff;
        padding: 0px;
        display: flex;
        justify-content: normal;
        align-items: center;
        flex: wrap;
        cursor: pointer;
    }
    .content-event{
        width: 100%;
        display: block;
        padding: 20px;
    }

    .options-buttons{
        justify-content: flex-start;
    }

    .options-buttons button{
        border-radius: 8px;
        padding: 8px 12px 8px 12px;
        font-size: 12px;
        font-weight: 600;
        margin-right: 15px; 
        cursor: pointer;
    }

    .options-buttons .button-1{
        border: 2px solid #97BB49;
        background: #fff;
        color: #97BB49;
    }

    .options-buttons .button-2{
        border: 2px solid #F62D51;
        background: #fff;
        color: #F62D51;
    }

    .button-success{
        border: 2px solid #97BB49;
        background-color: #97BB49;
        color: #fff;
    }

    .button-danger{
        border: 2px solid #F62D51;
        background-color: #F62D51;
        color:#fff;
    }

    .container-img{
        width: 20%;
    }
    .container-img img{
        width: 100%;
        height: auto;
        max-height: 170px;
    }

    ._card:hover{
        box-shadow: 0px 19px 20px 0px rgba(212,212,212,1);
        transform: scale(1.03);
        transition: all .4s;
    }
</style>
@endsection
@section('content')
    @foreach ($modulos as $modulo_perfil)
        <div class="row ">
            <div class="col-sm-12">
                <div class="_card" onclick="VerDetalles({{ $modulo_perfil->id_manual_modulo }})">
                    <div class="content-event">
                        <div class="name-event">
                            <h5><b>{{ $modulo_perfil->modulo->nombre}}</b></h5>
                            <p>{{ $modulo_perfil->modulo->descripcion}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div><br>
    @endforeach

    <script>
        function VerDetalles(id_modulo){
            location.href = `{{ config('global.url_base') }}/manual_usuario/modulo/${id_modulo}`
        }
    </script>
@endsection