@extends("vendor.template", ["pageTitle"=>$pageTitle])
@section('content')
<style>
.has-error{
  border: 1px solid red;
}
.upload__btn-box {
  margin-bottom: 10px;
}
.upload__btn {
  display: inline-block;
  font-weight: 600;
  color: #fff;
  text-align: center;
  min-width: 116px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid;
  background-color: #4045ba;
  border-color: #4045ba;
  border-radius: 10px;
  line-height: 26px;
  font-size: 14px;
}
.upload__inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.upload__img-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.upload__img-box {
  width: 200px;
  padding: 0 10px;
  margin-bottom: 12px;
}

element.style {
}
.upload__btn:hover {
  background-color: unset;
  color: #4045ba;
  transition: all 0.3s ease;
}
.upload__img-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: center;
  line-height: 24px;
  z-index: 1;
  cursor: pointer;
}
.upload__img-close:after {
  content: '\2716';
  font-size: 14px;
  color: white;
}
.img-bg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  padding-bottom: 100%;
}

</style>
<br>
<div class="col-md-12">
    <div class="card mb-4">
        <div class="card-header">
            <h6 class="fs-17 font-weight-600 mb-0">Add Product</h6>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('vendor.saveProduct') }}" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <!-- Basic Information -->
                    <div class="col-md-12">
                        <h6 class="text-dark-gray">Basic Information</h6>
                        <hr>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Product Name*</label>
                        <input type="text" name="product_name" class="form-control require" value="{{old('product_name')}}">
                        {!! $errors->first('product_name', '<p class="text-danger">:message</p>') !!}
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Product Category*</label>
                        <select name="category_id" class="form-control require select-one">
                            <option value="">--select--</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->ProductCategory->id }}">{{ $category->ProductCategory->name }}</option>
                            @endforeach
                        </select>
                        {!! $errors->first('category_id', '<p class="text-danger">:message</p>') !!}
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Brand*</label>
                        <input type="text" name="brand" class="form-control require" value="{{old('brand')}}">
                        {!! $errors->first('brand', '<p class="text-danger">:message</p>') !!}
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Price*</label>
                        <input type="number" name="price" step="1" min="0"  class="form-control require" value="{{old('price')}}">
                        {!! $errors->first('price', '<p class="text-danger">:message</p>') !!}
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Discount Price</label>
                        <input type="number" name="discount_price" step="1" min="0"  class="form-control" value="{{old('discount_price')}}">
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Quantity*</label>
                        <input type="number" name="quantity" class="form-control require" value="{{old('quantity')}}">
                        {!! $errors->first('quantity', '<p class="text-danger">:message</p>') !!}
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">SKU*</label>
                        <input type="text" name="sku" class="form-control require" value="{{old('sku')}}">
                        {!! $errors->first('sku', '<p class="text-danger">:message</p>') !!}
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Available Colors</label>
                        <select name="colors" class="form-control">
                            <!-- Fetch color options dynamically from the Color API -->
                            <option value="">--select--</option>
                            <option value="Red">Red</option>
                            <option value="Blue">Blue</option>
                            <option value="Green">Green</option>
                        </select>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Size</label>
                        <select name="size" class="form-control">
                            <option value="">--select size--</option>
                            <option value="small">Small</option>
                            <option value="medium">Medium</option>
                            <option value="large">Large</option>
                            <option value="X-large">X-Large</option>
                            <option value="ml">ml</option>
                            <option value="kg">kg</option>
                            <option value="mg">mg</option>
                        </select>
                    </div>

                    <!-- Product Images -->
                    <div class="col-md-12">
                        <h6 class="text-dark-gray">Product Images</h6>
                        <hr>
                    </div>

                    <div class="col-md-3 mb-3">
                      <label class="form-label text-dark-gray" for="">Image 1</label>
                      <input type="file" name="image1" accept="image/*" class="form-control font-12 form-control-lg require" value="{{old('image1')}}">     
                    </div>
                    <div class="col-md-3 mb-3">
                      <label class="form-label text-dark-gray" for="">Image 2</label>
                      <input type="file" name="image2" accept="image/*" class="form-control font-12 form-control-lg" value="{{old('image2')}}">     
                    </div>
                    <div class="col-md-3 mb-3">
                      <label class="form-label text-dark-gray" for="">Image 3</label>
                      <input type="file" name="image3" accept="image/*" class="form-control font-12 form-control-lg" value="{{old('image3')}}">     
                    </div>
                    <div class="col-md-3 mb-3">
                      <label class="form-label text-dark-gray" for="">Image 4</label>
                      <input type="file" name="image4" accept="image/*" class="form-control font-12 form-control-lg" value="{{old('image4')}}">     
                    </div>
                
                    <!-- Description -->
                    <div class="col-md-12">
                        <h6 class="text-dark-gray">Description</h6>
                        <hr>
                    </div>

                    <div class="col-md-12 mb-3">
                        <label class="form-label text-dark-gray">Product Description*</label>
                        <textarea class="form-control require" name="description">{{old('description')}}</textarea>
                    </div>

                    <div class="col-md-12 mb-3">
                        <label class="form-label text-dark-gray">Key Features</label>
                        <textarea class="form-control" name="key_features">{{old('key_features')}}</textarea>
                    </div>

                    <div class="col-md-12 mb-3">
                        <label class="form-label text-dark-gray">Ingredients</label>
                        <textarea class="form-control" name="ingredients">{{old('ingredients')}}</textarea>
                    </div>

                    <div class="col-md-12 mb-3">
                        <label class="form-label text-dark-gray">Usage Instructions</label>
                        <textarea class="form-control" name="usage_instructions">{{old('usage_instructions')}}</textarea>
                    </div>

                    <!-- Shipping Information -->
                    <div class="col-md-12">
                        <h6 class="text-dark-gray">Shipping Information</h6>
                        <hr>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Weight*</label>
                        <div class="input-group">
                            <input type="number" step="1" min="0"  name="weight" class="form-control require" value="{{ old('weight') }}" aria-label="Weight" required>
                            <span class="input-group-text">kg</span>
                        </div>
                        {!! $errors->first('weight', '<p class="text-danger">:message</p>') !!}
                    </div>


                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Dimensions (L x W x H)</label>
                        <div class="input-group">
                            <input type="number" step="1" min="0"  class="form-control require" id="length" name="length" placeholder="Length" aria-label="Length" required>
                            <span class="input-group-text">x</span>
                            <input type="number" step="1" min="0"  class="form-control require" id="width" name="width" placeholder="Width" aria-label="Width" required>
                            <span class="input-group-text">x</span>
                            <input type="number" step="1" min="0"  class="form-control require" id="height" name="height" placeholder="Height" aria-label="Height" required>
                        </div>
                        <div class="form-text text-muted">Please enter dimensions in inches (in).</div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Shipping Cost*</label>
                        <input type="number" step="1" min="0"  name="shipping_cost" class="form-control require" value="{{old('shipping_cost')}}">
                        {!! $errors->first('shipping_cost', '<p class="text-danger">:message</p>') !!}
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Shipping Time (Days)</label>
                        <input type="number" step="1" min="0"  name="shipping_time_days" class="form-control" value="{{old('shipping_time_days')}}">
                    </div>

                    <div class="col-md-12">
                        <button type="submit" class="btn btn-success">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('footer-script')
<script>
    $(document).ready(function(){
        function required(){
            let validated = true;
            $(".require").each(function(){
                var value = $(this).val();
                if(value == "" || value == null){
                    $(this).addClass('has-error');
                    validated = false;
                } else {
                    $(this).removeClass('has-error');
                }
            });
            return validated;
        }

        $(document).on("click", "button[type=submit]", function(event) {
            var validate = required();
            if (!validate) {
                event.preventDefault();
            }
        });
    });
</script>
@endsection