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

<?php
 $tireItems=[];
 $tires=[];
 $tire_histor=[];
?>

<style>
    .active_btn{
        background-color: #1c3fb7!important;
    }

    .arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}



.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
</style>

<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">Tyre Details</li>
          </ol>
        </div>



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

          <div class="col-lg-8">
            <h2 class="main-title">Tyre Details</h2>
            
          </div>
          <div style="text-align: right;" class="col-lg-4 text-right">
           <!--  <button type="button" class="btn btn-primary">Add Employee</button> -->
            <!-- <a href="/form" class="btn btn-primary">Create Hotel</a> -->
            <a type="button" href="javascript: void(0);" class="btn btn-primary btn-icon-text mb-2 mb-md-0" data-bs-toggle="modal" data-bs-target="#actionBtn">
              <i class="btn-icon-prepend" data-feather="package"></i>
              Move tyre
            </a>
            <a type="button" href="<?php echo e(route('tyre.edit', $tire->id)); ?>" class="btn btn-primary btn-icon-text mb-2 mb-md-0">
              <i class="btn-icon-prepend" data-feather="package"></i>
              Edit Details
            </a>
            <!--<a href="<?php echo e(URL::previous()); ?>" class="btn btn-primary">Back</a>-->

          </div>

        </div>
        
        <br><br>
        
        
<!--<div class="row">-->
<!--  <div class="col-lg-12 margin-tb">-->
    
<!--    <div class=" mb-3">-->
<!--      <a data-id="assigned" href="javascript:void();" class="assigned display-btn btn btn-primary btn-icon-text mb-2 mb-md-0">-->
<!--        Basic Details-->
<!--    </a>-->
<!--    <a data-id="store" href="javascript:void();" class="unassigned display-btn btn btn-primary btn-icon-text mb-2 mb-md-0">-->
<!--       Tyre History-->
<!--    </a>-->
    
<!--    <a data-id="service" href="javascript:void();" class="service display-btn btn btn-primary btn-icon-text mb-2 mb-md-0">-->
<!--       Service History-->
<!--    </a>-->
    
<!--    </div>-->
<!--  </div>-->
<!--</div>-->

<script>

$(document).ready(function() {
  $('.display-btn').click(function() {
    const data = $(this).data('id');
    console.log(data);
    // do something with attributeValue
    if(data== "assigned"){
        $('#assigned').show();
        $('#unassigned').hide();
        $('#service').hide();
        $('.assigned').addClass('active_btn');
        $('.unassigned').removeClass('active_btn');
        $('.service').removeClass('active_btn');
        
    }
    else if(data== "store"){
        $('#unassigned').show();
        $('#assigned').hide();
        $('#service').hide();
        $('.unassigned').addClass('active_btn');
        $('.assigned').removeClass('active_btn');
        $('.service').removeClass('active_btn');
    }
    else if(data== "service"){
        $('#service').show();
        $('#unassigned').hide();
        $('#assigned').hide();
        $('.unassigned').removeClass('active_btn');
        $('.assigned').removeClass('active_btn');
        $('.service').addClass('active_btn');
    }
    
  });
});

   
 </script>


        <hr class="main-separator">        
    


<!--         <h5 id="section9" class="main-subtitle">Basic Example</h5>
 -->        <!-- <p>In this examples, we load the data from an existing HTML table.</p> -->


<div class="row g-3" id="assigned">

