@extends('layouts.app')
@section('title', 'ISIPP')
@section('css')
<style type="text/css">
    .modalimagen {
        background: url("{{asset('/archivo/otros/milena.png')}}") no-repeat center center;
        background-size: cover;
    }
</style>
@endsection
@section('css')
<link href="{{ asset('assets/css/splide.css') }}" rel="stylesheet">
@endsection

@section('content')
<section id="recent-blog-posts" class="recent-blog-posts section">
    <div class="container section-title" data-aos="fade-up">
        <h2 style="color:#e43d30;">Testimonios de nuestros alumnos</h2>
        <p></p>
    </div>
    <div class="container">
        <div class="position-relative">
            <div class="splide" ref="splidetestimonio">
                <div class="splide__track">
                    <ul class="splide__list">
                        <li class="splide__slide m-1" v-for="(cur, index) in testimonio" :key="index">
                            <div class="post-item position-relative h-100 border border-danger border-2" data-aos="fade-up" data-aos-delay="100">
                                <div class="post-img position-relative overflow-hidden">
                                    <video v-if="cur.tipoarchivotes=='VIDEO'" :id="'video-'+cur.idtestimonio" class="video-js vjs-fluid" width="360" height="640"
                                        controls
                                        preload="auto">
                                        <source :src="'{{ asset('/archivo')}}'+'/'+cur.archivotes" type="video/mp4" />
                                    </video>
                                    <img v-if="cur.tipoarchivotes=='IMAGEN'" v-bind:src="'{{ asset('/archivo')}}'+'/'+cur.archivotes" class="img-fluid" alt="">
                                </div>
                                <div class="post-content d-flex flex-column">
                                    <h3 class="post-title">@{{cur.desctes}}</h3>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="splide__arrows">
                    <button class="splide__arrow splide__arrow--prev"><img src="{{asset('/archivo/icono/izquierda.png')}}"></button>
                    <button class="splide__arrow splide__arrow--next"><img src="{{asset('/archivo/icono/derecha.png')}}"></button>
                </div>
            </div>
        </div>
    </div>
</section>
@include('inicios.contacto')
@include('inicios.informacion')
@endsection

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

<script>
    $(document).ready(function() {

        mapboxgl.accessToken ="pk.eyJ1IjoiYW5maWMiLCJhIjoiY2thaWppcWQxMDFtMjJ3bXNmMHV5NmdsaSJ9.wvmNaLEpSZwG9VjgDJBJyQ";
        var map = new mapboxgl.Map({
            container: "map",
            style: "mapbox://styles/mapbox/streets-v11",
            center: [-77.528685, -9.531466],
            zoom: 16,
        });
        map.addControl(new mapboxgl.NavigationControl());
        map.addControl(new mapboxgl.FullscreenControl());
        var marker = new mapboxgl.Marker({
            draggable: false,
        });
        marker.setLngLat([-77.528685, -9.531466]).addTo(map);
    });
</script>
@endsection