@extends('layouts.app')
@section('title', 'ISIPP - Cursos virtuales')
@section('css')
<style type="text/css">
    .modalimagen {
        background: url("{{asset('/archivo/otros/milena.png')}}") no-repeat center center;
        background-size: cover;
    }
</style>
@endsection
@section('content')
<!-- Cursos virtuales -->
<section id="recent-blog-posts" class="recent-blog-posts section">
    <div class="container section-title" data-aos="fade-up">
        <h2 style="color: #ed3c0d;">Cursos virtuales</h2>
        <input type="text" class="form-control" v-model="txtbuscarcg" placeholder="Buscar cursos virtuales..." @keyup="getcursograbado()">
    </div>
    <div class="container">
        <div class="row gy-5">
            <div v-for="cur in cursograbado" class="col-xl-4 col-md-6">
                <div class="post-item position-relative h-100 border border-danger" data-aos="fade-up" data-aos-delay="100">
                    <div class="post-img position-relative overflow-hidden">
                        <img v-bind:src="'{{ asset('/archivo')}}'+'/'+cur.imgcur" class="img-fluid" alt="">
                        <span class="post-date">@{{cur.tipocur}} - @{{cur.modcur}}</span>
                    </div>
                    <div class="post-content d-flex flex-column">
                        <h3 class="post-title">@{{cur.nomcur}}</h3>
                        <div class="meta d-flex align-items-center">
                            <div class="d-flex align-items-center">
                                <img src="{{ asset('/archivo/icono/profesor.png')}}"> <span class="ps-2">@{{cur.apeper}} @{{cur.nomper}}</span>
                            </div>
                            <span class="px-3 text-black-50">/</span>
                            <div class="d-flex align-items-center">
                                <img src="{{ asset('/archivo/icono/vivo.png')}}"> <span class="ps-2"><b>Virtual en vivo</b></span>
                            </div>
                        </div>
                        <hr>
                        <div class="meta d-flex align-items-center">
                            <div class="d-flex align-items-center">
                                <img src="{{ asset('/archivo/icono/calendario.png')}}"> <span class="ps-2"><b>Inicio</b><br>¡Ahora mismo!</span>
                            </div>
                            <span class="px-3 text-black-50">/</span>
                            <div class="d-flex align-items-center">
                                <img src="{{ asset('/archivo/icono/certificado.png')}}"> <span class="ps-2"><b>Certificación </b><br>@{{cur.canthorascur}}</span>
                            </div>
                        </div>
                        <hr>
                        <div class="meta d-flex align-items-center" v-if="cur.preccur!=cur.precdescu">
                            <div class="d-flex align-items-center">
                                <img src="{{ asset('/archivo/icono/precio.png')}}"><span class="ps-2 text-muted text-decoration-line-through"><b>Precio</b><br>Antes S/. @{{cur.preccur}}</span>
                            </div>
                            <span class="px-3 text-black-50">/</span>
                            <div class="d-flex align-items-center">
                                <img src="{{ asset('/archivo/icono/precio.png')}}"><span class="ps-2 text-muted"><b>Precio</b><br>Ahora S/. @{{cur.precdescu}}</span>
                            </div>
                        </div>
                        <div class="meta d-flex align-items-center" v-if="cur.preccur==cur.precdescu">
                            <div class="d-flex align-items-center">
                                <img src="{{ asset('/archivo/icono/precio.png')}}"><span class="ps-2 text-muted"><b>Precio</b><br>S/. @{{cur.preccur}}</span>
                            </div>
                        </div>
                        <hr>
                        <div class="meta d-flex align-items-center">
                            <div class="d-flex align-items-center">
                                <a v-bind:href="'{{ asset('/curso-virtual')}}'+'/'+cur.coduuidcurdoc" class="btn btn-info"><img src="{{ asset('/archivo/icono/informacion.png')}}"> Más información</a>
                            </div>
                            <span class="px-1 text-black-50"></span>
                            <div class="d-grid gap-2">
                                <a :href="'https://wa.me/51'+numero+'?text=Hola, deseo mayor información del curso '+ cur.nomcur+ ' - '+ cur.codcur" target="_blank" class="btn btn-success"><img src="{{ asset('/archivo/icono/whatsapp.png')}}"> Solicitar aqui</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@include('inicios.informacion')
@endsection

@section('script')
@vite(['resources/js/header.js'])
@vite(['resources/js/footer.js'])
@vite(['resources/js/pagcursograbado.js'])
@endsection