@extends('frontend.layout.app')



@section('title','BAIC BAHRAIN - Detail Page')



@section('body-content')
<div class="homepage-banner">
    <div class="homepage-banner-text">
      <div class="section-title-new mb-0">
        {{-- <h5 class="main-title" style="text-align: left;">Enjoy Young and Fun</h5> --}}
        <h1 class="main-title" style="text-align: left; text-transform: capitalize;"></h1>
        <p style="color: #333; text-align: left;">        </p>
        <div class="colour-variant-wrapper">  
          
          <div class="car-variant-colors">
                
          </div>
        </div>
        <div class="button-group">
          <a class="button black_2 extra-large mt-4" href="{{ route('test-drive', ['vehicle'=> $data['id'] ] ) }}">Test Drive</a> 
          <a class="button black_2 extra-large mt-4" href="{{ route('sales-enquiry', ['vehicle'=> $data['id'] ] ) }}">Enquiry</a>
        </div>
      </div>
    </div>
    <div class="homepage-banner-image">
      <div class="colour-variant-wrapper">  
        <div id="variant-colors">
                      
        </div>
      </div>
    </div>
  </div>

  <!-- Section 1 -->
  
  {{-- <div class="container-grid">
    <div class="gallery">
                
    </div>
  </div> --}}
  <!--- Section 1 end  -->

  <!-- Section 2 -->
    <!-- Section 2 End -->

  <!-- Section 3 -->
  <!--=================================
    video -->
        <!--=================================
    video -->


  <!-- Section 3 End -->

  <!-- Section About, Interior, Exterior -->

  <section class="design-section page-section-pt">
    <div class="container-custom">
      <div class="row">
        <div class="col-md-12 text-center">
          <!-- Optional: Add any content here if needed -->
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div id="tabs">
            <div class="tabs-header">
              <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="about-tab" data-bs-toggle="tab" data-bs-target="#about" type="button" role="tab" aria-controls="about" aria-selected="true">OVERVIEW</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="exterior-tab" data-bs-toggle="tab" data-bs-target="#exterior" type="button" role="tab" aria-controls="exterior" aria-selected="false">EXTERIOR</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="interior-tab" data-bs-toggle="tab" data-bs-target="#interior" type="button" role="tab" aria-controls="interior" aria-selected="false">INTERIOR</button>
                </li>
              </ul>
            </div>
  
            <div class="tab-content mb-0" id="myTabContent">
  
              <!-- Overview Tab -->
              <div class="tab-pane fade show active" id="about" role="tabpanel" aria-labelledby="about-tab">
                <div class="row">
                                  </div>
              </div>
  
              <!-- Exterior Tab -->
              <div class="tab-pane fade" id="exterior" role="tabpanel" aria-labelledby="exterior-tab">
                <div class="row">
                                  </div>
              </div>
  
              <!-- Interior Tab -->
              <div class="tab-pane fade" id="interior" role="tabpanel" aria-labelledby="interior-tab">
                <div class="row">
                                  </div>
              </div>
  
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- End -->


  <!-- Section 4 -->
  
  <!-- End -->

  <!-- Section 5 -->
    <!-- End -->

  <!--=================================
 Our Featured Cars -->
 <section class="section-ptb">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center my-5">
        <div class="section-title-la-page gray">
          <h2></h2>
          <span>Gallery</span>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
      <div class="row">
                </div>
  </div>
</section>

<!--=================================
Our Featured Cars -->




  {{-- <!-- Gallery Start -->
  <div class="BAIC-slider">
    <div class="container">
    <div class="row">
      <div class="col-md-12 text-center my-5">
        <div class="section-title-la-page gray">
          <h2></h2>
          <span>Gallery</span>
        </div>
      </div>
    </div>
  </div>
    <div class="BAIC-slides">
          
        <!-- Add more slides as needed -->
    </div>
    <a class="BAIC-prev" onclick="moveSlide(-1)">❮</a>
    <a class="BAIC-next" onclick="moveSlide(1)">❯</a>
  </div>
  <!-- End  --> --}}

  <!-- Section Six -->
    <!-- Section End -->

  <!-- Specification -->
    <!-- Specification End -->

<section class="get-quote page-section-ptb bg-5">
  <div class="container">
     <div class="row" style="color: white; /* Text color */
     background-color: rgba(0, 0, 0, 0.5); /* Background color with transparency */
     padding: 0.5rem; /* Padding around text */
     border-radius: 5px; /* Rounded corners */">
       <div class="col-lg-12 col-md-12">
         <div class="quote-content text-center">
            <i class="fa fa-car"></i>
            <h2 class="text-white">REQUEST A BROCHURE            </h2>
            <p class="text-white mb-0">            <a href="{{ route('request-brochure',['vehicle' => $data['id'] ]) }}" class="text-red button"> Request</a> </p>
         </div>
       </div>
     </div>
  </div>
</section>


@endsection

@section('page-css')
<style>

