@extends('adminlayout.dashadmin')

@section('content')

<style >
  #sub_category_image >img {

    max-width: 140px;
  }
</style>
<!-- Content Wrapper Start -->
<div class="content-wrapper" ng-controller="PurchaseController">
  <section class="content-header" style="float:right;">
   
    {{--<a class="btn btn-lg btn-info" data-toggle="modal" data-target="#add_product_in_store">
      New  Accessories Type
    </a>
     <a class="btn btn-lg btn-success" data-toggle="modal" data-target="#add_product_in_store">
     Product List
   </a>--}}
   
 </section>
 <br><br>
 <!-- product Modal -->
 <div class="modal fade" id="add_product_in_store" tabindex="-1" role="dialog" aria-labelledby="add_productLabel" aria-hidden="true">
  <form id="form-purchase" class="form-horizontal" action="{{ route('save_accessories_list') }}" method="post" enctype="multipart/form-data">
    @csrf
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="add_productLabel">New Expence Category</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          
         <div class="row">
          <div class=" col-sm-6 col-md-6 ">
            <label for="cat_name" class="control-label">
              Vehicle Name<i class="required">*</i>
            </label>
            <input type="text" class="form-control" id="name" name="name" autocomplete="off" placeholder="Type name" required>
            <span class="text-danger">@if ($errors->has('name')){{ $errors->first('name') }}@endif</span>
          </div>
          <div class=" col-sm-6 col-md-6 ">
            <label for="pan" class="control-label">
             Vehicle Slug<i class="required">*</i>
           </label>
           <input type="text" class="form-control" id="slug" name="slug" autocomplete="off" placeholder="slug name" required>
           <span class="text-danger">@if ($errors->has('slug')){{ $errors->first('slug') }}@endif</span>
         </div>
         <div class=" col-sm-6 col-md-6 ">
          <label for="pan" class="control-label">
           Vehicle Color<i class="required">*</i>
         </label>
         <input type="text" class="form-control" id="color" name="color" autocomplete="off" placeholder="color name" required>
         <span class="text-danger">@if ($errors->has('color')){{ $errors->first('image') }}@endif</span>
       </div>
       <div class=" col-sm-6 col-md-6 ">
        <label for="pan" class="control-label">
         Vehicle Color<i class="required">*</i>
       </label>
       <input type="file" name="image" class="form-control" value="{{ old('image') }}">
       <span class="text-danger">@if ($errors->has('image')){{ $errors->first('image') }}@endif</span>
     </div>
     
     
     
     
   </div>
   
 </div>
 <div class="modal-footer" style="text-align: center;">
  <button class="btn btn-lg btn-info" name="submit" data-loading-text="Processing...">
    <i class="fa fa-fw fa-save"></i>
  Submit        </button>
