<app-page-header title="Add Product" title1="Add Product" activeitem="Pages"></app-page-header>
<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-x-6">
<div class="col-span-12">
<div class="box !bg-transparent border-0 shadow-none">
<div class="box-body p-0">
<div class="grid grid-cols-12 gap-x-6">
<div class="col-span-12 xl:col-span-6">
<div class="box ">
<div class="box-body">
<div class="space-y-3">
<div class="space-y-2">
<label class="ti-form-label mb-0">Product Title</label>
<input type="text" class="my-auto ti-form-input"
placeholder="Dolar Leather Handbag For Women">
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Product Id</label>
<input type="text" class="my-auto ti-form-input" placeholder="#2515445145">
</div>
<div class="">
<label class="ti-form-label">Product Description</label>
<div id="product-editor" class="productive-description">
<angular-editor [config]="config"></angular-editor>
</div>
</div>
<div class="space-y-2">
<label class="ti-form-label">Product Features</label>
<textarea class="ti-form-input" rows="2"></textarea>
<label
class="ti-form-label mt-1 text-sm font-normal opacity-70 text-gray-500 dark:text-white/70 mb-0">*Description
should not exceed 500 letters</label>
</div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-6">
<div class="space-y-2 product-1">
<label class="ti-form-label mb-0">Product Status</label>
<ng-select class="ti-form-select product-search" placeholder="Status">
<ng-option value="">Status</ng-option>
<ng-option value="Clothing">Publish</ng-option>
<ng-option value="Footwear">Unpublish</ng-option>
<ng-option value="Accesories">Schedule</ng-option>
</ng-select>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="space-y-2 product-1">
<label class="ti-form-label mb-0">Product Visibility</label>
<ng-select class="ti-form-select product-search" placeholder="Visibility">
<ng-option value="">Visibility</ng-option>
<ng-option value="1">Private</ng-option>
<ng-option value="2">Public</ng-option>
</ng-select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="box">
<div class="box-body space-y-3">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-4">
<div class="space-y-2 product-1">
<label class="ti-form-label mb-0">Product Category</label>
<ng-select class="ti-form-select product-search" placeholder="Category">
<ng-option value="">Category</ng-option>
<ng-option value="Clothing">Clothing</ng-option>
<ng-option value="Footwear">Footwear</ng-option>
<ng-option value="Accesories">Accesories</ng-option>
<ng-option value="Grooming">Grooming</ng-option>
<ng-option value="Ethnic & Festive">Ethnic & Festive</ng-option>
<ng-option value="Jewellery">Jewellery</ng-option>
<ng-option value="Toys & Babycare">Toys & Babycare</ng-option>
<ng-option value="Festive Gifts">Festive Gifts</ng-option>
<ng-option value="Kitchen">Kitchen</ng-option>
<ng-option value="Dining">Dining</ng-option>
<ng-option value="Home Decors">Home Decors</ng-option>
<ng-option value="Stationery">Stationery</ng-option>
</ng-select>
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="space-y-2 product-1">
<label class="ti-form-label mb-0">Gender</label>
<ng-select class="ti-form-select product-search" placeholder="Gender">
<ng-option value="">Gender</ng-option>
<ng-option value="1">Male</ng-option>
<ng-option value="2">Female</ng-option>
<ng-option value="3">Others</ng-option>
</ng-select>
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="space-y-2 product-1">
<label class="ti-form-label mb-0">Brand</label>
<ng-select class="ti-form-select product-search" placeholder="Select">
<ng-option value="">Select</ng-option>
<ng-option value="Armani">Armani</ng-option>
<ng-option value="Lacoste">Lacoste</ng-option>
<ng-option value="Puma">Puma</ng-option>
<ng-option value="Spykar">Spykar</ng-option>
<ng-option value="Mufti">Mufti</ng-option>
<ng-option value="Home Town">Home Town</ng-option>
<ng-option value="Arrabi">Arrabi</ng-option>
</ng-select>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="space-y-2 product-1">
<label class="ti-form-label mb-0">Published Date and Time</label>
<dp-date-picker
class="ti-form-input joining-date flatpickr-input date active"
placeholder="Choose date"
[config]="datePickerConfig"
required="true"
>
</dp-date-picker>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="space-y-2 product-1">
<label class="ti-form-label mb-0">Product Size</label>
<ng-select class="ti-form-select product-search" placeholder="Size">
<ng-option value="Extra Small">Extra Small</ng-option>
<ng-option value="Small">Small</ng-option>
<ng-option value="Medium">Medium</ng-option>
<ng-option value="Large">Large</ng-option>
<ng-option value="XL">XL</ng-option>
<ng-option value="xxl">xxl</ng-option>
</ng-select>
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="space-y-2">
<label class="ti-form-label mb-0">Actual Price </label>
<input type="text" class="my-auto ti-form-input" placeholder="$550">
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="space-y-2">
<label class="ti-form-label mb-0">Dealer Price </label>
<input type="text" class="my-auto ti-form-input" placeholder="$400">
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="space-y-2">
<label class="ti-form-label mb-0">Discount</label>
<input type="text" class="my-auto ti-form-input" placeholder="10%">
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="space-y-2">
<label class="ti-form-label">Available Colors</label>
<ng-select class="ti-form-select product-search" placeholder="Colors">
<ng-option value="">Colors</ng-option>
<ng-option value="1">blue</ng-option>
<ng-option value="2">pink</ng-option>
<ng-option value="3">yellow</ng-option>
<ng-option value="4">orange</ng-option>
<ng-option value="5">lemon-green</ng-option>
<ng-option value="6">green</ng-option>
</ng-select>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="space-y-2 product-1">
<label class="ti-form-label mb-0">Availabilty</label>
<ng-select class="ti-form-select product-search" placeholder="Availabilty">
<ng-option value="">Availabilty</ng-option>
<ng-option value="1">Instock</ng-option>
<ng-option value="2">Out Of Stock</ng-option>
</ng-select>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="space-y-2 product-1">
<label class="ti-form-label mb-0">Type</label>
<input type="text" class="my-auto ti-form-input" placeholder="Hand Bag">
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="space-y-2 product-1">
<label class="ti-form-label mb-0">Item Weight</label>
<input type="text" class="my-auto ti-form-input" placeholder="250grams">
</div>
</div>
</div>
<div class="space-y-2">
<label class="flex justify-between ti-form-label">
<span class="my-auto">Product Images</span></label>
<ngx-dropzone (change)="onSelect($event)">
<ngx-dropzone-label>Drop Files here to upload</ngx-dropzone-label>
<ngx-dropzone-preview *ngFor="let f of files" [removable]="true" (removed)="onRemove(f)">
<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-preview>
</ngx-dropzone>
</div>
<div class="space-y-2">
<label class="ti-form-label">Product Tags</label>
<ng-select
[items]="multiSelect"
bindLabel="name"
bindValue="name"
[multiple]="true"
[(ngModel)]="multiSelectSelected"
name="multiSelectSelected"
>
</ng-select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer text-end border-t-0 px-0">
<a class="ti-btn ti-btn-primary"><i class="ri-add-line"></i>Add Product</a>
<a class="ti-btn ti-btn-secondary"><i class="ri-file-download-line"></i>Save Product</a>
<a class="ti-btn ti-btn-danger"><i class="ri-delete-bin-line"></i>Discard Product</a>
</div>
</div>
</div>
</div>
<!-- End::row-1 -->