@extends('front.front')
@section('title','Dickiss | Agradecimiento')
@section('css')
<style>
#map {
    height: 450px;
}
</style>
@endsection
@section('content')
    @section('img-header','http://www.dickissbarbershop.com/wp-content/uploads/2020/02/Logo_White_dickiss.png')    
    @section('titulo-descripcion')
    <div class="titulo_header">
        THANKS FOR YOU
    </div>
    <div class="subtitulo_header">
        GRACIAS
    </div>
    <div class="row m-0">
        <div class="offset-lg-6 col-lg-6 col-12 cuadro_descripcion">
            <h1>EL DÍA A DÍA DE UN HOMBRE MODERNO</h1>
            <p>Cuidarse es parte de mantener todo bajo control. ¡Como un verdadero rey! por eso te ayudamos con algunos artículos que pueden hacer más fácil el día a día de un hombre. Hablamos de temas que facilitan el cuidado de tu imagen, tu persona, tu cuerpo y tu bienestar. Alimentamos de manera continua este espacio, que aunque no estés en nuestro lugar, puedas seguir cuidándote.</p>
        </div>
    </div>
    @endsection
    <div class="tarjetas_servicios">
        <div class="row">
            <div class="col-12 text-center p-0 m-0">
                <div class="contenido agradecimiento">
                    @if($mensaje == "APROVADA")
                    <h1 class="tituloPaso">Agradecemos tu compra, te esperamos con gusto en:</h1>
                    @elseif($mensaje == "PROCESO")
                    <h1 class="tituloPaso">Agradecemos tu compra</h1>
                    <h4 class="texto-relleno">Por el momento no hemos podido validar tu pago, te pedimos que lleves tu comprobante de pago el día de tu cita</h4>
                    @elseif($mensaje == "EXISTENTE")
                    <h1 class="tituloPaso">Agradecemos tu preferencia</h1>
                    <h4 class="texto-relleno">La cita que buscas ya ha sido pagada, puedes agendar una nueva cita <a style="color:#00c88b;text-decoration:none;" href="{!! url('reservaciones') !!}">aqui</a></h4>
                    <br />                    
                    <h1 class="subtituloPaso">Puedes visitarnos en:</h1>
                    <br />
                    @else
                    <h1 class="subtituloPaso">Parece que ocurrio un error, vuelve a intentarlo<h1>
                    @endif
                    <h1 class="subtituloPaso">39 Oriente 2212 Col. El mirador</h1>                    
                    <div id="map"></div>
                </div>
            </div>
        </div>               
    </div>
@endsection
@section('scripts')
<script src="{!! asset('files_custom/assets/input-mask/jquery.inputmask.js')!!}"></script>
<script>
    $('#tarjet').inputmask({mask: "9999-9999-9999"});
    $('#referencesOxxo').inputmask({mask: "9999-9999-9999"});
</script>
<script>
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 19.029184, lng: -98.198680},        
            zoom: 18
        });
        var marker = new google.maps.Marker(
            {
                position: {lat: 19.029184, lng: -98.198680}, 
                map: map,
                icon: "{{asset('/imagenes_nuevas/marker.png')}}"
            }
        );
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCthKvXwxHysipuyU1EBMb5e3iK8ZX-EZs&callback=initMap"
async defer></script>
@endsection