
@extends('layout.master')

@section('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">Edit Configuration</li>
          </ol>
        </div>

      

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

          <div class="col-lg-8">
            <h2 class="main-title">Edit Configuration</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">Add Trailers</button> -->
          <button style="" id="submitButton" class="btn btn-primary">Save</button>
            <!-- <a href="/form" class="btn btn-primary">Add Taxmaster</a>  -->
          </div>

        </div>

        <hr class="main-separator">        
<script>
$(document).ready(function() {
    $("#submitButton").click(function() {
        // Perform any client-side validation here if needed
       var data = $("#configuration").val();
       if(data!==''){
            // Submit the form when the button is clicked
            $("#myForm").submit(); 
       }
        
      
    });
});
</script>
            
<div class="card card-shadow-apply">
    <div class="card-body">
        
    <div style="text-align: -webkit-right;">
     <div class="axle-btns">
       <button id="removeButton">-</button>
       <div>Axle</div>
       <button id="generateButton">+</button> 
     </div>
    </div>
    
    <div style="text-align: -webkit-right; margin-top: 10px;">
     <div class="battery-btns">
       <button id="removeBattery">-</button>
       <div>Battery</div>
       <button id="generateBattery">+</button> 
     </div>
    </div>
    
    <div style="text-align: -webkit-right; margin-top: 10px;">
     <div class="battery-btns">
       <button id="removeStepney">-</button>
       <div>Spare wheel</div>
       <button id="generateStepney">+</button> 
     </div>
    </div>
    
    <form id="myForm" action="/vehicle/image/save" method="post">
        @csrf
        <input type="hidden" name="vehicle_id" value="{{$id}}">
        <input type="hidden" name="axle_tyre_configuration" id="configuration" value="">
        <div style="text-align: center; margin-top: 20px;">
          <button style="width:  50%; display: none;" class="btn btn-primary">Save</button>
        </div>
    </form>
    
    
    <div class="row">
    


    <div class="col-lg-6">
        <div style="margin: 30px auto;">
            <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: 12345678</h4></div>
    <div class="vehicle">
        
        <!-- JavaScript code to generate the axle sections -->
        <script>

            var vehicleId = {{$id}};
            var vehicleData = @json($data);
            console.log(vehicleData)
        

        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 = '/vehicles/add/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/add/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/add/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/add/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/add/battery/' + vehicleId + '/' + label;
                

                var img = document.createElement('img');
                img.src = '{{ 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 = '/vehicles/add/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/add/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/add/rim/' + vehicleId + '/' + 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/add/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/add/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/add/tyre/' + 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/add/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/add/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/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= '/vehicles/add/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);
                }
            });

        }

        installVehicle(vehicleId);

        document.getElementById('generateButton').addEventListener('click', function () {
    var vehicle = document.querySelector('.vehicle');
    vehicle.innerHTML = ''; // This will remove all child elements and their content

    // const axleName = document.getElementById('axleInput').value;
    // const numberOfaxle = parseInt(document.getElementById('noTireInput').value);
    const numberOfaxle = 1; // Change this to the actual number of axles to add
    const numberOfTires = 2;
    const numberOfRims = numberOfTires;

    if (isNaN(numberOfTires)) {
        alert('Please enter a valid number for the number of tires.');
        return;
    }

    // Function to find the next available position
    function findNextPosition() {
        if (vehicleData.length === 0) {
            return 'F';
        } else if (vehicleData.length === 1) {
            return 'R';
        } else {
            const existingPositions = vehicleData.map(item => item.position);
            let nextPosition = 1;
            while (existingPositions.includes(nextPosition.toString())) {
                nextPosition++;
            }
            return nextPosition.toString();
        }
    }

    for (let i = 0; i < numberOfaxle; i++) {
        const position = findNextPosition();
         let axle;
        
        if (position === 'F') {
            axle = 'Front Axle';
        } else if (position === 'R') {
            axle = 'Rear Axle';
        } else {
            axle = 'Middle Axle';
        }

        const tireLabelsLeft = [];
        const tireLabelsRight = [];

        // Generate tire labels based on the number of tires
        for (let j = 0; j < numberOfTires; j++) {
            if (numberOfTires === 2) {
                const tireLabel = position + (j === 0 ? 'L' : 'R') + '0';
                if (j === 0) {
                    tireLabelsLeft.push(tireLabel);
                } else {
                    tireLabelsRight.push(tireLabel);
                }
            } else {
                const tireLabel = position + (j % 2 === 0 ? 'L' : 'R') + Math.floor(j / 2);
                if (j % 2 === 0) {
                    tireLabelsLeft.push(tireLabel);
                } else {
                    tireLabelsRight.push(tireLabel);
                }
            }
        }


        const rimLabelsLeft = [];
const rimLabelsRight = [];

// Generate rim labels based on the number of rims
for (let j = 0; j < numberOfRims; j++) {
    if (numberOfRims === 2) {
        const rimLabel = position + (j === 0 ? 'L' : 'R') + '0';
        if (j === 0) {
            rimLabelsLeft.push(rimLabel);
        } else {
            rimLabelsRight.push(rimLabel);
        }
    } else {
        const rimLabel = position + (j % 2 === 0 ? 'L' : 'R') + Math.floor(j / 2);
        if (j % 2 === 0) {
            rimLabelsLeft.push(rimLabel);
        } else {
            rimLabelsRight.push(rimLabel);
        }
    }
}


        vehicleData.push({
            'axle': axle,
            'no_tyre': numberOfTires,
            'position': position,
            'tire_labels_left': tireLabelsLeft,
            'tire_labels_right': tireLabelsRight,
            'rim_labels_left': rimLabelsLeft,
            'rim_labels_right': rimLabelsRight,
        });
    }

    const jsonData = JSON.stringify(vehicleData, null, 2);
    installVehicle();
    
    var axle_configuration = document.querySelector('#configuration');
    axle_configuration.value= jsonData;

    // Log the JSON data to the console
    console.log(jsonData);
});


        // Event listener for the "Remove" button
