@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('content')
<!-- Page Title -->
<div class="page-title" data-aos="fade">
    <div class="container">
        <h1>Docentes</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="doc in docente" data-aos="fade-up" data-aos-delay="100">
                <div class="team-member d-flex align-items-start">
                    <div class="pic">
                        <img :src="'{{ asset('/archivo')}}'+'/'+doc.imagendoc" class="img-fluid" alt="">
                    </div>
                    <div class="member-info">
                        <h4>@{{doc.apeper}} @{{doc.nomper}}</h4>
                        <span>@{{doc.profesion}}</span>
                        <div class="social">
                            <a :href="'mailto:'+doc.corper"><i class="bi bi-envelope"></i></a>
                            <button class="btn" type="button" @click="detalle(doc)" 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: #e43d30;color: #ffffff;">
                <h5 class="modal-title" style="color: #ffffff;" id="exampleModalLabel">@{{nomdoc}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
               <div v-html="formdoc">
               </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/pagespecialista.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