</div>
</div>
</div>
</form>
<br>
</div>
<section class="content">

 
  <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 Accessories</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_accessory') }}" 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">Item Name</label>
             <select class="form-control" name="name" id="category"  data-msg="Required" required onchange="getAccessories(this.value)">
              <option value="">Select</option>

              
              @foreach($accessories as $data)
              <option value="{{$data->name}}">{{$data->name}}</option>
              @endforeach 
            </select>
            <span class="text-danger">@if ($errors->has('name')){{ $errors->first('name') }}@endif</span>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group ">
            <label for="name">Item Color</label>
            <select id="sub_category" name="color"class="form-control" onchange="displayImage()">
              <option value="" selected disabled> -- Select Option -- </option>
              <!-- Options will be dynamically added here -->
            </select>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group ">
            <label for="name">Item Image</label>
            <div id="sub_category_image">
              <!-- Image corresponding to the selected option will be displayed here -->
            </div>
          </div>
          <input type="hidden" id="p_input_img" name="image" value="">
        </div>
        
      </div> --}} 
      

      <div class="col-sm-12">
        <div class="col-sm-3">
          <div class="form-group ">
            <label for="name">Item Name</label>
            <input type="text" name="name" class="form-control" value="{{ old('name') }}" placeholder="Item Name">
            <span class="text-danger">@if ($errors->has('name')){{ $errors->first('name') }}@endif</span>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group ">
            <label for="hsn">HSN</label>
            <input type="text" name="hsn" class="form-control" value="{{ old('hsn') }}" placeholder="HSN Code...">
            <span class="text-danger">@if ($errors->has('hsn')){{ $errors->first('hsn') }}@endif</span>
          </div>
        </div>                 
        <div class="col-sm-3">
          <div class="form-group ">
            <label for="item_warranty">Warranty</label>
            
            <select name="warranty" class="form-control">
              <option value="0">Select</option>
			  <option value="0">No Warranty</option>
              <option value="6">6 Month</option>
              <option value="12">12 Month</option>
              <option value="18">18 Month</option>
              <option value="24">24 Month</option>
              <option value="36">36 Month</option>
            </select>
            <span class="text-danger">@if ($errors->has('item_warranty')){{ $errors->first('item_warranty') }}@endif</span>
          </div>
        </div>     
        
        
        
        <div class="col-sm-3">
          <div class="form-group margin-top">
            <label for="item_color">Color </label>                           
            <select name="color" class="form-control">
              <option  value="">Select ...</option>
			  @foreach($colors as $color)
              <option value="{{$color}}">{{$color}}</option>
			  @endforeach
             			  
            </select>
            <span class="text-danger">@if ($errors->has('item_color')){{ $errors->first('item_color') }}@endif</span>
          </div>
        </div>
        
        <div class="col-sm-3">
          <div class="form-group margin-top">
            <label for="exampleInputEmail1">Image</label>
            <input type="file" name="image" class="form-control" value="{{ old('image') }}">
            <span class="text-danger">@if ($errors->has('image')){{ $errors->first('image') }}@endif</span>
          </div>
        </div>  
        
        <div class="col-sm-3">
                    <div class="form-group ">
                      <label for="gst">GST</label>
                       <select class="form-control input-sm text-center"  name="gst" required> 
                    @foreach($GstTax as $data)
                    
                    <option value="{{$data->value}}">{{$data->name}}</option>

                    @endforeach
                   
                   </select>
                      <span class="text-danger">@if ($errors->has('gst')){{ $errors->first('gst') }}@endif</span>
                    </div>
                  </div>
      </div>
     

                  <div class="col-12 col-sm-12">
                    <div class="col-sm-3">
                     <div class="form-group margin-top">					
                       <label for="purchase_price">Purchase Price</label>		
                       <input type="text" name="purchase_price" class="form-control" value="{{ old('purchase_price') }}" placeholder="Purchase price">
                       <span class="text-danger">@if ($errors->has('purchase_price')){{ $errors->first('purchase_price') }}@endif</span>
                     </div>
                   </div> 
                   <div class="col-sm-3">
                    <div class="form-group ">
                      <label for="exampleInputEmail1">Dealer price</label>
                      <input type="text" name="dealer_price" class="form-control" value="{{ old('dealer_price') }}" placeholder="Dealer price">
                      <span class="text-danger">@if ($errors->has('dealer_price')){{ $errors->first('dealer_price') }}@endif</span>
                    </div>

                  </div>
                  
                  <div class="col-sm-3">
                    <div class="form-group ">
                      <label for="exampleInputEmail1">Subdealer Price</label>
                      <input type="text" name="subdealer_price" class="form-control" value="{{ old('subdealer_price') }}" placeholder="Subdealer Price">
                      <span class="text-danger">@if ($errors->has('subdealer_price')){{ $errors->first('subdealer_price') }}@endif</span>
                    </div>
                  </div>
                  
                  <div class="col-sm-3">
                    <div class="form-group ">
                      <label for="exampleInputEmail1">End Customer Price</label>
                      <input type="text" name="customer_price" class="form-control" value="{{ old('customer_price') }}" placeholder="Customer Price">
                      <span class="text-danger">@if ($errors->has('customer_price')){{ $errors->first('customer_price') }}@endif</span>
                    </div>
                  </div>
                  
                </div>
				
                <!-- <div class="col-12 col-sm-12">
				   <div class="form-group">	
  				    <label for="exampleInputEmail1">Other Options</label> 
				    <a class="btn btn-lg btn-success" onclick="addInputField()" style="margin-left: 148px;">Add More Field</a>
				   </div>
				   
				   <div class="col-12 col-sm-12">								 
								  <div id="inputFields">								   
									<div>
									<input type="text" name="inputField[]" placeholder="Enter field">
									<input type="text" name="valueField[]" placeholder="Enter field value">
									
									<br><br>
									</div>
								  </div>
					   

                    </div> 
                  </div>-->

                <div class="col-12 col-sm-12">
                  <div class="form-group margin-top">
                   <button type="submit" class="btn btn-primary margin-top">Submit</button>
                 </div>
               </div>
             </div>
             
           </div>
         </div>
       </form>
       
     </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 baseunitHandler(val)
  {
   $('#base_unit').html(val);
 }
 
 function secondaryunitHandler(val)
 {
   $('#secondary_unit').html(val);
 }
 

 
