
@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">Install Battery</li>
          </ol>
        </div>

      

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

          <div class="col-lg-8">
            <h2 class="main-title">Add Battery to {{ $position }} Position</h2>
            
          </div>
          <div style="text-align: right;" class="col-lg-4 text-right">
           <!--  <button type="button" class="btn btn-primary">Add Taxmaster</button> -->
            <!-- <a href="/form" class="btn btn-primary">Add Taxmaster</a> -->
          </div>

        </div>

        <hr class="main-separator">        
    
            
        <div class="card card-shadow-apply">
    <div class="card-body">
        <form action="{{ route('vehicle.install_battery') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <input type="hidden" name="vehicle_id" value="{{ $id }}">
            <input type="hidden" name="battery_position" value="{{ $position }}">
            <div class="row">
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Battery ID</label>
                        <select class="form-select select_battery" name="battery_id" required>
                            <option value="">Select</option>
                            @foreach($tyres as $data)
                            <option>{{ $data->battery_id }}</option>
                            @endforeach
                        </select>
                        <!--<input type="text" name="tire_id" class="form-control" required />-->
                    </div>
                </div>

               
            </div>
            <div class="buttons-alignment mt-4">
                <div>
                    <button type="submit" class="btn btn-primary submit-button-alignment">Submit</button>
                </div>
            </div>
        </form>
        
        <div style="margin-top: 20px;" id="data">
    <div class="row">
        <div class="col-md-4">
            <div class="mb-3">
                <label class="form-label">Brand</label>
                <input type="text" name="brand" id="brand" class="form-control" disabled>
            </div>
        </div>

        <div class="col-md-4">
            <div class="mb-3">
                <label class="form-label">Model</label>
                <input type="text" name="model" id="model" class="form-control" disabled>
            </div>
        </div>

        <div class="col-md-4">
            <div class="mb-3">
                <label class="form-label">Voltage (V)</label>
                <input type="number" name="voltage" id="voltage" step="0.01" class="form-control" disabled>
            </div>
        </div>

        <div class="col-md-4">
            <div class="mb-3">
                <label class="form-label">Dry Weight</label>
                <input type="text" name="dry_weight" id="dry_weight" class="form-control" disabled>
            </div>
        </div>

        <div class="col-md-4">
            <div class="mb-3">
                <label class="form-label">CCA (Cold Cranking Amps)</label>
                <input type="number" name="cca" id="cca" class="form-control" disabled>
            </div>
        </div>

        <div class="col-md-4">
            <div class="mb-3">
                <label class="form-label">Reserve Capacity (minutes)</label>
                <input type="number" name="reserve_capacity" id="reserve_capacity" class="form-control" disabled>
            </div>
        </div>
    </div>
</div>

        
        
    </div>
</div>







        <br><br><br>

        

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

     
    <style>
    tbody tr:hover {background-color: #F5F5F5;}
    .card-example>.card-body::before {
    content: ""
    }
    </style>


<script>

</script>

<script>
  $(document).ready(function() {
    $(document).on('change', '.select_battery', function() {
      var tire_id = $(this).val();
    //   alert(tire_id);
        console.log(tire_id)


    var initialData = {!! json_encode($tyres->toArray()) !!};
    console.log(initialData)

   var filteredData = initialData.filter(function(data) {
       return data.battery_id == tire_id;
      });

       console.log(filteredData.brand)
      
// Access the filteredData object and populate the fields
$('#data #brand').val(filteredData[0].brand);
$('#data #model').val(filteredData[0].model);
$('#data #voltage').val(filteredData[0].voltage);
$('#data #dry_weight').val(filteredData[0].dry_weight);
$('#data #cca').val(filteredData[0].cca);
$('#data #reserve_capacity').val(filteredData[0].reserve_capacity);




    });
  });

</script>


@endsection