h2.border-right {
    border-right: 2px solid #ffffff; /* Adjust the border size and color as needed */
    padding-right: 10px; /* Add padding to prevent text from sticking to the border */
}




    /* .container {
        max-width: 1800px !important;
    } */
    
    
    
    figure {
        margin: 0;
        position: relative; /* Position text within the figure */
        overflow: hidden; /* Hide overflow for a cleaner effect */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover transition */
    }
    
    
    .gallery {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(8, 5vw);
        grid-gap: 1.5rem; 
    }
    .gallery__imgNEW {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; 
    }
    .gallery__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; 
        transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth magnify and opacity transition */
    }
    

    .gallery__text h3 {
        margin: 0;
    }
    
    .gallery__text p {
        margin: 0.5rem 0 0; /* Add margin above the paragraph */
        font-size: 1.4rem; /* Adjust font size as needed */
    }
    
    /* Hover effects */
    figure:hover {
        transform: scale(1.0); /* Slightly scale up the figure */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add shadow for depth */
    }
    
    figure:hover .gallery__img {
        transform: scale(1.1); /* Magnify image on hover */
    }
    
    figure:hover .gallery__text {
        opacity: 1; /* Show the description on hover */
    }
    
    
    
    /* Media Queries for Responsiveness */
    @media (max-width: 1200px) {
      
    
       
    }
    
    @media (max-width: 992px) {
    
    
    
        .gallery__text p {
            font-size: 1.2rem;
        }
    }
    
    @media (max-width: 768px) {
     

    
        .gallery__text p {
            font-size: 1.2rem;
        }
    }
    
    @media (max-width: 576px) {
      
    
  
    
        .gallery__text p {
            font-size: 1.2rem;
        }
    }
    
    
    
    .image-section-container-1,
    .image-section-container-2,
    .image-section-container-3,
    .image-section-container-4 {
        position: relative;
        width: 100%;
        height: 600px;
        background-size: cover;
        background-position: center;
        margin-bottom: 15px;
    }
    

    
    /* Overlay Content */
    .overlay-content {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 20px;
      text-align: center;
    }
    
    /* Responsive Design */
    @media (max-width: 1024px) {
        .image-section-container-1,
        .image-section-container-2,
        .image-section-container-3,
        .image-section-container-4 {
            height: 70vh; /* Adjust height for tablets */
        }
    
        .overlay-content {
          position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 20px;
      text-align: center;
        }
    }
    
    @media (max-width: 768px) {
        .image-section-container-1,
        .image-section-container-2,
        .image-section-container-3,
        .image-section-container-4 {
            height: 50vh; /* Adjust height for mobile devices */
        }
    
        .overlay-content {
          position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 20px;
      text-align: center;
        }
    
        h3.text-red {
            font-size: 1.5rem; /* Adjust font size for mobile */
        }
    
        p {
            font-size: 1rem; /* Adjust font size for mobile */
        }
    }
    
    
    @media (max-width: 768px) {
        .section-heading {
            font-size: 1.5em; /* Adjust for smaller screens */
        }
    
        .section-description {
            font-size: 1em; /* Adjust for smaller screens */
        }
    }
    
    @media (max-width: 480px) {
        .section-heading {
            font-size: 1.2em; /* Further adjustments for very small screens */
        }
    
        .section-description {
            font-size: 0.9em; /* Further adjustments for very small screens */
        }
    }
    .gallery__text > h3 {
        color: #fff !important;
    }
   
.BAIC-slider {
  position: relative;
  max-width: 100%;
  height: 100%; /* Set height to 60% of viewport height */
  margin: auto;
  overflow: hidden;
  margin-bottom: 15px;
}

.BAIC-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  cursor: grab; /* Show grab cursor */
}

.BAIC-slides:active {
  cursor: grabbing; /* Show grabbing cursor when dragging */
}

.BAIC-slide {
  min-width: 33.333%; /* Show multiple images (adjust as needed) */
 /* Ensure slide height matches slider height */
  box-sizing: border-box;
  padding: 0 10px; /* Optional: Add some spacing between images */
}

.BAIC-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio and cover the container */
  object-position: center; /* Center the image within the slide */
}

.BAIC-prev, .BAIC-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0,0,0,0.5);
}

.BAIC-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.BAIC-prev:hover, .BAIC-next:hover {
  background-color: rgba(0,0,0,0.8);
}

.blog-image {
    position: relative;
    width: 100%;
    height: 600px; /* Fixed height */
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fits within the fixed height without distortion */
}

      </style>
      
@endsection


@section('js')
<script>let currentIndex = 0;
    const slidesToShow = 3; // Number of slides to show at once
    
    function showSlide(index) {
        const slides = document.querySelectorAll('.BAIC-slide');
        const totalSlides = slides.length;
    
        // Ensure currentIndex is adjusted correctly to prevent showing space at the end
        if (index >= totalSlides - slidesToShow) {
            currentIndex = totalSlides - slidesToShow; // Align the last slide to the right edge
        } else if (index < 0) {
            currentIndex = 0;
        } else {
            currentIndex = index;
        }
    
        const offset = -currentIndex * (100 / slidesToShow);
        document.querySelector('.BAIC-slides').style.transform = `translateX(${offset}%)`;
    }
    
    function moveSlide(step) {
        showSlide(currentIndex + step);
    }
    
    // Initialize the slider
    showSlide(currentIndex);
    
    // Click-to-move functionality
    document.querySelector('.BAIC-prev').addEventListener('click', () => moveSlide(-1));
    document.querySelector('.BAIC-next').addEventListener('click', () => moveSlide(1));
    
    (function($) {
      "use strict";
      $( document ).tooltip({
                    classes: {
                        "ui-tooltip":"ui-corner-all ui-widget-shadow"
                    }
            });
      })(jQuery);
      </script>
@endsection