@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')

@endsection

@section('content')

<link rel="stylesheet" href="{{ asset('/css/frontend/single-portfolio-multimedia.css') }}">


<div class="messenger-box">
    <div>
         <a href="#">
            <div class="arrow-container">
                <i style="color: white;;" class="fa-solid fa-arrow-up"></i>
            </div>
        </a>
    </div>
    <a href="https://www.messenger.com/t/2350712291663307/?messaging_source=source%3Apages%3Amessage_shortlink&source_id=1441792&recurring_notification=0">
        <img src="{{ asset('assets/homepage/messenger.png') }}" alt="messenger" width="55px">
    </a>
</div>

<section class="portfolio-single-main-section-container proxima" draggable="false">
    <div class="card border-0" draggable="false" style="background:rgba(255,255,255, 0)">
        <img class="portfolio-single-image-banner" src="{{ asset('assets/single-portfolio/single-portfolio-banner.png') }}" alt="portfolio-banner">
        <div class="card-img-overlay container" draggable="false">
            <div class="col-12">
                <div class="row">
                    <div class="portfolio-single-main-title">
                        <span>
                            {{ $portfolio->client_name }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="portfolio-single-second-section-container proxima" draggable="false">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-12 order-lg-0 order-md-0 order-sm-0 order-1">
                <div class="portfolio-single-left-box">
                    <div class="portfolio-single-company-icon">
                        <img src="{{ asset('uploads/portfolios/' . $portfolio->logo) }}" alt="logo">
                    </div>
                    <div class="portfolio-single-company-name">
                        {{ $portfolio->client_name }}
                    </div>
                    <div class="portfolio-single-company-description">
                        {!! $portfolio->description !!}
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-12 order-lg-1 order-md-1 order-sm-1 order-0">
                <div class="portfolio-single-right-box">
                    <div class="splide">
                        <div class="splide__track">
                            <ul class="splide__list">
                                @if ($portfolio->image_1)
                                @php
                                $images = json_decode($portfolio->image_1);
                                @endphp
                                @foreach ($images as $image)
                                @if (pathinfo($image, PATHINFO_EXTENSION) === 'mp4')
                                <li class="splide__slide">
                                    <video controls>
                                        <source class="img-fluid" src="{{ asset('uploads/portfolios/' . $image) }}" type="video/mp4">
                                        Your browser does not support the video tag.
                                    </video>
                                </li>
                                @else
                                <li class="splide__slide">
                                    <img class="img-fluid" src="{{ asset('uploads/portfolios/' . $image) }}" alt="image">
                                </li>
                                @endif
                                @endforeach
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>


            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    new Splide('.splide', {
                        type: 'slide',
                        perPage: 1,
                        arrows: false,
                        pagination: false,
                        autoplay: true,
                        pauseOnHover: true,
                        pagination: false, // Enable pagination if needed
                    }).mount();
                });
            </script>
        </div>
    </div>
</section>

<section class="portfolio-single-third-section-container proxima" draggable="false">
    <div class="container">
        <div class="col-12 portfolio-single-third-title-container" id="quoted-container">
            <div class="card border-0" style="background: rgba(255,255,255, 0)">
                <div class="portfolio-single-third-number">
                    <span>
                        01
                    </span>
                </div>
                <div>
                    <div class="portfolio-single-third-title">
                        <span>
                            The <span style="font-weight: bold">Client</span>
                        </span>
                    </div>
                    <div class="portfolio-single-third-title-2">
                        <span>
                            <span style="font-weight: bold">Project</span> Concept
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="portfolio-single-third-description">
                {!! $portfolio->concept !!}
            </div>
        </div>
    </div>
</section>

<section class="portfolio-single-fourth-section-container proxima" draggable="false">
    <div class="container">
        <div class="col-12 portfolio-single-fourth-container" id="overview-container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-12 portfolio-single-fourth-left-box">
                    <div class="card border-0" style="background: rgba(255,255,255, 0)">
                        <div class="portfolio-single-fourth-number">
                            <span>
                                02
                            </span>
                        </div>
                        <div>
                            <div class="portfolio-single-fourth-title">
                                <span>
                                    <span style="font-weight: bold">Discover</span> our
                                </span>
                            </div>
                            <div class="portfolio-single-fourth-title-2">
                                <span>
                                    Sucessful <span style="font-weight: bold">Key Deliveries</span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="portfolio-single-fourth-button-box">
                        <div class="portfolio-single-fourth-button">
                            <a href="{{$portfolio->link_1}}" target="_blank">
                                <i class="fa-solid fa-globe"></i> Their Website
                            </a>
                        </div>
                        <div class="portfolio-single-fourth-button">
                            <a href="{{$portfolio->link_2}}" target="_blank">
                                <i class="fa-solid fa-house"></i> Visit Them
                            </a>
                        </div>
                    </div>
                    <div class="portfolio-single-fourth-image">
                        <img src="{{ asset('uploads/portfolios/' . $portfolio->image_2) }}" alt="portfolio-banner">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-12 portfolio-single-fourth-right-box">
                    <div class="portfolio-single-fourth-answer">
                        {!! $portfolio->key_delivery !!}
                    </div>
                    <div class="portfolio-single-fourth-date-box">
                        <div class="portfolio-single-fourth-date">
                            <div class="date-title">
                                DATE STARTED:
                            </div>
                            <div class="date-answer">
                                {{ \Carbon\Carbon::parse($portfolio->start_date)->format('F j, Y') }}
                            </div>
                        </div>
                        <div class="portfolio-single-fourth-categories">
                            <div class="categories-title">
                                CATEGORY:
                            </div>
                            <div class="categories-answer">
                                {{$portfolio->category}}
                            </div>
                        </div>
                    </div>
                    <div class="portfolio-single-fourth-date-box">
                        <div class="portfolio-single-fourth-date-end">
                            <div class="date-end-title">
                                DATE FINISHED:
                            </div>
                            <div class="date-end-answer">
                                @if (!$portfolio->end_date)
                                Still Working
                                @else
                                {{ \Carbon\Carbon::parse($portfolio->end_date)->format('F j, Y') }}
                                @endif
                            </div>
                        </div>
                        <div class="portfolio-single-fourth-type">
                            <div class="type-title">
                                SERVICE:
                            </div>
                            <div class="type-answer">
                                {{$portfolio->type}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="portfolio-single-fifth-section-container proxima" draggable="false">
    <div class="container">
        <div class="col-12">
            <div class="row">
                <div class="portfolio-single-fifth-section-feedback-container col-lg-8 col-md-12 col-sm-12 col-12 order-lg-0 order-md-1 order-sm-1 order-1 portfolio-fifth-section-left">
                    <div id="splide" class="splide">
                        <div class="splide__track">
                            <ul class="splide__list">
                                @foreach ($feedbacks as $feedback)
                                <li class="splide__slide">
                                    <div class="card border-0" style="background: rgba(255, 255, 255, 0)">
                                        <div class="d-flex flex-row">
                                            <div class="feedback-image-box">
                                                <img src="{{ asset('uploads/feedbacks/' . $feedback->image) }}" alt="client-photo">
                                            </div>
                                            <div class="feedback-quote-box">
                                                <div class="quote-image">
                                                    <img src="{{ asset('assets/about/quotation.png') }}" alt="comment">
                                                </div>
                                                <div class="quote-message">
                                                    <span>
                                                        {!! $feedback->content !!}
                                                    </span>
                                                </div>
                                                <div class="quote-name">
                                                    <span>
                                                        {{ $feedback->name }}
                                                    </span>
                                                </div>
                                                <div class="quote-position">
                                                    <span>
                                                        {{ $feedback->position }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12 col-sm-12 col-12 order-lg-1 order-md-0 order-sm-0 order-0 portfolio-fifth-section-right">
                    <div class="feedback-box">
                        <div class="feedback-title">
                            <span>
                                Client <span style="color: #fa6f10">Feedback</span>
                            </span>
                        </div>
                        <div class="feedback-description">
                            <span>
                                Never simply believe what we say! See what the client said about the project.
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 portfolio-fifth-section-middle">
            <div class="see-more-project-box">
                <a href="{{ url('/portfolio?tab=multimedia') }}">
                    See More Projects...
                </a>
            </div>
        </div>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        new Splide('#splide', {
            type: 'loop',
            perPage: 1,
            perMove: 1,
            gap: '4rem',
            padding: '2rem',
            autoplay: true,
            interval: 3000,
            pagination: false,
            arrows: false,
        }).mount();
    });
</script>

<section class="portfolio-single-six-section-container proxima" draggable="false">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-12 six-portfolio-left">
                <div class="portfolio-single-six-section-title">
                    <span>
                        Be Part Of Our
                    </span>
                </div>
                <div class="portfolio-single-six-section-description">
                    <span>
                        <span style="color: #fa6f10">Success Stories</span> Today!
                    </span>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-12 six-portfolio-right">
                <div class="d-flex justify-content-center">
                    <a class="free-estimate-button" href="{{ url('/contact') }}">
                        <button>
                            Get Free Estimation <img src="{{ asset('assets/homepage/button-right-arrow.png') }}" alt="button-icon">
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('js')
<script src="{{ asset('js/frontend/single-portfolio-multimedia/single-portfolio-multimedia.js') }}"></script>
@endsection