document.getElementById('removeButton').addEventListener('click', function () {
    var vehicle = document.querySelector('.vehicle');
            vehicle.innerHTML = ''; // This will remove all child elements and their content
    // Check if there are any axles to remove
    if (vehicleData.length > 0) {
        // Remove the last axle from the vehicleData array
        vehicleData.pop();

        // Reinstall the updated vehicle configuration
        installVehicle();

        // Log the updated JSON data to the console
        const jsonData = JSON.stringify(vehicleData, null, 2);
        console.log(jsonData);
        
        var axle_configuration = document.querySelector('#configuration');
       axle_configuration.value= jsonData;
    
    } else {
        alert('No axles to remove.');
    }
});



document.querySelector('.vehicle').addEventListener('click', function (event) {

    

    const clickedElement = event.target;
        let updatedNumberOfTires;

    // Check if the clicked element has the class 'tyre_btn'
    if (clickedElement.classList.contains('tyre_btn')) {
        

        const position = clickedElement.getAttribute('data-position');
        const currentText = clickedElement.textContent;

        if (currentText === '+') {
            clickedElement.textContent = '-';
            clickedElement.classList.add('minus');
             updatedNumberOfTires = 4;

        } else if (currentText === '-') {
            clickedElement.textContent = '+';
            clickedElement.classList.remove('minus');
             updatedNumberOfTires = 2;
        }

        console.log(position);

    // var position = 'R';
      

                const tireLabelsLeft = [];
                const tireLabelsRight = [];

                // Generate tire labels based on the number of tires
                for (let j = 0; j < updatedNumberOfTires; j++) {
                    if (updatedNumberOfTires === 2) {
                        const tireLabel = position + (j === 0 ? 'L' : 'R') + '0';
                        if (j === 0) {
                            tireLabelsLeft.push(tireLabel);
                        } else {
                            tireLabelsRight.push(tireLabel);
                        }
                    } else {
                        const tireLabel = position + (j % 2 === 0 ? 'L' : 'R') + Math.floor(j / 2);
                        if (j % 2 === 0) {
                            tireLabelsLeft.push(tireLabel);
                        } else {
                            tireLabelsRight.push(tireLabel);
                        }
                    }
                }
               

    // Loop through the vehicleData and update numberOfTires where position is '1'
    vehicleData.forEach(function (item) {
        if (item.position === position) {
            item.no_tyre = updatedNumberOfTires;
            item.tire_labels_left = tireLabelsLeft;
            item.tire_labels_right = tireLabelsRight;
        }
    });

    // Reinstall the updated vehicle configuration
    var vehicle = document.querySelector('.vehicle');
    vehicle.innerHTML = ''; 

    installVehicle();

    // Log the updated JSON data to the console
    const jsonData = JSON.stringify(vehicleData, null, 2);
    console.log(jsonData);
    
    var axle_configuration = document.querySelector('#configuration');
    axle_configuration.value= jsonData;
    
    }
});

