


<?php $__env->startSection('content'); ?>

<div class="main-mobile-header doc-mobile-header">
      <a id="menuLink" href="#" class="menu-link"><i class="ri-menu-line"></i></a>
    </div>

   

    



     <div class="main main-app p-3 p-lg-4">
        
        <div class="mb-4">
          <ol class="breadcrumb fs-sm mb-1">
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Trailer Details</li>
          </ol>
        </div>

      

      <div class="">
        
        <div class="row">

          <div class="col-lg-8">
            <h2 class="main-title">Trailer Details</h2>
            
          </div>
          <div style="text-align: right;" class="col-lg-4 text-right">
             <!--<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addTrailer">Trailers History</button> -->
             <a href="/trailer/configuration/<?php echo e($trailer->id); ?>" class="btn btn-primary">Configuration</a>
             <a href="/trailer/<?php echo e($trailer->id); ?>/edit" class="btn btn-primary">Edit</a>
          </div>

        </div>

        <hr class="main-separator">  
        

   
    <!--<div class="row g-3">-->

    <!--  <div class="col-6 col-xl-3">-->
    <!--    <div class="card card-one">-->
    <!--      <div class="card-body">-->
    <!--        <label class="card-title fs-sm fw-medium mb-1">Documents</label>-->
    <!--        <h3 class="card-value mb-1"><i class="ri-tire-line"></i> 2 </h3>-->
    <!--        <small><span class="d-inline-flex text-danger">0.7% <i class="ri-arrow-down-line"></i></span> than last week</small>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--  </div>-->
    <!--  <div class="col-6 col-xl-3">-->
    <!--    <div class="card card-one">-->
    <!--      <div class="card-body">-->
    <!--        <label class="card-title fs-sm fw-medium mb-1">QR Code</label>-->
    <!--        <h3 class="card-value mb-1"><i class="ri-psi-line"></i> <span></span> Download</h3>-->
    <!--        <small><span class="d-inline-flex text-success">2.1% <i class="ri-arrow-up-line"></i></span> than last week</small>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--  </div>-->
      
    <!--</div>-->
    
  
    
            
<div class="card card-shadow-apply">
    <div class="card-body">
        
  
    
    <div class="row">
    
        <div class="col-lg-6">
            <div class="card card-shadow-apply">
    <div class="card-body">
        <form action="<?php echo e(route('trailer.update')); ?>" method="POST">
            <?php echo csrf_field(); ?>
            <input type="hidden" name="id" value="<?php echo e($trailer->id); ?>">
            
            <div class="row">
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Trailer ID</label>
                        <input type="text" name="trailer_id" placeholder="Trailer ID" class="form-control" value="<?php echo e($trailer->trailer_id); ?>" readonly disabled />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Trailer Type</label>
                        <input type="text" name="trailer_type" placeholder="Trailer Type" class="form-control" value="<?php echo e($trailer->trailer_type); ?>" disabled />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Manufacturer</label>
                        <input type="text" name="manufacturer" placeholder="Manufacturer" class="form-control" value="<?php echo e($trailer->manufacturer); ?>" disabled />
                    </div>
                </div>
            
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Model</label>
                        <input type="text" name="model" placeholder="Model" class="form-control" value="<?php echo e($trailer->model); ?>" disabled />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Year</label>
                        <input type="number" name="year" placeholder="Year" class="form-control" value="<?php echo e($trailer->year); ?>" disabled />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Length (ft)</label>
                        <input type="number" name="length" placeholder="Length (ft)" class="form-control" value="<?php echo e($trailer->length); ?>" disabled />
                    </div>
                </div>
            
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Width (ft)</label>
                        <input type="number" name="width" placeholder="Width (ft)" class="form-control" value="<?php echo e($trailer->width); ?>" disabled />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Height (ft)</label>
                        <input type="number" name="height" placeholder="Height (ft)" class="form-control" value="<?php echo e($trailer->height); ?>" disabled />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">GVWR (lbs)</label>
                        <input type="number" name="gvwr" placeholder="GVWR (lbs)" class="form-control" value="<?php echo e($trailer->gvwr); ?>" disabled />
                    </div>
                </div>

                <!--<div class="col-sm-4">-->
                <!--    <div class="mb-3">-->
                <!--        <label class="form-label">Axle Configuration</label>-->
                <!--        <input type="text" name="axle_tyre_configuration" placeholder="Axle Configuration" class="form-control" value="<?php echo e($trailer->axle_tyre_configuration); ?>" disabled />-->
                <!--    </div>-->
                <!--</div>-->
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Tare Weight (lbs)</label>
                        <input type="number" name="tare_weight" placeholder="Tare Weight (lbs)" class="form-control" value="<?php echo e($trailer->tare_weight); ?>" disabled />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Payload Capacity (lbs)</label>
                        <input type="number" name="payload_capacity" placeholder="Payload Capacity (lbs)" class="form-control" value="<?php echo e($trailer->payload_capacity); ?>" disabled />
                    </div>
                </div>
            
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Status</label>
                        <input type="text" name="status" placeholder="Status" class="form-control" value="<?php echo e($trailer->status); ?>" disabled />
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="mb-3">
                        <label class="form-label">Remarks</label>
                        <textarea name="remarks" placeholder="Remarks" class="form-control" rows="3" disabled><?php echo e($trailer->remarks); ?></textarea>
                    </div>
                </div>
            </div>


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


