@extends('layouts.dashboard')

@section('content')

<!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
	  <div class="container-full">
		<!-- Content Header (Page header) -->
		<div class="content-header">
			<div class="d-flex align-items-center">
				<div class="me-auto">
					<h3 class="page-title">Create Product</h3>
					<div class="d-inline-block align-items-center">
						<nav>
							<ol class="breadcrumb">
								<li class="breadcrumb-item"><a href="#"><i class="mdi mdi-home-outline"></i></a></li>
								<li class="breadcrumb-item" aria-current="page">Product</li>
								<li class="breadcrumb-item active" aria-current="page">Create</li>
							</ol>
						</nav>
					</div>
				</div>
				
			</div>
		</div>	  

		<!-- Main content -->
		<section class="content">
			<div class="row">			  
				
				<div class="col-lg-12 col-12">
					
					@if ($errors->any())
                        <div class="alert alert-danger">
                            <strong>Whoops!</strong> There were some problems with your input.<br><br>
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
					  <div class="box">
						<!-- /.box-header -->
						<form class="form" action="{{ route('admin.product.store') }}" method="post" enctype="multipart/form-data">
							@csrf
							<div class="box-body">
								<div class="row">
									<div class="col-md-6">
										<div class="form-group">
											<label class="form-label">Select Category</label>
											<div class="input-group mb-3">
												<select class="form-control @error('category_id') is-invalid @enderror" name="category_id" id="category_id">
												    <option value="">Select Category</option>
													@if($category)
													@foreach($category as $key => $value)
														<option value="{{ $value->id }}">{{ $value->name }}</option>
													@endforeach
													@endif

												</select>
											</div>
											@error('category_id')
			                                    <span class="invalid-feedback" role="alert">
			                                        <strong>{{ $message }}</strong>
			                                    </span>
			                                @enderror
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label class="form-label">Select Sub Category</label>
											<div class="input-group mb-3">
												<select class="form-control @error('sub_category_id') is-invalid @enderror" name="sub_category_id" id="sub_category_id" disabled>
													<option value="">Select Sub Category</option>
												</select>
											</div>
											@error('sub_category_id')
			                                    <span class="invalid-feedback" role="alert">
			                                        <strong>{{ $message }}</strong>
			                                    </span>
			                                @enderror
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label class="form-label">Select Brand</label>
											<div class="input-group mb-3">
												<select class="form-control @error('brand_id') is-invalid @enderror" name="brand_id">
												    <option value="">Select Brand</option>
													@if($brand)
													@foreach($brand as $key => $value)
														<option value="{{ $value->id }}">{{ $value->name }}</option>
													@endforeach
													@endif

												</select>
											</div>
											@error('brand_id')
			                                    <span class="invalid-feedback" role="alert">
			                                        <strong>{{ $message }}</strong>
			                                    </span>
			                                @enderror
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label class="form-label">Name</label>
											<div class="input-group mb-3">
												<input type="text" class="form-control @error('name') is-invalid @enderror" name="name" placeholder="Name" value="{{ old('name') }}" required>
											</div>
											@error('name')
			                                    <span class="invalid-feedback" role="alert">
			                                        <strong>{{ $message }}</strong>
			                                    </span>
			                                @enderror
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label class="form-label">Image</label>
											<div class="input-group mb-3">
												<input type="file" class="form-control @error('product_image') is-invalid @enderror" name="product_image" placeholder="product_image" value="{{ old('product_image') }}">
											</div>
											@error('product_image')
			                                    <span class="invalid-feedback" role="alert">
			                                        <strong>{{ $message }}</strong>
			                                    </span>
			                                @enderror
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label class="form-label">Original Amount</label>
											<div class="input-group mb-3">
												<input type="text" class="form-control @error('original_amount') is-invalid @enderror" name="original_amount" placeholder="Original Amount" value="{{ old('original_amount') }}">
											</div>
											@error('original_amount')
			                                    <span class="invalid-feedback" role="alert">
			                                        <strong>{{ $message }}</strong>
			                                    </span>
			                                @enderror
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label class="form-label">Discount Amount</label>
											<div class="input-group mb-3">
												<input type="text" class="form-control @error('discount_amount') is-invalid @enderror" name="discount_amount" placeholder="Discount Amount" value="{{ old('discount_amount') }}">
											</div>
											@error('discount_amount')
			                                    <span class="invalid-feedback" role="alert">
			                                        <strong>{{ $message }}</strong>
			                                    </span>
			                                @enderror
										</div>
									</div>
									<div class="col-md-6">
									    <div class="row">
									        <div class="col-md-6" id="point_en">
                                                <div class="form-group">
                                                    <label class="form-label">New</label>
                                                    <div class="form-group ichack-input">
                                                        <label>
                                                          <input type="radio" class="flat-red" id="previous" name="lable_value" value="New">
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6" id="point_en">
                                                <div class="form-group">
                                                    <label class="form-label">Sale</label>
                                                    <div class="form-group ichack-input">
                                                        <label>
                                                          <input type="radio" class="flat-red" id="previous" name="lable_value" value="Sale">
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
									    </div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label class="form-label">Gst</label>
											<div class="input-group mb-3">
												<select class="form-control @error('gst_type') is-invalid @enderror" name="gst_type">
													<option value="0">0 %</option>
                                                    <option value="5">5 %</option>
                                                    <option value="12">12 %</option>
                                                    <option value="18">18 %</option>
                                                    <option value="28">28 %</option>
												</select>
											</div>
											@error('gst_type')
			                                    <span class="invalid-feedback" role="alert">
			                                        <strong>{{ $message }}</strong>
			                                    </span>
			                                @enderror
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label class="form-label">Multiple Image</label>
											<div class="input-group mb-3">
												<input type="file" class="form-control @error('multiple_image') is-invalid @enderror" name="multiple_image[]" placeholder="multiple_image" value="{{ old('multiple_image') }}" multiple>
											</div>
											@error('multiple_image')
			                                    <span class="invalid-feedback" role="alert">
			                                        <strong>{{ $message }}</strong>
			                                    </span>
			                                @enderror
										</div>
									</div>
									<div class="col-md-12">
										<h4 class="text-success">Attribute List</h4>
    									<div class="col-12 text-center" id="dynamicTable">
    					                    <div class="row mb-3">
    					                        <div class="col-md-5">
    					                            <input type="text" name="addmore[0][attribute]" class="form-control"  placeholder="Attribute" multiple>
    					                        </div>
    					                        <div class="col-md-3">
    					                            <input type="text" name="addmore[0][price]" class="form-control"  placeholder="Price"/>
    					                        </div>
    					                        <div class="col-md-2">
    					                            <input type="text" name="addmore[0][stock]" class="form-control inputdecimal"  placeholder="Stock"/>
    					                        </div>
    					                        <div class="col-md-2"><a href="javascript::void(0)" name="add" id="add" title="Add More"><i class="btn btn-success mdi mdi-plus"></i></a></div>
    					                    </div>
    					                </div>
					                </div>
									<div class="col-md-12">
										<div class="form-group">
											<label class="form-label">Description</label>
											<textarea id="editor1" name="editor1" rows="10" cols="80">
													
											</textarea>
										</div>
									</div>
									<div class="col-md-6">
								        <div class="col-md-6" id="point_en">
                                            <div class="form-group">
                                                <label class="form-label">Featured Products</label>
                                                <div class="form-group ichack-input">
                                                    <label>
                                                      <input type="checkbox" class="flat-red" id="featured" name="featured">
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
									<div class="col-md-6">
										<div class="form-group">
											<label class="form-label">Status</label>
											<div class="input-group mb-3">
												<select class="form-control @error('status') is-invalid @enderror" name="status">
													<option value="Active">Active</option>
													<option value="In Active">In Active</option>
												</select>
											</div>
											@error('status')
			                                    <span class="invalid-feedback" role="alert">
			                                        <strong>{{ $message }}</strong>
			                                    </span>
			                                @enderror
										</div>
									</div>
								</div>
								
							</div>
							<!-- /.box-body -->
							<div class="box-footer text-end">
								<input type="submit" name="submit" class="btn btn-primary" value="Submit">
								<!-- <button type="submit" class="btn btn-primary">
								  <i class="ti-save-alt"></i> Save
								</button> -->
							</div>  
						</form>
					  </div>
					  <!-- /.box -->			
				</div>

		    </div>
			
		  </div>
		  <!-- /.row -->

		</section>
		<!-- /.content -->
	  </div>
  </div>
  <!-- /.content-wrapper -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        var i = 0;
        $("#add").click(function(){
            ++i;
            $("#dynamicTable").append('<div class="row dynamicrow mb-3">\
            <div class="col-md-5">\
                <input type="text" name="addmore['+i+'][attribute]" class="form-control" placeholder="Attribute" multiple>\
            </div>\
            <div class="col-md-3"><input type="text" name="addmore['+i+'][price]"  class="form-control" placeholder="Price"/></div>\
            <div class="col-md-2"><input type="text" name="addmore['+i+'][stock]"  class="form-control" placeholder="Stock"/></div>\
            <div class="col-md-2"><a href="javascript::void(0)" class="remove-tr" title="Remove"><i class="btn btn-danger mdi mdi-close"></i></a></div>\
            </div>');
        });
        $(document).on('click', '.remove-tr', function(){  
            $(this).parents('.dynamicrow').remove();
        });
        
    </script>
    <script type="text/javascript">
    $(document).ready(function() {

        $('#category_id').change(function() {
            var countryId = $(this).val();
            $('#sub_category_id').prop('disabled', !countryId);
    
            if (countryId) {
                $.get('/states/' + countryId, function(data) {
                    $('#sub_category_id').empty().append('<option value="">Select Sub Category</option>');
                    $.each(data, function(index, state) {
                        $('#sub_category_id').append('<option value="' + state.id + '">' + state.name + '</option>');
                    });
                });
            }
        });
        
    });
    </script>

@endsection