@include('inc.header')
<style>
    .price-wrapper{
  position: relative; 
  display: inline-block;
}

.price-slash{
  position: relative;
  width: 100%;
  height: 0;
  border-top: 4px solid red;
  transform: rotate(-0deg);
  top: 17px;
}

.price{ font-size: 30px;}


/*tabs css*/

.tab {
  float: left;
 /* border: 1px solid #ccc;*/
  background-color: #dfe8eb;
  width: 20%;
  height: auto;
  border-radius: 10px 0 0 10px;
}

.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 90%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
  margin: 5%;
  border-radius: 4px;
}

.tab button:hover {
  background-color: #bee9f7;
}

.tab button.active {
  background-color: #6398a8;
}

.tabcontent {
  float: left;
  padding: 0px 12px;
  /*border: 1px solid #ccc;*/
  width: 80%;
  border-left: none;
  height: auto;
  border-radius: 0 10px 10px 0;
}
</style>
 <!-- content begin -->
     <!-- content begin -->
        <div class="no-bottom no-top" id="content">

            <div id="top"></div>

            <section class="pt10 pb10 mt80 bg-grey" style="background-size: cover; background-repeat: no-repeat;">
                <div class="container" style="background-size: cover; background-repeat: no-repeat;">
                    <div class="row align-items-center" style="background-size: cover; background-repeat: no-repeat;">
                        <div class="col-lg-6" style="background-size: cover; background-repeat: no-repeat;">
                            <h3 class="mb-0">Pricing<i class="icofont-dotted-right id-color ms-2"></i></h3>
                        </div>

                        <div class="col-lg-6 text-lg-end" style="background-size: cover; background-repeat: no-repeat;">
                            <ul class="crumb">
                                <li><a href="{{route('home')}}">Home</a></li>
                                <li class="{{route('vehicles')}}">Pricing</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <section class="no-bottom no-top">
              <style>
        .nav-pills .nav-link {
            border-radius: 0;
        }
        .tab-content > .tab-pane {
            padding: 10px;
        }
    </style> 
    <div class="container-fluid mt-5">
    <div class="row">
        <div class="col-md-2">
            <!-- Vertical Tabs -->
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                @foreach($categories as $index => $category)
                    <a class="nav-link @if($index == 0) active @endif" 
                       id="v-pills-{{ $category->id }}-tab" 
                       data-bs-toggle="pill" 
                       href="#v-pills-{{ $category->id }}" 
                       role="tab" 
                       aria-controls="v-pills-{{ $category->id }}" 
                       aria-selected="{{ $index == 0 ? 'true' : 'false' }}">
                        {{ $category->name }}
                    </a>
                @endforeach
            </div>
        </div>
        <div class="col-md-10">
            <!-- Tab Content -->
            <div class="tab-content" id="v-pills-tabContent">
                @foreach($categories as $index => $category)
                    <div class="tab-pane fade @if($index == 0) show active @endif" 
                         id="v-pills-{{ $category->id }}" 
                         role="tabpanel" 
                         aria-labelledby="v-pills-{{ $category->id }}-tab">
                        <h4>{{ $category->name }} Vehicles</h4>
                        <div class="row g-4">
                            @forelse($category->cartVehicles as $vehicle)
                                <div class="col-lg-4 col-sm-6">
                                    <div class="bg-grey p-4 rounded-20px hover">
                                        <div class="text-center">
                                            <h4 class="bg-white text-dark p-1 rounded-5">{{ $vehicle->name }}</h4>

                                            <div class="d-block mt-4">
                                                <img src="{{ $vehicle->image }}" class="w-80 relative z-1000 hover-scale-1-2" alt="">
                                            </div>

                                            @if($vehicle->offer_price !== null)
                                                <div class="price-wrapper">
                                                    <div class="price-slash"></div>
                                                    <div class="price">₹ {{ $vehicle->price }}</div>
                                                </div>
                                                <h4 class="mt-3 mb-1">
                                                    <span class="bg-color me-2 fs-16 px-2 rounded-5px text-uppercase anim-op-blink-to-light">Start from</span>
                                                    ₹ {{ $vehicle->offer_price }} /-*
                                                </h4>
                                            @else
                                                <h4 class="mt-3 mb-1">
                                                    <span class="bg-color me-2 fs-16 px-2 rounded-5px text-uppercase anim-op-blink-to-light">Start from</span>
                                                    ₹ {{ $vehicle->price }} /-*
                                                </h4>
                                            @endif
                                        </div>

                                        <h5>Features</h5>
                                        <ul class="ul-style-2">
                                            <li>Range {{ $vehicle->range }} KM</li>
                                            <li>Top Speed {{ $vehicle->speed }} KM/H</li>
                                            <li>Motor Power {{ $vehicle->power }} Watt</li>
                                        </ul>

                                        <div class="text-center">
                                            <a class="btn-main" href="{{ route('buy_now', [Crypt::encrypt($vehicle->id)]) }}">Buy Now</a>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12">
                                    <p>No vehicles available.</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>


         

        
          <section class="jarallax text-light pt30 pb30">
                <img src="{{asset('assets/autoev/images/background/gradient-3.webp')}} " class="jarallax-img" alt="">
                <div class="wow fadeInRight d-flex">
                  <div class="de-marquee-list wow">
                    <div class="d-item">
                      <span class="d-item-txt">Zero Emissions</span>
                      <span class="d-item-display">
                        <i class="d-item-block"></i>
                      </span>
                      <span class="d-item-txt">Lower Costs</span>
                      <span class="d-item-display">
                        <i class="d-item-block"></i>
                      </span>
                      <span class="d-item-txt">Instant Torque</span>
                      <span class="d-item-display">
                        <i class="d-item-block"></i>
                      </span>
                      <span class="d-item-txt">Regenerative Braking</span>
                      <span class="d-item-display">
                        <i class="d-item-block"></i>
                      </span>
                      <span class="d-item-txt">Quiet Operation</span>
                      <span class="d-item-display">
                        <i class="d-item-block"></i>
                      </span>
                      <span class="d-item-txt">Advanced Technology</span>
                      <span class="d-item-display">
                        <i class="d-item-block"></i>
                      </span>
                      <span class="d-item-txt">Longer Range</span>
                      <span class="d-item-display">
                        <i class="d-item-block"></i>
                      </span>
                      <span class="d-item-txt">Charging Flexibility</span>
                      <span class="d-item-display">
                        <i class="d-item-block"></i>
                      </span>
                      <span class="d-item-txt">Environmental Benefits</span>
                      <span class="d-item-display">
                        <i class="d-item-block"></i>
                      </span>
                      <span class="d-item-txt">Variety of Models</span>
                      <span class="d-item-display">
                        <i class="d-item-block"></i>
                      </span>
                     </div>
                  </div>
                </div>
            </section>
        </div>
        <!-- content close -->
        <!-- content close -->
