@extends('layouts.master-second')

@section('content')
    {{-- Hero --}}
    @include('partials.amway.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',
                    [
                        'divHeight' => '500px',
                        'map' => ['center' => $cityPosition, 'zoom' => 11],
                        'markers' => $markers,
                        'data' => [
                            'categories' => $categories,
                            'cities' => $cities,
                            'slug' => $slug,
                            'category' => $category,
                        ],
                    ])
                @endcomponent
            </div>
        </div>
    </div>

    <div class="container px-0" style="background: white;">
        {{-- @include('partials.flight-search') --}}
        @include('partials.travel-search')
    </div>

    <div id="boxes">
        <div style="top: 50%; left: 50%; display: none;" id="dialog" class="window">
            <div id="san">
                <a href="#" class="close agree"><img src="https://www.yekoclub.com/img/close-icon.png" width="25"
                        style="float:right; margin-right: -25px; margin-top: -20px;"></a>
                <a href="https://www.yekoclub.com/2/all/partners/660"><img src="https://www.yekoclub.com/img/mu.png" width="100%"></a>            </div>
        </div>
        <div style="width: 2478px; font-size: 32pt; color:white; height: 1202px; display: none; opacity: 0.4;"
            id="mask"></div>
    </div>

    <style>
        #mask {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9000;
            background-color: #26262c;
            display: none;
        }

        #boxes .window {
            position: absolute;
            left: 0;
            top: 0;
            width: 440px;
            height: 850px;
            display: none;
            z-index: 9999;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
        }

        #boxes #dialog {
            width: 900px;
            height: auto;
            padding: 10px 10px 10px 10px;
            background-color: #ffffff;
            font-size: 15pt;
        }

        .agree:hover {
            background-color: #D1D1D1;
        }

        .popupoption:hover {
            background-color: #D1D1D1;
            color: green;
        }

        .popupoption2:hover {
            color: red;
        }
    </style>

    <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>

    <br /> <br />
    {{-- YekoTravel --}}
    <div class="container">
        @include('partials.yeko-travel')
    </div>

    <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