@extends('layouts.app')

@section('seoheader')
    {!! $seo ?? '' !!}
@endsection
@section('aditional-header')
<style>
    .btn-impacto {
        cursor: context-menu!important;
    }
</style>
@endsection
@section('content')

@include('utils.preloader')

@include('layouts.header')


    <section class="blog-page pt-20">
        <div class="container-fluid custom-container">
            <div class="row">
                <div class="col-lg-4 mt-3">
                    <h3 class="text-impacto-bold mb-4">{{ $local->l_name }}</h3>

                    <span class="btn btn-impacto border-1">INFORMACIÓN DEL LOCAL:</span>
                    <div class="mt-3 pl-3">
                        <p><span class="text-impacto-bold">DIRECCIÓN: </span> <br>
                            {{ $local->address . ' '. $local->reference_address }}
                        </p>
                        <p><span class="text-impacto-bold">DEPARTAMENTO: </span> <br>
                            {{ $local->district->province->department->d_name ?? '' }}
                        </p>
                        <p><span class="text-impacto-bold">PROVINCIA: </span> <br>
                            {{ $local->district->province->d_name ?? '' }}
                        </p>
                        <p><span class="text-impacto-bold">DISTRITO: </span> <br>
                            {{ $local->district->d_name ?? '' }}
                        </p>
                    </div>

                    <span class="btn btn-impacto border-1">ASESORES DE VENTA:</span>
                    <div class="card mt-3 border-0">
                        <div class="card-body overflow-auto" style="max-height: 500px;">
                            @foreach ($local->contacts as $contact)
                                <div class="card p-3 m-1 border-top-impacto border-1">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <img width="70" src="{{ $contact->resource }}">
                                        </div>
                                        <div class="col-md-9">
                                            <b>{{ $contact->op1 }}</b> <br>
                                            <i class="fa fa-envelope p-2 text-impacto-bold"></i>
                                            <a class="text-dark font-weight-bold" href="mailto:{{ $contact->op2 }}">{{ $contact->op2 }}</a> <br>
                                            <i class="fab fa-whatsapp p-2 text-impacto-bold"></i>
                                            <a class="text-dark font-weight-bold" target="_blank" href="https://api.whatsapp.com/send?phone={{ $contact->op3 }}">+51 {{ $contact->op3 }}</a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-lg-8 mt-3">
                    <div class="blog-single-posts">
                        <div class="blog-single-image">
                            <img src="{{ $local->photo }}" alt="{{ $local->l_name }}" class="border-1 img-fluid">
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 p-0">
                    <h3>Ubicanós en el Mapa</h3>
                    <hr>
                    <iframe src="https://www.google.com/maps/embed?pb={{ $local->maps }}"
                    width="100%" height="500" frameborder="0" style="border:0;border-radius:1rem;margin-bottom:5rem;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
                </div>
            </div>
        </div>
    </section>


@include('layouts.footer')

@include('utils.backtop')

@endsection