@extends('frontend.master')

@section('content')
    <main class="main-content-area">
        {{-- Ad search --}}
        <div class="ad-search-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="ad-search-form">
                            <form action="">
                                <div class="mega-menu">
                                    <span><i class="fa fa-bars"></i></span>
                                </div>
                                <div class="main-search">
                                    <input type="search" class="form-control" placeholder="I am looking for....">
                                </div>
                                <div class="location-search">
                                    <span><i class="fa fa-map-marker-alt"></i></span>
                                    <input type="text" class="form-control" placeholder="Location">
                                </div>
                                <div class="feat-search">
                                    <input type="text" class="form-control" placeholder="2km">
                                </div>
                                <div class="search-button">
                                    <button class="btn-brand"><i class="fa fa-search"></i></button>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="breadcrumbs">
                            <a href="#">Home</a>
                            <span><i class="fa fa-chevron-right"></i></span>
                            <a href="#">Cars</a>
                            <span><i class="fa fa-chevron-right"></i></span>
                            <a href="#">BMW</a>
                            <span><i class="fa fa-chevron-right"></i></span>
                            <a href="#">200 cc</a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="ad-details-wrapper">
                            <div class="ad-details">
                                <div class="ad-header-area">
                                    <div class="ad-header-top d-flex justify-content-between align-items-center">
                                        <h3 class="ad-header-top-title"><a href="#">{{$add->title}} </a></h3>
                                        <div class="ad-header-top-price">
                                            <img src="{{ asset('/assets/img/icons/taka-sign.png') }}" width="14" height="16" alt="">
                                            <span>{{$add->price}}</span>
                                        </div>
                                    </div>
                                    <div class="ad-header-bottom d-flex justify-content-between">
                                        <p class="ad-location-text"><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
                                        <p class="ad-view"><i class="fa fa-eye color-primary"></i></p>
                                        <p class="ad-fav"><i class="fa fa-heart color-primary"></i></p>
                                    </div>
                                </div>

                                <div class="ad-images">

                                    <ul class="nav nav-tabs ad-nav-area" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link" href="#adPhoto" role="tab" data-toggle="tab">
                                                <i class="fa fa-image color-primary"></i>
                                                <span>Photo</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#adMap" role="tab" data-toggle="tab">
                                                <i class="fa fa-map-marker-alt color-primary"></i>
                                                <span>Map</span>
                                            </a>
                                        </li>
                                    </ul>

                                    <div class="tab-content ad-nav-content-area">
                                        <div role="tabpanel" class="tab-pane fade in active show" id="adPhoto">

                                            @foreach (json_decode($add->images) as $img)
                                                <div class="mySlides">
                                                    <img src="{{url('images/'.$img)}}" style="width:100%">
                                                </div>
                                            @endforeach



                                            <a class="ad-prev" onclick="plusSlides(-1)">❮</a>
                                            <a class="ad-next" onclick="plusSlides(1)">❯</a>

                                            <div class="caption-container">
                                                <p id="caption"></p>
                                            </div>

                                            <div class="img-nav-area">
                                                <div class="img-nav-item">
                                                    <img class="imgNav cursor"
                                                         src="{{ asset('/assets/img/car-1.png') }}" style="width:100%"
                                                         onclick="currentSlide(1)" alt="Car 1">
                                                </div>
                                                <div class="img-nav-item">
                                                    <img class="imgNav cursor"
                                                         src="{{ asset('/assets/img/LamborghiniRoadsterTA.jpg') }}"
                                                         style="width:100%"
                                                         onclick="currentSlide(2)" alt="Car 2">
                                                </div>
                                                <div class="img-nav-item">
                                                    <img class="imgNav cursor"
                                                         src="{{ asset('/assets/img/car-1.png') }}" style="width:100%"
                                                         onclick="currentSlide(3)" alt="Car 3">
                                                </div>
                                                <div class="img-nav-item">
                                                    <img class="imgNav cursor"
                                                         src="{{ asset('/assets/img/LamborghiniRoadsterTA.jpg') }}"
                                                         style="width:100%"
                                                         onclick="currentSlide(4)" alt="Car 4">
                                                </div>
                                                <div class="img-nav-item">
                                                    <img class="imgNav cursor"
                                                         src="{{ asset('/assets/img/car-1.png') }}" style="width:100%"
                                                         onclick="currentSlide(5)" alt="Car 5">
                                                </div>
                                                <div class="img-nav-item">
                                                    <img class="imgNav cursor"
                                                         src="{{ asset('/assets/img/LamborghiniRoadsterTA.jpg') }}"
                                                         style="width:100%"
                                                         onclick="currentSlide(6)" alt="Car 6">
                                                </div>
                                            </div>
                                        </div>

                                        <div role="tabpanel" class="tab-pane fade" id="adMap">
                                            <h1>Google Map</h1>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>


                        <div class="ad-description">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="description">
                                        <h4>Description</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolorum
                                            eius excepturi laboriosam perferendis. At distinctio ipsa laboriosam
                                            recusandae veritatis. Amet autem consectetur corporis dolore ducimus earum
                                            eligendi et fuga id in iusto, laborum laudantium libero mollitia nihil porro
                                            quam quo rem reprehenderit rerum ut voluptas voluptates! Assumenda quis,
                                            tenetur? Ad aperiam debitis dolor expedita id molestias unde? Cupiditate
                                            quasi sed sint veritatis. Asperiores assumenda atque excepturi harum quis
                                            vel. Dolorem quidem sit tempora ullam veritatis. A aperiam cumque
                                            cupiditate, eaque eius esse ex id incidunt iste mollitia nihil possimus.
                                            Dolorem quidem sit tempora ullam veritatis. A aperiam cumque
                                            cupiditate, eaque eius esse ex id incidunt iste mollitia nihil possimus
                                            repudiandae voluptatum. Accusamus cupiditate eum iusto minima nulla, saepe
                                            totam. cupiditate, eaque eius esse ex id. incidunt iste mollitia nihil
                                            possimus
                                            repudiandae voluptatum. Accusamus cupiditate eum iusto minima null.</p>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="additional-info">
                                        <h4>Additional Info</h4>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="info-box">
                                                    <p>Brand Name:</p>
                                                    <p>Toyota</p>
                                                </div>
                                                <div class="info-box">
                                                    <p>Model Year:</p>
                                                    <p>2010</p>
                                                </div>
                                                <div class="info-box">
                                                    <p>Condition:</p>
                                                    <p>Used</p>
                                                </div>
                                                <div class="info-box">
                                                    <p>Millage:</p>
                                                    <p>20000</p>
                                                </div>
                                                <div class="info-box">
                                                    <p>Engine Type:</p>
                                                    <p>2,000c</p>
                                                </div>
                                                <div class="info-box">
                                                    <p>Fuel Type:</p>
                                                    <p>Octen</p>
                                                </div>

                                                <div class="info-box">
                                                    <p>Seller Rating:</p>
                                                    <p>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="info-box">
                                                    <p>Model Name:</p>
                                                    <p>Primeo</p>
                                                </div>
                                                <div class="info-box">
                                                    <p>Reg Year:</p>
                                                    <p>2012</p>
                                                </div>
                                                <div class="info-box">
                                                    <p>Transmission:</p>
                                                    <p>Automatic</p>
                                                </div>
                                                <div class="info-box">
                                                    <p>Body Type:</p>
                                                    <p>Hatchvack</p>
                                                </div>
                                                <div class="info-box">
                                                    <p>Color:</p>
                                                    <p>Red</p>
                                                </div>
                                                <div class="info-box">
                                                    <p>Seller Type:</p>
                                                    <p>Private</p>
                                                </div>
                                                <div class="info-box">
                                                    <p>Last Edited:</p>
                                                    <p>30/12/2018</p>
                                                </div>
                                                <div class="info-box">
                                                    <p>Award</p>
                                                    <p class="award-color">Prime</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="company-info-area-wrapper">
                            <div class="company-info-area">
                                <div class="company-info-img">
                                    <img src="https://via.placeholder.com/120" alt="Company info">
                                </div>
                                <div class="company-info-content">
                                    <p class="company-title">Company Info</p>
                                    <p class="posting-date">Posting Ad since 2011</p>
                                </div>
                            </div>

                            <div class="contact-company p-3 d-flex justify-content-between">
                                <div class="contact-info">
                                    <p class="m-0"><span class="font-weight-bold">Contact:</span> company</p>
                                    <p class="m-0 contact-number"><i class="fa fa-phone-square color-primary"></i> 0123456789</p>
                                </div>
                                <div class="show-hide-number align-self-end">
                                    <p class="m-0"><button class="numberShow">Click to show number</button></p>
                                </div>
                            </div>

                            <div class="contact-buttons p-3">
                                <div class="d-flex justify-content-between">
                                    <button class="btn-brand-outline d-flex">
                                        <i class="fa fa-envelope color-primary"></i>
                                        <span>E-mail</span>
                                    </button>

                                    <button class="btn-brand-outline d-flex">
                                        <i class="fab fa-facebook-messenger color-primary"></i>
                                        <span>Message</span>
                                    </button>
                                </div>
                                <div class="d-flex justify-content-between mt-4">
                                    <button class="btn-brand-outline d-flex">
                                        <i class="fa fa-heart color-primary"></i>
                                        <span>Favourite</span>
                                    </button>

                                    <button class="btn-brand-outline d-flex">
                                        <i class="fa fa-exclamation-triangle color-primary"></i>
                                        <span>Warning</span>
                                    </button>
                                </div>
                            </div>

                        </div>

                        <section class="staySafeSlider">
                            <div>
                                <div class="stay-safe-area-wrapper">
                                    <p class="stay-safe-title">Stay Safe 1</p>
                                    <hr>
                                    <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
                                    <a href="#">Read all safety tips</a>
                                </div>
                            </div>
                            <div>
                                <div class="stay-safe-area-wrapper">
                                    <p class="stay-safe-title">Stay Safe 2</p>
                                    <hr>
                                    <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
                                    <a href="#">Read all safety tips</a>
                                </div>
                            </div>
                            <div>
                                <div class="stay-safe-area-wrapper">
                                    <p class="stay-safe-title">Stay Safe 3</p>
                                    <hr>
                                    <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
                                    <a href="#">Read all safety tips</a>
                                </div>
                            </div>
                            <div>
                                <div class="stay-safe-area-wrapper">
                                    <p class="stay-safe-title">Stay Safe 4</p>
                                    <hr>
                                    <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
                                    <a href="#">Read all safety tips</a>
                                </div>
                            </div>
                            <div>
                                <div class="stay-safe-area-wrapper">
                                    <p class="stay-safe-title">Stay Safe 5/p>
                                    <hr>
                                    <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
                                    <a href="#">Read all safety tips</a>
                                </div>
                            </div>
                        </section>
                        <span class="pagingInfo"></span>

                        <div class="share-area-wrapper d-flex justify-content-between">
                            <p>Share</p>
                            <div class="social-share-icon">
                                <a class="facebook-icon" href="#"><i class="fab fa-facebook-square"></i></a>
                                <a class="instagram-icon" href="#"><i class="fab fa-instagram"></i></a>
                                <a class="linkedin-icon" href="#"><i class="fab fa-linkedin"></i></a>
                                <a class="google-plus-icon" href="#"><i class="fab fa-google-plus"></i></a>
                                <a class="twitter-icon" href="#"><i class="fab fa-twitter"></i></a>
                                <a class="pinterest-icon" href="#"><i class="fab fa-pinterest"></i></a>
                                <a class="gmail-icon" href="#"><img
                                            src="{{ asset('/assets/img/icons/gamil-icon.png') }}" alt=""></a>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="you-may-also-like-area">
                            <h4>You may also like...</h4>
                            <hr>

                            <div class="you-may-also-link-slider">

                                <div class="also-like-card d-flex">
                                    <div class="also-like-card-img">
                                        <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
                                    </div>
                                    <div class="also-like-card-info ml-3">
                                        <h5>Toyota Premier Auto</h5>
                                        <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
                                        <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
                                            iste iure placeat temporibus veniam voluptates.</p>
                                    </div>
                                </div>

                                <div class="also-like-card d-flex">
                                    <div class="also-like-card-img">
                                        <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
                                    </div>
                                    <div class="also-like-card-info ml-3">
                                        <h5>Toyota Premier Auto</h5>
                                        <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
                                        <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
                                            iste iure placeat temporibus veniam voluptates.</p>
                                    </div>
                                </div>

                                <div class="also-like-card d-flex">
                                    <div class="also-like-card-img">
                                        <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
                                    </div>
                                    <div class="also-like-card-info ml-3">
                                        <h5>Toyota Premier Auto</h5>
                                        <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
                                        <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
                                            iste iure placeat temporibus veniam voluptates.</p>
                                    </div>
                                </div>

                                <div class="also-like-card d-flex">
                                    <div class="also-like-card-img">
                                        <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
                                    </div>
                                    <div class="also-like-card-info ml-3">
                                        <h5>Toyota Premier Auto</h5>
                                        <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
                                        <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
                                            iste iure placeat temporibus veniam voluptates.</p>
                                    </div>
                                </div>

                                <div class="also-like-card d-flex">
                                    <div class="also-like-card-img">
                                        <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
                                    </div>
                                    <div class="also-like-card-info ml-3">
                                        <h5>Toyota Premier Auto</h5>
                                        <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
                                        <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
                                            iste iure placeat temporibus veniam voluptates.</p>
                                    </div>
                                </div>

                                <div class="also-like-card d-flex">
                                    <div class="also-like-card-img">
                                        <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
                                    </div>
                                    <div class="also-like-card-info ml-3">
                                        <h5>Toyota Premier Auto</h5>
                                        <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
                                        <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
                                            iste iure placeat temporibus veniam voluptates.</p>
                                    </div>
                                </div>

                                <div class="also-like-card d-flex">
                                    <div class="also-like-card-img">
                                        <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
                                    </div>
                                    <div class="also-like-card-info ml-3">
                                        <h5>Toyota Premier Auto</h5>
                                        <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
                                        <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
                                            iste iure placeat temporibus veniam voluptates.</p>
                                    </div>
                                </div>


                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </main>