<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">Tread Depth</label>
            <h3 class="card-value mb-1"><i class="ri-tire-line"></i> <?php echo e($tire->tread_depth); ?></h3>
            <!--<small><span class="d-inline-flex text-danger">0.7% <i class="ri-arrow-down-line"></i></span> than last week</small>-->
          </div><!-- card-body -->
        </div><!-- card-one -->
      </div><!-- col -->
      <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">Pressure</label>
            <h3 class="card-value mb-1"><i class="ri-psi-line"></i> <span></span> <?php echo e($tire->inflation_pressure); ?></h3>
            <!--<small><span class="d-inline-flex text-success">2.1% <i class="ri-arrow-up-line"></i></span> than last week</small>-->
          </div><!-- card-body -->
        </div><!-- card-one -->
      </div><!-- col -->
      <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">Condition</label>
            <h3 class="card-value mb-1"><i class="ri-file-list-3-line"></i> <?php echo e($tire->tire_condition); ?></h3>
            <!--<small><span class="d-inline-flex text-danger">0.3% <i class="ri-arrow-down-line"></i></span> than last week</small>-->
          </div><!-- card-body -->
        </div><!-- card-one -->
      </div><!-- col -->
      <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">Rolling Kilomenter</label>
            <h3 class="card-value mb-1"><i class="ri-road-map-line"></i>Current: <?php echo e($tire->current_mileage); ?> Max: 10000 <span></span></h3>
            <!--<small><span class="d-inline-flex text-success">1.2% <i class="ri-arrow-up-line"></i></span> than last week</small>-->
          </div><!-- card-body -->
        </div><!-- card-one -->
      </div><!-- col -->
      <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">Status</label>
            <h3 class="card-value mb-1"><i class="ri-road-map-line"></i> In Vehicle <span></span></h3>
            <!--<small><span class="d-inline-flex text-success">1.2% <i class="ri-arrow-up-line"></i></span> than last week</small>-->
          </div><!-- card-body -->
        </div><!-- card-one -->
      </div><!-- col -->
      <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">Action</label>
            <h3 class="card-value mb-1"><i class="ri-road-map-line"></i> Retreaded <span></span></h3>
            <!--<small><span class="d-inline-flex text-success">1.2% <i class="ri-arrow-up-line"></i></span> than last week</small>-->
          </div><!-- card-body -->
        </div><!-- card-one -->
      </div><!-- col -->
      
      </div>
      
      <div class="col-md-6 col-xl-4">
        <div class="card card-one">
          <div class="card-header">
            <h6 class="card-title">Tyre History</h6>
            <nav class="nav nav-icon nav-icon-sm ms-auto">
              <!--<a href="" class="nav-link"><i class="ri-refresh-line"></i></a>-->
              <!--<a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>-->
              <!--<a class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#actionBtn">Action</a>-->
            </nav>
          </div><!-- card-header -->
          <div class="card-body p-0">
            <ul class="people-group">
              <?php $__currentLoopData = $tire_history; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $data1): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
              
              <?php
                $createdDate = \Carbon\Carbon::parse($data1->created_at);
              ?>

              <li class="people-item">
                <div class="avatar"><span class="avatar-initial bg-primary fs-20"><i class="ri-truck-line"></i></span></div>
                <div class="people-body">
                  <h6><a href=""><?php echo e($data1->moved_to); ?></a></h6>
                  <span><?php echo e($createdDate->format('M d, Y, g:ia')); ?></span>

                </div><!-- people-body -->
                <div class="text-end">
                  <div class="fs-sm"> <?php echo e($data1->cost); ?></div>
                  <!--<span class="d-block fs-xs text-success">Completed</span>-->
                </div>
              </li>
              <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </ul>
          </div><!-- card-body -->
          <div class="card-footer d-flex justify-content-center">
            <a href="/tyre/history/<?php echo e($tire->id); ?>" class="fs-sm">View all</a>
          </div><!-- card-footer -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-md-6 col-xl-4">
        <div class="card card-one">
          <div class="card-header">
            <h6 class="card-title">Service History</h6>
            <nav class="nav nav-icon nav-icon-sm ms-auto">
              <!--<a href="" class="nav-link"><i class="ri-refresh-line"></i></a>-->
              <!--<a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>-->
              <a class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addService">Add</a>
            </nav>
          </div><!-- card-header -->
          <div class="card-body p-0">
            <ul class="people-group">
             
              <?php $__currentLoopData = $service_history; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
              
              <?php
                $createdDate = \Carbon\Carbon::parse($data->created_at);
              ?>

              <li class="people-item">
                <div class="avatar"><span class="avatar-initial bg-primary fs-20"><i class="ri-truck-line"></i></span></div>
                <div class="people-body">
                  <h6><a href=""><?php echo e($data->service_type); ?></a></h6>
                  <span><?php echo e($createdDate->format('M d, Y, g:ia')); ?></span>

                </div><!-- people-body -->
                <div class="text-end">
                  <div class="fs-sm"> <?php echo e($data->cost); ?></div>
                  <!--<span class="d-block fs-xs text-success">Completed</span>-->
                </div>
              </li>
              <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </ul>
          </div><!-- card-body -->
          <div class="card-footer d-flex justify-content-center">
            <a href="/tyre/service/history/<?php echo e($tire->id); ?>" class="fs-sm">View all</a>
          </div><!-- card-footer -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-md-6 col-xl-4">
        <div class="card card-one">
          <div class="card-header">
            <h6 class="card-title">Inspection History</h6>
            <nav class="nav nav-icon nav-icon-sm ms-auto">
              <!--<a href="" class="nav-link"><i class="ri-refresh-line"></i></a>-->
              <!--<a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>-->
              <a class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#inspectionBtn">Add</a>
            </nav>
          </div><!-- card-header -->
          <div class="card-body p-0">
            <ul class="people-group">
              <?php $__currentLoopData = $inspection_history; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
              
              <?php
                $createdDate = \Carbon\Carbon::parse($data->created_at);
              ?>

              <li class="people-item">
                <div class="avatar"><span class="avatar-initial bg-primary fs-20"><i class="ri-truck-line"></i></span></div>
                <div class="people-body">
                  <h6><a href="">Condition: <?php echo e($data->tire_condition); ?></a></h6>
                  <span><?php echo e($createdDate->format('M d, Y, g:ia')); ?></span>

                </div><!-- people-body -->
                <div class="text-end">
                  <div class="fs-sm"> <?php echo e($data->cost); ?></div>
                  <!--<span class="d-block fs-xs text-success">Completed</span>-->
                </div>
              </li>
              <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </ul>
          </div><!-- card-body -->
          <div class="card-footer d-flex justify-content-center">
            <a href="/tyre/inspection/history/<?php echo e($tire->id); ?>" class="fs-sm">View all</a>
          </div><!-- card-footer -->
        </div><!-- card -->
      </div><!-- col -->

      <div class="col-xl-7">
        <div class="card card-one">
          <div class="card-header">
            <h6 class="card-title">Basic Details</h6>
            <!--<nav class="nav nav-icon nav-icon-sm ms-auto">-->
            <!--  <a href="" class="nav-link"><i class="ri-refresh-line"></i></a>-->
            <!--  <a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>-->
            <!--</nav>-->
          </div><!-- card-header -->
          <div class="card-body">
            
                      <form action="<?php echo e(route('tyres', ['id' => $tire->id])); ?>" method="POST">
            <?php echo csrf_field(); ?>
            <div class="row">
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Brand</label>
                        <input type="text" name="brand" placeholder="Brand" class="form-control" value="<?php echo e($tire->brand); ?>" readonly />
                    </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($tire->model); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Size</label>
                        <input type="text" name="size" placeholder="Size" class="form-control" value="<?php echo e($tire->size); ?>" readonly />
                    </div>
                </div>
              
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Purchase Date</label>
                        <input type="date" name="purchase_date" class="form-control" value="<?php echo e($tire->purchase_date); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Purchase Cost</label>
                        <input type="number" name="purchase_cost" placeholder="Purchase Cost" class="form-control" step="0.01" value="<?php echo e($tire->purchase_cost); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Installation Date</label>
                        <input type="date" name="installation_date" class="form-control" value="<?php echo e($tire->installation_date); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Vehicle ID</label>
                        <input type="number" name="vehicle_id" placeholder="Vehicle ID" class="form-control" value="<?php echo e($tire->vehicle_id); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Position on Vehicle</label>
                        <input type="text" name="position_on_vehicle" placeholder="Position on Vehicle" class="form-control" value="<?php echo e($tire->position_on_vehicle); ?>" readonly />
                    </div>
                </div>
                
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Temperature</label>
                        <input type="number" name="temperature" placeholder="Temperature" class="form-control" step="0.1" value="<?php echo e($tire->temperature); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Load Rating</label>
                        <input type="text" name="load_rating" placeholder="Load Rating" class="form-control" value="<?php echo e($tire->load_rating); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Speed Rating</label>
                        <input type="text" name="speed_rating" placeholder="Speed Rating" class="form-control" value="<?php echo e($tire->speed_rating); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">DOT Number</label>
                        <input type="text" name="dot_number" placeholder="DOT Number" class="form-control" value="<?php echo e($tire->dot_number); ?>" readonly />
                    </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($tire->status); ?>" readonly />
                    </div>
                </div> -->
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Warranty Provider</label>
                        <input type="text" name="warranty_provider" placeholder="Warranty Provider" class="form-control" value="<?php echo e($tire->warranty_provider); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Warranty Type</label>
                        <input type="text" name="warranty_type" placeholder="Warranty Type" class="form-control" value="<?php echo e($tire->warranty_type); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Warranty Start Date</label>
                        <input type="date" name="warranty_start_date" class="form-control" value="<?php echo e($tire->warranty_start_date); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Warranty End Date</label>
                        <input type="date" name="warranty_end_date" class="form-control" value="<?php echo e($tire->warranty_end_date); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Notes/Comments</label>
                        <textarea name="notes_comments" placeholder="Notes/Comments" class="form-control"><?php echo e($tire->notes_comments); ?></textarea>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Barcode/QR Code</label>
                        <input type="text" name="barcode_qr_code" placeholder="Barcode/QR Code" class="form-control" value="<?php echo e($tire->barcode_qr_code); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Commercial Name</label>
                        <input type="text" name="commercial_name" placeholder="Commercial Name" class="form-control" value="<?php echo e($tire->commercial_name); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Identity</label>
                        <input type="text" name="identity" placeholder="Identity" class="form-control" value="<?php echo e($tire->identity); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Load Pressure Information</label>
                        <textarea name="load_pressure_information" placeholder="Load Pressure Information" class="form-control"><?php echo e($tire->load_pressure_information); ?></textarea>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Indicated Exterior</label>
                        <input type="text" name="indicated_exterior" placeholder="Indicated Exterior" class="form-control" value="<?php echo e($tire->indicated_exterior); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Type of Construction</label>
                        <input type="text" name="type_of_construction" placeholder="Type of Construction" class="form-control" value="<?php echo e($tire->type_of_construction); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Tyre Sections Width (mm)</label>
                        <input type="number" name="tyre_sections_width_mm" placeholder="Tyre Sections Width (mm)" class="form-control" step="0.01" value="<?php echo e($tire->tyre_sections_width_mm); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Section Height to Section Width Ratio</label>
                        <input type="number" name="section_height_to_section_width_ratio" placeholder="Section Height to Section Width Ratio" class="form-control" step="0.01" value="<?php echo e($tire->section_height_to_section_width_ratio); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Rim Diameter (inches)</label>
                        <input type="number" name="rim_diameter_inches" placeholder="Rim Diameter (inches)" class="form-control" step="0.01" value="<?php echo e($tire->rim_diameter_inches); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Load Capacity Index</label>
                        <input type="text" name="load_capacity_index" placeholder="Load Capacity Index" class="form-control" value="<?php echo e($tire->load_capacity_index); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Tyre Type</label>
                        <select name="tyre_type" class="form-control">
                            <option value="Tubeless" <?php if($tire->tyre_type == 'Tubeless'): ?> selected <?php endif; ?>>Tubeless</option>
                            <option value="Tube" <?php if($tire->tyre_type == 'Tube'): ?> selected <?php endif; ?>>Tube</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Remarks</label>
                        <textarea name="remarks" placeholder="Remarks" class="form-control"><?php echo e($tire->remarks); ?></textarea>
                    </div>
                </div>
            </div>
            <!--<div class="text-center mt-4">-->
            <!--    <button type="submit" class="btn btn-primary">Update Tire</button>-->
            <!--</div>-->
        </form>

            
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-md-6 col-xl-5">
        <div class="card card-one">
          <div class="card-header">
            <h6 class="card-title">Tyre Position</h6>
            <nav class="nav nav-icon nav-icon-sm ms-auto">
              <!--<a href="" class="nav-link"><i class="ri-refresh-line"></i></a>-->
              <!--<a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>-->
            </nav>
          </div><!-- card-header -->
          <div class="card-body">
            
          <!-- image tyre start-->

          

    <div class="col-lg-7">
        <div style="text-align: center;"><h4>Position Code: <?php echo e($position); ?></h4></div>
        <div class="space">
        
    <!-- <label for="noTireInput">Enter Number of Tires: </label>
    <input type="number" id="noTireInput" placeholder="Number of Tires"> -->
    
    

    <div class="vehicle" style="float: left;">
        
        <!-- JavaScript code to generate the axle sections -->

        <script>
            var vehicleData = [
            {
                axle: 'Front Axle',
                no_tyre: 2,
                position: 'F',
                tire_labels_left: ['FL0', 'FL1'],
                tire_labels_right: ['FR0', 'FR1'],
            },
            {
                axle: 'Middle Axle',
                no_tyre: 2,
                position: 'M',
                tire_labels_left: ['ML0', 'ML1'],
                tire_labels_right: ['MR0', 'MR1'],
            },
            {
                axle: 'Rear Axle',
                no_tyre: 2,
                position: 'R',
                tire_labels_left: ['RL0', 'RL1'],
                tire_labels_right: ['RR0', 'RR1'],
            }
        ];
        
        var position= '<?php echo e($position); ?>';
        console.log('po', position)

        function installVehicle(position) {

            // 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 = '/wheeles/1';

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

                    if(label==position){
                        var leftWheelDiv = document.createElement('div');
                    leftWheelDiv.className = 'wheel wheel-danger';
                        
                        var wheelMarker = document.createElement('div');
                        wheelMarker.className = 'wheel-marker';

                        leftWheelDiv.appendChild(wheelMarker); 
                    }
                    
                    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 = '/wheeles/1';

                    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 = '100px';
                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';

                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 = '/wheeles/1';

                    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 = '/wheeles/1';

                    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 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 = '/wheeles/1';

                    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 = '/wheeles/1';

                    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 = '100px';
                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';

                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 = '/wheeles/1';

                    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 = '/wheeles/1';

                    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 = '/wheeles/1';

                    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 = '/wheeles/1';

                    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 = '100px';
                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';

                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 = '/wheeles/1';

                    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 = '/wheeles/1';

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

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

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

            // 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(position);
    installTrailers();
</script>


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


    </div>
</div>

          <!-- end-->
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
     
   
      
    </div>

 <div style="display: none;" id="assigne">
        <div class="card card-shadow-apply">
    <div class="card-body">
        <form action="<?php echo e(route('tyres', ['id' => $tire->id])); ?>" method="POST">
            <?php echo csrf_field(); ?>
            <div class="row">
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Brand</label>
                        <input type="text" name="brand" placeholder="Brand" class="form-control" value="<?php echo e($tire->brand); ?>" readonly />
                    </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($tire->model); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Size</label>
                        <input type="text" name="size" placeholder="Size" class="form-control" value="<?php echo e($tire->size); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Tread Depth</label>
                        <input type="number" name="tread_depth" placeholder="Tread Depth" class="form-control" step="0.1" value="<?php echo e($tire->tread_depth); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Purchase Date</label>
                        <input type="date" name="purchase_date" class="form-control" value="<?php echo e($tire->purchase_date); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Purchase Cost</label>
                        <input type="number" name="purchase_cost" placeholder="Purchase Cost" class="form-control" step="0.01" value="<?php echo e($tire->purchase_cost); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Installation Date</label>
                        <input type="date" name="installation_date" class="form-control" value="<?php echo e($tire->installation_date); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Vehicle ID</label>
                        <input type="number" name="vehicle_id" placeholder="Vehicle ID" class="form-control" value="<?php echo e($tire->vehicle_id); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Position on Vehicle</label>
                        <input type="text" name="position_on_vehicle" placeholder="Position on Vehicle" class="form-control" value="<?php echo e($tire->position_on_vehicle); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Current Mileage</label>
                        <input type="number" name="current_mileage" placeholder="Current Mileage" class="form-control" value="<?php echo e($tire->current_mileage); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Tire Condition</label>
                        <input type="text" name="tire_condition" placeholder="Tire Condition" class="form-control" value="<?php echo e($tire->tire_condition); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Inflation Pressure</label>
                        <input type="number" name="inflation_pressure" placeholder="Inflation Pressure" class="form-control" step="0.1" value="<?php echo e($tire->inflation_pressure); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Temperature</label>
                        <input type="number" name="temperature" placeholder="Temperature" class="form-control" step="0.1" value="<?php echo e($tire->temperature); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Load Rating</label>
                        <input type="text" name="load_rating" placeholder="Load Rating" class="form-control" value="<?php echo e($tire->load_rating); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Speed Rating</label>
                        <input type="text" name="speed_rating" placeholder="Speed Rating" class="form-control" value="<?php echo e($tire->speed_rating); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">DOT Number</label>
                        <input type="text" name="dot_number" placeholder="DOT Number" class="form-control" value="<?php echo e($tire->dot_number); ?>" readonly />
                    </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($tire->status); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Warranty Provider</label>
                        <input type="text" name="warranty_provider" placeholder="Warranty Provider" class="form-control" value="<?php echo e($tire->warranty_provider); ?>" readonly />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Warranty Type</label>
                        <input type="text" name="warranty_type" placeholder="Warranty Type" class="form-control" value="<?php echo e($tire->warranty_type); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Warranty Start Date</label>
                        <input type="date" name="warranty_start_date" class="form-control" value="<?php echo e($tire->warranty_start_date); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Warranty End Date</label>
                        <input type="date" name="warranty_end_date" class="form-control" value="<?php echo e($tire->warranty_end_date); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Notes/Comments</label>
                        <textarea name="notes_comments" placeholder="Notes/Comments" class="form-control"><?php echo e($tire->notes_comments); ?></textarea>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Barcode/QR Code</label>
                        <input type="text" name="barcode_qr_code" placeholder="Barcode/QR Code" class="form-control" value="<?php echo e($tire->barcode_qr_code); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Commercial Name</label>
                        <input type="text" name="commercial_name" placeholder="Commercial Name" class="form-control" value="<?php echo e($tire->commercial_name); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Identity</label>
                        <input type="text" name="identity" placeholder="Identity" class="form-control" value="<?php echo e($tire->identity); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Load Pressure Information</label>
                        <textarea name="load_pressure_information" placeholder="Load Pressure Information" class="form-control"><?php echo e($tire->load_pressure_information); ?></textarea>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Indicated Exterior</label>
                        <input type="text" name="indicated_exterior" placeholder="Indicated Exterior" class="form-control" value="<?php echo e($tire->indicated_exterior); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Type of Construction</label>
                        <input type="text" name="type_of_construction" placeholder="Type of Construction" class="form-control" value="<?php echo e($tire->type_of_construction); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Tyre Sections Width (mm)</label>
                        <input type="number" name="tyre_sections_width_mm" placeholder="Tyre Sections Width (mm)" class="form-control" step="0.01" value="<?php echo e($tire->tyre_sections_width_mm); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Section Height to Section Width Ratio</label>
                        <input type="number" name="section_height_to_section_width_ratio" placeholder="Section Height to Section Width Ratio" class="form-control" step="0.01" value="<?php echo e($tire->section_height_to_section_width_ratio); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Rim Diameter (inches)</label>
                        <input type="number" name="rim_diameter_inches" placeholder="Rim Diameter (inches)" class="form-control" step="0.01" value="<?php echo e($tire->rim_diameter_inches); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Load Capacity Index</label>
                        <input type="text" name="load_capacity_index" placeholder="Load Capacity Index" class="form-control" value="<?php echo e($tire->load_capacity_index); ?>" />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Tyre Type</label>
                        <select name="tyre_type" class="form-control">
                            <option value="Tubeless" <?php if($tire->tyre_type == 'Tubeless'): ?> selected <?php endif; ?>>Tubeless</option>
                            <option value="Tube" <?php if($tire->tyre_type == 'Tube'): ?> selected <?php endif; ?>>Tube</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Remarks</label>
                        <textarea name="remarks" placeholder="Remarks" class="form-control"><?php echo e($tire->remarks); ?></textarea>
                    </div>
                </div>
            </div>
            <!--<div class="text-center mt-4">-->
            <!--    <button type="submit" class="btn btn-primary">Update Tire</button>-->
            <!--</div>-->
        </form>
    </div>
</div>

     </div>

             <div style="display:none;" id="unassigned">
        <div class="card card-example">
    <div class="card-body" style="background-color: white;">
        <div class="table-responsive">
            <table id="tableGrid1" class="table table-hover">
                <thead class="text-center">
                    <tr>
                        <th>No</th>
                        <th>Date</th>
                        <th>Action</th>
                        <th>Details</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__currentLoopData = $tireItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $tire): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr>
                        <td><?php echo e($key + 1); ?></td>
                        <td><?php echo e($tire->brand); ?></td>
                        <td><?php echo e($tire->manufacture_date); ?></td>
                        <td><?php echo e($tire->condition); ?></td>
                        
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        </div><!-- table-responsive -->
    </div><!-- card-body -->
