@extends('adminlayout.dashadmin')

@section('content')
 
<style >
    #battery_id_image >img {

    max-width: 140px;
   max-height: 60px;
  }
</style>

<!-- Content Wrapper Start -->
<div class="content-wrapper" ng-controller="PurchaseController">

  
<section class="content">

      @if(Session::has('message'))
  <p class="alert {{ Session::get('alert-class', 'alert-info') }}" style="text-align: center;">{{ Session::get('message') }}</p>
  @endif
        <div class="box box-info collapsed-box">
      <div class="box-header with-border">
        <h3 class="box-title">
          <span class="fa fa-fw fa-plus"></span> Add Battery</h3>
        <button type="button" class="btn btn-box-tool add-new-btn" data-widget="collapse" data-collapse="true">
          <i class="fa fa-plus"></i>
        </button>
      </div>
      
     <form method="post" action="{{ route('save_battery_serial') }}" enctype="multipart/form-data">
           @csrf
            <div class="container">
              
               <div class="col-sm-12">
                    <div class="col-sm-3">
                       <div class="form-group ">
                           <label for="name">Company</label>
                           <select class="form-control" name="company" id="company"  data-msg="Required" required onchange="getBattery(this.value)">
                              <option value="">Select</option>                             
                               @foreach($companies as $item)
                                 <option value="{{$item->id}}">{{$item->company_name}}</option>
                               @endforeach 
                           </select>                                                        
                       </div>
                       </div>
                       <div class="col-sm-3">
                        <div class="form-group ">
                          <label for="name"> Battery Model</label>
                           <select id="battery_id" name="battery_id" class="form-control" onchange="displayImage()" required>
                              <option value="" selected disabled> -- Select Option -- </option>
                              
                             </select>
                        </div>
                        </div>
                        <div class="col-sm-3">
                        <div class="form-group ">
                          <label for="name">Battery Image</label>
                          <div id="battery_id_image">
                            <!-- Image corresponding to the selected option will be displayed here -->
                        </div>
                       
                        </div>
                      </div>

                    </div>


                <div class="col-sm-12">
                    
                   
                    <div class="col-sm-3">
                        <div class="form-group ">
                            <label for="battary_number">Serial Number</label>
                            <input type="text" name="serial" class="form-control" value="{{ old('serial') }}" placeholder="Serial Number..." required>
                            <span class="text-danger">@if ($errors->has('serial')){{ $errors->first('serial') }}@endif</span>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group ">
                            <label for="battary_number">Manufacturing Date</label>
                            <input type="date" name="mdate" class="form-control" value="{{ old('mdate') }}" placeholder="Manufacturing Date...">
                            <span class="text-danger">@if ($errors->has('mdate')){{ $errors->first('mdate') }}@endif</span>
                        </div>
                    </div>
                   
                    
                
				</div>	  
                   
				
					<div class="col-12 col-sm-12">
						<div class="form-group margin-top text-center">
						   <button type="submit" class="btn btn-primary margin-top">Submit</button>
						</div>
                       </div>
                    </div>
                    </form>
                </div>
            </div>
         
              
    </div>   
   
  </section>
  <!-- Content End -->
</div>
<!-- Content Wrapper End -->

@endsection

<style>
.boxheading
{
	background: #e4f1ff;
    display: flex;
    height: 37px;
    padding: 0 0 0 12px;   
    justify-content: space-between;
}
</style>


    <script>

function getBattery(catid) {
    $.ajax({
        type: "GET",
        url: "{{URL('admin/get-battery-list')}}" + '/' + catid,
        dataType: 'json',
        success: function(response) {
            var option = '';
            if (response.status == "success") {
                var goods = response.goods;
                option += '<option value="" selected disabled> -- Select Option -- </option>';
                for (let index = 0; index < goods.length; index++) {
    option += "<option value='" + goods[index].id + "' data-image='" + goods[index].image + "' data-type='" + goods[index].type + "' data-power='" + goods[index].power + "'  >" + goods[index].name + '-' +goods[index].type + ' ( ' + goods[index].power +' ) ' + "</option>";
}
                $('#battery_id').html(option);
                
                $('#battery_id').trigger('change');
            }
        }
    });
}

function displayImage() {
     var selectedImage = $('#battery_id').find(':selected').data('image');
     var type = $('#battery_id').find(':selected').data('type');
      var power = $('#battery_id').find(':selected').data('power');
     var baseUrl = window.location.origin;
    //$('#battery_id_image').html(selectedImage ? "<img src='" + selectedImage + "'>" : "");

     $('#battery_id_image').html(selectedImage ? "<img src='" + baseUrl + '/' + selectedImage + "'>" : "");


      $('#p_input_img').val(selectedImage);
      $('#p_input_type').val(type);
      $('#p_input_power').val(power);

}


</script>