</script>

<script>

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

  function displayImage() {
   var selectedImage = $('#sub_category').find(':selected').data('image');
   // $('#sub_category_image').html(selectedImage ? "<img src='" + selectedImage + "'>" : "");

   var baseUrl = window.location.origin;
   
   $('#sub_category_image').html(selectedImage ? "<img src='" + baseUrl + '/' + selectedImage + "'>" : "");


   $('#p_input_img').val(selectedImage);

 }


</script>

<script>
  document.addEventListener("DOMContentLoaded", () => {
  // Restore input fields from local storage
  const savedInputFields = JSON.parse(localStorage.getItem('inputFields'));
  if (savedInputFields) {
    savedInputFields.forEach(field => {
      addInputField(field);
    });
  }
});

  function addInputField(value = '') {
    const inputFieldsContainer = document.getElementById('inputFields');
    const newInputFieldDiv = document.createElement('div');
    newInputFieldDiv.innerHTML = '<input type="text" name="inputField[]" placeholder="Enter field">\
    <input type="text" name="valueField[]" placeholder="Enter field value">\
	<button onclick="removeInputField(this)">Remove</button>\
    <br><br>';
    inputFieldsContainer.appendChild(newInputFieldDiv);

  // Save input fields to local storage
  saveInputFields();
}

function removeInputField(button) {
  const inputFieldDiv = button.parentNode;
  const inputFieldsContainer = document.getElementById('inputFields');
  inputFieldsContainer.removeChild(inputFieldDiv);

  // Save input fields to local storage
  saveInputFields();
}

function saveInputFields() {
  const inputFields = document.querySelectorAll('input[name="inputField[]"]');
  const values = [];
  inputFields.forEach(input => {
    values.push(input.value);
  });
  localStorage.setItem('inputFields', JSON.stringify(values));
}
</script>
<script>
// function addInputField() {
//   const inputFieldsContainer = document.getElementById('inputFields');
//   const newInputFieldDiv = document.createElement('div');
//   newInputFieldDiv.innerHTML = `
//     <input type="text" name="inputField[]" placeholder="Enter field">
//     <input type="text" name="valueField[]" placeholder="Enter field value">
//     <button onclick="removeInputField(this)">Remove</button>
//     <br><br>
//   `;
//   inputFieldsContainer.appendChild(newInputFieldDiv);
// }

// function removeInputField(button) {
//   const inputFieldDiv = button.parentNode;
//   const inputFieldsContainer = document.getElementById('inputFields');
//   inputFieldsContainer.removeChild(inputFieldDiv);
// }
</script>