@extends('user.master')

@section('title', !empty($car->meta_title) ? $car->meta_title : ($car->title ?? 'Car Details'))

@section('meta')
    @if(!empty($car->meta_description))
    <meta name="description" content="{{ $car->meta_description }}">
    @endif
    @if(!empty($car->meta_keywords))
    <meta name="keywords" content="{{ $car->meta_keywords }}">
    @endif
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:title" content="{{ !empty($car->meta_title) ? $car->meta_title : ($car->title ?? 'Car Details') }}">
    @if(!empty($car->meta_description))
    <meta property="og:description" content="{{ $car->meta_description }}">
    @endif
    @if(!empty($car->main_image_url))
    <meta property="og:image" content="{{ $car->main_image_url }}">
    @endif
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="{{ url()->current() }}">
    <meta property="twitter:title" content="{{ !empty($car->meta_title) ? $car->meta_title : ($car->title ?? 'Car Details') }}">
    @if(!empty($car->meta_description))
    <meta property="twitter:description" content="{{ $car->meta_description }}">
    @endif
    @if(!empty($car->main_image_url))
    <meta property="twitter:image" content="{{ $car->main_image_url }}">
    @endif
@endsection

@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>Car Details</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> > Car Details</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Banner Section End -->

<!-- Listing Section Start -->
      <div class="impl_section_wrapper impl_listingSingle_wrapper">
        <div class="container">
          <div class="row">
            <div class="col-lg-6" data-aos="fade-right">
              <div class="big-img">
                <img src="{{ $car->main_image_url ?? 'https://via.placeholder.com/570x242' }}" class="display-img img-fluid" id="mainDisplayImage" alt="{{ $car->title }}">
              </div>
              @if($car->carImages && $car->carImages->count() > 0)
              <div class="img-selection">
                @if($car->main_image)
                <div class="img-thumb selected" data-image-url="{{ $car->main_image_url }}">
                  <img src="{{ $car->main_image_url }}" class="img-fluid" alt="Main Image">
                </div>
                @endif
                @foreach($car->carImages as $carImage)
                <div class="img-thumb" data-image-url="{{ asset('assets/attachments/car/gallery/' . $carImage->image) }}">
                  <img src="{{ asset('assets/attachments/car/gallery/' . $carImage->image) }}" class="img-fluid" alt="Gallery Image {{ $loop->iteration }}">
                </div>
                @endforeach
              </div>
              @endif
            </div>
            <div class="col-lg-6" data-aos="fade-left">
              <div class="impl_auto_detail">
                <div class="row">
                  <div class="col-12">
                    <div class="impl_auto_name">
                      <h5>{{ $car->title ?? ($car->brand->brand_name ?? '') . ' ' . ($car->carModel->model_name ?? '') . ' ' . ($car->year ?? '') }}</h5>
                    </div>
                    <div class="impl_auto_text">
                      {!! $car->description ?? '<p>No description available.</p>' !!}
                    </div>
                    @if($car->price)
                    <div class="impl_auto_price">
                      <h6>₹{{ number_format($car->price, 0) }}</h6>
                    </div>
                    @endif
                    <div class="impl_auto_btn mt-3">
                      <a href="{{ route('user.car-inquiry.create', $car->id) }}" class="impl_btn">Inquire About This Car</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-12" data-aos="flip-up">
              <ul class="impl_auto_tab">
                <li>
                  <a href="javascript:void(0);" class="active" data-rel="tab-1">
                    <h6>Description</h6>
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);" class="" data-rel="tab-2">
                    <h6>Key Specifications</h6>
                  </a>
                </li>
              </ul>
            </div>
            <div class="col-12" data-aos="fade-up">
              <div class="impl_auto_pane" id="tab-1" style="display:block;">
                <div class="impl_auto_feature">
                  <div class="row">
                    <div class="col-12">
                      <div class="impl_auto_text_content">
                        {!! $car->description ?? '<p>No description available.</p>' !!}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="impl_auto_pane" id="tab-2">
                <div class="impl_auto_spac">
                  <div class="row">
                    <div class="col-lg-4">
                      <div class="impl_feat_table table-responsive">
                        <table class="table">
                          <thead>
                            <tr>
                              <th scope="col" colspan="2">Basic Information</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>Brand</td>
                              <td>{{ $car->brand->brand_name ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                              <td>Model</td>
                              <td>{{ $car->carModel->model_name ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                              <td>Year</td>
                              <td>{{ $car->year ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                              <td>Price</td>
                              <td>₹{{ $car->price ? number_format($car->price, 0) : 'N/A' }}</td>
                            </tr>
                            <tr>
                              <td>KM Driven</td>
                              <td>{{ $car->km_driven ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                              <td>Registration Number</td>
                              <td>{{ $car->registration_number ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                              <td>Registration Year</td>
                              <td>{{ $car->registration_year ?? 'N/A' }}</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="impl_feat_table table-responsive">
                        <table class="table">
                          <thead>
                            <tr>
                              <th scope="col" colspan="2">Specifications</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>Fuel Type</td>
                              <td>{{ $car->fuelType->fuel_type_name ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                              <td>Body Type</td>
                              <td>{{ $car->bodyType->body_type_name ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                              <td>Transmission</td>
                              <td>{{ $car->transmission->transmission_name ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                              <td>Engine Type</td>
                              <td>{{ $car->engineType->engine_type_name ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                              <td>Seater</td>
                              <td>{{ $car->seater->seater_name ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                              <td>Color</td>
                              <td>{{ $car->color->color_name ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                              <td>Ownership</td>
                              <td>{{ $car->ownership->ownership_name ?? 'N/A' }}</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="impl_feat_table table-responsive">
                        <table class="table">
                          <thead>
                            <tr>
                              <th scope="col" colspan="2">Documentation</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>RC Status</td>
                              <td>{{ $car->rc_status ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                              <td>Insurance Validity</td>
                              <td>{{ $car->insurance_validity ?? 'N/A' }}</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Listing Section End -->
@endsection

@section('css')
<style>
  .impl_feat_table table {
    margin-bottom: 0;
  }
  .impl_feat_table table thead th {
    padding: 15px 20px;
    font-weight: 600;
    background-color: #f8f9fa;
  }
  .impl_feat_table table tbody td {
    padding: 15px 20px;
    vertical-align: middle;
  }
  .impl_feat_table table tbody tr {
    border-bottom: 1px solid #e9ecef;
  }
  .impl_feat_table table tbody tr:last-child {
    border-bottom: none;
  }
</style>
@endsection

@section('scripts')
<script>
  $(document).ready(function() {
    // Image gallery thumbnail click handler
    $('.img-thumb').on('click', function() {
      var imageUrl = $(this).data('image-url');
      if (imageUrl) {
        $('#mainDisplayImage').attr('src', imageUrl);
        $('.img-thumb').removeClass('selected');
        $(this).addClass('selected');
      }
    });

    // Tab switching functionality
    $('.impl_auto_tab a').on('click', function(e) {
      e.preventDefault();
      var targetTab = $(this).data('rel');

      // Remove active class from all tabs
      $('.impl_auto_tab a').removeClass('active');
      // Add active class to clicked tab
      $(this).addClass('active');

      // Hide all panes
      $('.impl_auto_pane').hide();
      // Show target pane
      $('#' + targetTab).show();
    });
  });
</script>
@endsection