@extends('layouts.master-second')

@section('content')
    <div class="download-app-div header" style="background-image: url('{{ asset('img/www/travel/travel.jpg') }}');">
        <div class="overlay-primary"></div>
        <div class="content text-center">
            <div class="container grid-lg pt-40 ">
                <h1 class="bold flex-centered">YekoTravel®</h1>
                <p class="flex-centered fs-19 fw-500">Destinos Nacionales · Destinos Internacionales · Turismo General</p>
            </div   >
        </div>
    </div>

    <div class="container pt-80 pb-40">
        <div class="columns">
            <div class="col-12">
                <p class="fs-20 fw-600 text-primary text-center mb-5">Destinos Nacionales</p>
                <p class="fs-26 fw-600 text-quaternary text-center cb">YekoTravel®</p>
            </div>
        </div>
    </div>

    <div class="container pb-100">
        <div class="columns">
            <div class="col-11 col-mx-auto p-centered">
                @if (count($travels['Nacional']) > 0)
                    <div class="carousel-nac" style="width:90%; margin:0 auto;">
                        @foreach ($travels['Nacional'] as $key => $item)
                            <div class="column col-6" style="width:200px;">
                                <a class="open-modal" href="#yeko-terms"
                                    data-legals="{{ isset($item->legals) ? $item->legals : 'No existen términos y condiciones' }}">
                                    <img src="{{ str_replace('$account_id', $account, $item->image) }}" width="100%"
                                        alt="">
                                </a>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="download-app-div travel-sug" style="background-image: url('{{ asset('img/bkg-activar-tarjeta.jpg') }}');">
        <div class="overlay-primary"></div>
        <div class="content text-center">
            <div class="container grid-lg">
                <h1 class="bold">Sugiere un destino el cual quisieras ver en YekoTravel®</h1>
                <h6 class="mb-20">*Debes iniciar sesión primero</h6>
                <a href="/user/suggest" class="btn btn-primary text-center fs-24 pt-20 pb-20 pl-40 pr-40">Haz clic aquí</a>
            </div>
        </div>
    </div>

    <div class="container pt-80">
        <div class="columns">
            <div class="col-12">
                <p class="fs-20 fw-600 text-primary text-center mb-5">Destinos Internacionales</p>
                <p class="fs-26 fw-600 cb text-center">YekoTravel®</p>
            </div>
        </div>
    </div>

    <div class="container pb-40">
        <div class="columns">
            <div class="col-11 col-mx-auto p-centered">
                @if (count($travels['Internacional']) > 0)
                    <div class="carousel-int" style="width:90%; margin:0 auto;">
                        @foreach ($travels['Internacional'] as $key => $item)
                            <div class="column col-6" style="width:200px;">
                                <a class="open-modal" href="#yeko-terms"
                                    data-legals="{{ isset($item->legals) ? $item->legals : 'No existen términos y condiciones' }}">
                                    <img src="{{ str_replace('$account_id', $account, $item->image) }}" width="100%"
                                        alt="{{ $item->name }}">
                                </a>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="container pt-20 pb-40">
        <div class="columns">
            <div class="col-12">
                <p class="fs-20 fw-600 text-primary text-center mb-5">Turismo General</p>
                <p class="fs-26 fw-600 text-quaternary text-center cb">YekoTravel®</p>
            </div>
        </div>
    </div>

    <div class="container pb-100">
        <div class="columns">
            <div class="col-11 col-mx-auto p-centered">
                @if (count($travels['General']) > 0)
                    <div class="carousel-nac" style="width:90%; margin:0 auto;">
                        @foreach ($travels['General'] as $key => $item)
                            <div class="column col-6" style="width:200px;">
                                <a class="open-modal" href="#yeko-terms"
                                    data-legals="{{ isset($item->legals) ? $item->legals : 'No existen términos y condiciones' }}">
                                    <img src="{{ str_replace('$account_id', $account, $item->image) }}" width="100%"
                                        alt="">
                                </a>
                            </div>
                        @endforeach
                    </div>
                @endif
                <div class="text-center pt-40">
                    <a href="/general/cards-buy" class="btn btn-primary text-center fs-24 pt-20 pb-20 pl-40 pr-40">Quiero mi
                        tarjeta YekoClub</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal modal-md" id="yeko-terms">
        <a href="#close" class="modal-overlay" aria-label="Close"></a>
        <div class="modal-container">
            <div class="modal-header">
                <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
                <div class="modal-title h5">Terminos y Condiciones</div>
            </div>
            <div class="modal-body">
                <div class="content">
                    <p class="legals"></p>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('.open-modal').click(function() {
                var legals = $(this).attr('data-legals');
                $('.legals').html(legals);
            });
            $('.carousel-nac').slick({
                dots: true,
                infinite: true,
                speed: 300,
                slidesToShow: 4,
                slidesToScroll: 1,
                responsive: [{
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });

            $('.carousel-int').slick({
                dots: true,
                infinite: true,
                speed: 300,
                slidesToShow: 4,
                slidesToScroll: 1,
                responsive: [{
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });

            $('.responsive').slick({
                dots: true,
                infinite: true,
                speed: 300,
                slidesToShow: 4,
                slidesToScroll: 4,
                responsive: [{
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
        });
    </script>


@endsection