// Event listener for the "Generate Battery" button
document.getElementById('generateBattery').addEventListener('click', function () {
    const position = 'F'; // Replace with the appropriate position
    const existingAxle = vehicleData.find(item => item.position === position);

    if (existingAxle) {
        if (existingAxle.battery_labels.length < 5) {
            // Generate a new battery label
            const batteryLabel = 'Battery' + (existingAxle.battery_labels.length + 1);

            // Add the battery label to the axle
            existingAxle.battery_labels.push(batteryLabel);

            // Reinstall the updated vehicle configuration
            var vehicle = document.querySelector('.vehicle');
            vehicle.innerHTML = '';

            installVehicle();

            // Log the updated JSON data to the console
            const jsonData = JSON.stringify(vehicleData, null, 2);
            console.log(jsonData);

            var axle_configuration = document.querySelector('#configuration');
            axle_configuration.value = jsonData;
        } else {
            alert('Maximum limit of 5 battery reached.');
        }
    }
});

// Event listener for the "Remove Battery" button
document.getElementById('removeBattery').addEventListener('click', function () {
    const position = 'F'; // Replace with the appropriate position
    const existingAxle = vehicleData.find(item => item.position === position);

    if (existingAxle && existingAxle.battery_labels && existingAxle.battery_labels.length > 0) {
        // Remove the last battery label from the axle
        existingAxle.battery_labels.pop();

        // Reinstall the updated vehicle configuration
        var vehicle = document.querySelector('.vehicle');
        vehicle.innerHTML = '';

        installVehicle();

        // Log the updated JSON data to the console
        const jsonData = JSON.stringify(vehicleData, null, 2);
        console.log(jsonData);

        var axle_configuration = document.querySelector('#configuration');
        axle_configuration.value = jsonData;
    } else {
        alert('No battery to remove.');
    }
});

// Event listener for the "Generate Stepney" button
document.getElementById('generateStepney').addEventListener('click', function () {
    const position = 'R'; // Replace with the appropriate position
    const existingAxle = vehicleData.find(item => item.position === position);

    if (existingAxle) {
        if (existingAxle.stepney_labels.length < 2) {
        // Generate a new stepney label
        const stepneyLabel = 'Stepney' + (existingAxle.stepney_labels.length + 1);

        // Add the stepney label to the axle
        existingAxle.stepney_labels.push(stepneyLabel);

        // Reinstall the updated vehicle configuration
        var vehicle = document.querySelector('.vehicle');
        vehicle.innerHTML = '';

        installVehicle();

        // Log the updated JSON data to the console
        const jsonData = JSON.stringify(vehicleData, null, 2);
        console.log(jsonData);

        var axle_configuration = document.querySelector('#configuration');
        axle_configuration.value = jsonData;
    }
    else {
            alert('Maximum limit of 2 stepney labels reached.');
        }
    
        
    }
});

