@extends('web.layouts.main')
@section('content')
    @if($banner && $banner->banner!=NULL)
        <section class="bannerArea">
            <img src="{{asset($banner->banner)}}" class="img-fluid w-100 bannerImg" {!!$banner->banner_meta_tag!!}>
            <div class="container position-relative">
                <div class="row">
                    <div class="col-lg-12">
                        <h2>Our Projects</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{$portfolio->title}}</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <section class="portfolio-details">
        <div class="container">
            <div class="row">
                @if($portfolio->photos->isNotEmpty())
                    <div class="col-lg-7 pe-lg-4">
                        <div class="slider-portfolio-for">
                            @foreach($portfolio->photos as $photo)
                                @if($photo->type=="Video")
                                    <div class="item video">
                                        <a class="videoBtn" href="{{$photo->video_url}}" data-fancybox="group">
                                            <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g filter="url(#filter0_d_119_7)">
                                                    <circle cx="50" cy="50" r="30" fill="#822800"/>
                                                </g>
                                                <g clip-path="url(#clip0_119_7)">
                                                    <path d="M44.2552 40.441C42.4521 39.4067 40.9902 40.254 40.9902 42.332V57.6666C40.9902 59.7466 42.4521 60.5928 44.2552 59.5595L57.6584 51.8729C59.4621 50.8382 59.4621 49.1619 57.6584 48.1275L44.2552 40.441Z" fill="white"/>
                                                </g>
                                                <defs>
                                                    <filter id="filter0_d_119_7" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                                        <feOffset/>
                                                        <feGaussianBlur stdDeviation="10"/>
                                                        <feComposite in2="hardAlpha" operator="out"/>
                                                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
                                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_119_7"/>
                                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_119_7" result="shape"/>
                                                    </filter>
                                                    <clipPath id="clip0_119_7">
                                                        <rect width="20" height="20" fill="white" transform="translate(40 40)"/>
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                        </a>
                                        <img src="{{asset($photo->image)}}" class="img-fluid w-100" {!!$photo->image_attribute!!}>
                                    </div>
                                @else
                                    <div class="item">
                                        <img src="{{asset($photo->image)}}" class="img-fluid w-100" alt="{{ config('app.name') }}">
                                    </div>
                                @endif    
                            @endforeach
                        </div>
                        <div class="slider-portfolio-nav">
                            @foreach($portfolio->photos as $photo)
                                @if($photo->type=="Video")
                                    <div class="item video">
                                        <a class="videoBtn" href="javascript:void(0)">
                                            <svg width="40" height="40" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g filter="url(#filter0_d_119_7)">
                                                    <circle cx="50" cy="50" r="30" fill="#822800"/>
                                                </g>
                                                <g clip-path="url(#clip0_119_7)">
                                                    <path d="M44.2552 40.441C42.4521 39.4067 40.9902 40.254 40.9902 42.332V57.6666C40.9902 59.7466 42.4521 60.5928 44.2552 59.5595L57.6584 51.8729C59.4621 50.8382 59.4621 49.1619 57.6584 48.1275L44.2552 40.441Z" fill="white"/>
                                                </g>
                                                <defs>
                                                    <filter id="filter0_d_119_7" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                                        <feOffset/>
                                                        <feGaussianBlur stdDeviation="10"/>
                                                        <feComposite in2="hardAlpha" operator="out"/>
                                                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
                                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_119_7"/>
                                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_119_7" result="shape"/>
                                                    </filter>
                                                    <clipPath id="clip0_119_7">
                                                        <rect width="20" height="20" fill="white" transform="translate(40 40)"/>
                                                    </clipPath>
                                                </defs>
                                            </svg>

                                        </a>
                                        <img src="{{asset($photo->image)}}" class="img-fluid w-100" {!!$photo->image_attribute!!}>
                                    </div>
                                @else
                                    <div class="item">
                                        <img src="{{asset($photo->image)}}" class="img-fluid w-100" alt="{{ config('app.name') }}">
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                @endif
                <div class="col-lg-{{($portfolio->photos->isNotEmpty())?'5':'12'}} mt-lg-0 mt-4 d-flex align-items-center">
                    <div>
                        <h4>{{$portfolio->title}}</h4>
                        <ul>
                            @if($portfolio->location!=NULL)
                                <li>
                                    <b>Location :</b> {{$portfolio->location}}
                                </li>
                            @endif
                            @if($portfolio->type!=NULL)
                                <li>
                                    <b>Type :</b> {{$portfolio->type}}
                                </li>
                            @endif
                            @if($portfolio->attendees!=NULL)
                                <li>
                                    <b>Attendees :</b> {{$portfolio->attendees}}
                                </li>
                            @endif
                        </ul>
                        @if($portfolio->description!=NULL)
                            {!!$portfolio->description!!}
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
    @if($nextItem!=NULL || $previousItem!=NULL)
        <section class="portfolioNav">
            <div class="container">
                <div class="row">
                    @if($previousItem!=NULL)
                        <div class="col-6 pe-lg-3">
                            <a href="{{url('project/'.$previousItem->short_url)}}" class="navBox navBoxRev">
                                <div class="imgBox">
                                    @if($previousItem->thumbnail->isNotEmpty())
                                        @foreach($previousItem->thumbnail as $thumbnail)
                                            <img src="{{asset($thumbnail->image)}}" class="img-fluid w-100" alt="{{ config('app.name') }}">
                                        @endforeach
                                    @else
                                        <img src="{{asset('web/images/projects/projects-02.jpg')}}" class="img-fluid w-100" alt="{{ config('app.name') }}">
                                    @endif
                                </div>
                                <div class="dtBox">
                                    <h6>{{$previousItem->title}}</h6>
                                    @if($previousItem->location!=NULL)
                                        <p>{{$previousItem->location}}</p>
                                    @endif
                                </div>
                            </a>
                        </div>
                    @endif
                    @if($nextItem!=NULL)
                        <div class="col-6 ps-lg-3">
                            <a href="{{url('project/'.$nextItem->short_url)}}" class="navBox">
                                <div class="imgBox">
                                    @if($nextItem->thumbnail->isNotEmpty())
                                        @foreach($nextItem->thumbnail as $thumbnail)
                                            <img src="{{asset($thumbnail->image)}}" class="img-fluid w-100" alt="{{ config('app.name') }}">
                                        @endforeach
                                    @else
                                        <img src="{{asset('web/images/projects/projects-02.jpg')}}" class="img-fluid w-100" alt="{{ config('app.name') }}">
                                    @endif
                                </div>
                                <div class="dtBox">
                                    <h6>{{$nextItem->title}}</h6>
                                    @if($nextItem->location!=NULL)
                                        <p>{{$nextItem->location}}</p>
                                    @endif
                                </div>
                            </a>
                        </div>
                    @endif    
                </div>
            </div>
        </section>
    @endif    
@include('web.render._clients')
@endsection