@extends('layouts.mainlayout')

@section('content')

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- Slides -->

        @foreach ($res as $item)
        <div class="swiper-slide">
            <div class="box-card">
                <div class="header-box">
                    <div class="row no-gutters">
                        <div class="col-md-auto col-1"><span class="icon-i-buscar txt-azul medium-icon"></span>
                        </div>
                        <div class="col col-10 pl-3 pt-2">
                            <h6>{{$item->NOMCAC}}</h6>
                        </div>
                    </div>
                </div>
                <div class="content-box">
                    <div class="row justify-content-between">
                        <div class="col-md-6 col-12">
                            <p class="txt-azul"><strong>Horario de atención: </strong></p>
                            <p>{{$item->HORARIO}}</p>
                        </div>
                        <div class="col-md-6 col-12">
                            <p class="txt-azul"> <strong>Teléfono:</strong></p>
                            <p>{{$item->TELEFONO}}</p>
                        </div>
                        <div class="col-12">
                            <p class="txt-azul">
                                <strong>Dirección</strong>
                            </p>
                            <p>{{$item->DIRECCION}}</p>
                        </div>
                        <div class="espacio-1"></div>
                    </div>
                </div>
                <div class="links-box">
                    <div class="row justify-content-between">
                        <div class="col-md-6 col-12">
                            <a class="btn btn-secondary btn-block"
                                href="https://www.google.com/maps/?q={{ $item->LAT }}, {{ $item->LON }}"
                                target="_blank"><span class="icon-i-lugar"></span>
                                Ver ubicación en Maps</a>
                        </div>

                    </div>
                </div>
                <div class="espacio"></div>
                <div class="espacio"></div>
            </div>
        </div>

        @endforeach
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
@endsection

@push('scripts')


<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script>
    window.onload = function(){
        
        var mySwiper = new Swiper('.swiper-container', {
        // loop: true,
        slidesPerView: 1,
        spaceBetween: 30,
        // If we need pagination
        pagination: {
        el: '.swiper-pagination',
        clickable: true,
        },
      
    
        // Navigation arrows
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        },
        })
        }
        
</script>
@endpush