@extends('user.master')

@section('title', 'About Us')

@section('content')
      <!-- Banner Section Start -->
      <div class="container-fluid p-0">
        <div class="impl_page_banner_section">
          <div class="impl_page_wrapper">
            <div class="container-fluid impl_container">
              <div class="impl_page_heading">
                <h3>Company</h3>
                <p>
                  <a href="{{ route('user.home') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-6">
                      <path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z" />
                      <path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z" />
                    </svg>
                    Home
                  </a>
                  <span>>  Company</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Banner Section End -->

<!-- Booking Section Start -->
      <div class="impl_section_wrapper impl_booking_wrapper">
        <div class="container">
          <div class="row">
            <div class="col-lg-6">
              <div class="row">
                <div class="col-12">
                  <div class="impl_booking_box">
                    <span>
                      <div class="row">
                        <div class="col-sm-6">
                          <div class="impl_booking_card" data-aos="zoom-in">
                            <img src="https://via.placeholder.com/210x100" class="img-fluid">
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="impl_booking_card" data-aos="zoom-in">
                            <img src="https://via.placeholder.com/210x100" class="img-fluid">
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="impl_booking_card" data-aos="zoom-in">
                            <img src="https://via.placeholder.com/210x100" class="img-fluid">
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="impl_booking_card" data-aos="zoom-in">
                            <img src="https://via.placeholder.com/210x100" class="img-fluid">
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="impl_booking_card" data-aos="zoom-in">
                            <img src="https://via.placeholder.com/210x100" class="img-fluid">
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="impl_booking_card" data-aos="zoom-in">
                            <img src="https://via.placeholder.com/210x100" class="img-fluid">
                          </div>
                        </div>
                      </div>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="impl_booking_heading" data-aos="flip-up">
                <p>Your Trusted Car Dealer</p>
                <h3>Welcome to Patel Brothers Car</h3>
              </div>
              <ul class="impl_history_tab" data-aos="zoom-in-up">
                <li>
                  <a href="javascript:void(0);" class="active" data-rel="tab-1">
                    WHO WE ARE
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);" class="" data-rel="tab-2">
                    OUR MISSON
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);" class="" data-rel="tab-3">
                    OUR VISION
                  </a>
                </li>
              </ul>
              <div class="impl_history_pane" id="tab-1" style="display:block;" data-aos="zoom-in-up">
                <h6>We are a leading car dealership specializing in both car sales and rental services, committed to providing exceptional automotive solutions to our valued customers.</h6>
                <p>Patel Brothers Car is your one-stop destination for all your automotive needs. We offer an extensive inventory of quality vehicles, ranging from brand new models to carefully inspected pre-owned cars. Our experienced team of automotive professionals is dedicated to helping you find the perfect vehicle that matches your lifestyle, budget, and preferences.</p>
                <p>Whether you're looking to purchase your dream car or need a reliable rental vehicle for your travel needs, we provide flexible financing options, competitive pricing, and comprehensive after-sales support. Our commitment to transparency, integrity, and customer satisfaction has made us a trusted name in the automotive industry. We ensure every vehicle in our inventory meets our strict quality standards, giving you peace of mind with every purchase or rental.</p>
              </div>
              <div class="impl_history_pane" id="tab-2" data-aos="zoom-in-up">
                <h6>Our mission is to make car ownership and rental accessible to everyone by providing quality vehicles, exceptional service, and transparent business practices.</h6>
                <p>At Patel Brothers Car, we strive to deliver an unparalleled automotive experience through our comprehensive range of services. Our mission encompasses providing customers with reliable vehicles for both purchase and rental, backed by honest pricing, flexible payment options, and dedicated customer support. We believe in building long-term relationships with our customers based on trust, quality, and satisfaction.</p>
                <p>We are committed to maintaining the highest standards in vehicle quality, ensuring every car in our inventory undergoes thorough inspection and maintenance. Our team continuously works to expand our services, improve customer experience, and stay ahead of industry trends. Whether you need a family sedan, a luxury vehicle, or a commercial car for your business, we are here to serve you with professionalism and integrity.</p>
              </div>
              <div class="impl_history_pane" id="tab-3" data-aos="zoom-in-up">
                <h6>Our vision is to become the most trusted and preferred car dealership and rental service provider, recognized for excellence in customer service and vehicle quality.</h6>
                <p>We envision Patel Brothers Car as a leading automotive brand that sets industry benchmarks in customer satisfaction, vehicle quality, and service excellence. Our goal is to expand our reach, diversify our inventory, and continuously innovate our services to meet the evolving needs of our customers. We aim to create a seamless experience for both car buyers and renters, making automotive solutions more accessible and convenient.</p>
                <p>Through strategic growth, technological advancement, and unwavering commitment to our core values, we aspire to build a network that serves customers across regions. Our vision includes establishing partnerships with leading automotive manufacturers, implementing eco-friendly practices, and contributing positively to the communities we serve. We are dedicated to shaping the future of automotive retail and rental services with integrity, innovation, and customer-centricity at the heart of everything we do.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Booking Section End -->
      <!-- About Section Start -->
      <div class="container-fluid impl_bg_container">
        <div class="impl_section_wrapper impl_about_wrapper">
          <div class="container">
            <div class="row align-items-center">
              <div class="col-xl-6 col-lg-7" data-aos="zoom-in-right">
                <div class="impl_about_img">
                  <img src="https://via.placeholder.com/570x400" class="img-fluid">
                </div>
              </div>
              <div class="col-xl-6 col-lg-5" data-aos="zoom-in-left">
                <div class="impl_about_heading">
                  <p>Welcome To Patel Brothers Car</p>
                  <h3>Quality Cars for Sale & Rent - Your Trusted Automotive Partner</h3>
                </div>
                <div class="impl_about_text">
                  <p>At Patel Brothers Car, we offer a comprehensive range of automotive services including car sales and rentals. Our extensive inventory features vehicles from leading manufacturers, ensuring you find the perfect match for your needs and budget.</p>
                </div>
                <ul class="impl_about_list">
                  <li>Wide selection of new and pre-owned vehicles with verified quality and history.</li>
                  <li>Flexible rental options for short-term and long-term needs with competitive rates.</li>
                  <li>Transparent pricing, easy financing options, and dedicated customer support throughout your journey.</li>
                </ul>
                <div class="impl_about_btn">
                  <a href="{{ route('user.listing') }}" class="impl_btn">Browse Our Cars</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- About Section End -->
      <!-- Testimonial Section Start -->
      <div class="impl_section_wrapper impl_testimonial_wrapper">
        <div class="container">
          <div class="row">
            <div class="col-12" data-aos="flip-up">
              <div class="impl_section_heading">
                <h3>What Our Customers Say</h3>
              </div>
            </div>
            @if(isset($testimonials) && $testimonials->count() > 0)
              @foreach($testimonials as $index => $testimonial)
                <div class="col-md-6" data-aos="{{ $index % 2 == 0 ? 'flip-left' : 'flip-right' }}">
                  <div class="impl_testimonial_box">
                    <div class="impl_testimonial_head">
                      <div class="impl_testi_client">
                        @php
                            $genderImage = 'male.avif';
                            if (!empty($testimonial->gender)) {
                                if (strtolower($testimonial->gender) === 'female') {
                                    $genderImage = 'female.avif';
                                } else {
                                    $genderImage = 'male.avif';
                                }
                            }
                        @endphp
                        <img src="{{ asset('theme/assets/images/' . $genderImage) }}" class="img-fluid" alt="{{ $testimonial->customer_name }}">
                        <div class="impl_client_info">
                          <p>{{ $testimonial->customer_name }}</p>
                          <div class="impl_testi_rating">
                            @for($i = 1; $i <= 5; $i++)
                              @if($i <= $testimonial->star_rating)
                                <img src="{{ asset('theme/assets/images/star.png') }}" class="img-fluid" alt="Star">
                              @else
                                <img src="{{ asset('theme/assets/images/star1.png') }}" class="img-fluid" alt="Empty Star">
                              @endif
                            @endfor
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="impl_testimonial_text">
                      <p>{{ $testimonial->remark ?? 'No comment provided.' }}</p>
                    </div>
                    <div class="impl_testi_quote">
                      <img src="{{ asset('theme/assets/images/quote.png') }}" class="img-fluid">
                    </div>
                    <img src="{{ asset('theme/assets/images/testi_shape.png') }}" class=" impl_testi_shape img-fluid">
                  </div>
                </div>
              @endforeach
            @else
              <!-- Default testimonials if no data in database -->
              <div class="col-md-6" data-aos="flip-left">
                <div class="impl_testimonial_box">
                  <div class="impl_testimonial_head">
                    <div class="impl_testi_client">
                      <img src="https://via.placeholder.com/60x60" class="img-fluid">
                      <div class="impl_client_info">
                        <p>Customer</p>
                        <div class="impl_testi_rating">
                          <img src="{{ asset('theme/assets/images/star.png') }}" class="img-fluid">
                          <img src="{{ asset('theme/assets/images/star.png') }}" class="img-fluid">
                          <img src="{{ asset('theme/assets/images/star.png') }}" class="img-fluid">
                          <img src="{{ asset('theme/assets/images/star.png') }}" class="img-fluid">
                          <img src="{{ asset('theme/assets/images/star.png') }}" class="img-fluid">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="impl_testimonial_text">
                    <p>No testimonials available yet. Check back soon!</p>
                  </div>
                  <div class="impl_testi_quote">
                    <img src="{{ asset('theme/assets/images/quote.png') }}" class="img-fluid">
                  </div>
                  <img src="{{ asset('theme/assets/images/testi_shape.png') }}" class=" impl_testi_shape img-fluid">
                </div>
              </div>
            @endif
          </div>
        </div>
      </div>
      <!-- Testimonial Section End -->
      <!-- News Section Start -->
      {{-- <div class="container-fluid impl_bg_container">
        <div class="impl_section_wrapper impl_news_wrapper">
          <div class="container">
            <div class="row">
              <div class="col-12" data-aos="flip-up">
                <div class="impl_section_heading">
                  <h3>Our Recent News & Articles</h3>
                </div>
              </div>
              <div class="col-lg-8" data-aos="fade-right">
                <a href="javascript:void(0);">
                  <div class="impl_news_card">
                    <div class="impl_news_img">
                      <img src="https://via.placeholder.com/370x305" class="img-fluid">
                    </div>
                    <div class="impl_news_full">
                      <div class="impl_news_text">
                        <h6>Choosing The Right Car For Your Lifestyle</h6>
                        <p>Finding the perfect car that matches your lifestyle and needs can be challenging. Whether you need a fuel-efficient sedan for daily commuting, a spacious SUV for family trips, or a luxury vehicle for special occasions, our expert team can guide you through the selection process to find your ideal match.</p>
                      </div>
                      <div class="impl_writer_info">
                        <img src="https://via.placeholder.com/50x50">
                        <div class="impl_writer_text">
                          <p>Leslie Alexander</p>
                          <span>Founder, xyz company</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>
              </div>
              <div class="col-lg-4 col-md-6" data-aos="fade-left">
                <a href="javascript:void(0);">
                  <div class="impl_news_box">
                    <div class="impl_news_img">
                      <img src="https://via.placeholder.com/370x305" class="img-fluid">
                    </div>
                    <div class="impl_news_text">
                      <h6>Essential Car Maintenance Tips</h6>
                    </div>
                  </div>
                </a>
              </div>
              <div class="col-lg-4 col-md-6" data-aos="fade-up">
                <a href="javascript:void(0);">
                  <div class="impl_news_box">
                    <div class="impl_news_img">
                      <img src="https://via.placeholder.com/370x305" class="img-fluid">
                    </div>
                    <div class="impl_news_text">
                      <h6>Essential Car Maintenance Tips</h6>
                    </div>
                  </div>
                </a>
              </div>
              <div class="col-lg-4 col-md-6" data-aos="fade-up">
                <a href="javascript:void(0);">
                  <div class="impl_news_box">
                    <div class="impl_news_img">
                      <img src="https://via.placeholder.com/370x305" class="img-fluid">
                    </div>
                    <div class="impl_news_text">
                      <h6>Essential Car Maintenance Tips</h6>
                    </div>
                  </div>
                </a>
              </div>
              <div class="col-lg-4 col-md-6" data-aos="fade-up">
                <a href="javascript:void(0);">
                  <div class="impl_news_box">
                    <div class="impl_news_img">
                      <img src="https://via.placeholder.com/370x305" class="img-fluid">
                    </div>
                    <div class="impl_news_text">
                      <h6>Essential Car Maintenance Tips</h6>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div> --}}
      <!-- News Section End -->
      <!-- Newsletter Section Start -->
      <div class="container-fluid p-0">
        <div class="impl_section_wrapper impl_newsletter_wrapper">
          <div class="container">
            <div class="row">
              <div class="col-12" data-aos="flip-up">
                <div class="impl_newsletter_text">
                  <h3>Newsletter</h3>
                  <p>Subscribe to our newsletter and stay updated with our offer</p>
                </div>
              </div>
              <div class="col-12" data-aos="zoom-in">
                <form class="impl_newsletter_form" id="newsletterForm">
                  @csrf
                  <input type="email" name="email" id="newsletter_email" placeholder="Your Email.." required>
                  <button type="submit" class="impl_btn">Subscribe</button>
                  <div class="newsletter-response" style="margin-top: 10px;"></div>
                </form>
              </div>
            </div>
          </div>
          <div class="impl_newsletter_img">
            <img src="https://via.placeholder.com/510x296" class="img-fluid">
          </div>
        </div>
      </div>
      <!-- Newsletter Section End -->
