@extends('layout.layout')
@section('meta')
    @include('layout.partials.seo', [
        'title' => $destination->meta_title,
        'description' => $destination->meta_description,
        'keywords' => $destination->meta_keywords,
        'image' => $destination->getFirstMediaUrlOrDefault(MediaHelper::DESTINATION_MEDIA_PATH, 'webp')['url'],
        'schema' => $destination->schema
    ])
@endsection
@section('content')
    <div class="wpo-breadcumb-area"
         style="background: url({{$destination->getFirstMediaUrlOrDefault(MediaHelper::DESTINATION_MEDIA_PATH, 'webp')['url']}}) no-repeat center top/cover;"
         title="{{$destination->getFirstMediaUrlOrDefault(MediaHelper::DESTINATION_MEDIA_PATH)['title']}}"
         role="img"
         aria-label="{{$destination->getFirstMediaUrlOrDefault(MediaHelper::DESTINATION_MEDIA_PATH)['alt']}}">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="wpo-breadcumb-wrap">
                        <h1>{{ $destination->name }}</h1>
                        <ul>
                            <li><a href="{{ route('home') }}">{{ __('general.home') }}</a></li>
                            {{-- <li><a href="{{route('category', [$destination->country->slug, $category->slug])}}">{{ $category->name }}</a></li> --}}
                            <li><span>{{ $destination->name }}</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-5 mb-5">
        <div class="row">
            <div class="col-lg-9 col-xl-9 col-md-8 col-12 order-lg-2">
                <div class="row">
                    <div class="col-lg-12 col-xl-12 col-12 col-md-12">
                        <div class="tools-ber">
                            <div class="row">
                                <div class="col-xs-6 col-sm-3 col-md-3">
                                    <!-- filters select -->
                                    <form action="{{ route('destination.show', [$destination->slug]) }}" method="get"
                                          id="pricefilterForm">
                                        <div class="select-filters">
                                            <select id="sortBy" class="nice-sel sort-price" role="form" name="sortBy"
                                                    class="small right">
                                                @if (request()->get("sortBy") == null)
                                                    <option value="" selected disabled>Select</option>
                                                @endif
                                                <option
                                                    value="All" {{session()->get('All')?'selected' :''}}>{{__('tour.all')}}</option>
                                                <option
                                                    value="Newestontop" {{session()->get('Newestontop')?'selected' :''}}>{{__('tour.newest_on_top')}}</option>
                                                <option
                                                    value="Oldestontop" {{session()->get('Oldestontop')?'selected' :''}}>{{__('tour.Oldest_on_top')}}</option>
                                                <option
                                                    value="PriceLowtoHigh" {{session()->get('PriceLowtoHigh')?'selected' :''}}>{{__('tour.Price_low_to_high')}}</option>
                                                <option
                                                    value="PriceHightoLow" {{session()->get('PriceHightoLow')?'selected' :''}}>{{__('tour.Price_high_to_low')}}</option>
                                            </select>
                                        </div>
                                    </form>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6">
                                    <p class="num_tours">&nbsp;Tours
                                        Available&nbsp;<b>{{ $destination->tours->count() }}</b></p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            @foreach($tours as $tour)
                                <div class="col-lg-12 col-xl-12 col-md-12">
                                    @include('layout.partials.tour-box', ['tour' => $tour])
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-xl-3 col-md-4 col-12 order-lg-1">
                @if($tours->count() > 0)
                    <div class="blog-sidebar room-sidebar filter-block">
                        <div class="price-slider">
                            <div class="widget price mb-30"
                                 style="background-color: #ffffff!important;padding: 0!important; ">
                                <div class="widget-desc">
                                    <div class="slider-range">
                                        <div id="slider_range"
                                             data-min="{{ CurrencyHelper::displayFilterPrice($minPrice) }}"
                                             data-max="{{ CurrencyHelper::displayFilterPrice($maxPrice) }}"
                                             data-unit="{{ CurrencyHelper::get('symbol') }}"
                                             class="slider-range-price ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all price-symbol"
                                             data-value-min="{{ CurrencyHelper::displayFilterPrice($minPrice) }}"
                                             data-value-max="{{ CurrencyHelper::displayFilterPrice($maxPrice) }}">
                                            <div class="ui-slider-range ui-widget-header ui-corner-all"></div>
                                            <span class="ui-slider-handle ui-state-default ui-corner-all"
                                                  tabindex="0"></span>
                                            <span class="ui-slider-handle ui-state-default ui-corner-all"
                                                  tabindex="0"></span>
                                        </div>

                                        <input class="my-2" id="amount" type="text"
                                               style="border:none; background:none;"
                                               value="@if(session()->has('pricetourdestination')) {{ str_replace('', '', session()->get('symbolWithPrice')) }} @else {{ CurrencyHelper::get('symbol') }} {{ CurrencyHelper::displayFilterPrice($minPrice) }} - {{ CurrencyHelper::get('symbol') }} {{ CurrencyHelper::displayFilterPrice($maxPrice) }} @endif "
                                               readonly>
                                        <input class="my-2" id="amount_value" type="text" name="pricetourdestination"
                                               style="border:none; background:none;position: absolute;top:0;left:0;opacity:0;"
                                               value="{{request()->get("pricetourdestination")}}" readonly>
                                        <button type="submit"
                                                class="btn btn-sm btn-primary styleprimary">{{__('Filter')}}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="blog-sidebar room-sidebar filter-block">
                    <div class="card-body text-left">
                        <h3 class="mb-4">{{__('general.select_destination')}}</h3>
                        <ul class="list-unstyled">
                            @foreach($destinations as $child)
                                <li class="custom-check">
                                    <a class="custome-color-link"
                                       href="{{ route('destination.show', [$child->slug]) }}"> <i
                                            class="fa fa-arrow-right"></i> <label
                                            class="custome-color-link"> {{$child->name}} </label> </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>


            </div>

        </div>
    </div>

    @include('layout.partials.newsletter')
    @include('layout.partials.faq')
    @include('layout.partials.partner')

@endsection