@extends('layouts.guest')
@section('title', 'Career')

<section class="inner-banner" data-aos="fade-up">
    <div class="breadcrumb-main position-absolute">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('home')}}">@lang('pages.home')</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{$product->$title}}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 gallery-left">
                <div class="gallery-vertical">
                    <div class="swiper myVertical">
                        <div class="swiper-wrapper">
                        @foreach ($images as $image)
                            <div class="swiper-slide"><div class="vertical-img"><img src="{{asset('product_gallery/'.$image->image)}}" alt="Gallery" /></div></div>
                        @endforeach
                        </div>
                    </div>
                    <div class="swiper-button-prev vertical-button-prev">↑</div>
                    <div class="swiper-button-next vertical-button-next">↓</div>
                </div>
                <div class="gallery-carousel position-relative" data-aos="fade-up" data-aos-delay="100">
                    <div class="swiper myGallery">
                        <div class="swiper-wrapper">
                            @foreach ($images as $image)
                                <div class="swiper-slide">
                                    <div class="gallery-holder" data-src="{{asset('product_gallery/'.$image->image)}}" data-fancybox="gallery"><img src="{{asset('product_gallery/'.$image->image)}}" alt="Gallery" /></div>
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-button-next gallery-button-next">→</div>
                        <div class="swiper-button-prev gallery-button-prev">←</div>
                        <div class="swiper-pagination gallery-pagination"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 detail-right">
                <div class="prouct-detail" data-aos="fade-up" data-aos-delay="300">
                    <h2>{{$product->$title}}</h2>
                    <div class="price-tax">
                        <div class="prices-kd">{{$price}}</div>
                        {{-- <del>KD 56.000</del> --}}
                    </div>
                    <div class="variants">
                        @foreach ($product->productVariant as $prodVar)