@extends('web_theme::layout.main')

@php
    $title = $project && $project->title
        ? $project->title . ' | Projects | El DiDi Group'
        : 'Project Details | El DiDi Group';

    $description = $project && $project->description
        ? \Illuminate\Support\Str::limit(strip_tags($project->description), 150)
        : 'Explore project details and achievements by El DiDi Group.';

    $ogImage = !empty($project->photo)
        ? asset($project->photo)
        : asset('themes/web/assets/images/logo.png');
@endphp

@section('title', $title)
@section('meta_description', $description)
@section('og_image', $ogImage)

@section('content')
	<!-- Page Title -->
    <section class="page-title">
    	<div class="content" style="background-image: url('{{ asset($productHeaderImg) }}')">
		</div>
    </section>
    <!-- End Page Title -->
	
	<!-- Project Detail Section -->
	<section class="projects-detail-section">
		<div class="auto-container">
			<!-- Title Box -->
			<div class="title-box">
				<div class="clearfix">
					<div class="pull-left">
						<h1>{{ $project->title }}</h1>
					</div>
				</div>
			</div>
			<!-- End Title Box -->		
			<!-- Info Box -->
			<div class="info-box">
				<!-- Lower Info -->
				<div class="lower-info">
					<div class="clearfix">
						<div class="pull-left">
							<ul class="info-list">
								<li><span>Client :</span>{{ $project->client }}</li>
							</ul>
						</div>
						<div class="pull-right">
							<ul class="info-list">
								<li><span>Location :</span> {{ $project->location }}</li>
								{{-- <li><span>Year :</span> {{ $project->created_at->format('Y') }} </li> --}}
							</ul>
						</div>
					</div>
				</div>
				
			</div>
			<!-- End Info Box -->
			
			@if (!empty($project->youtube_url))
				<div class="row clearfix">
					<div class="news-block-two col-lg-12 col-md-12 col-sm-12">
						<iframe width="100%" height="450" src="{{ $project->youtube_url }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
					</div>
				</div>
			@endif

			<h3>Project Details:</h3>
			{!! $project->description !!}
			
		</div>
	</section>
	
@endsection