@extends('layouts.front.front')

@section('content')
<main id="product-detail">
    
    <!---->
    <div class="container">
        <nav aria-label="breadcrumb" data-aos="fade-right" data-aos-delay="600">
           
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route("home")}}"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg></a></li>
                <li class="breadcrumb-item"><a href="{{route('product')}}">Product</a></li>
                @foreach($product->category->breadcrum_all_list($product->category_id) as $bread_cate)
                    <li class="breadcrumb-item">
                        <a href="{{route('product', ['category' => $bread_cate->id])}}">{{$bread_cate->name}}</a>
                    </li>
                @endforeach
                <li class="breadcrumb-item"><a href="{{route("product.details", ['product_slug' => $product->slug])}}">{{$product->name}}</a></li>
                {{-- <li class="breadcrumb-item active" aria-current="page">{{$product->name}}</li> --}}
            </ol>
        </nav> 
        <div class="mobile--breadcrumbs">
            <a href="{{route("home")}}" class="back">
            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>
            </a>
            <a href="{{route("product.details", ['product_slug' => $product->slug])}}" class="page">{{$product->name}}</a> 
        </div>
    </div>
     
    
    <div class="container">
        <!--Product Details-->
        <section class="product-wrapper">
            <div class="row image-tabs g-4">
                <div class="col-lg-6">
                   
                    <div class="product__box">
                        <div id="full-gallery" class="content-slideshow">
                            @if($product->images->isNotEmpty())
                            @foreach($product->images as $image)
                            <div class="mibreit-imageElement" style="opacity:0">
                                <img src="{{asset('storage/files/product/images/'.$image->file_name)}}" class="img-fluid" /> 
                            </div>
                            @endforeach
                            @endif                           
                        </div>
                        @if($product->images->isNotEmpty())
                             
                            @if($product->images->count() > 6)
                                <div class="mibreit-thumbview">
                                    @foreach($product->images as $key => $image)
                                    <div class="mibreit-thumbElement @if($key==0) active @endif">
                                        <img src="{{asset('storage/files/product/images/'.$image->file_name)}}" alt=thumbnail /> 
                                    </div>
                                    @endforeach
                                </div> 
                            @else
                                <div class="mibreit-thumbview hide__arrows">
                                @foreach($product->images as $key => $image)
                                    <div class="mibreit-thumbElement @if($key==0) active @endif">
                                        <img src="{{asset('storage/files/product/images/'.$image->file_name)}}" alt=thumbnail /> 
                                    </div>
                                @endforeach
                                </div> 
                            @endif
                            
                        @endif                            
                    </div>
                    <!---->
                </div>
                <div class="col-lg-6">
                    
                    <h3 class="primary-color">{{$product->name}}</h3>
                    <h4 class="mb-3">{{$product->sub_title}}</h4>
                    <div class="desc">

                        <p>{!! html_entity_decode($product->medium_description) !!}</p>
                    </div>
                    <div class="mt-4 mt-lg-5">
                        <a href="/partner-locator" class="search-icon-wrap">
                            <img src="{{asset('assets/images/icons/search.svg')}}" alt="search-icon" class="me-2"> Find a Distributor
                        </a>
                        <a href="/how-buy" class="btn-brand">HOW TO BUY</a>
                    </div>
                </div>
            </div>
        </section>
         
         
        <!--Mobile Product Details It open from 768px-->
        <section class="mobile-accordion">
            <div class="accordion accordion-flush product-tabs-wrapper" id="accordionFlushDetail">
                
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-heading1">
                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse1" aria-expanded="false" aria-controls="flush-collaps1">
                            Specifications
                          </button>
                    </h2>
                    <div id="flush-collapse1" class="accordion-collapse collapse" aria-labelledby="flush-heading1" data-bs-parent="#accordionFlushDetail">
                        <div class="accordion-body p-2">
                            @if($product->specification)
                                {!! html_entity_decode($product->specification->body ?? "N/A") !!}
                            @else 
                                N/A
                            @endif
                        </div>
                    </div>
                </div>
             
                <!---->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-heading2">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse2" aria-expanded="false" aria-controls="flush-collapse2">
                        Downloads
                      </button>
                    </h2>
                    <div id="flush-collapse2" class="accordion-collapse collapse" aria-labelledby="flush-heading2" data-bs-parent="#accordionFlushDetail">
                        <div class="accordion-body p-2">
                            @if($product->manual_warranties->isNotEmpty())
                            @foreach($product->manual_warranties as $warranty)
                            <div class="download-card border-bottom p-2">
                                <div class="row g-0">
                                    <div class="col-md-9">
                                        <div class="d-flex align-items-start">
                                            <div>
                                                <img class="dwn-img" src="{{asset('assets/images/icons/download.png')}}" alt="" class="me-3">
                                            </div>
                                            <div>
                                                <h6 class="mb-1">{{$warranty->name ?? "N/A"}}</h6>
                                                @if ($warranty->sub_title)
                                                <p class="mb-1">{{$warranty->sub_title ?? "N/A"}}</p>
                                                @endif
                                                <div class="d-md-flex">
                                                    <span>Download : {{$warranty->get_size('storage/files/product/document/')}} KB</span>
                                                    <span>Format : <span class="text-uppercase">{{$warranty->file_type}}</span></span>
                                                    <span>Modified : {{$warranty->last_modified('storage/files/product/document/')}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="offset-md-1 col-md-2 text-end">
                                        <a href="{{$warranty->get_download_link('storage/files/product/document/')}}" download class="me-3 btn btn-fab fab-lg"><i class="fa fa-download"></i></a>
                                        <!-- <a href="{{$warranty->get_pdf_view_link()}}" class="btn btn-fab fab-lg">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
                                                <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                                                <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                                            </svg>
                                        </a> -->
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            @endif                            
                            
                        </div>
                    </div>
                </div>
                 
                <!---->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-heading3">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse3" aria-expanded="false" aria-controls="flush-collapse3">
                        Ordering Information
                      </button>
                    </h2>
                    <div id="flush-collapse3" class="accordion-collapse collapse" aria-labelledby="flush-heading3" data-bs-parent="#accordionFlushDetail">
                        <div class="accordion-body p-2">
                        @if($product->order_information)
                            {!! html_entity_decode($product->order_information->body ?? "N/A") !!}
                        @else 
                            N/A
                        @endif
                        </div>
                    </div>
                </div>
            </div><!--.//accordion-->
            
            <div class="featured-section-wrap d-md-none mt-5 mb-5">
                @if($related_products->isNotEmpty())
                <div class="container">
                    <h3 class="primary-color">Related Products</h3>
                    <div class="owl-carousel featuredProducts py-4 mt-4">

                        @foreach($related_products as $related_product)
                        <div class="product__card bg-white rounded-lg shadow-sm">
                            <figure class="pro__img">
                                <img src="{{asset('storage/files/product/images/'. $related_product->product_thumbnail)}}" alt="feathered products" class="img-fluid">
                            </figure>
                            <div class="details p-3"> 
                                <a href="{{route("product.details", ['product_slug' => $related_product->slug])}}" class="title__link">{{$related_product->name}}</a>
                                <small class="d-block text-primary">{{$related_product->category->name ?? "N/A"}}</small>
                                <div class="text-muted mb-1">{{$related_product->brand->name ?? "N/A"}}</div>
                                <a href="{{route("product.details", ['product_slug' => $related_product->slug])}}" class="btn-brand">Detail</a>
                            </div>
                        </div>   
                        @endforeach 
                    </div>
                </div>   
                @endif   
            </div> 


        </section>
        
         
        
        <!--Desktop Product Details-->
        <div class="position-relative desktop__details__acc__wrapper">
            <nav id="scrollNavbar" class="navbar bg-white scroll__nav"> 
              <ul class="nav nav-pills">
                    <li class="nav-item">
                      <a class="nav-link active" href="#scrollspySpecfication">Specfication</a>
                    </li>
                    @if($product->manual_warranties->isNotEmpty())
                    <li class="nav-item">
                      <a class="nav-link" href="#scrollspyDownloads">Downloads</a>
                    </li>
                    @endif
                    @if ($product->order_information)
                    <li class="nav-item">
                      <a class="nav-link" href="#scrollspyOrder">Ordering Information</a>
                    </li>
                    @endif
                    @if($related_products->isNotEmpty())
                    <li class="nav-item">
                      <a class="nav-link" href="#scrollspyRelatedProducts">Related Products</a>
                    </li> 
                    @endif
              </ul>
            </nav>
            <div data-bs-spy="scroll" data-bs-target="#scrollNavbar" data-bs-offset="40" class="product-tabs-wrapper" tabindex="0"> 
                <div id="specfication">
                    <div id="scrollspySpecfication" class="specification__table__wrap">
                        <h3 class="header text-dark border-bottom pb-1 mb-4">Specifications</h3>
                        @if($product->specification)
                            {!!html_entity_decode($product->specification->body)!!}
                        @else 
                            N/A
                        @endif
                    </div>
                    
                    <!---->
                    @if($product->manual_warranties->isNotEmpty() || $product->catalogues->isNotEmpty())
                    <div class="download-product-wrap" id="scrollspyDownloads">
                        <h3 class="header text-dark border-bottom pb-1 mb-4">Manuals & Warranties</h3> 
                        @if($product->manual_warranties->isNotEmpty())
                        @foreach($product->manual_warranties as $warranty)
                        <div class="download-card">
                            <div class="row g-3 align-items-center">
                                <div class="col-md-9">
                                    <div class="d-flex align-items-start align-items-center">
                                        <div>
                                            <img class="dwn-img" src="{{asset('assets/images/icons/download.png')}}" alt="" class="me-3">
                                        </div>
                                        <div class="ps-3">
                                            <h6 class="mb-2">{{$warranty->name ?? "N/A"}}</h6>
                                            @if($warranty->sub_title)
                                            <p class="mb-1">{{$warranty->sub_title ?? "N/A"}}</p>
                                            @endif
                                            <div class="d-md-flex">
                                                <span>Download : {{$warranty->get_size('storage/files/product/document/')}} KB</span>
                                                <span>Format : <span class="text-uppercase">{{$warranty->file_type}}</span></span>
                                                <span>Modified : {{$warranty->last_modified('storage/files/product/document/')}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="offset-md-1 col-md-2 text-end">
                                    @if($warranty->check_file_exist())
                                    <a href="{{$warranty->get_download_link('storage/files/product/document/')}}" download class="me-3 btn btn-fab fab-lg"><i class="fa fa-download"></i></a>
                                    @endif
                                    <a href="{{$warranty->get_pdf_view_link()}}" class="btn btn-fab fab-lg">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
                                            <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                                            <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @endif   
                        
                        
                        @if($product->catalogues->isNotEmpty())
                        <h5 class="header text-dark border-bottom pb-1 mb-4">Catelogue</h5> 
                        @foreach($product->catalogues as $catalogue)
                        <div class="download-card">
                            <div class="row g-3 align-items-center">
                                <div class="col-md-9">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <img src="{{asset('assets/images/icons/download.png')}}" alt="" class="me-3">
                                        </div>
                                        <div class="ps-3">
                                            <h6 class="mb-2">{{$catalogue->name}}</h6>
                                            @if ($catalogue->sub_title)
                                            <p class="mb-1">{{$catalogue->sub_title ?? "N/A"}}</p>
                                            @endif
                                            
                                            <div class="d-md-flex">
                                                <span>Download : {{$catalogue->get_size('storage/files/product/document/')}} KB</span>
                                                <span>Format : <span class="text-uppercase">{{$catalogue->file_type}}</span></span>
                                                <span>Modified : {{$catalogue->last_modified('storage/files/product/document/')}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="offset-md-1 col-md-2 text-end">
                                    @if($catalogue->check_file_exist())
                                        <a href="{{$catalogue->get_download_link('storage/files/product/document/')}}" download class="me-3 btn btn-fab fab-lg"><i class="fa fa-download"></i></a>
                                    @endif
                                    <a href="{{$catalogue->get_pdf_view_link()}}" class="btn btn-fab fab-lg">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
                                            <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                                            <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @endif                            
                    </div>
                    @endif 
                    <!---->
                    @if ($product->order_information) 
                    <div id="scrollspyOrder">
                        <h3 class="header text-dark border-bottom pb-1 mb-4">Ordering Information</h3> 
                        {!! html_entity_decode($product->order_information->body ?? "N/A") !!}
                    </div>
                    @endif
                        
                    
                    <!--feathered products-->
                    @if($related_products->isNotEmpty())
                    <section class="featured-section-wrap py-4" id="scrollspyRelatedProducts">
                        <div class="container">
                            <h3 class="header text-dark border-bottom pb-1 mb-4">Related Products</h3> 
                            <div class="owl-carousel featuredProducts py-4 mt-4">
                                @foreach($related_products as $related_product)
                                <div class="product__card bg-white rounded-lg shadow-sm">
                                    <figure class="pro__img">
                                        <img src="{{asset('storage/files/product/images/'. $related_product->product_thumbnail)}}" alt="feathered products" class="img-fluid">
                                    </figure>
                                    <div class="details p-3"> 
                                        <a href="{{route("product.details", ['product_slug' => $related_product->slug])}}" class="title__link">{{$related_product->name}}</a>
                                        <small class="d-block text-primary my-1">{{$related_product->category->name}}</small>
                                        <div class="text-muted mb-2">{{$related_product->brand->name ?? "N/A"}}</div>
                                        <a href="{{route("product.details", ['product_slug' => $related_product->slug])}}" class="btn-brand">Detail</a>
                                    </div>
                                </div>   
                                @endforeach
                            </div>
                        </div>
                    </section>
                    @endif
                    
                    
                    
                </div>
            </div>
    
        </div>
        
    </div>


</main>
@endsection