@extends('layout.master')
@section('meta')
    @include('layout.partials.seo', [
        'title' => $travelStyle->meta_title,
        'description' => $travelStyle->meta_description,
        'keywords' => $travelStyle->meta_keywords,
        'image' => $travelStyle->getFirstMediaUrlOrDefault(MediaHelper::TRAVEL_STYLE_MEDIA_PATH, 'webp')['url'],
        'schema' => $travelStyle->schema
    ])
@endsection
@section('content')

    <main id="content">
        <div class="bg-img-hero text-center mb-1"
             style="background-image:url({{$travelStyle->getFirstMediaUrlOrDefault(MediaHelper::TRAVEL_STYLE_BANNER_MEDIA_PATH,'webp')['url']}});"
             role="img"
             title="{{$travelStyle->getFirstMediaUrlOrDefault(MediaHelper::TRAVEL_STYLE_BANNER_MEDIA_PATH)['title']}}"
             aria-label="{{$travelStyle->getFirstMediaUrlOrDefault(MediaHelper::TRAVEL_STYLE_BANNER_MEDIA_PATH)['alt']}}">
            <div class="container space-top-xl-3 py-6 py-xl-0">
                <div class="row justify-content-center py-xl-4">
                    <!-- Info -->
                    <div class="py-xl-10 py-5">
                        <h1 class="font-size-40 font-size-xs-30 text-white font-weight-bold mb-0">{{$travelStyle->heading}}</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb breadcrumb-no-gutter justify-content-center mb-0">
                                <li class="breadcrumb-item font-size-14"><a class="text-white"
                                                                            href="{{route('home')}}">{{__('general.home')}}</a>
                                </li>
                                <li class="breadcrumb-item font-size-14"><a class="text-white"
                                                                            href="{{route('travel-styles')}}">{{__('general.travel_styles')}}</a>
                                </li>
                                <li class="breadcrumb-item custom-breadcrumb-item font-size-14 text-white active"
                                    aria-current="page">{{$travelStyle->name}}
                                </li>
                            </ol>
                        </nav>
                    </div>
                    <!-- End Info -->
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-title-more pb-5">
                        <div class="title-header">
                            <div class="text show-more-height">
                                <div class="page-heading text-center m-auto">
                                    <h2>{{$travelStyle->heading}}</h2>
                                    {!! $travelStyle->description !!}
                                </div>
                            </div>
                            <div class="show-more">{{__('tour.show_more')}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row mb-5 mb-md-8 mt-xl-1 pb-md-1">
                <div class="col-lg-4 col-xl-3 order-lg-1 width-md-50">
                    <div class="navbar-expand-lg navbar-expand-lg-collapse-block">
                        <button aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation"
                                class="btn d-lg-none mb-5 p-0 collapsed" data-target="#sidebar" data-toggle="collapse"
                                type="button">
                            <i class="far fa-caret-square-down text-primary font-size-20 card-btn-arrow ml-0"></i>
                            <span class="text-primary ml-2">Sidebar</span>
                        </button>

                        <div class="collapse navbar-collapse" id="sidebar">
                            <div class="mb-6 w-100">
                                <div class="sidenav border border-color-8 rounded-xs">
                                    <!-- Accordiaon -->
                                    <div class="accordion rounded shadow-none" id="shopCartAccordion">
                                        <div class="border-0">
                                            <div class="card-collapse" id="shopCardHeadingOne">
                                                <h3 class="mb-0">
                                                    <button aria-controls="shopCardOne" aria-expanded="false"
                                                            class="btn btn-link btn-block card-btn py-2 px-5 text-lh-3 collapsed"
                                                            data-target="#shopCardOne" data-toggle="collapse"
                                                            type="button">
                                                            <span class="row align-items-center">
                                                                <span class="col-9">
                                                                    <span
                                                                        class="d-block font-size-lg-15 font-size-17 font-weight-bold text-dark">Price Range ($)</span>
                                                                </span>
                                                                <span class="col-3 text-right">
                                                                    <span class="card-btn-arrow">
                                                                        <span class="fas fa-chevron-down small"></span>
                                                                    </span>
                                                                </span>
                                                            </span>
                                                    </button>
                                                </h3>
                                            </div>
                                            <form method="get" action="{{route('travel-styles.show' , [$travelStyle->slug])}}">
                                                <div aria-labelledby="shopCardHeadingOne" class="collapse show"
                                                     data-parent="#shopCartAccordion" id="shopCardOne">
                                                    <div class="card-body pt-0 px-5">
                                                        <div class="pb-3 mb-1 d-flex text-lh-1">
                                                            <span>£</span>
                                                            <span class="" id="rangeSliderExample3MinResult"></span>
                                                            <span class="mx-0dot5"> — </span>
                                                            <span>£</span>
                                                            <span class="" id="rangeSliderExample3MaxResult"></span>
                                                        </div>
                                                        <input
                                                            name="price"
                                                            class="js-range-slider"
                                                            data-extra-classes="u-range-slider height-35"
                                                            data-from="{{$arr[0]??$travelStyle->tours()->min('price')}}"
                                                            data-grid="false"
                                                            data-hide-from-to="true"
                                                            data-max="{{$travelStyle->tours()->max('price')}}"
                                                            data-min="{{$travelStyle->tours()->min('price')}}"
                                                            data-prefix="$"
                                                            data-result-max="#rangeSliderExample3MaxResult"
                                                            data-result-min="#rangeSliderExample3MinResult"
                                                            data-to="{{$arr[1]??$travelStyle->tours()->max('price')}}"
                                                            data-type="double"
                                                            type="text"
                                                        />
                                                        <input type="submit" class="m-1 style_tour_submit"  value="{{__('tour.submit')}}">
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <!-- End Accordion -->
                                    <div class="accordion rounded-0 shadow-none border-top" id="cityCategoryAccordion">
                                        <div class="border-0">
                                            <div class="card-collapse" id="cityCategoryHeadingOne">
                                                <h3 class="mb-0">
                                                    <button aria-controls="cityCategoryOne" aria-expanded="false"
                                                            class="btn btn-link btn-block card-btn py-2 px-5 text-lh-3 collapsed"
                                                            data-target="#cityCategoryOne" data-toggle="collapse"
                                                            type="button">
                                                            <span class="row align-items-center">
                                                                <span class="col-9">
                                                                    <span
                                                                        class="font-weight-bold font-size-17 text-dark mb-3">{{__('general.travel_styles')}}</span>
                                                                </span>
                                                                <span class="col-3 text-right">
                                                                    <span class="card-btn-arrow">
                                                                        <span class="fas fa-chevron-down small"></span>
                                                                    </span>
                                                                </span>
                                                            </span>
                                                    </button>
                                                </h3>
                                            </div>
                                            <div aria-labelledby="cityCategoryHeadingOne" class="collapse show"
                                                 data-parent="#cityCategoryAccordion" id="cityCategoryOne">
                                                <div class="card-body pt-0 mt-1 px-5 pb-4">
                                                    @foreach($travelStyles as $item)
                                                        <div
                                                            class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-md text-secondary mb-3">
                                                            <a class="custom-control" style="padding:0px;"
                                                               href="{{route('travel-styles.show' ,[$item->slug])}}">
                                                                {{$item->name}}
                                                            </a>
                                                            <span>{{$item->tours()->count()}}</span>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Accordion -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8 col-xl-9 order-md-1 order-lg-2">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h3 class="font-size-21 font-weight-bold mb-0 text-lh-1">{{$travelStyle->name}}
                            : {{$travelStyle->tours()->count()}} {{__('tour.tours_found')}}</h3>
                        <ul class="nav tab-nav-shop flex-nowrap" id="pills-tab" role="tablist">
                            <form method="get" action="{{route('travel-styles.show' , [$travelStyle->slug])}}">
                                <li class="nav-item d-flex align-items-center flex-shrink-0 flex-xl-shrink-1 border-left">
                                    <select class="js-select selectpicker dropdown-select bootstrap-select__custom-nav w-auto"
                                            name="sort"
                                            onchange="this.form.submit()"
                                            data-style="btn-sm py-1 px-4 px-wd-5 font-weight-normal font-size-15  text-gray-1 d-flex align-items-center">
                                        <option value="" selected> Sort By</option>
                                        <option value="lowest">{{__('tour.lowest')}}</option>
                                        <option value="highest">{{__('tour.highest')}}</option>
                                        <option value="oldest">{{__('tour.oldest')}}</option>
                                        <option value="newest">{{__('tour.newest')}}</option>
                                    </select>
                                </li>
                            </form>
                        </ul>
                    </div>
                    <div class="row">
                        @foreach($tours as $tour)
                            <div class="col-md-6 col-lg-4 col-xl-4 mb-3 mb-md-4 pb-1">
                                @include('layout.partials.tour_box' ,['tour' => $tour , 'style'=>'second'])
                            </div>
                        @endforeach
                    </div>
                    {{$tours->links()}}
                </div>
            </div>
        </div>
        @include('layout.partials.faqs')
        @include('layout.partials.partners')
        <main
@endsection