@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            $('#newsletterForm').on('submit', function(e) {
                e.preventDefault();
                
                var form = $(this);
                var email = $('#newsletter_email').val();
                var responseDiv = form.find('.newsletter-response');
                var submitBtn = form.find('button[type="submit"]');
                
                // Clear previous messages
                responseDiv.html('');
                
                // Basic email validation
                if (!email || !email.includes('@')) {
                    responseDiv.html('<p style="color: red; margin: 0;">Please enter a valid email address.</p>');
                    return;
                }
                
                // Disable submit button
                submitBtn.prop('disabled', true).text('Subscribing...');
                
                // Submit via AJAX
                $.ajax({
                    url: "{{ route('user.newsletter.store') }}",
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        email: email
                    },
                    success: function(response) {
                        if (response.success) {
                            responseDiv.html('<p style="color: green; margin: 0;">' + response.message + '</p>');
                            form[0].reset();
                        } else {
                            responseDiv.html('<p style="color: red; margin: 0;">' + (response.message || 'Something went wrong. Please try again.') + '</p>');
                        }
                    },
                    error: function(xhr) {
                        var message = 'Something went wrong. Please try again later.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        } else if (xhr.responseJSON && xhr.responseJSON.errors && xhr.responseJSON.errors.email) {
                            message = xhr.responseJSON.errors.email[0];
                        }
                        responseDiv.html('<p style="color: red; margin: 0;">' + message + '</p>');
                    },
                    complete: function() {
                        // Re-enable submit button
                        submitBtn.prop('disabled', false).text('Subscribe');
                    }
                });
            });
        });
    </script>
@endsection