@extends('layouts.app')
@section('title', 'ISIPP - Convenios')

@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')
<!-- Page Title -->
<div class="page-title" data-aos="fade">
    <div class="container">
        <h1>Nuestros convenios</h1>
    </div>
</div><!-- End Page Title -->

<!-- Team Section -->
<section id="team" class="team section">
    <div class="container">
        <div class="row gy-4">
            <div class="col-lg-6" v-for="con in convenio" data-aos="fade-up" data-aos-delay="100">
                <div class="team-member d-flex align-items-start  border border-danger border-3">
                    <div class="pic">
                        <img :src="'{{ asset('/archivo')}}'+'/'+con.logocon" class="img-fluid" alt="">
                    </div>
                    <div class="member-info">
                        <h4>@{{con.univercon}}</h4>
                        <div class="social">
                            <a :href="'{{ asset('/convenio')}}'+'/'+con.codcon"><i class="bi bi-search"></i></a>
                            <button class="btn" type="button" @click="detalleconvenio(con)" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="bi bi-info"></i></button>
                        </div>
                    </div>
                </div>
            </div><!-- End Team Member -->
        </div>
    </div>
</section><!-- /Team Section -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #ff1a1a;color: #ffffff;">
                <h5 class="modal-title" id="exampleModalLabel" style="color: #ffffff;">@{{unicon}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div v-html="descon">
                </div>
            </div>
        </div>
    </div>
</div>
@include('inicios.contacto')
@include('inicios.informacion')
@endsection

@section('script')
@vite(['resources/js/header.js'])
@vite(['resources/js/footer.js'])
@vite(['resources/js/pagconvenio.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