@extends('layouts.app')

@push('link')
    <link rel="stylesheet" href="{{asset('assets/swiper/swiper.min.css')}}">
    <link rel="stylesheet" href="{{mix('css/pages/home.css')}}">
@endpush

@section('contenido')
    <section class="home" id="inicio">
        <div class="home-slide-principal">
            <div class="swiper-container swiper-principal">
                <div class="swiper-wrapper">
                    @foreach ($slideP as $num => $item)
                        <div class="swiper-slide">
                            <div class="bg" style="background-image: url({{asset($item -> portada)}})">
                                <img src="{{asset('img/base-slide-principal.jpg')}}" alt="Base">
                            </div>

							<div class="informacion w15">
								<h1 class="m30 m-lg-60">@lang('home.slide.tlo_'.$num)</h1>
								<a href="{{route('front.masterplan')}}" class="btn btn-verde">@lang('home.slide.btn_cotiza')</a>
							</div>
                        </div>
                    @endforeach
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>

        <div class="home-nosotros" id="nosotros">
            <div class="container-fluid w15 position-relative">
                <div class="patron" style="background-image: url({{asset('img/patron-nosotros.png')}})"></div>
                <div class="row align-items-center justify-content-lg-end">
                    <div class="col-12 col-md-6 col-lg-5 col-xl-4 m40 mb-md-0">
                        <h3 class="titulo m40 m-lg-60">@lang('home.nosotros.tlo')</h3>
                        <p>@lang('home.nosotros.info_1')</p>
                        <p>@lang('home.nosotros.info_2')</p>
                    </div>
                    <div class="col-12 col-md-6 col-lg-6 col-xl-5 offset-xl-1">
                        <div class="bg" style="background-image: url({{asset('img/nosotros.jpg')}})">
                            <img src="{{asset('img/base-nosotros.jpg')}}" alt="Base">
                        </div>
                    </div>
                </div>
            </div>
        </div>

		<div class="home-merida" id="merida">
			<div class="container-fluid w15">
				<div class="row">
					<div class="col-12 col-md-6 col-lg-6 col-xl-5 order-2 order-md-1">
						<div class="swiper-container swiper-slide-merida">
							<div class="swiper-wrapper">
								@foreach ($infoMerida["galeria"] as $item)
									<div class="swiper-slide">
										<div class="bg" style="background-image: url({{asset($item)}})">
											<img src="{{asset('img/slide-merida/1.jpg')}}" alt="Base">
										</div>
									</div>
								@endforeach
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-6 col-xl-6 offset-xl-1 order-1 order-md-2 m40">
						<nav class="m40 m-lg-60">
							<div class="nav nav-tabs justify-content-between border-0" id="nav-tab" role="tablist">
								@foreach ($infoMerida["info"][App::getLocale()] as $idx => $item)
									<a class="nav-item nav-link changeMerida {{$idx == 0 ? 'active' : ''}}" data-idx="{{$idx}}" id="nav-{{$idx}}-tab" data-toggle="tab" href="#nav-{{$idx}}" role="tab" aria-controls="nav-{{$idx}}" aria-selected="{{$idx == 0 ? true : false}}">{{$item["tlo_tab"]}}</a>
								@endforeach
							</div>
						</nav>
						<div class="tab-content" id="nav-tabContent">
							@foreach ($infoMerida["info"][App::getLocale()] as $idx => $item)
								<div class="tab-pane fade {{$idx == 0 ? 'show active' : ''}}" id="nav-{{$idx}}" role="tabpanel" aria-labelledby="nav-{{$idx}}-tab">
									<h3 class="titulo m50">{{$item["tlo"]}}</h3>

									<h4 class="text-right mb-0">{{$item["subtlo"]}}</h4>
									<p class="text-right mb-0">{!! $item["text"] !!}</p>
								</div>
							@endforeach
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="home-semillas" id="desarrollo">
			<div class="container-fluid w15">
				<h3 class="titulo text-center m50 m-lg-90">@lang('home.amenidades.tlo')</h3>

				<div class="swiper-container swiper-amenidades pb-5">
					<div class="swiper-wrapper">
						@foreach ($slideA as $item)
							<div class="swiper-slide">
								<div class="card mx-auto">
									<div class="card-body d-flex align-items-center justify-content-center">
										<div class="w-100">
											<div class="img-cont m30">
												<img src="{{asset($item['img'])}}" alt="">
											</div>
											<p class="text-center">{!! $item['tlo'][App::getLocale()] !!}</p>
											<div class="pantalla">
												{!! $item['hover'][App::getLocale()] !!}
											</div>
										</div>
									</div>
								</div>
							</div>
						@endforeach
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
		</div>

		<div class="home-galeria">
			<div class="container">
				<div class="swiper-container swiper-galeria">
					<div class="swiper-wrapper">
						@foreach ($slideG as $item)
							<div class="swiper-slide">
								<div class="bg" style="background-image: url({{asset($item -> portada)}})">
									<img src="{{asset('img/base-slide-galeria.jpg')}}" alt="Base">
								</div>
							</div>
						@endforeach
					</div>
					<div class="swiper-button-prev"> <img src="{{asset('img/icons/right-prev.png')}}" alt=""> </div>
  					<div class="swiper-button-next"> <img src="{{asset('img/icons/right-next.png')}}" alt=""> </div>
				</div>
			</div>
		</div>

		<div class="home-ubicacion overflow-hidden" id="ubicacion">
			<div class="container-fluid w14 w-lg-95 position-relative">
				<div class="row align-items-center">
					<div class="col-12 col-md-12 col-lg-4 m40 mb-lg-0 pt-5 pt-lg-0">
						<h3 class="titulo m50">@lang('home.ubicacion.tlo')</h3>
						<p class="m40 m-lg-60">@lang('home.ubicacion.info')</p>
						<a href="https://www.google.com.mx/maps/place/21%C2%B006'17.3%22N+89%C2%B051'15.9%22W/@21.104821,-89.9244448,23399m/data=!3m1!1e3!4m5!3m4!1s0x0:0x0!8m2!3d21.104816!4d-89.854407" target="_blank" class="btn btn-verde">@lang('home.ubicacion.btn_maps')</a>
					</div>
					<div class="col-12 col-md-12 col-lg-8 pb-5 pb-lg-0">
						<img src="{{asset('img/ubicacion.jpg')}}" alt="Ubicacion" class="img-ubicacion w-max-100">
					</div>
				</div>
			</div>
		</div>

		<div class="home-informacion">
			<div class="container-fluid">
				<div class="text-center m20">
					<button class="btn btn-blanco"> {{$masterplan -> porcentaje}}</button>
				</div>
				<h3 class="titulo text-white text-center">@lang('home.banner')</h3>
			</div>
		</div>

		<div class="home-cotizador" id="cotizador">
			<div class="container-fluid w14">
				<div class="row justify-content-center">
					<div class="col-12 col-md-8 text-center m40 m-lg-60">
						<p class="m30">@lang('home.cotizador.info')</p>
						<a href="{{route('front.masterplan')}}" class="btn btn-verde">{{(App::getLocale() == 'es') ? "Primera etapa" : "First stage"}}</a>
						<a href="{{route('front.masterplanM')}}" class="btn btn-verde ml-sm-3">{{(App::getLocale() == 'es') ? "Macrolotes" : "Macrolotes"}}</a>
					</div>
					<div class="col-12 col-md-8" style="position: relative">
						{{-- <a href="{{route('front.masterplan')}}"> --}}
							{{-- <img src="{{asset('img/masterplan.png')}}" alt="Masterplan" id="beforeMaster"> --}}
							@include('pages.components.inicio')
							<img class="rosa" src="{{asset('img/rosa.svg')}}" alt="">
						{{-- </a> --}}
					</div>
				</div>
			</div>
		</div>

		<div class="home-contacto position-relative" id="contacto">
			<div class="container-fluid w15 position-relative" style="z-index: 2">
				<div class="row justify-content-end">
					<div class="col-12 col-md-5 m100 mb-md-0">
						<h3 class="titulo m40">@lang('home.contacto.tlo')</h3>
						<p class="mb-0">@lang('home.contacto.oficinas')</p>
						<p>T. (999) 105 13 71</p>
						<p>C. contacto@mukaba.mx</p>
						
					</div>
					<div class="col-12 col-md-6">
						<p class="m40 m-lg-60 limit">@lang('home.contacto.info')</p>

						<form action="{{route('front.contacto.send')}}" method="POST" enctype="multipart/form-data">
							@csrf
							<div class="row">
								<div class="col-12 col-md-6 m40">
									<label class="mb-0" for="">@lang('home.contacto.form.nombre')</label>
									<input type="text" name="nombre" id="nombre" class="form-control">
								</div>
								<div class="col-12 col-md-6 m40">
									<label class="mb-0" for="">@lang('home.contacto.form.telefono')</label>
									<input type="text" name="telefono" id="telefono" class="form-control">
								</div>
								<div class="col-12 col-md-6 m40">
									<label class="mb-0" for="">@lang('home.contacto.form.correo')</label>
									<input type="email" name="email" id="email" class="form-control">
								</div>
								<div class="col-12 col-md-6 m40">
									<label class="mb-0" for="">@lang('home.contacto.form.mensaje')</label>
									<input type="text" name="mensaje" id="mensaje" class="form-control">
								</div>
								<div class="col-12 text-center text-md-right">
									<div class="form-group m20">
                                        <input class="custom-checkbox" type="checkbox" id="terminos" value="1" required>
                                        <label for="terminos">
                                            <span></span> <a href="#" target="_blank">@lang('home.contacto.form.terminos')</a>
                                        </label>
                                    </div>
								</div>
								<div class="col-12 col-md-6"></div>
								<div class="col-12 col-md-6 text-center text-md-right">
									<button type="submit" class="btn btn-borde-blanco">@lang('home.contacto.form.enviar')</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
    </section>

	@include('pages.components.link_whats')

	<div class="modal" tabindex="-1" role="dialog" id="mdTest">
		<div class="modal-dialog modal-dialog-centered modal-sm" role="document">
			<form action="{{route('front.encuesta.send')}}" method="POST" enctype="multipart/form-data">
				@csrf
				<div class="modal-content">
					<div class="modal-body">
						<h4 class="text-center m30">@lang('md_emergente.tlo')</h4>
						<p class="text-centet m30">@lang('md_emergente.info')</p>

						<div class="form-group m15">
							<label class="mb-0" for="nombre">@lang('md_emergente.form.nombre')</label>
							<input class="form-control" type="text" name="nombre" required>
						</div>
						<div class="form-group m15">
							<label class="mb-0" for="correo">@lang('md_emergente.form.correo')</label>
							<input class="form-control" type="email" name="email" required>
						</div>
						<div class="form-group m15">
							<label class="mb-0" for="pregunta_1">@lang('md_emergente.form.pregunta_1')</label>
							<select class="form-control" name="pregunta_1" required>
									<option value="">Selecciona una opción</option>
									<option value="Incrementar mis ingresos">Incrementar mis ingresos</option>
									<option value="Mover mis ahorros">Mover mis ahorros</option>
									<option value="Adquirir activos en otras ciudades">Adquirir activos en otras ciudades</option>
									<option value="Herencia para mis hijos">Herencia para mis hijos</option>
							</select>
						</div>
						<div class="form-group m15">
							<label class="mb-0" for="pregunta_2">@lang('md_emergente.form.pregunta_2')</label>
							<select class="form-control" name="pregunta_2" required>
								<option value="">Selecciona una opción</option>
								<option value="Plusvalía - ROI">Plusvalía - ROI</option>
								<option value="Accesibilidad - Precio">Accesibilidad - Precio</option>
								<option value="Calidad de vida - Seguridad">Calidad de vida - Seguridad</option>
								<option value="Futuro - Planeo mudarme">Futuro - Planeo mudarme</option>
							</select>
						</div>
						{{-- <div class="form-group m15">
							<label class="mb-0" for="pregunta_3">@lang('md_emergente.form.pregunta_3')</label>
							<select class="form-control" name="pregunta_3" required>
								<option value="">Selecciona una opción</option>
							</select>
						</div> --}}
						<div class="form-group m15">
							<label class="mb-0" for="pregunta_3">@lang('md_emergente.form.pregunta_4')</label>
							<select class="form-control" name="pregunta_3" required>
								<option value="">Selecciona una opción</option>
								@foreach ($estados as $item)
									<option value="{{$item["name"]}}">{{$item["name"]}}</option>
								@endforeach
								<option value="No vivo en mex">No vivo en México</option>
							</select>
							<input class="form-control mt-3 d-none" type="text" name="ubicacion_ext" id="" placeholder="Ingrese el país de residencia">
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary shadow-none" id="closeMdFlotting">@lang('md_emergente.cerrar')</button>
						<button type="submit" class="btn btn-light shadow-none px-4">@lang('md_emergente.enviar')</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<div class="modal verde" tabindex="-1" role="dialog" id="mdSendSuccess">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content pt-4 pb-4">
                <div class="modal-body pb-1">
                    <h3 class="titulo text-center m30">¡Mensaje enviado!</h3>
					<p class="text-center">Pronto nos pondremos en contacto contigo.</p>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
	<script src="https://unpkg.com/@popperjs/core@2"></script>
	<script src="https://unpkg.com/tippy.js@6"></script>
	@if (Session::has('message'))
        <script>
            $('#mdSendSuccess').modal('show');
        </script>
    @endif
    <script type="text/javascript" src="{{asset('assets/swiper/swiper.min.js')}}"></script>
	<script type="text/javascript">

        const swiperP = new Swiper('.swiper-principal', {
            effect: 'fade',
            speed: 1500,
            pagination: {
                el: '.swiper-pagination',
				clickable: true
            },
        });

        const swiperMerida = new Swiper('.swiper-slide-merida', {
            effect: 'fade',
            speed: 1000
        });

		const swiperAmenidades = new Swiper('.swiper-amenidades', {
			slidesPerView: 4,
			spaceBetween: 30,
			speed: 1000,
			loop: true,
			pagination: {
                el: '.swiper-pagination',
				clickable: true
            },
			autoplay: {
				delay: 5000,
				disableOnInteraction: false
			},
			breakpoints: {
				320: {
					slidesPerView: 1
				},
				480: {
					slidesPerView: 2
				},
				640: {
					slidesPerView: 3
				},
				768: {
					slidesPerView: 4
				}
			}
		});

		const swiperG = new Swiper('.swiper-galeria', {
            effect: 'fade',
            speed: 1000,
			loop: true,
            navigation: {
				nextEl: '.swiper-galeria .swiper-button-next',
				prevEl: '.swiper-galeria .swiper-button-prev',
			},
			autoplay: {
				delay: 5000,
				disableOnInteraction: false
			},
        });

		document.querySelectorAll('.changeMerida').forEach(item => {
			item.addEventListener('click', function() {
				let idx = this.dataset.idx;
				swiperMerida.slideTo(idx);
			}, false);
		});

		document.querySelectorAll(".home-semillas .pantalla").forEach(item => {
			item.addEventListener("click", function () {
				this.classList.toggle('active');
			}, false);
		});
    </script>
@endpush