@extends('layouts.master-appyudante')
@section('content')
{{-- Hero --}}
@include('partials.'.$account.'.home-hero')
{{-- Destacados --}}
<div class="container pb-20 mt-40 pt-20">
    @include('partials.destacados')
</div>
{{-- Mapa --}}
<div class="container my-30 px-0">
    <div class="columns">
        <div class="col-12">
            @component('partials.g-map-appyudante', [
                'divHeight'=>'500px',
                'map' =>[ 'center' => $cityPosition, 'zoom' => 11 ],
                'markers' => $markers,
                'data' => [
                    'categories' => $categories,
                    'cities' => $cities,
                    'slug' => $slug,
                    'category' => $category
                ]
            ])@endcomponent
        </div>
    </div>
</div>

<script>

$(document).ready(function() {
  var id = '#dialog';
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();
  $('#mask').css({'width':maskWidth,'height':maskHeight});
  $('#mask').fadeIn(500);
  $('#mask').fadeTo("slow",0.9);
        var winH = $(window).height();
  var winW = $(window).width();
        $(id).css('top',  winH/2-$(id).height()/2);
  $(id).css('left', winW/2-$(id).width()/2);
     $(id).fadeIn(2000);
     $('.window .close').click(function (e) {
  e.preventDefault();
  $('#mask').hide();
  $('.window').hide();
     });
     $('#mask').click(function () {
  $(this).hide();
  $('.window').hide();
 });

});

</script>

<div class="container p-0">
    @include('partials.yeko-conductor')
</div>

<div class="container grid-lg py-35">
    @include('partials.categories-grid')
</div>

<style>

</style>
@endsection