<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>TMS | Inspect Vehicles</title>

  <!-- Mobile Specific Metas
  ================================================== -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
  <meta name="description" content="Create your ecommerce store">
  <meta name="author" content="TMS">

  <!-- Favicon -->
  <link rel="shortcut icon" type="image/x-icon" href="<?php echo e(asset('public/user/images/favicon.png')); ?>" />
    <!--<link rel="stylesheet" href="https://tms.vokks.in/assets/css/style.css">-->
  
  <!-- PLUGINS CSS STYLE -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--   <link rel="stylesheet" href="plugins/aos/aos.css">
 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alata&family=Outfit&display=swap" rel="stylesheet">

  <!-- CUSTOM CSS -->
  <link href="<?php echo e(asset('public/user/css/styles.css')); ?>" rel="stylesheet">
  
 <style>
        /* Vehicle Container */
        .front {
            display: flex;
            align-items: center;
        }

        /* Left Wheel */
        .wheel {
            width: 25px;
            height: 60px;
            background: radial-gradient(#b5aeae, #312e2e);
            border-radius: 20px;
            margin: 0 5px;
        }
        .wheel-danger{
            background: radial-gradient(#f7f7f7, #ed1010)!important;
        }
        .wheel-zero{
            background: radial-gradient(#f7f7f7, #d1b9b9)!important;
        }
        .wheel-green{
            background: radial-gradient(#f7f7f7, #27a511)!important;
        }
        
        .rim {
            width: 10px;
    height: 30px;
    background: radial-gradient(#b5aeae, #a19999);
    border-radius: 20px;
    margin: 0 5px;
        }

        /* Vehicle Body */
        .body {
            width: 100px;
            height: 40px;
            background-color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Middle Bar */
        .bar {
            width: 10px;
            height: 40px;
            background-color: #333;
        }
        .vehicle{
            display: flex;
    flex-direction: column;
    align-items: center;
        }
        .space{
            width: 0px;
            margin: 30px auto;
        }
        .rod{
            width: 20px;
    height: 100px;
    background: darkgray;
    border: 2px solid #c1a1a1;
        }
    </style>

</head>

<body style="background: aliceblue;" class="body-wrapper" data-spy="scroll" data-target=".privacy-nav">
    
<?php if(session()->has('error')): ?>
<script>
  var msg = "<?php echo e(session('error')); ?>";
  alert(msg);
</script>
<?php endif; ?>

<?php if(session()->has('success')): ?>
<script>
  var msg = "<?php echo e(session('success')); ?>";
  alert(msg);
</script>
<?php endif; ?>




<nav style="padding: 15px 0px!important;" class="navbar navbar-expand-lg sticky-top bg-white shadow-sm">
  <div class="container">
    <a class="navbar-brand m-auto" href="#"><img style="width:150px!important;" src="https://tab-tms.codesquarry.online/assets/images/logo.png"   alt="logo"></a>
    <!--<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">-->
    <!--  <span class="navbar-toggler-icon"></span>-->
    <!--</button>-->
    <!--<div class="collapse navbar-collapse" id="navbarNav">-->
    <!--  <ul style="margin-left: auto;" class="navbar-nav ml-auto">-->
    <!--    <li class="nav-item">-->
    <!--      <a class="nav-link active" aria-current="page" href="#">Home</a>-->
    <!--    </li>-->
        
    <!--    <li class="nav-item">-->
    <!--      <a class="nav-link" href="#about">About</a>-->
    <!--    </li>-->
    <!--    <li class="nav-item">-->
    <!--      <a class="nav-link" href="#contact">Contact</a>-->
    <!--    </li>-->
        
    <!--  </ul>-->
    <!--</div>-->
  </div>
</nav>

<!--====================================
=            Hero Section            =
=====================================-->

   <section style="margin-top: 0px!important; background: teal;" class="booking-section py-5 text-white" id="book_now">
     
                <h1 class="text-center">Vehicle ID: <?php echo e($vehicle->vehicle_id); ?></h1>
                <div style="text-align: center;">
                <a style="background: black;" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#actionBtn">Update Odometer</a>
                <a style="background: black;" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#detailsBtn">Vehicle Details</a>
                </div>
                


        <div class="space">
            <!-- <label for="noTireInput">Enter Number of Tires: </label>
    <input type="number" id="noTireInput" placeholder="Number of Tires"> -->

                    <div class="vehicle">
        
        <!-- JavaScript code to generate the axle sections -->

        <script>
        
    var vehicleId = <?php echo e($vehicle->id); ?>;
    console.log(vehicleId)
    var vehicleData = <?php echo json_encode($data, 15, 512) ?>;
    var trailerData = []; // Initialize an empty array for trailer data

    // Function to add trailer data to the trailerData array
    function addTrailerData(trailerConfig, trailerId) {
        trailerData.push({ config: trailerConfig, id: trailerId });
    }

    // Add trailer data to the trailerData array using a loop
    <?php $__currentLoopData = $vehicle_trailers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $trailer): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php
            $trailerConfiguration = $trailer->trailer_configuration;
            $trailerId = $trailer->trailer_id;
        ?>
        addTrailerData(<?php echo json_encode($trailerConfiguration, 15, 512) ?>, <?php echo json_encode($trailerId, 15, 512) ?>);
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

   
    
    function installTrailer(trailerConfig, trailerId) {


            // Function to generate the HTML structure for the front axle
            function generateFrontAxleHTML(data) {
                
                 // Create the first rod element
    var firstRod = document.createElement('div');
    firstRod.style.width = '80px';
    firstRod.style.height = '80px';
    firstRod.style.borderRadius = '80px';
    firstRod.style.display = 'flex';
    firstRod.style.alignItems = 'center';
    firstRod.style.justifyContent = 'center';
    // firstRod.style.fontSize = '30px';
    firstRod.className = 'rod';
    // firstRod.textContent = 'X';
    
    //  var Link = document.createElement('a');
    // Link.style.color = '#41505f';
    // Link.className = '.remove';
    // Link.href = '/vehicle/remove/trailer/' + trailerId;
    
var button = document.createElement("button");
// Set button attributes
button.style.padding = "0";
button.style.backgroundColor = "transparent";
button.style.backgroundRepeat = "no-repeat";
button.style.border = "none";
button.style.cursor = "pointer";
button.style.overflow = "hidden";
button.style.outline = "none";
button.className = 'remove';
button.value = '/vehicle/remove/trailer/' + trailerId;
     
    
    // Create the <i> element
    var iconElement = document.createElement('i');
    iconElement.className = 'ri-close-circle-fill';
    iconElement.style.fontSize = '50px';

    // Append the <i> element under the first rod
    // Link.appendChild(iconElement);
    button.appendChild(iconElement);
    firstRod.appendChild(button);

    // Create the second rod element
    var secondRod = document.createElement('div');
    secondRod.className = 'rod';


   
                
                
                var frontAxleDiv = document.createElement('div');
                frontAxleDiv.className = 'front';

                data.tire_labels_left.forEach(function (label) {
                    var leftTireDiv = document.createElement('div');
                    leftTireDiv.style.display = 'flex';
                    leftTireDiv.style.flexDirection = 'column';
                    leftTireDiv.textContent = label;

                    var leftTireLink = document.createElement('a');
                    leftTireLink.href = '/dashboard/trailer/view/tyre/' + trailerId + '/' + label;

                    var leftWheelDiv = document.createElement('div');
                    leftWheelDiv.className = 'wheel';

                    leftTireLink.appendChild(leftWheelDiv);
                    leftTireDiv.appendChild(leftTireLink);
                    frontAxleDiv.appendChild(leftTireDiv);

                    var leftTireDiv = document.createElement('div');
                    leftTireDiv.style.display = 'flex';
                    leftTireDiv.style.alignItems = 'center';
                    leftTireDiv.style.flexDirection = 'column';
                    leftTireDiv.textContent = label;

                    var leftTireLink = document.createElement('a');
                    leftTireLink.href = '/dashboard/trailer/view/rim/' + trailerId + '/' + label;

                    var leftWheelDiv = document.createElement('div');
                    leftWheelDiv.className = 'rim';

                    // leftTireLink.appendChild(leftWheelDiv);
                    leftTireDiv.appendChild(leftWheelDiv);
                    frontAxleDiv.appendChild(leftTireDiv);

                });

                var middleDiv = document.createElement('div');
                middleDiv.style.width = '200px';
                middleDiv.style.background = 'darkgray';
                middleDiv.style.height = '10px';
                middleDiv.style.borderRadius = '10px';
                middleDiv.style.border = '1px solid #c1a1a1';
                middleDiv.style.marginTop = '16px';

                var middleInnerDiv = document.createElement('div');
                middleInnerDiv.style.width = '20px';
                middleInnerDiv.style.background = 'darkgray';
                middleInnerDiv.style.height = '50px';
                middleInnerDiv.style.border = '2px solid #c1a1a1';
                middleInnerDiv.style.margin = 'auto';
                middleInnerDiv.style.position = 'relative';
                middleInnerDiv.style.left = '1px';

                var middleInnerDiv1 = document.createElement('div');
                middleInnerDiv1.className = 'tyre_btn';
                middleInnerDiv1.setAttribute('data-position', data.position);
                middleInnerDiv1.style.width = '40px';
                middleInnerDiv1.style.background = 'black';
                middleInnerDiv1.style.height = '40px';
                middleInnerDiv1.style.border = '2px solid #c1a1a1';
                middleInnerDiv1.style.margin = 'auto';
                middleInnerDiv1.style.position = 'relative';
                middleInnerDiv1.style.top = '-20px';
                middleInnerDiv1.style.right = '12px';
                middleInnerDiv1.style.borderRadius = '30px';
                middleInnerDiv1.style.display = 'flex';
                middleInnerDiv1.style.color = '#fff';
                middleInnerDiv1.style.justifyContent = 'center';
                middleInnerDiv1.style.alignItems = 'center';
                middleInnerDiv1.style.fontSize = '40px';
                
                
                if(data.no_tyre==2){
                  middleInnerDiv1.textContent='+';                    
                }
                else{
                  middleInnerDiv1.textContent='-';                    

                }

                middleInnerDiv.appendChild(middleInnerDiv1);

                middleDiv.appendChild(middleInnerDiv);
                frontAxleDiv.appendChild(middleDiv);

                data.tire_labels_right.forEach(function (label) {

                    var rightTireDiv = document.createElement('div');
                    rightTireDiv.style.display = 'flex';
                    rightTireDiv.style.alignItems = 'center';
                    rightTireDiv.style.flexDirection = 'column';
                    rightTireDiv.textContent = label;

                    var rightTireLink = document.createElement('a');
                    rightTireLink.href = '/dashboard/trailer/view/rim/' + trailerId + '/' + label;

                    var rightWheelDiv = document.createElement('div');
                    rightWheelDiv.className = 'rim';

                    // rightTireLink.appendChild(rightWheelDiv);
                    rightTireDiv.appendChild(rightWheelDiv);
                    frontAxleDiv.appendChild(rightTireDiv);


                    var rightTireDiv = document.createElement('div');
                    rightTireDiv.style.display = 'flex';
                    rightTireDiv.style.flexDirection = 'column';
                    rightTireDiv.textContent = label;

                    var rightTireLink = document.createElement('a');
                    rightTireLink.href = '/dashboard/trailer/view/tyre/' + trailerId + '/' + label;

                    var rightWheelDiv = document.createElement('div');
                    rightWheelDiv.className = 'wheel';

                    rightTireLink.appendChild(rightWheelDiv);
                    rightTireDiv.appendChild(rightTireLink);
                    frontAxleDiv.appendChild(rightTireDiv);
                });

                var rodDiv = document.createElement('div');
                rodDiv.className = 'rod';
                
                var battery = document.createElement('div');
                battery.className = 'battery';
                battery.style.position = 'relative';
                battery.style.display = 'flex';
                battery.style.justifyContent = 'center';
                
                rodDiv.appendChild(battery);

                
               // Assuming you have an array of battery labels

              data.battery_labels.forEach(function (label) {
                

                var imgLink = document.createElement('a');
                imgLink.href= '/trailer/add/battery/' + trailerId + '/' + label;
                

                var img = document.createElement('img');
                img.src = '<?php echo e(asset('images/battery.png')); ?>';
                img.style.width = '50px';
                img.style.padding = '5px';
                
                imgLink.appendChild(img);
                battery.appendChild(imgLink);
            });

               

                var vehicleContainer = document.querySelector('.vehicle');
                 // Append the created elements to the container
                vehicleContainer.appendChild(firstRod);
                vehicleContainer.appendChild(secondRod);
                vehicleContainer.appendChild(frontAxleDiv);
                vehicleContainer.appendChild(rodDiv);
            }

            // Function to generate the HTML structure for the middle axle
            function generateMiddleAxleHTML(data) {
                var middleAxleDiv = document.createElement('div');
                middleAxleDiv.className = 'front';

                data.tire_labels_left.forEach(function (label) {
                    var leftTireDiv = document.createElement('div');
                    leftTireDiv.style.display = 'flex';
                    leftTireDiv.style.flexDirection = 'column';
                    leftTireDiv.textContent = label;

                    var leftTireLink = document.createElement('a');
                    leftTireLink.href = '/dashboard/trailer/view/tyre/' + trailerId + '/' + label;

                    var leftWheelDiv = document.createElement('div');
                    leftWheelDiv.className = 'wheel';

                    leftTireLink.appendChild(leftWheelDiv);
                    leftTireDiv.appendChild(leftTireLink);
                    middleAxleDiv.appendChild(leftTireDiv);

                    var leftTireDiv = document.createElement('div');
                    leftTireDiv.style.display = 'flex';
                    leftTireDiv.style.alignItems = 'center';
                    leftTireDiv.style.flexDirection = 'column';
                    leftTireDiv.textContent = label;

                    var leftTireLink = document.createElement('a');
                    leftTireLink.href = '/dashboard/trailer/view/rim/' + trailerId + '/' + label;

                    var leftWheelDiv = document.createElement('div');
                    leftWheelDiv.className = 'rim';

                    leftTireLink.appendChild(leftWheelDiv);
                    leftTireDiv.appendChild(leftTireLink);
                    middleAxleDiv.appendChild(leftTireDiv);
                });
                

                var middleDiv = document.createElement('div');
                middleDiv.style.width = '200px';
                middleDiv.style.background = 'darkgray';
                middleDiv.style.height = '10px';
                middleDiv.style.borderRadius = '10px';
                middleDiv.style.border = '1px solid #c1a1a1';
                middleDiv.style.marginTop = '16px';

                var middleInnerDiv = document.createElement('div');
                middleInnerDiv.style.width = '20px';
                middleInnerDiv.style.background = 'darkgray';
                middleInnerDiv.style.height = '100px';
                middleInnerDiv.style.border = '2px solid #c1a1a1';
                middleInnerDiv.style.margin = 'auto';
                middleInnerDiv.style.position = 'relative';
                middleInnerDiv.style.bottom = '50px';
                middleInnerDiv.style.left = '1px';

                var middleInnerDiv1 = document.createElement('div');
                middleInnerDiv1.className = 'tyre_btn';
                middleInnerDiv1.setAttribute('data-position', data.position);
                middleInnerDiv1.style.width = '40px';
                middleInnerDiv1.style.background = 'black';
                middleInnerDiv1.style.height = '40px';
                middleInnerDiv1.style.border = '2px solid #c1a1a1';
                middleInnerDiv1.style.margin = 'auto';
                middleInnerDiv1.style.position = 'relative';
                middleInnerDiv1.style.top = '30px';
                middleInnerDiv1.style.right = '12px';
                middleInnerDiv1.style.borderRadius = '30px';
                middleInnerDiv1.style.display = 'flex';
                middleInnerDiv1.style.color = '#fff';
                middleInnerDiv1.style.justifyContent = 'center';
                middleInnerDiv1.style.alignItems = 'center';
                middleInnerDiv1.style.fontSize = '40px';
                if(data.no_tyre==2){
                  middleInnerDiv1.textContent='+';                    
                }
                else{
                  middleInnerDiv1.textContent='-';                    

                }

                middleInnerDiv.appendChild(middleInnerDiv1);

                middleDiv.appendChild(middleInnerDiv);
                middleAxleDiv.appendChild(middleDiv);

                data.tire_labels_right.forEach(function (label) {
                    var rightTireDiv = document.createElement('div');
                    rightTireDiv.style.display = 'flex';
                    rightTireDiv.style.alignItems = 'center';
                    rightTireDiv.style.flexDirection = 'column';
                    rightTireDiv.textContent = label;

                    var rightTireLink = document.createElement('a');
                    rightTireLink.href = '/dashboard/trailer/view/rim/' + trailerId + '/' + label;

                    var rightWheelDiv = document.createElement('div');
                    rightWheelDiv.className = 'rim';

                    rightTireLink.appendChild(rightWheelDiv);
                    rightTireDiv.appendChild(rightTireLink);
                    middleAxleDiv.appendChild(rightTireDiv);


                    var rightTireDiv = document.createElement('div');
                    rightTireDiv.style.display = 'flex';
                    rightTireDiv.style.flexDirection = 'column';
                    rightTireDiv.textContent = label;

                    var rightTireLink = document.createElement('a');
                    rightTireLink.href = '/dashboard/trailer/view/tyre/' + trailerId + '/' + label;

                    var rightWheelDiv = document.createElement('div');
                    rightWheelDiv.className = 'wheel';

                    rightTireLink.appendChild(rightWheelDiv);
                    rightTireDiv.appendChild(rightTireLink);
                    middleAxleDiv.appendChild(rightTireDiv);
                });

                var rodDiv = document.createElement('div');
                rodDiv.className = 'rod';

                var vehicleContainer = document.querySelector('.vehicle');
                vehicleContainer.appendChild(middleAxleDiv);
                vehicleContainer.appendChild(rodDiv);
            }

            // Function to generate the HTML structure for the rear axle
            function generateRearAxleHTML(data) {
                var rearAxleDiv = document.createElement('div');
                rearAxleDiv.className = 'front';

                data.tire_labels_left.forEach(function (label) {
                    var leftTireDiv = document.createElement('div');
                    leftTireDiv.style.display = 'flex';
                    leftTireDiv.style.flexDirection = 'column';
                    leftTireDiv.textContent = label;

                    var leftTireLink = document.createElement('a');
                    leftTireLink.href = '/dashboard/trailer/view/tyre/' + trailerId + '/' + label;

                    var leftWheelDiv = document.createElement('div');
                    leftWheelDiv.className = 'wheel';

                    leftTireLink.appendChild(leftWheelDiv);
                    leftTireDiv.appendChild(leftTireLink);
                    rearAxleDiv.appendChild(leftTireDiv);


                    var leftTireDiv = document.createElement('div');
                    leftTireDiv.style.display = 'flex';
                    leftTireDiv.style.alignItems = 'center';
                    leftTireDiv.style.flexDirection = 'column';
                    leftTireDiv.textContent = label;

                    var leftTireLink = document.createElement('a');
                    leftTireLink.href = '/dashboard/trailer/view/rim/' + trailerId + '/' + label;

                    var leftWheelDiv = document.createElement('div');
                    leftWheelDiv.className = 'rim';

                    leftTireLink.appendChild(leftWheelDiv);
                    leftTireDiv.appendChild(leftTireLink);
                    rearAxleDiv.appendChild(leftTireDiv);
                });

                var middleDiv = document.createElement('div');
                middleDiv.style.width = '200px';
                middleDiv.style.background = 'darkgray';
                middleDiv.style.height = '10px';
                middleDiv.style.borderRadius = '10px';
                middleDiv.style.border = '1px solid #c1a1a1';
                middleDiv.style.marginTop = '16px';

                var middleInnerDiv = document.createElement('div');
                middleInnerDiv.style.width = '20px';
                middleInnerDiv.style.background = 'darkgray';
                middleInnerDiv.style.height = '50px';
                middleInnerDiv.style.border = '2px solid #c1a1a1';
                middleInnerDiv.style.margin = 'auto';
                middleInnerDiv.style.position = 'relative';
                middleInnerDiv.style.bottom = '50px';
                middleInnerDiv.style.left = '1px';

                var middleInnerDiv1 = document.createElement('div');
                middleInnerDiv1.className = 'tyre_btn';
                middleInnerDiv1.setAttribute('data-position', data.position);
                middleInnerDiv1.style.width = '40px';
                middleInnerDiv1.style.background = 'black';
                middleInnerDiv1.style.height = '40px';
                middleInnerDiv1.style.border = '2px solid #c1a1a1';
                middleInnerDiv1.style.margin = 'auto';
                middleInnerDiv1.style.position = 'relative';
                middleInnerDiv1.style.top = '30px';
                middleInnerDiv1.style.right = '12px';
                middleInnerDiv1.style.borderRadius = '30px';
                middleInnerDiv1.style.display = 'flex';
                middleInnerDiv1.style.color = '#fff';
                middleInnerDiv1.style.justifyContent = 'center';
                middleInnerDiv1.style.alignItems = 'center';
                middleInnerDiv1.style.fontSize = '40px';
                if(data.no_tyre==2){
                  middleInnerDiv1.textContent='+';                    
                }
                else{
                  middleInnerDiv1.textContent='-';                    

                }

                middleInnerDiv.appendChild(middleInnerDiv1);

                middleDiv.appendChild(middleInnerDiv);
                rearAxleDiv.appendChild(middleDiv);

                data.tire_labels_right.forEach(function (label) {
                    var rightTireDiv = document.createElement('div');
                    rightTireDiv.style.display = 'flex';
                    rightTireDiv.style.alignItems = 'center';
                    rightTireDiv.style.flexDirection = 'column';
                    rightTireDiv.textContent = label;

                    var rightTireLink = document.createElement('a');
                    rightTireLink.href = '/dashboard/trailer/view/rim/' + trailerId + '/' + label;

                    var rightWheelDiv = document.createElement('div');
                    rightWheelDiv.className = 'rim';

                    rightTireLink.appendChild(rightWheelDiv);
                    rightTireDiv.appendChild(rightTireLink);
                    rearAxleDiv.appendChild(rightTireDiv);


                    var rightTireDiv = document.createElement('div');
                    rightTireDiv.style.display = 'flex';
                    rightTireDiv.style.flexDirection = 'column';
                    rightTireDiv.textContent = label;

                    var rightTireLink = document.createElement('a');
                    rightTireLink.href = '/dashboard/trailer/view/tyre/' + trailerId + '/' + label;

                    var rightWheelDiv = document.createElement('div');
                    rightWheelDiv.className = 'wheel';

                    rightTireLink.appendChild(rightWheelDiv);
                    rightTireDiv.appendChild(rightTireLink);
                    rearAxleDiv.appendChild(rightTireDiv);
                });
                
                
                var rearStepney = document.createElement('div');
                rearStepney.className = 'stepney';
                rearStepney.style.position = 'relative';
                rearStepney.style.display = 'flex';
                rearStepney.style.justifyContent = 'center';
                
                var battery = document.createElement('div');
                battery.className = 'battery';
                battery.style.position = 'relative';
                battery.style.display = 'flex';
                battery.style.justifyContent = 'center';
                battery.style.alignItems = 'center';
                
                rearStepney.appendChild(battery);

                

              data.stepney_labels.forEach(function (label) {
                

                var imgLink = document.createElement('a');
                imgLink.href= '/vehicles/add/stepney/tyre/' + vehicleId + '/' + label;
                
                var wheel = document.createElement('div');
                wheel.className = 'wheel';
                
                imgLink.appendChild(wheel);
                battery.appendChild(imgLink);
                
                var imgLink = document.createElement('a');
                imgLink.href= '/dashboard/trailer/view/stepney/rim/' + trailerId + '/' + label;
                
                var wheel = document.createElement('div');
                wheel.className = 'rim';
                
                imgLink.appendChild(wheel);
                battery.appendChild(imgLink);
            });

                var vehicleContainer = document.querySelector('.vehicle');
                vehicleContainer.appendChild(rearAxleDiv);
                vehicleContainer.appendChild(rearStepney);
            }
            
         var vdata = JSON.parse(trailerConfig);
                        console.log('cg',trailerConfig)
                        console.log('vd',vdata)
                        console.log('tl',vehicleData)
                        console.log('tlr',trailerData)


            // Loop through vehicle data and generate HTML based on axle type
            vdata.forEach(item => {
                if (item.axle === 'Front Axle') {
                    generateFrontAxleHTML(item);
                } 
            });

            vdata.forEach(item => {
                if (item.axle === 'Middle Axle') {
                    generateMiddleAxleHTML(item);
                } 
            });

            vdata.forEach(item => {
                if (item.axle === 'Rear Axle') {
                    generateRearAxleHTML(item);
                }
            });

        }

        
            

        function installVehicle(vehicleId) {

            // Function to generate the HTML structure for the front axle
            function generateFrontAxleHTML(data) {
                var frontAxleDiv = document.createElement('div');
                frontAxleDiv.className = 'front';

                data.tire_labels_left.forEach(function (label) {
                    var leftTireDiv = document.createElement('div');
                    leftTireDiv.style.display = 'flex';
                    leftTireDiv.style.flexDirection = 'column';
                    leftTireDiv.textContent = label;

                    var leftTireLink = document.createElement('a');

                    leftTireLink.href = '/dashboard/vehicle/view/tyre/' + vehicleId + '/' + label;

                    var leftWheelDiv = document.createElement('div');
                    leftWheelDiv.className = 'wheel';

                    leftTireLink.appendChild(leftWheelDiv);
                    leftTireDiv.appendChild(leftTireLink);
                    frontAxleDiv.appendChild(leftTireDiv);

                    var leftTireDiv = document.createElement('div');
                    leftTireDiv.style.display = 'flex';
                    leftTireDiv.style.alignItems = 'center';
                    leftTireDiv.style.flexDirection = 'column';
                    leftTireDiv.textContent = label;

                    var leftTireLink = document.createElement('a');
                    leftTireLink.href = '/dashboard/vehicle/view/rim/' + vehicleId + '/' + label;

                    var leftWheelDiv = document.createElement('div');
                    leftWheelDiv.className = 'rim';

                    leftTireLink.appendChild(leftWheelDiv);
                    leftTireDiv.appendChild(leftTireLink);
                    frontAxleDiv.appendChild(leftTireDiv);

                });

                var middleDiv = document.createElement('div');
                middleDiv.style.width = '200px';
                middleDiv.style.background = 'darkgray';
                middleDiv.style.height = '10px';
                middleDiv.style.borderRadius = '10px';
                middleDiv.style.border = '1px solid #c1a1a1';
                middleDiv.style.marginTop = '16px';

                var middleInnerDiv = document.createElement('div');
                middleInnerDiv.style.width = '20px';
                middleInnerDiv.style.background = 'darkgray';
                middleInnerDiv.style.height = '50px';
                middleInnerDiv.style.border = '2px solid #c1a1a1';
                middleInnerDiv.style.margin = 'auto';
                middleInnerDiv.style.position = 'relative';
                middleInnerDiv.style.left = '1px';

                var middleInnerDiv1 = document.createElement('div');
                middleInnerDiv1.className = 'tyre_btn';
                middleInnerDiv1.setAttribute('data-position', data.position);
                middleInnerDiv1.style.width = '40px';
                middleInnerDiv1.style.background = 'black';
                middleInnerDiv1.style.height = '40px';
                middleInnerDiv1.style.border = '2px solid #c1a1a1';
                middleInnerDiv1.style.margin = 'auto';
                middleInnerDiv1.style.position = 'relative';
                middleInnerDiv1.style.top = '-20px';
                middleInnerDiv1.style.right = '12px';
                middleInnerDiv1.style.borderRadius = '30px';
                middleInnerDiv1.style.display = 'flex';
                middleInnerDiv1.style.color = '#fff';
                middleInnerDiv1.style.justifyContent = 'center';
                middleInnerDiv1.style.alignItems = 'center';
                middleInnerDiv1.style.fontSize = '40px';
                if(data.no_tyre==2){
                  middleInnerDiv1.textContent='+';                    
                }
                else{
                  middleInnerDiv1.textContent='-';                    

                }
                
                // Create the <i> element
            //     var addElement = document.createElement('i');
            //     addElement.className = 'ri-add-line';
            //     addElement.style.fontSize = '40px';
                
            //      var removeElement = document.createElement('i');
            //     removeElement.className = 'ri-subtract-line';
            //     removeElement.style.fontSize = '40px';

            //   // Append the <i> element under the first rod

            //     if(data.no_tyre==2){
            //     //   middleInnerDiv1.textContent='+';                    
            //          middleInnerDiv1.appendChild(addElement);
            //     }
            //     else{
            //     //   middleInnerDiv1.textContent='-';                    
            //          middleInnerDiv1.appendChild(removeElement);

            //     }
                

                middleInnerDiv.appendChild(middleInnerDiv1);

                middleDiv.appendChild(middleInnerDiv);
                frontAxleDiv.appendChild(middleDiv);

                data.tire_labels_right.forEach(function (label) {

                    var rightTireDiv = document.createElement('div');
                    rightTireDiv.style.display = 'flex';
                    rightTireDiv.style.alignItems = 'center';
                    rightTireDiv.style.flexDirection = 'column';
                    rightTireDiv.textContent = label;

                    var rightTireLink = document.createElement('a');
                    rightTireLink.href = '/dashboard/vehicle/view/rim/' + vehicleId + '/' + label;

                    var rightWheelDiv = document.createElement('div');
                    rightWheelDiv.className = 'rim';

                    rightTireLink.appendChild(rightWheelDiv);
                    rightTireDiv.appendChild(rightTireLink);
                    frontAxleDiv.appendChild(rightTireDiv);


                    var rightTireDiv = document.createElement('div');
                    rightTireDiv.style.display = 'flex';
                    rightTireDiv.style.flexDirection = 'column';
                    rightTireDiv.textContent = label;

                    var rightTireLink = document.createElement('a');
                    rightTireLink.href = '/dashboard/vehicle/view/tyre/' + vehicleId + '/' + label;

                    var rightWheelDiv = document.createElement('div');
                    rightWheelDiv.className = 'wheel';

                    rightTireLink.appendChild(rightWheelDiv);
                    rightTireDiv.appendChild(rightTireLink);
                    frontAxleDiv.appendChild(rightTireDiv);
                });

                var rodDiv = document.createElement('div');
                rodDiv.className = 'rod';
                
                var battery = document.createElement('div');
                battery.className = 'battery';
                battery.style.position = 'relative';
                battery.style.display = 'flex';
                battery.style.justifyContent = 'center';
                
                rodDiv.appendChild(battery);

                
               // Assuming you have an array of battery labels

              data.battery_labels.forEach(function (label) {
                

                var imgLink = document.createElement('a');
                imgLink.href= '/dashboard/vehicle/view/battery/' + vehicleId + '/' + label;
                

                var img = document.createElement('img');
                img.src = '<?php echo e(asset('images/battery.png')); ?>';
                img.style.width = '50px';
                img.style.padding = '5px';
                
                imgLink.appendChild(img);
                battery.appendChild(imgLink);
            });


                var vehicleContainer = document.querySelector('.vehicle');
                vehicleContainer.appendChild(frontAxleDiv);
                vehicleContainer.appendChild(rodDiv);
            }

            // Function to generate the HTML structure for the middle axle
            function generateMiddleAxleHTML(data) {
                var middleAxleDiv = document.createElement('div');
                middleAxleDiv.className = 'front';

                data.tire_labels_left.forEach(function (label) {
                    var leftTireDiv = document.createElement('div');
                    leftTireDiv.style.display = 'flex';
                    leftTireDiv.style.flexDirection = 'column';
                    leftTireDiv.textContent = label;

                    var leftTireLink = document.createElement('a');
                    leftTireLink.href = '/dashboard/vehicle/view/tyre/' + vehicleId + '/' + label;

                    var leftWheelDiv = document.createElement('div');
                    leftWheelDiv.className = 'wheel';

                    leftTireLink.appendChild(leftWheelDiv);
                    leftTireDiv.appendChild(leftTireLink);
                    middleAxleDiv.appendChild(leftTireDiv);

                    var leftTireDiv = document.createElement('div');
                    leftTireDiv.style.display = 'flex';
                    leftTireDiv.style.alignItems = 'center';
                    leftTireDiv.style.flexDirection = 'column';
                    leftTireDiv.textContent = label;

                    var leftTireLink = document.createElement('a');
                    leftTireLink.href = '/dashboard/vehicle/view/rim/' + vehicleId + '/' + label;

                    var leftWheelDiv = document.createElement('div');
                    leftWheelDiv.className = 'rim';

                    leftTireLink.appendChild(leftWheelDiv);
                    leftTireDiv.appendChild(leftTireLink);
                    middleAxleDiv.appendChild(leftTireDiv);
                });
                

                var middleDiv = document.createElement('div');
                middleDiv.style.width = '200px';
                middleDiv.style.background = 'darkgray';
                middleDiv.style.height = '10px';
                middleDiv.style.borderRadius = '10px';
                middleDiv.style.border = '1px solid #c1a1a1';
                middleDiv.style.marginTop = '16px';

                var middleInnerDiv = document.createElement('div');
                middleInnerDiv.style.width = '20px';
                middleInnerDiv.style.background = 'darkgray';
                middleInnerDiv.style.height = '100px';
                middleInnerDiv.style.border = '2px solid #c1a1a1';
                middleInnerDiv.style.margin = 'auto';
                middleInnerDiv.style.position = 'relative';
                middleInnerDiv.style.bottom = '50px';
                middleInnerDiv.style.left = '1px';

                var middleInnerDiv1 = document.createElement('div');
                middleInnerDiv1.className = 'tyre_btn';
                middleInnerDiv1.setAttribute('data-position', data.position);
                middleInnerDiv1.style.width = '40px';
                middleInnerDiv1.style.background = 'black';
                middleInnerDiv1.style.height = '40px';
                middleInnerDiv1.style.border = '2px solid #c1a1a1';
                middleInnerDiv1.style.margin = 'auto';
                middleInnerDiv1.style.position = 'relative';
                middleInnerDiv1.style.top = '30px';
                middleInnerDiv1.style.right = '12px';
                middleInnerDiv1.style.borderRadius = '30px';
                middleInnerDiv1.style.display = 'flex';
                middleInnerDiv1.style.color = '#fff';
                middleInnerDiv1.style.justifyContent = 'center';
                middleInnerDiv1.style.alignItems = 'center';
                middleInnerDiv1.style.fontSize = '40px';
                if(data.no_tyre==2){
                  middleInnerDiv1.textContent='+';                    
                }
                else{
                  middleInnerDiv1.textContent='-';                    

                }

                middleInnerDiv.appendChild(middleInnerDiv1);

                middleDiv.appendChild(middleInnerDiv);
                middleAxleDiv.appendChild(middleDiv);

                data.tire_labels_right.forEach(function (label) {
                    var rightTireDiv = document.createElement('div');
                    rightTireDiv.style.display = 'flex';
                    rightTireDiv.style.alignItems = 'center';
                    rightTireDiv.style.flexDirection = 'column';
                    rightTireDiv.textContent = label;

                    var rightTireLink = document.createElement('a');
                    rightTireLink.href = '/dashboard/vehicle/view/rim/'+label;

                    var rightWheelDiv = document.createElement('div');
                    rightWheelDiv.className = 'rim';

                    rightTireLink.appendChild(rightWheelDiv);
                    rightTireDiv.appendChild(rightTireLink);
                    middleAxleDiv.appendChild(rightTireDiv);


                    var rightTireDiv = document.createElement('div');
                    rightTireDiv.style.display = 'flex';
                    rightTireDiv.style.flexDirection = 'column';
                    rightTireDiv.textContent = label;

                    var rightTireLink = document.createElement('a');
                    rightTireLink.href = '/dashboard/vehicle/view/tyre/' + vehicleId + '/' + label;

                    var rightWheelDiv = document.createElement('div');
                    rightWheelDiv.className = 'wheel';

                    rightTireLink.appendChild(rightWheelDiv);
                    rightTireDiv.appendChild(rightTireLink);
                    middleAxleDiv.appendChild(rightTireDiv);
                });

                var rodDiv = document.createElement('div');
                rodDiv.className = 'rod';

                var vehicleContainer = document.querySelector('.vehicle');
                vehicleContainer.appendChild(middleAxleDiv);
                vehicleContainer.appendChild(rodDiv);
            }

            // Function to generate the HTML structure for the rear axle
            function generateRearAxleHTML(data) {
                var rearAxleDiv = document.createElement('div');
                rearAxleDiv.className = 'front';

                data.tire_labels_left.forEach(function (label) {
                    var leftTireDiv = document.createElement('div');
                    leftTireDiv.style.display = 'flex';
                    leftTireDiv.style.flexDirection = 'column';
                    leftTireDiv.textContent = label;

                    var leftTireLink = document.createElement('a');
                    leftTireLink.href = '/dashboard/vehicle/view/tyre/' + vehicleId + '/' + label;

                    var leftWheelDiv = document.createElement('div');
                    leftWheelDiv.className = 'wheel';

                    leftTireLink.appendChild(leftWheelDiv);
                    leftTireDiv.appendChild(leftTireLink);
                    rearAxleDiv.appendChild(leftTireDiv);


                    var leftTireDiv = document.createElement('div');
                    leftTireDiv.style.display = 'flex';
                    leftTireDiv.style.alignItems = 'center';
                    leftTireDiv.style.flexDirection = 'column';
                    leftTireDiv.textContent = label;

                    var leftTireLink = document.createElement('a');
                    leftTireLink.href = '/dashboard/vehicle/view/rim/' + vehicleId + '/' + label;

                    var leftWheelDiv = document.createElement('div');
                    leftWheelDiv.className = 'rim';

                    leftTireLink.appendChild(leftWheelDiv);
                    leftTireDiv.appendChild(leftTireLink);
                    rearAxleDiv.appendChild(leftTireDiv);
                });

                var middleDiv = document.createElement('div');
                middleDiv.style.width = '200px';
                middleDiv.style.background = 'darkgray';
                middleDiv.style.height = '10px';
                middleDiv.style.borderRadius = '10px';
                middleDiv.style.border = '1px solid #c1a1a1';
                middleDiv.style.marginTop = '16px';

                var middleInnerDiv = document.createElement('div');
                middleInnerDiv.style.width = '20px';
                middleInnerDiv.style.background = 'darkgray';
                middleInnerDiv.style.height = '50px';
                middleInnerDiv.style.border = '2px solid #c1a1a1';
                middleInnerDiv.style.margin = 'auto';
                middleInnerDiv.style.position = 'relative';
                middleInnerDiv.style.bottom = '50px';
                middleInnerDiv.style.left = '1px';

                var middleInnerDiv1 = document.createElement('div');
                middleInnerDiv1.className = 'tyre_btn';
                middleInnerDiv1.setAttribute('data-position', data.position);
                middleInnerDiv1.style.width = '40px';
                middleInnerDiv1.style.background = 'black';
                middleInnerDiv1.style.height = '40px';
                middleInnerDiv1.style.border = '2px solid #c1a1a1';
                middleInnerDiv1.style.margin = 'auto';
                middleInnerDiv1.style.position = 'relative';
                middleInnerDiv1.style.top = '30px';
                middleInnerDiv1.style.right = '12px';
                middleInnerDiv1.style.borderRadius = '30px';
                middleInnerDiv1.style.display = 'flex';
                middleInnerDiv1.style.color = '#fff';
                middleInnerDiv1.style.justifyContent = 'center';
                middleInnerDiv1.style.alignItems = 'center';
                middleInnerDiv1.style.fontSize = '40px';
                if(data.no_tyre==2){
                  middleInnerDiv1.textContent='+';                    
                }
                else{
                  middleInnerDiv1.textContent='-';                    

                }

                middleInnerDiv.appendChild(middleInnerDiv1);

                middleDiv.appendChild(middleInnerDiv);
                rearAxleDiv.appendChild(middleDiv);

                data.tire_labels_right.forEach(function (label) {
                    var rightTireDiv = document.createElement('div');
                    rightTireDiv.style.display = 'flex';
                    rightTireDiv.style.alignItems = 'center';
                    rightTireDiv.style.flexDirection = 'column';
                    rightTireDiv.textContent = label;

                    var rightTireLink = document.createElement('a');
                    rightTireLink.href = '/dashboard/vehicle/view/rim/' + vehicleId + '/' + label;

                    var rightWheelDiv = document.createElement('div');
                    rightWheelDiv.className = 'rim';

                    rightTireLink.appendChild(rightWheelDiv);
                    rightTireDiv.appendChild(rightTireLink);
                    rearAxleDiv.appendChild(rightTireDiv);


                    var rightTireDiv = document.createElement('div');
                    rightTireDiv.style.display = 'flex';
                    rightTireDiv.style.flexDirection = 'column';
                    rightTireDiv.textContent = label;

                    var rightTireLink = document.createElement('a');
                    rightTireLink.href = '/dashboard/vehicle/view/tyre/' + vehicleId + '/' + label;

                    var rightWheelDiv = document.createElement('div');
                    rightWheelDiv.className = 'wheel';

                    rightTireLink.appendChild(rightWheelDiv);
                    rightTireDiv.appendChild(rightTireLink);
                    rearAxleDiv.appendChild(rightTireDiv);
                });
                
                var rearStepney = document.createElement('div');
                rearStepney.className = 'stepney';
                rearStepney.style.position = 'relative';
                rearStepney.style.display = 'flex';
                rearStepney.style.justifyContent = 'center';
                
                var battery = document.createElement('div');
                battery.className = 'battery';
                battery.style.position = 'relative';
                battery.style.display = 'flex';
                battery.style.justifyContent = 'center';
                battery.style.alignItems = 'center';
                
                rearStepney.appendChild(battery);

                

              data.stepney_labels.forEach(function (label) {
                

                var imgLink = document.createElement('a');
                imgLink.href= '/dashboard/vehicle/view/stepney/tyre/' + vehicleId + '/' + label;
                
                var wheel = document.createElement('div');
                wheel.className = 'wheel';
                
                imgLink.appendChild(wheel);
                battery.appendChild(imgLink);
                
                var imgLink = document.createElement('a');
                imgLink.href= '/dashboard/vehicle/view/stepney/rim/' + vehicleId + '/' + label;
                
                var wheel = document.createElement('div');
                wheel.className = 'rim';
                
                imgLink.appendChild(wheel);
                battery.appendChild(imgLink);
            });


                var vehicleContainer = document.querySelector('.vehicle');
                vehicleContainer.appendChild(rearAxleDiv);
                vehicleContainer.appendChild(rearStepney);
            }

            // Loop through vehicle data and generate HTML based on axle type
            vehicleData.forEach(item => {
                if (item.axle === 'Front Axle') {
                    generateFrontAxleHTML(item);
                } 
            });

            vehicleData.forEach(item => {
                if (item.axle === 'Middle Axle') {
                    generateMiddleAxleHTML(item);
                } 
            });

            vehicleData.forEach(item => {
                if (item.axle === 'Rear Axle') {
                    generateRearAxleHTML(item);
                }
            });

        }

    

    function installTrailers() {
        // Function to install trailers
        trailerData.forEach(function (trailer) {
            installTrailer(trailer.config, trailer.id);
        });
    }

    // Call installVehicle followed by installTrailers
    installVehicle(vehicleId);
    installTrailers();
</script>


    </div>



        </div>

        <!--    <form action="/vehicle/image/save" method="post">-->
        <!--    <input type="hidden" name="_token" value="6BzRgUP9PQnimryi33Ro1IzpUuzeA3msxtahBSsR">-->
        <!--    <input type="hidden" name="vehicle_id" value="16">-->
        <!--    <input type="hidden" name="axle_tyre_configuration" id="configuration" value="">-->
        <!--    <div style="text-align: center; margin-top: 50px;">-->
        <!--      <button style="width:  50%;" class="btn btn-primary">Save</button>-->
        <!--    </div>-->
        <!--</form>-->


            </section>
            
            
            
            
            
 <div class="modal" id="actionBtn">
  <div class="modal-dialog modal-fullscreen modal-dialog-scrollable ">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header" >
        <h4 class="modal-title">Update Odometer</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" style="margin-top: 1px;"></button>
      </div>
      <!-- Modal body -->
      <div class="modal-body" style="margin-top: -15px;">
        <div class="card-body">
          <form action="/dashboard/vehicle/inspection/store" method="POST" id="cat" enctype="multipart/form-data">
          <?php echo csrf_field(); ?>
          <input type="hidden" name="vehicle_id" id="vehicle_id" value="<?php echo e($vehicle->id); ?>">
          <br>
          <div class="row">
              
            <!--<div class="col-sm-6">-->
            <!--    <div class="mb-3">-->
            <!--        <label class="form-label">Date-->
            <!--    <span class="required-field">*</span>-->
            <!--  </label>-->
            <!--    <input type="date" name="date" id="date" class="form-control" required>-->
            <!--    </div>-->
            <!--</div>-->
            
            </div>
            
            <div class="row">

                       
            <div class="col-sm-6">
                <div class="mb-3">
                    <label class="form-label">Odometer Value
                <span class="required-field">*</span>
              </label>
                <input type="number" name="odometer_value" id="odometer" class="form-control" required>
                
                </div>
            </div>
            
           
            
            <div class="col-sm-6">
                <div class="mb-3">
                    <label class="form-label">Attachment
                <!--<span class="required-field">*</span>-->
              </label>
                <input type="file" name="attachment_file" id="attachment" class="form-control">
                </div>
            </div>
            
            <div class="col-sm-12">
                <div class="mb-3">
                    <label class="form-label">Remark
                <!--<span class="required-field">*</span>-->
              </label>
                <!--<input type="text" name="description" id="description" class="form-control" required>-->
                <textarea name="remark" id="remark" class="form-control"></textarea>
                </div>
            </div>
            
                                        
          </div><!-- Row -->
          <div class="buttons-alignment mt-4 ml-auto">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
                </form>
        </div>
      </div>
    </div>
  </div>
</div>


 <div class="modal" id="detailsBtn">
  <div class="modal-dialog modal-fullscreen modal-dialog-scrollable ">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header" >
        <h4 class="modal-title">Vehicle Details</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" style="margin-top: 1px;"></button>
      </div>
      <!-- Modal body -->
      <div class="modal-body" style="margin-top: 15px;">
        <div class="card-body">
                  <form action="<?php echo e(route('vehicle.update', ['id' => $vehicle->id])); ?>" method="POST" enctype="multipart/form-data">
            <?php echo csrf_field(); ?>
            <div class="row">
                <!--<div class="col-sm-6">-->
                <!--    <div class="mb-3">-->
                <!--        <label class="form-label">Vehicle ID</label>-->
                <!--        <input type="text" name="vehicle_id" class="form-control" value="<?php echo e($vehicle->vehicle_id); ?>" readonly />-->
                <!--    </div>-->
                <!--</div>-->
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Make</label>
                        <input type="text" name="make" class="form-control" value="<?php echo e($vehicle->make); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Model</label>
                        <input type="text" name="model" class="form-control" value="<?php echo e($vehicle->model); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Year</label>
                        <input type="number" name="year" class="form-control" value="<?php echo e($vehicle->year); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">VIN Number</label>
                        <input type="text" name="vin_number" class="form-control" value="<?php echo e($vehicle->vin_number); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Registration Number</label>
                        <input type="text" name="registration_number" class="form-control" value="<?php echo e($vehicle->registration_number); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Title Status</label>
                        <input type="text" name="title_status" class="form-control" value="<?php echo e($vehicle->title_status); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Fuel Type</label>
                        <input type="text" name="fuel_type" class="form-control" value="<?php echo e($vehicle->fuel_type); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Engine Type</label>
                        <input type="text" name="engine_type" class="form-control" value="<?php echo e($vehicle->engine_type); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Transmission Type</label>
                        <input type="text" name="transmission_type" class="form-control" value="<?php echo e($vehicle->transmission_type); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Color</label>
                        <input type="text" name="color" class="form-control" value="<?php echo e($vehicle->color); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Mileage</label>
                        <input type="number" name="mileage" class="form-control" value="<?php echo e($vehicle->mileage); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Purchase Date</label>
                        <input type="date" name="purchase_date" class="form-control" value="<?php echo e($vehicle->purchase_date); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Purchase Price</label>
                        <input type="number" name="purchase_price" class="form-control" step="0.01" value="<?php echo e($vehicle->purchase_price); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Owner Name</label>
                        <input type="text" name="owner_name" class="form-control" value="<?php echo e($vehicle->owner_name); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Owner Contact</label>
                        <input type="text" name="owner_contact" class="form-control" value="<?php echo e($vehicle->owner_contact); ?>" readonly />
                    </div>
                </div>
                
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">GPS Device ID</label>
                        <input type="text" name="gps_device_id" class="form-control" value="<?php echo e($vehicle->gps_device_id); ?>" readonly />
                    </div>
                </div>
                
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Vehicle Type</label>
                        <input type="text" name="vehicle_type" class="form-control" value="<?php echo e($vehicle->vehicle_type); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="mb-3">
                        <label class="form-label">Vehicle Class</label>
                        <input type="text" name="vehicle_class" class="form-control" value="<?php echo e($vehicle->vehicle_class); ?>" readonly />
                    </div>
                </div>
                <!--<div class="col-sm-6">-->
                <!--    <div class="mb-3">-->
                <!--        <label class="form-label">License Renewal Date</label>-->
                <!--        <input type="date" name="license_renewal_date" class="form-control" value="<?php echo e($vehicle->license_renewal_date); ?>" readonly />-->
                <!--    </div>-->
                <!--</div>-->
                <!--<div class="col-sm-6">-->
                <!--    <div class="mb-3">-->
                <!--        <label class="form-label">Emissions Testing Date</label>-->
                <!--        <input type="date" name="emissions_testing_date" class="form-control" value="<?php echo e($vehicle->emissions_testing_date); ?>" readonly />-->
                <!--    </div>-->
                <!--</div>-->
                <!--<div class="col-sm-6">-->
                <!--    <div class="mb-3">-->
                <!--        <label class="form-label">Emissions Compliance</label>-->
                <!--        <input type="text" name="emissions_compliance" class="form-control" value="<?php echo e($vehicle->emissions_compliance); ?>" readonly />-->
                <!--    </div>-->
                <!--</div>-->
                
                <div class="col-sm-12">
                    <div class="mb-3">
                        <label class="form-label">Notes/Comments</label>
                        <textarea name="notes_comments" class="form-control" rows="3" readonly><?php echo e($vehicle->notes_comments); ?></textarea>
                    </div>
                </div>
            </div>
            
        </form>

        </div>
      </div>
    </div>
  </div>
</div>
           
    




<!--============================
=            Footer            =
=============================-->
<footer style="background: black;">
  
  <div class="text-center py-4">
    <small class="text-white">Tms &copy; <script>document.write(new Date().getFullYear())</script>. All rights reserved</small class="text-secondary">
  </div>

	<div class="text-center py-1">
     <!-- <small class="text-white"> <p>Designed By <a href="https://tms.com/">TMS</a></p></small> -->  
    </div>
</footer>


  <!-- To Top -->
  <!-- <div class="scroll-top">
    <i class="ti-angle-up"></i>
  </div> -->
  
  <!-- JAVASCRIPTS -->
  <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- google map -->
<!--   <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAgeuuDfRlweIs7D6uo4wdIHVvJ0LonQ6g"></script>
 -->  
  <script src="<?php echo e(asset('public/user/js/script.js')); ?>"></script>
  
  <script>
        // Add event listeners to radio buttons using jQuery
        $(document).ready(function () {
            $('#scan-qr').change(function () {
                if ($(this).is(':checked')) {
                    $('#scan-qr-content').show();
                    $('#search-id-content').hide();
                }
            });

            $('#search-id').change(function () {
                if ($(this).is(':checked')) {
                    $('#scan-qr-content').hide();
                    $('#search-id-content').show();
                }
            });
        });
    </script>
</body>

</html><?php /**PATH /home/megamarket/public_html/tms/resources/views/dashboard/vehicle.blade.php ENDPATH**/ ?>