@extends('layouts.app')

@section('head-title')
    <title>Covet Foundation Artisans</title>
@endsection

@section('head-style')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('css/style.css')}}">
    <style type="text/css">
    	#artisan-individual #second-section{
		    height: 100vh;
		    background-size: cover;
		    background-attachment: fixed;
		    background-position: center center;
		    background-image: url(/imgs/artisans/{{ $artisanInfo->slug }}/fundo.jpg);
		    background-clip: content-box;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    text-align: center;
		}
		#artisan-individual #fourth-section{
		    height: 500px;
		    background-size: cover;
		    background-attachment: fixed;
		    background-position: center center;
		    background-image: url(/imgs/artisans/{{ $artisanInfo->slug }}/gallery/8.jpg);
		    background-clip: content-box;
		}

		#artisan-individual #sixth-section{
		    height: 500px;
		    background-size: cover;
		    background-attachment: fixed;
		    background-position: center center;
		    background-image: url(/imgs/artisans/{{ $artisanInfo->slug }}/gallery/11.jpg);
		    background-clip: content-box;
		}
    </style>
@endsection

@section('content')
<div id="artisan-individual">
	<div style="height: 65px"></div>
	{{-- <section id="first-section">
		<div class="container">
			<div class="row">
				<div class="col-xs-12">
					<div id="menu-artisans-techniques">
						<div class="btn-group">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								ARTISANS <span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
							<li><a href="{{ route('frontend.artisans-individual', 'mr-araujo') }}">MR. ARAUJO</a></li>
							<li><a href="{{ route('frontend.artisans-individual', 'mr-rocha') }}">MR. ROCHA</a></li>
							<li><a href="{{ route('frontend.artisans-individual', 'mr-cosme') }}">MR. COSME</a></li>
							</ul>
						</div>
						<div class="btn-group">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								TECHNIQUES <span class="caret"></span>
							</button>
							<ul class="dropdown-menu" id="techniques-dropdown">
								<li data-image="/imgs/artisans-and-techniques/wood-carving/wood-carving.jpg"><a href="{{ route('frontend.techniques') }}#wood-carving">WOOD CARVING</a></li>
								<li data-image="/imgs/artisans-and-techniques/gold-leaf-gilding/gold-leaf-gilding.jpg"><a href="{{ route('frontend.techniques') }}#gold-leaf-gilding">GOLD LEAF GILDING</a></li>
								<li data-image="/imgs/artisans-and-techniques/metal-casting/metal-casting.jpg"><a href="{{ route('frontend.techniques') }}#metal-casting">METAL CASTING</a></li>
								<li data-image="/imgs/artisans-and-techniques/azulejo/azulejo.jpg"><a href="{{ route('frontend.techniques') }}#azulejo">AZULEJO</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section> --}}
	<section id="second-section">
		<div class="container-fluid">
			<div class="row">
				<p>
					{!! $artisanInfo->article_languages[0]->section_text !!}
				</p>
				<!-- <a href="{{ route('frontend.artisans-individual-gallery', $artisanInfo->slug) }}" id="down-section" class="btn btn-transparent">VIEW ALL PHOTOS</a> -->
				<a id="down-section" class="btn btn-transparent">VIEW ALL PHOTOS</a>
			</div>
		</div>
	</section>
	<section id="third-section">
		<div class="container">
			<div class="row marg-top-50 marg-bottom-35">
				<div class="col-xs-8 col-xs-offset-2 content-first-text" data-aos="fade-up">
					<h1 class="titles-playf">{!! $artisanInfo->article_languages[0]->title !!}</h1>
					<h4 class="marg-bottom-35 padding-left-50">{!! $artisanInfo->article_languages[0]->sub_titulo !!}</h4>
					{!! $artisanInfo->article_languages[0]->body !!}
				</div>
			</div>
		</div>
		<div class="container-fluid">
			<div class="row">
				<div class="col-xs-12 col-sm-4 padding-left-0 padding-right-0" data-aos="zoom-in"><img src="/imgs/artisans/{{ $artisanInfo->slug}}/gallery/1.jpg" alt="" class="img-responsive"></div>
				<div class="col-xs-12 col-sm-4 padding-left-0 padding-right-0" data-aos="zoom-in" data-aos-delay="100"><img src="/imgs/artisans/{{ $artisanInfo->slug}}/gallery/2.jpg" alt="" class="img-responsive"></div>
				<div class="col-xs-12 col-sm-4 padding-left-0 padding-right-0" data-aos="zoom-in" data-aos-delay="200"><img src="/imgs/artisans/{{ $artisanInfo->slug}}/gallery/3.jpg" alt="" class="img-responsive"></div>
			</div>
		</div>
		<div class="container">
			<div class="row marg-top-50 marg-bottom-35">
				<div class="col-xs-8 col-xs-offset-2 content-first-text" data-aos="fade-up">
					{!! $artisanInfo->article_languages[0]->body2 !!}
				</div>
			</div>
		</div>
		<div class="container-fluid">
			<div class="row">
				@if ($artisanInfo->slug == 'mr-ferreira')
				<div class="video-full">
					<video onclick="playVideo()" autoplay loop id="videoplay" width="640" controls class="videoHt embed-responsive embed-responsive-16by9">
					  	<source class="embed-responsive-item" id="videogo" src="../../videos/azulejo-technique-by-covet-foundation.mp4" type="video/mp4">
					</video>
				</div>
				@else
				<div class="video-full">
					<video onclick="playVideo()" autoplay loop id="videoplay" width="640" controls class="videoHt embed-responsive embed-responsive-16by9">
					  	<source class="embed-responsive-item" id="videogo" src="../../videos/filigree-technique-by-brhands-foundation.mp4" type="video/mp4">
					</video>
				</div>
				<!-- <div class="col-xs-12 padding-left-0 padding-right-0" data-aos="zoom-in-up"><img src="/imgs/artisans/{{ $artisanInfo->slug}}/gallery/4.jpg" alt="" class="img-responsive"></div> -->
				@endif
				
			</div>
		</div>
		<div class="container">
			<div class="row marg-top-30 marg-bottom-30">
				<div class="col-xs-12 col-sm-12 col-md-6" data-aos="zoom-in">
					<img src="/imgs/artisans/{{ $artisanInfo->slug}}/gallery/5.jpg" alt="" class="img-responsive pull-right">
				</div>
				<div class="col-xs-12 col-sm-12 col-md-6" data-aos="zoom-in" data-aos-delay="100">
					<img src="/imgs/artisans/{{ $artisanInfo->slug}}/gallery/6.jpg" alt="" class="img-responsive pull-left marg-top-xs-20 marg-top-sm-20 marg-top-md-100 marg-top-lg-100 marg-bottom-20">
				</div>
				<div class="col-xs-12" data-aos="zoom-in" data-aos-delay="200">
					<img src="/imgs/artisans/{{ $artisanInfo->slug}}/gallery/7.jpg" alt="" class="img-responsive">
				</div>
			</div>
		</div>
	</section>
	<section id="fourth-section">
		<div class="container-fluid">
			<div class="row">
			</div>
		</div>
	</section>
	<section id="fifth-section">
		<div class="container">
			<div class="row marg-top-50 marg-bottom-35">
				<div class="col-xs-8 col-xs-offset-2 content-first-text" data-aos="fade-up">
					{!! $artisanInfo->article_languages[0]->body3 !!}
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2" data-aos="zoom-in">
					<img src="/imgs/artisans/{{ $artisanInfo->slug}}/gallery/9.jpg" alt="" class="img-responsive">
				</div>
				<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2" data-aos="zoom-in" data-aos-delay="100">
					<img src="/imgs/artisans/{{ $artisanInfo->slug}}/gallery/10.jpg" alt="" class="img-responsive marg-top-10 marg-bottom-50">
				</div>
			</div>
		</div>
	</section>
	<section id="sixth-section">
		<div class="container-fluid">
			<div class="row">
			</div>
		</div>
	</section>
	<section id="seventh-section">
		<div class="container">
			<div class="row marg-top-50 marg-bottom-35">
				<div class="col-xs-8 col-xs-offset-2 content-first-text" data-aos="fade-up">
					{!! $artisanInfo->article_languages[0]->body4 !!}
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1" data-aos="zoom-in">
					<img src="/imgs/artisans/{{ $artisanInfo->slug}}/gallery/12.jpg" alt="" class="img-responsive">
				</div>
			</div>
			<div class="row marg-top-50 marg-bottom-35">
				<div class="col-xs-8 col-xs-offset-2 content-first-text" data-aos="fade-up">
					{!! $artisanInfo->article_languages[0]->body5 !!}
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1" data-aos="zoom-in-up">
					<img src="/imgs/artisans/{{ $artisanInfo->slug}}/gallery/13.jpg" alt="" class="img-responsive">
				</div>
			</div>
			<!-- <div class="row marg-top-20">
				<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 padding-left-0 padding-right-0">
					<div class="col-xs-12 col-sm-6 col-md-4 artisan-container-text text-center-xs content-artisans-footer" data-aos="fade-up">
						<img src="/imgs/artisans/mr-ferreira/thumbnail.jpg" class="img-responsive" alt="">
						<h1 class="titles-playf">MR. FERREIRA</h1>
						<h4 class="yellow-top"><span style="font-size: 15px">*31 YEARS MASTERING TILES (AZULEJO)</span></h4>
						<p class="button"><a href="{{ route('frontend.artisans-individual', 'mr-ferreira') }}" class="btn-form-contact marg-top-5">READ MORE</a></p>
					</div>
					<div class="col-xs-12 col-sm-6 col-md-4 artisan-container-text text-center-xs content-artisans-footer" data-aos="fade-up" data-aos-delay="200">
						<img src="/imgs/artisans/mr-rocha/thumbnail.jpg" class="img-responsive image-one" alt="">
						<h1 class="titles-playf">MR. ROCHA</h1>
						<h4 class="yellow-top"><span style="font-size: 15px">*31 YEARS MASTERING FILIGREE</span></h4>
						<p class="button"><a href="{{ route('frontend.artisans-individual', 'mr-rocha') }}" class="btn-form-contact marg-top-5">READ MORE</a></p>
					</div>
					<div class="col-xs-12 col-sm-6 col-md-4 artisan-container-text text-center-xs content-artisans-footer" data-aos="fade-up" data-aos-delay="400">
						<img src="/imgs/artisans/mr-cosme/thumbnail.jpg" class="img-responsive" alt="">
						<h1 class="titles-playf">MR. COSME</h1>
						<h4 class="yellow-top"><span style="font-size: 15px">*40 YEARS MASTERING JOINERY</span></h4>
						<p class="button"><a href="{{ route('frontend.artisans-individual', 'mr-cosme') }}" class="btn-form-contact marg-top-5">READ MORE</a></p>
					</div>
				</div>
			</div> -->
			@if ($artisanInfo->slug == 'mr-ferreira')
			<div class="row marg-top-20">
				<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 padding-left-0 padding-right-0">
					<div class="col-xs-12 col-sm-6 col-md-6 artisan-container-text text-center-xs content-artisans-footer" data-aos="fade-up" data-aos-delay="200">
						<img src="/imgs/artisans/mr-rocha/mr-rocha-h.jpg" class="img-responsive image-one" alt="">
						<h1 class="titles-playf">MR. ROCHA</h1>
						<h4 class="yellow-top"><span style="font-size: 15px">*31 YEARS MASTERING FILIGREE</span></h4>
						<p class="button"><a href="{{ route('frontend.artisans-individual', 'mr-rocha') }}" class="btn-form-contact marg-top-5">READ MORE</a></p>
					</div>
					<div class="col-xs-12 col-sm-6 col-md-6 artisan-container-text text-center-xs content-artisans-footer" data-aos="fade-up" data-aos-delay="400">
						<img src="/imgs/artisans/mr-cosme/mr-cosme-h.jpg" class="img-responsive" alt="">
						<h1 class="titles-playf">MR. COSME</h1>
						<h4 class="yellow-top"><span style="font-size: 15px">*40 YEARS MASTERING JOINERY</span></h4>
						<!-- <p class="button"><a href="{{ route('frontend.artisans-individual', 'mr-cosme') }}" class="btn-form-contact marg-top-5">READ MORE</a></p> -->
					</div>
				</div>
			</div>
			@elseif ($artisanInfo->slug == 'mr-rocha')
				<div class="row marg-top-20">
				<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 padding-left-0 padding-right-0">
					<div class="col-xs-12 col-sm-6 col-md-6 artisan-container-text text-center-xs content-artisans-footer" data-aos="fade-up" data-aos-delay="200">
						<img src="/imgs/artisans/mr-ferreira/mr-ferreira-h.jpg" class="img-responsive" alt="">
						<h1 class="titles-playf">MR. FERREIRA</h1>
						<h4 class="yellow-top"><span style="font-size: 15px">*31 YEARS MASTERING TILES (AZULEJO)</span></h4>
						<p class="button"><a href="{{ route('frontend.artisans-individual', 'mr-ferreira') }}" class="btn-form-contact marg-top-5">READ MORE</a></p>
					</div>
					<div class="col-xs-12 col-sm-6 col-md-6 artisan-container-text text-center-xs content-artisans-footer" data-aos="fade-up" data-aos-delay="400">
						<img src="/imgs/artisans/mr-cosme/mr-cosme-h.jpg" class="img-responsive" alt="">
						<h1 class="titles-playf">MR. COSME</h1>
						<h4 class="yellow-top"><span style="font-size: 15px">*40 YEARS MASTERING JOINERY</span></h4>
						<!-- <p class="button"><a href="{{ route('frontend.artisans-individual', 'mr-cosme') }}" class="btn-form-contact marg-top-5">READ MORE</a></p> -->
					</div>
				</div>
			</div>
			@else

			@endif
		</div>
		<div style="height: 30px"></div>
	</section>
</div>
@endsection

@section('foot')
	{{-- <script src="/js/wow.min.js" type="text/javascript" charset="utf-8"></script> --}}
	<script>
  var x = document.getElementById("videoplay");

function playVideo() {
	if(x.paused){
	    x.play();
	}else{
	    x.pause();
	}
}
</script>
	<script type="text/javascript">
		$(document).ready(function() {
			/*new WOW().init();*/
			$('html, body').animate({
		      scrollTop: $('#second-section').offset().top-40
		    }, 1000);

			/*$('#down-section').on('click', function(event) {
				event.preventDefault();
				$('html, body').animate({
			      scrollTop: $('#third-section').offset().top-40
			    }, 1000);
			});*/
		});
	</script>
@endsection