<script>
        function getCity(state_id)
{
     $.ajax({
            type: "GET",
            url: "{{url('admin/city-list')}}/" + state_id,
            dataType: 'json',
            success: function(response) {
                console.log(response.cities);
                 var option = '';
                if (response.status) {
                     option += '<option value="" selected disabled> -- Select Option -- </option>';
                    for (let index = 0; index < response.cities.length; index++) {
                        option += "<option value='" + response.cities[index].id + "'>" + response.cities[index].name + "</option>";
                    }
                   $('#city').html(option);
                } else {
                    $('#city').html(option);
                }
            }
        });
}

 function getDealers(city_id)
    {
         $.ajax({
                type: "GET",
                url: "{{url('admin/dealerlist-by-city')}}/" + city_id,
                dataType: 'json',
                success: function(response) {
                    
                     var option = '';
                    if (response.status) {
                         option += '<option value="" selected disabled> -- Select Option -- </option>';
                        for (let index = 0; index < response.dealers.length; index++) {
                            option += "<option value='" + response.dealers[index].id + "' data='"+response.dealers[index].user_type+"'>" + response.dealers[index].name + "</option>";
                        }
                       $('#party_name').html(option);
                    } else {
                        $('#party_name').html(option);
                    }
                }
            });
    }

        
    </script>

          

<script type="text/javascript">

function partyHandler(val='')
{
    var party_name = $('#party_name').val();
    var supply_state = $('#supply_state').val();
    var city = $('#city').val();
    
    $('#reset').click();
    $('#total').html('0');
    $('#party_name').val(party_name);
    $('#supply_state').val(supply_state);
    $('#city').val(city);
    
    if(val)
    {
      $("#vehiclelist :input").attr("disabled", false);
    }else{
        $("#vehiclelist :input").attr("disabled", true);
        
    }
}
partyHandler();
</script>

@include('inc.footer')