</div><!-- card -->
     </div>

     
          <div style="display:none;" id="service">
        <div class="card card-example">
    <div class="card-body" style="background-color: white;">
        <div class="table-responsive">
            <table id="tableGrid2" class="table table-hover">
                <thead class="text-center">
                    <tr>
                        <th>No</th>
                        <th>Service Date</th>
                        <th>Service Type</th>
                        <th>Cost</th>
                        <th>Remarks</th>
                        <th>Attachment</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__currentLoopData = $tireItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $tire): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr>
                        <td><?php echo e($key + 1); ?></td>
                        <td><?php echo e($tire->brand); ?></td>
                        <td><?php echo e($tire->manufacture_date); ?></td>
                        <td><?php echo e($tire->condition); ?></td>
                        <td><?php echo e($tire->condition); ?></td>
                        <td><?php echo e($tire->condition); ?></td>
                        
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        </div><!-- table-responsive -->
    </div><!-- card-body -->
</div><!-- card -->
     </div>




        <br><br><br>

<div class="modal" id="actionBtn">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header" >
        <h4 class="modal-title">Move 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="/tyre/history/store" method="POST" id="cat" enctype="multipart/form-data">
          <?php echo csrf_field(); ?>
          <input type="hidden" name="tire_id" id="tire_id" value="<?php echo e($tire->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">Move Tyre
                <span class="required-field">*</span>
              </label>
                <!--<input type="text" name="type" id="type" class="form-control" required>-->
                <select class="form-select" name="moved_to">
                    <option value="Store">In Store</option>
                    <option value="Service">In Service</option>
                    <option value="Scrap">In Scrap</option>
                </select>
                </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" 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="addService">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header" >
        <h4 class="modal-title">Add Service</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="/tyre/service/history/store" method="POST" id="cat" enctype="multipart/form-data">
          <?php echo csrf_field(); ?>
          <input type="hidden" name="tire_id" id="tire_id" value="<?php echo e($tire->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 class="col-sm-6">
                <div class="mb-3">
                    <label class="form-label">Service Type
                <span class="required-field">*</span>
              </label>
                <!--<input type="text" name="type" id="type" class="form-control" required>-->
                <select class="form-select" name="service_type" id="service_type" required>
                <option value="">Select</option>
                <?php $__currentLoopData = $service_type; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <option><?php echo e($service->name); ?></option>
                  <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
                </div>
            </div>
            
            <div class="col-sm-6">
                <div class="mb-3">
                    <label class="form-label">Cost
                <span class="required-field">*</span>
              </label>
                <input type="number" name="cost" id="cost" 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" id="attachment" class="form-control">
                </div>
            </div>
            
            <div class="col-sm-12">
                <div class="mb-3">
                    <label class="form-label">Description
                <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 class="modal" id="inspectionBtn">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header" >
        <h4 class="modal-title">Inspection Report for (Tyre: TR001)</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="/tyre/inspection/history/store" method="POST" id="cat" enctype="multipart/form-data">
          <?php echo csrf_field(); ?>

          <input type="hidden" name="tire_id" id="tire_id" value="<?php echo e($tire->id); ?>">

          <br>
          <div class="row">
              
          
          <div class="col-lg-4">
            <div class="mb-3">
            <label class="form-label">Date</label>
            <input type="date" name="inspection_date" class="form-control" required>
          </div>
          </div>
          
        <div class="col-lg-4">
          <div class="mb-3">
            <label class="form-label">Tread depth (in mm)</label>
            <input type="number" name="tread_depth_mm" class="form-control" step="0.01" required>
          </div>
        </div>
        
        <div class="col-lg-4">
          <div class="mb-3">
            <label class="form-label">Pressure</label>
            <input type="number" name="pressure" class="form-control"  required>
          </div>
        </div>
        
        <div class="col-lg-4">
          <div class="mb-3">
            <label class="form-label">Condition</label>
            <select name="question" class="form-select" required>
            <option value="Yes">Good</option>
            <option value="No">Bad</option>
            </select>
            <!--<input type="number" name="tread_depth_mm" class="form-control" step="0.01" required>-->
          </div>
        </div>
        
        <div class="col-lg-4">
          <div class="mb-3">
            <label class="form-label">Current Rolling (KM)</label>
            <input type="number" name="tread_depth_mm" class="form-control" step="0.01" required>
          </div>
        </div>

        <?php $__currentLoopData = $faq; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $question): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <input type="hidden" name="faq_question[]" class="form-control" value="<?php echo e($question->name); ?>">
        
        <div class="col-lg-12">
         <div class="mb-3">
            <label class="form-label"><?php echo e($question->name); ?></label>
            <select name="faq_answer[]" class="form-control" required>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </select>
        </div>
       </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      
        
        <div class="col-lg-6">
        <div class="mb-3">
            <label class="form-label">Action</label>
            <select name="action_type" class="form-control" required>
            <?php $__currentLoopData = $action_type; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <option value="<?php echo e($data->name); ?>"><?php echo e($data->name); ?></option>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
          </div>
          
        </div>
        
        <div class="col-lg-6">
          <div class="mb-3">
            <label class="form-label">Attachment</label>
            <input type="file" multiple name="attachment" class="form-control">
          </div>
        </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;
        }
        .wheel-marker {
     width: 0;
    height: 0;
    border-left: 10px solid transparent; /* Adjust the size of the triangle by changing border values */
    border-right: 10px solid transparent; /* Adjust the size of the triangle by changing border values */
    border-bottom: 20px solid #000; /* Adjust the height and color of the triangle */
    position: relative;
    bottom: -70px;
    margin: auto;
}
    </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>
     
    <style>
    tbody tr:hover {background-color: #F5F5F5;}
    .card-example>.card-body::before {
    content: ""
    }
    </style>

    <script type="text/javascript">
      $("#tableGrid1").Grid({
        className: {
          table: 'table table-bordered mb-0'
        },
        search: true
      });
    </script>
     
     <style>
    tbody tr:hover {background-color: #F5F5F5;}
    .card-example>.card-body::before {
    content: ""
    }
    .gridjs-head{
      display: flex;
    }
    .gridjs-search{
      width: 50%;
    }
    .filter{
      margin-left: auto;
      width: 200px;
    }
    </style>

   <script>
$(document).ready(function() {
  setTimeout(function(){
    $('.active_status .gridjs-head').append('<div class="filter mb-2"><div class=" sel"><select id="fliterdrop" class="form-select"  onchange="getval(this);"><option value="Active" selected>Active</option><option value="Inactive">Inactive</option></select></div></div>');
    $('.inactive_status .gridjs-head').append('<div class="filter mb-2"><div class=" sel"><select id="fliterdrop2" class="form-select"  onchange="getval(this);"><option value="Active">Active</option><option value="Inactive" selected>Inactive</option></select></div></div>');
  }, 200);
});
function getval(sel){
  var value = sel.value;
  console.log(value);
  $('.active_status .gridjs-head .filter').html('');
  $('.active_status .gridjs-head .filter').append('<div class=" sel"><select id="fliterdrop" class="form-select"  onchange="getval(this);"><option value="Active" selected>Active</option><option value="Inactive">Inactive</option></select></div>');
  $('.inactive_status .gridjs-head .filter').html('');
  $('.inactive_status .gridjs-head .filter').append('<div class=" sel"><select id="fliterdrop2" class="form-select"  onchange="getval(this);"><option value="Active">Active</option><option value="Inactive" selected>Inactive</option></select></div>');
    if (value=='Active') {
    $('.active_status').show();
    $('.inactive_status').hide();
    }
    else if (value=='Inactive') {
    $('.inactive_status').show();
    $('.active_status').hide();
    }
    // console.log($("#fliterdrop").val);
    // $(".filter").html("");
}
// $('.filter').change(function() {
//   console.log("here is my on change");
//     var value = $(this).val();
//     if (value=='Active') {
//     $('.active_status').show();
//     $('.inactive_status').hide();
//     }
//     else if (value=='Inactive') {
//     $('.inactive_status').show();
//     $('.active_status').hide();
//     }
// });
</script>


    <script type="text/javascript">

      $("#tableGrid1").Grid({
  className: {
    table: 'table table-bordered mb-0'
  },
  search: true
});

 //       $('#filter').change(function() {
 //   console.log('Button clicked!');
 //   var value = $(this).val();
 //   alert(value)

 // });


    </script>


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