@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">Edit Product</h6>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('vendor.updateProduct', $product->id) }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <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', $product->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 }}" 
                                    @if ($product->category_id == $category->ProductCategory->id) selected @endif>
                                    {{ $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', $product->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', $product->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">Discounted Price</label>
                        <input type="number" name="discount" step="1" min="0" class="form-control" value="{{ old('discount', $product->discount) }}">
                    </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', $product->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', $product->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">
                            <option value="">--select--</option>
                            <option value="Red" {{ $product->colors == 'Red' ? 'selected' : '' }}>Red</option>
                            <option value="Blue" {{ $product->colors == 'Blue' ? 'selected' : '' }}>Blue</option>
                            <option value="Green" {{ $product->colors == 'Green' ? 'selected' : '' }}>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" {{ $product->size == 'small' ? 'selected' : '' }}>Small</option>
                            <option value="medium" {{ $product->size == 'medium' ? 'selected' : '' }}>Medium</option>
                            <option value="large" {{ $product->size == 'large' ? 'selected' : '' }}>Large</option>
                            <option value="X-large" {{ $product->size == 'X-large' ? 'selected' : '' }}>X-Large</option>
                            <option value="ml" {{ $product->size == 'ml' ? 'selected' : '' }}>ml</option>
                            <option value="kg" {{ $product->size == 'kg' ? 'selected' : '' }}>kg</option>
                            <option value="mg" {{ $product->size == 'mg' ? 'selected' : '' }}>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>
                        <a class="float-right " href="{{$product->image1}}">Click to view </a>
                        <input type="file" name="image1" accept="image/*" class="form-control font-12 form-control-lg" value="{{ old('image1') }}">   
                        <i>Select an image if you want to update it.</i>  
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray" for="">Image 2</label>
                        <a class="float-right " href="{{$product->image2}}">Click to view </a>
                        <input type="file" name="image2" accept="image/*" class="form-control font-12 form-control-lg" value="{{ old('image2') }}">     
                        <i>Select an image if you want to update it.</i>  
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray" for="">Image 3</label>
                        <a class="float-right " href="{{$product->image3}}">Click to view </a>
                        <input type="file" name="image3" accept="image/*" class="form-control font-12 form-control-lg" value="{{ old('image3') }}">     
                        <i>Select an image if you want to update it.</i>  
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray" for="">Image 4</label>
                        <a class="float-right " href="{{$product->image4}}">Click to view </a>
                        <input type="file" name="image4" accept="image/*" class="form-control font-12 form-control-lg" value="{{ old('image4') }}">     
                        <i>Select an image if you want to update it.</i>  
                    </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', $product->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', $product->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', $product->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', $product->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', $product->weight) }}" aria-label="Weight" required>
                            <span class="input-group-text">kg</span>
                        </div>
                    </div>
                    

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Dimensions*</label>
                        <div class="input-group">
                            <input type="number" name="length" placeholder="Length" class="form-control require" value="{{ explode('x', $product->dimensions)[0] }}" aria-label="Length" required>
                            <span class="input-group-text">x</span>
                            <input type="number" name="width" placeholder="Width" class="form-control require" value="{{ explode('x', $product->dimensions)[1] }}" aria-label="Width" required>
                            <span class="input-group-text">x</span>
                            <input type="number" name="height" placeholder="Height" class="form-control require" value="{{ explode('x', $product->dimensions)[2] }}" 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>
                        <div class="input-group">
                            <input type="number" step="1" name="shipping_cost" class="form-control require" value="{{$product->shipping_cost}}" aria-label="Shipping Cost" required>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label text-dark-gray">Shipping Time (days)*</label>
                        <input type="number" name="shipping_time_days" class="form-control require" value="{{  $product->shipping_time_days }}" required>
                    </div>

                    <div class="col-md-12 mb-3 text-end">
                        <button type="submit" class="btn btn-primary">Update Product</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection