@extends('layouts.app')

@section('title', $portfolio->title . ' - Portfolio - Kdot Web Tech')

@section('header-class', 'header-transparent has-border-bottom has-sticky-bg')

@section('content')

        <!-- breadcrumb area start -->
        <section class="rs-breadcrumb-area rs-breadcrumb-one p-relative">
            <div class="breadcrumb-bg-thumb" data-background="{{ asset('assets/images/bg/breadcrumb-bg-thumb-01.png') }}"></div>
            <div class="breadcrumb-btn">
                <div class="rs-rotate-btn">
                    <a class="rs-circle-btn" href="{{ route('home') }}#projects">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                            <path d="M26.29,20.29,18,28.59V0H16V28.59L7.71,20.29,6.29,21.71l10,10a1,1,0,0,0,1.41,0l10-10Z"></path>
                        </svg>
                    </a>
                    <div class="gsap-rotate rs-text-circle-wrapper">
                        <div class="rs-text-circle is-text-white" data-rotate-degree="12.545">Leading Digital Agency 2001.</div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-xxl-12">
                        <div class="breadcrumb-wrapper">
                            <div class="breadcrumb-title-wrapper">
                                <h1 class="breadcrumb-title">Portfolio<br>
                                    <span class="breadcrumb-text-wrap">
                                        <span class="breadcrumb-more-btn">
                                            <a class="rs-btn has-icon hover-white" href="{{ route('home') }}#projects">Back to portfolio
                                                <span class="icon-box">
                                                    <i class="fa-light fa-arrow-right-long icon-first"></i>
                                                    <i class="fa-light fa-arrow-right-long icon-second"></i>
                                                </span>
                                            </a>
                                        </span>
                                        details
                                    </span>
                                </h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- breadcrumb area end -->

        <!-- text slider area start -->
        <div class="rs-text-slide-area rs-text-slide-one">
            <div class="text-slide-wrapper">
                <div class="gsap-marquee right speed-20 move-to-1000">
                    <div class="text-slide-inner">
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">Software Programming</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">UI/UX Design</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">Development Agency</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">Web Development</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">Innovative Ideas</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">Programming</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">App Development</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- text slider area end -->

        <!-- portfolio details slider area start -->
        <section class="rs-portfolio-details-area rs-portfolio-details rs-swiper section-space-top">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="portfolio-details-slider-wrapper">
                            <div class="swiper" data-clone-slides="false" data-loop="true" data-speed="1500" data-autoplay="true" data-dots-dynamic="false" data-hover-pause="true" data-effect="false" data-delay="2500" data-item="1" data-item-xl="1" data-item-lg="1" data-item-md="1" data-item-sm="1" data-item-xs="1" data-item-mobile="1" data-no-gap="true">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="portfolio-details-slider-thumb" data-background="{{ asset($portfolio->featured_image) }}">
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="portfolio-details-slider-thumb" data-background="{{ asset('assets/images/portfolio/details/portfolio-details-thumb-02.png') }}">
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="portfolio-details-slider-thumb" data-background="{{ asset('assets/images/portfolio/details/portfolio-details-thumb-03.png') }}">
                                        </div>
                                    </div>
                                </div>
                                <!-- if we need pagination -->
                                <div class="portfolio-details-pagination">
                                    <div class="swiper-pagination rs-pagination has-circle"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="portfolio-details-content">
                                    <div class="portfolio-details-content-left">
                                        <h4 class="portfolio-details-title rs-split-text-enable split-in-left">About The Project</h4>
                                        <p class="descrip mt-15 mb-20">{{ $portfolio->description }}</p>
                                        <div class="portfolio-details-feature-list mb-30">
                                            <ul>
                                                <li>
                                                    <svg aria-hidden="true" class="e-font-icon-svg e-far-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z"></path>
                                                    </svg>
                                                    Innovative design solutions
                                                </li>
                                                <li>
                                                    <svg aria-hidden="true" class="e-font-icon-svg e-far-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z"></path>
                                                    </svg>
                                                    Professional execution
                                                </li>
                                                <li>
                                                    <svg aria-hidden="true" class="e-font-icon-svg e-far-check-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z"></path>
                                                    </svg>
                                                    Exceptional results
                                                </li>
                                            </ul>
                                        </div>
                                        @if($portfolio->content)
                                        <p class="descrip">{{ $portfolio->content }}</p>
                                        @endif
                                    </div>
                                    <div class="portfolio-details-content-right">
                                        <div class="portfolio-details-case-information">
                                            <div class="portfolio-details-case-top">
                                                <h4 class="portfolio-details-case-title">Project Info</h4>
                                            </div>
                                            <div class="portfolio-details-case-info-wrapper">
                                                <ul>
                                                    @if($portfolio->client)
                                                    <li>Clients: <span>{{ $portfolio->client }}</span></li>
                                                    @endif
                                                    <li>Category: <span>{{ $portfolio->category }}</span></li>
                                                    @if($portfolio->project_date)
                                                    <li>Date: <span>{{ $portfolio->project_date }}</span></li>
                                                    @endif
                                                    @if($portfolio->project_url)
                                                    <li>Website: <span><a href="{{ $portfolio->project_url }}" target="_blank" rel="noopener">Visit Project</a></span></li>
                                                    @endif
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- portfolio details slider area end -->

        <!-- portfolio navigation area start -->
        <div class="rs-portfolio-navigation-area">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="rs-postbox-more-navigation">
                            <div class="rs-postbox-more-item">
                                <a href="{{ route('home') }}#projects">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                                        <path d="M32,15H3.41l8.29-8.29L10.29,5.29l-10,10a1,1,0,0,0,0,1.41l10,10,1.41-1.41L3.41,17H32Z"></path>
                                    </svg>
                                    Prev Post
                                </a>
                            </div>
                            <div class="rs-postbox-more-item">
                                <a href="{{ route('home') }}#projects">
                                    Next Post
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                                        <path d="M31.71,15.29l-10-10L20.29,6.71,28.59,15H0v2H28.59l-8.29,8.29,1.41,1.41,10-10A1,1,0,0,0,31.71,15.29Z"></path>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- portfolio navigation area end -->

        <!-- cta area start -->
        <section class="rs-cta-area section-space-bottom rs-cta-one">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="cta-wrapper">
                            <h2 class="section-title rs-split-text-enable split-in-left is-large fw-6">Let's talk about a project, collaboration or an idea you may have</h2>
                            <div class="cta-btn">
                                <div class="rs-rotate-btn">
                                    <a class="rs-circle-btn" href="#contact">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                                            <path d="M31,0H15V2H28.59L.29,30.29l1.41,1.41L30,3.41V16h2V1A1,1,0,0,0,31,0Z"></path>
                                        </svg>
                                    </a>
                                    <div class=" gsap-rotate rs-text-circle-wrapper">
                                        <div class="rs-text-circle" data-rotate-degree="12.545">Leading Digital Agency 2001. </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- cta area end -->

        <!-- contact area start -->
        <section class="rs-contact-area rs-contact-one" id="contact">
            <div class="contact-bg-thumb" data-background="{{ asset('assets/images/bg/contact-bg-thumb-01.png') }}">
                <div class="contact-video-play-btn">
                    <a href="{{ asset('assets/videos/showreel.mp4') }}" class="rs-play-btn popup-video is-large"><i class="fa-duotone fa-play"></i></a>
                </div>
            </div>
            <div class="container">
                <div class="row g-5">
                    <div class="col-xl-6 col-lg-6 order-1 order-lg-0">
                        <div class="contact-form">
                            <h3 class="contact-form-title">Contact form</h3>
                            <form id="contact-form" method="POST" action="{{ route('home') }}">
                                @csrf
                                <div class="row g-5">
                                    <div class="col-md-12">
                                        <div class="contact-input">
                                            <input id="name" name="name" type="text" placeholder="Full Name" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="contact-input">
                                            <input id="email" name="email" type="email" placeholder="Email Address" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="contact-input">
                                            <input id="phone" name="phone" type="tel" placeholder="Phone">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="contact-input">
                                            <textarea id="message" name="message" placeholder="Write Your Message" required></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="contact-btn">
                                            <button type="submit" class="rs-btn hover-white">Submit Now</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div id="form-messages"></div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 order-0 order-lg-1">
                        <div class="contact-social">
                            <a href="#"> Dribbble </a>
                            <a href="#"> Behance </a>
                            <a href="#"> Linkedin </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- contact area end -->

@endsection