@extends('layouts.default')

@section('title', 'Portfolio | SYNΛMEN®')
@section('description',  $brand->name)
@section('keywords', 'Portfolio')
@section('content')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/tiny-slider.css') }}">
<style>
.prev-btn.test-btn , .next-btn.test-btn 
{
    font-size: 30px;
    margin-top: 20px;
}
button[data-action="stop"]{
    display: none;
}
button[data-action="start"]{
    display: none;
}
.case-study-thumb .tns-controls
{
    display:block;
    width: 100%;
}
.case-study-thumb .tns-controls button[data-controls="prev"]
{
    float:left;
    z-index: 1;
    margin-top: 5rem;
    padding-right: 20px;
}
.case-study-thumb .tns-controls button[data-controls="next"]
{
    float:right;
    margin-top: 5rem;
    padding-left: 20px;
}
</style>
<section class="my-12 wow fadeInUp" data-wow-delay="0.1s">
    <div class="container">
        <div class="flex flex-wrap">
            <div class="w-full sm:w-1/2 md:w-1/2 lg:w-8/12 2xl:w-7/12">
                <div class="flex flex-wrap">
                    <div class="w-1/2 sm:w-1/2 md:w-1/2 lg:w-8/12">
                        <p class="text-2xl font-medium">{{ $brand->name }}</p>
                        <div class="w-24 border-b-4 border-[#abd148]"></div>
                    </div>
                    <div class="w-1/2 sm:w-1/2 md:w-1/2 lg:w-4/12">
                        <ul class="control flex justify-end text-3xl lg:pr-20 md:pr-20" id="custom-control">
                            <li class="prev cursor-pointer hover:text-[#9cc012]">
                            <i class="lni lni-chevron-left-circle"></i>
                            </li>
                            <li class="next cursor-pointer hover:text-[#9cc012] pl-4">
                            <i class="lni lni-chevron-right-circle"></i>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="w-full mt-8">
                    <img class="img-fluid" src="{{ asset('assets/img/portfolio/synamen-port-browse.webp') }}" width="780px" height="42" alt="slider-top">
                    <div class="">
                        <div class="portfolio-carousel">
                            @foreach( $brand->gallery as $path )
                            <div>
                                <img src="{{ asset('images/portfoliobrand-img/'.$path) }}" class="border-2 border-[#eee] w-fit" width="777" height="756" alt="{{ $brand->slug }}">
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full sm:w-1/2 md:w-1/2 lg:w-4/12 2xl:w-5/12">
                <div class="h-full bg-[url('/assets/img/portfolio/portfolio-dot-bg.webp')] bg-[#f2f2f2] bg-no-repeat bg-left-bottom p-8">
                    <div class="pb-3.5">
                        {!! $brand->description !!}
                    </div>    
                    @if( $brand->no_links == 0 )
                    <div class="mt-6">
                        <a href="{{ $brand->external_link }}" target="_blank" class="font-medium text-sm mt-6 text-white p-3 bg-[#757575]">
                            <button>{{ $brand->button_text }}</button>
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
<section class="my-8">
    <div class="container">
        <div class="py-8 border-t-2 border-b-2 border-[#eee]">
            <div class="flex flex-wrap">
                <div class="w-full sm:w-1/2 md:w-1/2 lg:w-1/3 text-start">
                    @if( !empty($previous) )
                    <a href="{{ url('portfolio/'.$previous->portfolioCategory[0]->slug.'/'.$previous->slug) }}" class="text-[#939192] hover:text-black"><i class="lni lni-angle-double-left text-2xl text-semibold" style="font-weight:600; font-size:24px"></i><span class="text-[18px] pl-2.5">{{ $previous->name }}</span></a>
                    @endif
                </div>
                <div class="w-full sm:w-1/2 md:w-1/2 lg:w-1/3 text-center">
                    <a href="{{ url('portfolio') }}" class="text-[#939192] hover:text-black text-3xl"><i class="lni lni-grid"></i></a>
                </div>
                <div class="w-full sm:w-1/2 md:w-1/2 lg:w-1/3 text-end">
                    @if( !empty($next) )
                    <a href="{{ url('portfolio/'.$next->portfolioCategory[0]->slug.'/'.$next->slug) }}" class="text-[#939192] hover:text-black"><span class="text-[18px] pr-2.5">{{ $next->name }}</span><i class="lni lni-angle-double-right" style="font-weight:600; font-size:24px"></i></a>
                    @endif
                </div>                
            </div>
        </div>
        <div class="py-8 case-study-thumb">
            <p class="text-2xl font-medium">Related Projects</p>
            <div class="w-24 border-b-4 border-[#abd148] mb-4"></div>
            <div class="portfolio-carousel-related-post mt-6">
                @foreach($relatedTopic as $topic)
                <div class="min-h-[300px]">
                    <div class="shadow">
                        <a href="{{ url('portfolio/'.$topic->portfolioCategory[0]->slug.'/'.$topic->slug) }}" >
                            <div class="max-h-[170px] overflow-hidden">
                                <img src="{{ asset('images/portfoliobrand-img/'.$topic->featured_image) }}" class="relative w-full object-fill" width="360" height="205" alt="{{ $topic->slug }}">
                            </div>
                            <div class="text-center py-3.5">
                                <p class="text-[15px] font-semibold mb-2">{{ Str::limit($topic->name,30) }}</p>
                            </div>
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
<script src="{{ asset('assets/js/tiny-slider.js') }}"></script>
<script>
   tns({
      container: '.portfolio-carousel',
      items: 1,
      slideBy: 'page',
      autoplay: true,
      mouseDrag: true,
      controlsPosition:"top",
      controlsContainer: "#custom-control",
      nav: false,
      // gutter: 0,
      controls: true,
    });
    tns({
      container: '.portfolio-carousel-related-post',
      items: 3,
      gutter: 30,
      edgePadding:10,
      autoplay: true,
      mouseDrag: true,
      nav: false,
      controlsText:["<p class='prev-btn test-btn'><i class='lni lni-chevron-left-circle hover:text-[#9cc012]'></i></p>", "<p class='next-btn test-btn'><i class='lni lni-chevron-right-circle hover:text-[#9cc012]'></i></p>"],
      controlsPosition:"top",
      controls: true,
      responsive: {
        0: {
          items: 1,
        },
        765: {
          items: 2,
        },
        1024: {
          items: 3,
        }
      }
    });
</script>
@endsection