@extends('front.layout.master')
   @section('head')
        {!! SEO::generate() !!}
    @endsection
@section('track')
    <!-- Facebook Pixel Code -->
    <script>
        !function(f,b,e,v,n,t,s)
        {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
            n.queue=[];t=b.createElement(e);t.async=!0;
            t.src=v;s=b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t,s)}(window, document,'script',
            'https://connect.facebook.net/en_US/fbevents.js');
        fbq('init', '879633802792999');
        fbq('track', 'PageView');
        fbq('track', 'CustomizeProduct');
    </script>
    <noscript><img height="1" width="1" style="display:none"
                   src="https://www.facebook.com/tr?id=879633802792999&ev=PageView&noscript=1"
        /></noscript>

    <!-- End Facebook Pixel Code -->
@endsection

@push('css')
    <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
    />
    <link rel="stylesheet" href="{{asset('cars/css/swiper.min.css')}}" />
    <link rel="stylesheet" href="{{asset('cars/css/easyzoom.css')}}" />
    <link rel="stylesheet" href="{{asset('cars/css/main.css')}}" />
    <style>
        .gallery-top {
            height: 100% !important;
        }
        .product__carousel {
            margin: 0px !important;
        }
        .gallery-thumbs {
            display: none;
        }
           @media (max-width: 767px) {
        .product-details-content {
            margin-top: 10px !important;
        }


               #addedForm {
                   position: fixed !important;
                   bottom: 0px !important;
                   background: white;
                   width: 97%;
                   z-index: 99999999;
                   left: 9px;
               }
               .product-quantity {
                   padding-top: 0px !important;
               }

               .end-start{
                   width: 50% !important;
                   position: relative !important;
                   top: 37px !important;
               }
               .count-style {
                top:0px !important;
               }
               .price-proudct {
                    font-size: 20px !important;
               }
                   .price-proudct span {
                    font-size: 22px !important;
               }
               .pswp--open {
                   z-index: 9999999999 !important;
               }

               .cart-plus-minus{
                   position: relative;
                   right: 40px;
               }
               .title-quantity{
                   position: relative;
                   top: 39px;
               }
               .float {
                    display:none;
               }
               .mobile-menu-area {
                   z-index: 99999999999 !important;
               }

           }
        .mobile-menu-area{
            display: none;
        }
    </style>




@endpush
@section('content')
    {{--    <div class="breadcrumb-area gray-bg">--}}
    {{--        <div class="container">--}}
    {{--            <div class="breadcrumb-content">--}}
    {{--                <ul>--}}
    {{--                    <li><a href="{{url('/')}}">@lanh(''front.main)</a></li>--}}
    {{--                    <li><a href="#" class="active">{{$data->catName}}</a></li>--}}
    {{--                </ul>--}}
    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </div>--}}

{{--    <div class="anngle">--}}
{{--        <a href="#" onclick="goBack()"><i class="fa fa-angle-double-right" style="--}}
{{--    font-size: 30px;--}}
{{--    padding: 0 6%;"></i></a>--}}
{{--    </div>--}}
    <div class="details-product-area mb-30">

        <div class="product-details pb-6">
            <div class="container">
                <div class="row">

                    <div class="col-lg-6 col-md-12">

                        <div class="product__carousel">
                            <div class="gallery-parent">
                                <!-- SwiperJs and EasyZoom plugins start -->
                                <div class="swiper-container gallery-top" style="height: 100% !important;">
                                    <div class="swiper-wrapper">

                                        @if(count($data->files) > 0)

                                            @foreach($data->files as $images)