@extends('adminlayout.dashadmin')

@section('content')
 


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

<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> Edit Raw Material</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>
      @if(Session::has('message'))
	<p class="alert {{ Session::get('alert-class', 'alert-info') }}" style="text-align: center;">{{ Session::get('message') }}</p>
	@endif
        <form method="post" action="{{ route('update_raw_material') }}" enctype="multipart/form-data">
            @csrf
			 <input type="hidden" name="target" class="form-control" value="{{ Crypt::encrypt($raw_material->id) }}">
			 
			 <div class="container"> 
				  <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="{{ $raw_material->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="qty">Qty</label>
						<input type="text" name="qty" class="form-control" value="{{ $raw_material->qty }}" placeholder="Qty...">
						<span class="text-danger">@if ($errors->has('qty')){{ $errors->first('qty') }}@endif</span>
					  </div>
					</div>                 
					   
					 <div class="col-sm-3">
					  <div class="form-group ">
						<label for="rate">Rate(With Tax/ Without Tax)</label>
						<input type="text" name="rate" class="form-control" value="{{ $raw_material->rate }}" placeholder="Rate...">
						<span class="text-danger">@if ($errors->has('rate')){{ $errors->first('rate') }}@endif</span>
					  </div>
					</div>                 
					   
					<div class="col-sm-3">
					  <div class="form-group ">
						<label for="mrp">MRP</label>
						<input type="text" name="mrp" class="form-control" value="{{ $raw_material->mrp }}" placeholder="MRP...">
						<span class="text-danger">@if ($errors->has('mrp')){{ $errors->first('mrp') }}@endif</span>
					  </div>
					</div>  
					
					<div class="col-sm-3">
					  <div class="form-group ">
						<label for="model_name">Model Name</label>
						<input type="text" name="model_name" class="form-control" value="{{ $raw_material->model_name }}" placeholder="Model Name...">
						<span class="text-danger">@if ($errors->has('model_name')){{ $errors->first('model_name') }}@endif</span>
					  </div>
					</div>  
					
					<div class="col-sm-3">
					  <div class="form-group ">
						<label for="manufacture">Manufacture Name</label>
						<input type="text" name="manufacture" class="form-control" value="{{ $raw_material->manufacture }}" placeholder="Manufacture...">
						<span class="text-danger">@if ($errors->has('manufacture')){{ $errors->first('manufacture') }}@endif</span>
					  </div>
					</div>  
					
					<div class="col-sm-3">
					  <div class="form-group ">
						<label for="batch_no">Batch No.</label>
						<input type="text" name="batch_no" class="form-control" value="{{ $raw_material->batch_no }}" placeholder="Batch No...">
						<span class="text-danger">@if ($errors->has('batch_no')){{ $errors->first('batch_no') }}@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}}" @if($raw_material->color == $color) selected @endif>{{$color}}</option>
						  @endforeach
									  
						</select>
						<span class="text-danger">@if ($errors->has('item_color')){{ $errors->first('item_color') }}@endif</span>
					  </div>
					</div>
				 
				  </div>  
				<div class="col-sm-12">
					<label>Custom Attributes</label>
					<div class="custom-attribute-group">
											<div class="row attr-row mb-2">
							<div class="col-sm-5">
								<input type="text" name="otherattributes[0][key]" class="form-control" placeholder="Attribute Name (e.g., Voltage)">
							</div>
							<div class="col-sm-5">
								<input type="text" name="otherattributes[0][value]" class="form-control" placeholder="Attribute Value (e.g., 48V)">
							</div>
							<div class="col-sm-2">
								<button type="button" class="btn btn-sm btn-success add-attr">+</button>
							</div>
						</div>
											</div>
				</div>

				<div class="col-12 col-sm-12">
				  <div class="form-group margin-top" style="margin-top: 20px;text-align: center;">
				   <button type="submit" class="btn btn-primary margin-top">Submit</button>
				 </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>
document.addEventListener('DOMContentLoaded', function () {
    // Add Attribute
    document.body.addEventListener('click', function (e) {
        if (e.target.classList.contains('add-attr')) {
            const attrGroup = e.target.closest('.custom-attribute-group');
            const attrRows = attrGroup.querySelectorAll('.attr-row');
            const attrCount = attrRows.length;

            const newAttrRow = document.createElement('div');
            newAttrRow.className = 'row attr-row mb-2 mt-5';
            newAttrRow.innerHTML = `
                <div class="col-sm-5">
                    <input type="text" name="otherattributes[${attrCount}][key]" class="form-control" placeholder="Attribute Name">
                </div>
                <div class="col-sm-5">
                    <input type="text" name="otherattributes[${attrCount}][value]" class="form-control" placeholder="Attribute Value">
                </div>
                <div class="col-sm-2">
                    <button type="button" class="btn btn-sm btn-danger remove-attr">X</button>
                </div>`;
            attrGroup.appendChild(newAttrRow);
        }
    });

    // Remove Attribute
    document.body.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-attr')) {
            e.target.closest('.attr-row').remove();
        }
    });
});
</script>