// Event listener for the "Remove Stepney" button
document.getElementById('removeStepney').addEventListener('click', function () {
    const position = 'R'; // Replace with the appropriate position
    const existingAxle = vehicleData.find(item => item.position === position);

    if (existingAxle && existingAxle.stepney_labels && existingAxle.stepney_labels.length > 0) {
        // Remove the last stepney label from the axle
        existingAxle.stepney_labels.pop();

        // Reinstall the updated vehicle configuration
        var vehicle = document.querySelector('.vehicle');
        vehicle.innerHTML = '';

        installVehicle();

        // Log the updated JSON data to the console
        const jsonData = JSON.stringify(vehicleData, null, 2);
        console.log(jsonData);

        var axle_configuration = document.querySelector('#configuration');
        axle_configuration.value = jsonData;
    } else {
        alert('No stepney labels to remove.');
    }
});



        </script>
    </div>
</div>
        </div>
        
        
    
    </div>
    
<div class="col-lg-6">
        
</div>
    
    </div>


    </div>
</div>





        <br><br><br>


<div class="modal" id="addTrailer">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header" >
        <h4 class="modal-title">Add Trailer Tyre</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="/document/store" method="POST" id="cat" enctype="multipart/form-data">
          @csrf
          <br>
          <div class="row">
              
            <div class="col-sm-12">
                <div class="mb-3">
                    <label class="form-label">Date
                <span class="required-field">*</span>
              </label>
                <input type="date" name="brand" id="date" class="form-control" required>
                </div>
            </div>
            
            </div>
            
            <div class="row">

                       
            <div class="col-sm-12">
                <div class="mb-3">
                    <label class="form-label">Trailer
                <span class="required-field">*</span>
              </label>
                <!--<input type="text" name="type" id="type" class="form-control" required>-->
                <select class="form-select">
                    <option>TR0001</option>
                    <option>TR0002</option>
                    <option>TR0003</option>
                </select>
                </div>
            </div>
            
           
            
            <!--<div class="col-sm-12">-->
            <!--    <div class="mb-3">-->
            <!--        <label class="form-label">Attachment-->
            <!--    <span class="required-field">*</span>-->
            <!--  </label>-->
            <!--    <input type="text" name="attachment" id="attachment" class="form-control" required>-->
            <!--    </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="description" id="description" 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><!-- 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;
}


   .battery-btns {
    display: flex;
    background: gray;
    width: 200px;
    align-items: center;
    padding: 8px;
    border-radius: 5px;
}

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

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

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

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



<script>

</script>


<script>
    $(document).ready(function() {
        $("#tour_package").validate({
            rules: {
                package_name: {
                    required: true,
                    maxlength: 20,
                },
                destination: {
                    required: true,
                    maxlength: 20,
                },
                days: {
                    required: true,
                    maxlength: 20,
                },
                hotel_type: {
                    required: true,
                    maxlength: 20,
                },
                meal: {
                    required: true,
                    maxlength: 20,
                },
                currency: {
                    required: true,
                    maxlength: 20,
                },
                price_per_person: {
                    required: true,
                    maxlength: 20,
                },
            },
            messages: {
                package_name: {
                    required: "Package Name is required",
                    maxlength: "Package Name cannot be more than 20 characters"
                },

                destination: {
                    required: "Destination  is required",
                    maxlength: "Destination  cannot be more than 20 characters",
                },

                days: {
                    required: "Day is required",
                    maxlength: "Day cannot be more than 20 characters",
                },

                hotel_type: {
                    required: "Hotel is required",
                    maxlength: "Hotel cannot be more than 20 characters",
                },

                meal: {
                    required: "Meal Price is required",
                    maxlength: "Meal Price cannot be more than 20 characters",
                },

                currency: {
                    required: "Currency is required",
                    maxlength: "Currency cannot be more than 20 characters",
                },

                price_per_person: {
                    required: "Price is required",
                    maxlength: "Price cannot be more than 20 characters",
                },

            }
        });
    });

    $('.select2').select2();
</script>

@endsection

