@extends('layouts.app')

@section('title','Itineraries - Dusty helmets')
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />


@section('content')
    <style type="text/css">
    .template_faq {
    background: #edf3fe none repeat scroll 0 0;
}
.panel-group {
    background: #fff none repeat scroll 0 0;
    border-radius: 3px;
    /*box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.04);*/
    margin-bottom: 0;
    padding: 30px;
}
#accordion .panel {
    border: medium none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 15px 10px;
}
#accordion .panel-heading {
    border-radius: 15px;
    padding: 0;
}
#accordion .panel-title a {
    background: #fbaf32 none repeat scroll 0 0;
    border: 1px solid transparent;
    border-radius: 30px;
    color: #fff;
    display: block;
    font-size: 18px;
    box-shadow:  0 5px 30px 0 rgba(0, 0, 0, 0.04) !important;
    font-weight: 600;
    padding: 12px 20px 12px 50px;
    position: relative;
    transition: all 0.3s ease 0s;
}
#accordion .panel-title a.collapsed {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ddd;
    color: #333;
}
#accordion .panel-title a::after, #accordion .panel-title a.collapsed::after {
    background: #719a0a none repeat scroll 0 0;
    border: 1px solid transparent;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.58);
    color: #fff;
    content: "";
    font-family: fontawesome;
    font-size: 25px;
    height: 55px;
    left: -20px;
    line-height: 55px;
    position: absolute;
    text-align: center;
    top: -5px;
    transition: all 0.3s ease 0s;
    width: 55px;
}
#accordion .panel-title a.collapsed::after {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ddd;
    box-shadow: none;
    color: #333;
    content: "";
}
#accordion .panel-body {
    background: transparent none repeat scroll 0 0;
    border-top: medium none;
    padding: 20px 25px 10px 9px;
    position: relative;
}
#accordion .panel-body {
    /*border-left: 1px dashed #fbaf32;*/
    padding-left: 25px;
}

        .myCard {
            padding: 20px;
            border-radius: 15px;
            border-left: 1px solid #fbaf32 !important;
            border-right: 1px solid #fbaf32 !important;
        }
    </style>
    <!-- Page Header Start -->
    <!-- p8/pic1 -->
    <div class="mb-0 page-header" style="background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(public/assets/P8/pic1.jpg);background-position: center;
    background-repeat: no-repeat;
    background-size: cover;">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2>Itineraries</h2>
                </div>
                <div class="col-12">
                    <a href="{{url('/')}}">Home</a>
                    <a href="{{url('/itineraries')}}">Itineraries</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->

    <div class="about">
        <div class="container">
            <div class="row align-items-center">

                <div class="col-lg-12">
                    <div class="about-content">
                        <div class="section-header">
                            <p>{{$page->title}}</p>
                            <h2 class="dusty-color">{{$page->title1}}</h2>
                        </div>
                        
                                   <!--<div class="menu-tab">-->
               
                
			<!--<div class="row">				-->
				<!--<div class="col-md-12">-->
					<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" style="padding: 0px !important;">
					    
					    @foreach($itineraries as $itinerary)
					    
                                <!--<div id="{{$itinerary->controls}}" class="container shadow active myCard"-->
                                <!--     style="@if($itinerary->id >1)display:none;@endif">-->
                                    
                                <!--</div>-->
                        
						<div class="panel panel-default" title="Click for more details">
							<div class="panel-heading" role="tab" id="heading{{$itinerary->id}}">
								<h4 class="panel-title" onclick="$('html,body').stop();">
									<a @if($loop->iteration == 0) aria-expanded="false"  @else class="collapsed" aria-expanded="true" @endif role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$itinerary->id}}" aria-controls="collapse{{$itinerary->id}}">
										{{$itinerary->title}} 
									</a>
								</h4>
							</div>
							<div id="collapse{{$itinerary->id}}" @if($loop->iteration == 0) class="panel-collapse in collapse myCard shadow show" @else class="myCard shadow panel-collapse collapse" @endif role="tabpanel" aria-labelledby="heading{{$itinerary->id}}">
								<div class="panel-body">
									
									<div class="row">
                                        {!! $itinerary->content !!}
                                        <div class="col-lg-4 d-none d-lg-block">
                                            <!-- <img src="assets/P4/pic2.jpg" alt="Image"> -->
                                            <div class="mt-4 services services-1 color-2 d-block img"
                                                 style="background-image: url({{asset('')}}public/storage/{{$itinerary->image}});">
                                                <div class="icon d-flex align-items-center justify-content-center" style="background: transparent !important;">
                                                    <!--<span class="fa fa-moon"></span>-->
                                                        </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" id="moreDoc1">
                                        {!! $itinerary->prices !!}
                                    </div>
                                    
                                    <div id="landscape">
                                        <div class="row portfolio-container">
                                            {!! $itinerary->pics !!}
                                        </div>
                                    </div>
								</div>
							</div>
						</div>
						@endforeach
						
					<!--</div>-->
				
			
            
            </div>
            
                    </div>
                </div>
            </div>
        </div>
    </div>

    
    <script>
    function stopScroll() {
      $('html,body').stop();
    }
    

        (function($) {
        	'use strict';
        	jQuery(document).on('ready', function(){
   	  			$('a.page-scroll').on('click', function(e){
        				var anchor = $(this);
        				alert(anchor);
        				$('html, body').stop().animate({
        					scrollTop: $(anchor.attr('href')).offset().top - 50
        				}, 1500);
        				e.preventDefault();
        			});	
        	}); 	
        
        				

    </script>

@endsection