@endsection

@section('after_scripts')
    <script>
        // Contact number show
        document.querySelector('.numberShow').addEventListener('click', () => {
            document.querySelector('.contact-number').style.display = 'block';
        });

        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("imgNav");
            var captionText = document.getElementById("caption");
            if (n > slides.length) {
                slideIndex = 1
            }
            if (n < 1) {
                slideIndex = slides.length
            }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";
            captionText.innerHTML = dots[slideIndex - 1].alt;
        }
    </script>

    <script>
        // also like carousel
        $('.you-may-also-link-slider').slick({
            dots: true,
            infinite: false,
            speed: 300,
            slidesToShow: 2,
            prevArrow: '<i class="ti-angle-left"></i>',
            nextArrow: '<i class="ti-angle-right"></i>',
            rows: 2,
            slidesToScroll: 2,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 4,
                        slidesToScroll: 4,
                        infinite: true,
                        dots: true
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });

        // Stay safe slider
        $(".staySafeSlider").slick({
            autoplay: false,
            dots: false,
            arrows: true,
            prevArrow: '<i class="ti-angle-left"></i>',
            nextArrow: '<i class="ti-angle-right"></i>',
            customPaging: function (staySafeSlider, i) {
                var thumb = $(staySafeSlider.$slides[i]).data();
                return '<a>' + i + '</a>';
            },
            responsive: [{
                breakpoint: 500,
                settings: {
                    dots: false,
                    arrows: false,
                    infinite: false,
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            }]
        });


        //custom function showing current slide
        var $status = $('.pagingInfo');
        var $slickElement = $('.staySafeSlider');

        $slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
            //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
            var i = (currentSlide ? currentSlide : 0) + 1;
            $status.text(i + '/' + slick.slideCount);
        });
    </script>

@endsection