@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="/">Home</a></li>
                <li class="breadcrumb-item"><a href="{{url('/products')}}">products</a></li> 
                <li class="breadcrumb-item active" aria-current="page">{{$product->name}}</li>
            </ol>
        </nav> 
        <div class="mobile--breadcrumbs">
            <a href="index.php" class="back"><i class="fa fa-chevron-left"></i></a>
            <a href="products.php" class="page">{{$product->name}}</a> 
        </div>
    </div>
    
    
    <div class="container">
        <!--Product Details-->
        <section class="product-wrapper">
            <div class="row image-tabs">
                <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>
                        <div class="mibreit-thumbview">
                            @if($product->images->isNotEmpty())
                            @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
                            @endif                            
                        </div> 
                    </div>
                    <!---->
                </div>
                <div class="col-lg-6">
                    <div class="d-md-flex align-items-center justify-content-between">
                        <div>
                            <h3 class="primary-color">{{$product->name}}</h3>
                        </div>
                        <div class="icons-wrap">
                            <a href="#!" class="me-3"><img src="{{asset('/assets/images/svg-icons/share.svg')}}}" alt=""
                                    class="img-fluid"></a>
                            <a href="#!" class="me-3"><img src="{{asset('/assets/images/svg-icons/print.svg')}}" alt=""></a>
                            <a href="#!"><img src="{{asset('/assets/images/svg-icons/doc.svg')}}" alt=""></a>
                        </div>
                    </div>
                    <h4>{{$product->sub_title}}</h4>
                    <p>{!! html_entity_decode($product->medium_description) !!}</p>
                    <div class="mt-4">
                        <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">
                            {!! html_entity_decode($product->specification->body) !!}
                        </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">
                                <div class="row">
                                    <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>{{$warranty->name ?? "N/A"}}</h6>
                                                <p>{{$warranty->sub_title ?? "N/A"}}</p>
                                                <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="accordion-veiw-cont offset-md-1 col-md-2">
                                        <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">
                            {!! html_entity_decode($product->order_information) !!}
                        </div>
                    </div>
                </div>
            </div> 
            
            <div class="featured-section-wrap d-md-none mt-5 mb-5">
                <div class="container">
                    <h3 class="primary-color">Related Products</h3>
                    <div class="owl-carousel featuredProducts py-4 mt-4">

                        @if($related_products->isNotEmpty())
                            @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' => $related_product->id])}}" class="title__link">{{$related_product->name}}</a>
                                    <small class="d-block text-primary">{{$related_product->category->name}}</small>
                                    <div class="text-muted mb-1">{{$related_product->brand->name}}</div>
                                    <a href="{{route("product.details", ['product' => $related_product->id])}}" class="btn-brand">Detail</a>
                                </div>
                            </div>   
                            @endforeach
                        @endif   
                        
                    </div>
                </div>   
            </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>
                    <li class="nav-item">
                      <a class="nav-link" href="#scrollspyDownloads">Downloads</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#scrollspyOrder">Ordering Information</a>
                    </li>
                    @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">
                            <h3 class="header text-dark border-bottom pb-1 mb-4">Specifications</h3>
                            {!!html_entity_decode($product->specification->body)!!}
                        </div>
                        
                        <!---->
                        <div class="download-product-wrap" id="scrollspyDownloads">
                            @if($product->manual_warranties->isNotEmpty())
                            <h3 class="header text-dark border-bottom pb-1 mb-4">Manuals & Warranties</h3> 
                            @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-center">
                                            <div class="icon__box">
                                                <img class="dwn-img" src="{{asset('assets/images/icons/download.png')}}" alt="" class="me-3">
                                            </div>
                                            <div class="caption ps-3">
                                                <h6>{{$warranty->name ?? "N/A"}}</h6>
                                                @if ($warranty->sub_title)
                                                <p>{{$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   
                            
                            
                            
                            @if($product->catalogues->isNotEmpty())
                            <h5 class="header text-dark border-bottom pb-1 mb-4">Catelogue</h5>
                            @endif
                            @if($product->catalogues->isNotEmpty())
                            @foreach($product->catalogues as $catalogue)
                            <div class="download-card">
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="d-flex align-items-start">
                                            <div>
                                                <img src="{{asset('assets/images/icons/download.png')}}" alt="" class="me-3">
                                            </div>
                                            <div>
                                                <h6>{{$catalogue->name}}</h6>
                                                <p>{{$catalogue->sub_title ?? "N/A"}}</p>
                                                
                                                <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">
                                        <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>
                                        <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>
                        
                        <!---->
                        <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>
                        
                        
                    
                    <!--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' => $related_product->id])}}" class="title__link">{{$related_product->name}}</a>
                                        <small class="d-block text-primary">{{$related_product->category->name}}</small>
                                        <div class="text-muted mb-1">{{$related_product->brand->name}}</div>
                                        <a href="{{route("product.details", ['product' => $related_product->id])}}" class="btn-brand">Detail</a>
                                    </div>
                                </div>   
                                @endforeach
                            </div>
                        </div>
                    </section>
                    @endif
                    
                    
                    
                </div>
            </div><!--.//scroll-->
    
        </div><!--.//desktop__details__acc__wrapper-->
        
    </div><!--.//container-->


</main>
@endsection