</div>


    <div class="col-lg-6">
        <div style="text-align: center; margin-bottom: 20px;">
            <a href="/trailer/documents/<?php echo e($trailer->id); ?>" class="btn btn-primary">Documents</a>
            <a href="/trailer/history/<?php echo e($trailer->id); ?>" class="btn btn-primary">Trailer History</a>

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

        <div style="text-align: center;"><h4>Vehicle No: <?php echo e($trailer->vehicle_id); ?></h4></div>
    <div class="vehicle">
        
        <!-- JavaScript code to generate the axle sections -->

        <script>
        
    var vehicleId = <?php echo e($trailer->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 installVehicle(vehicleId) {

            // 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';
    

    // 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 = '/vehicles/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 = '/vehicles/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 = '/vehicles/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 = '/vehicles/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= '/vehicles/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(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 = '/vehicles/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 = '/vehicles/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 = '/vehicles/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 = '/vehicles/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 = '/vehicles/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 = '/vehicles/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 = '/vehicles/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 = '/vehicles/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= '/vehicles/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= '/vehicles/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);
                }
            });

        }

    


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


    </div>
</div>
        
    <!--    <form action="/vehicle/image/save" method="post">-->
    <!--    <?php echo csrf_field(); ?>-->
    <!--    <input type="hidden" name="vehicle_id" value="<?php echo e($id); ?>">-->
    <!--    <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>-->
    
    </div>
    
    </div>


    </div>
</div>





        <br><br><br>



        

      </div><!-- container -->

     
    <style>
    tbody tr:hover {background-color: #F5F5F5;}
    .card-example>.card-body::before {
    content: ""
    }
    </style>
    
        <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: 500px;
            /*margin: 30px auto;*/
        }
        .rod{
            width: 20px;
    height: 100px;
    background: darkgray;
    border: 2px solid #c1a1a1;
        }
    </style>
    
    <style type="text/css">
     .axle-btns {
    display: flex;
    background: gray;
    width: 200px;
    align-items: center;
    padding: 8px;
    border-radius: 5px;
}

.axle-btns button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    width: 30px;
    height: 30px;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.axle-btns button#removeButton {
    color: red;
    margin-right: 10px;
}

.axle-btns button#generateButton {
    color: green;
    margin-left: 10px;
}

.axle-btns div {
    flex-grow: 1;
    text-align: center;
    font-size: 20px;
    color: white;
}
   
</style>



<script>



<?php $__env->stopSection(); ?>


<?php echo $__env->make('layout.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/vokks/public_html/tms/resources/views/trailer/view.blade.php ENDPATH**/ ?>