@extends('layouts.dashboard-template')
 @section('page-content')

 <!-- ============================================================== -->
 <!-- Start right Content here -->
 <!-- ============================================================== -->
 <div class="main-content">

     <div class="page-content">
         <div class="container-fluid">

             <!-- start page title -->
             <div class="row">
                 <div class="col-12">
                     <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                         <h4 class="mb-sm-0">Create Product</h4>

                         <div class="page-title-right">
                             <ol class="breadcrumb m-0">
                                 <li class="breadcrumb-item"><a href="javascript: void(0);">Ecommerce</a></li>
                                 <li class="breadcrumb-item active">Create Product</li>
                             </ol>
                         </div>

                     </div>
                 </div>
             </div>
             <!-- end page title -->

             <div class="row">
                 <div class="col-lg-8">
                     <form>
                         <div class="card">
                             <div class="card-body">
                                 <div class="mb-3">
                                     <label class="form-label" for="product-title-input">Product Name</label>
                                     <input type="text" class="form-control" id="product-title-input" placeholder="Enter product title">
                                 </div>
                                 <div class="mb-3">
                                     <label class="form-label" for="product-title-input">Product Code</label>
                                     <input type="text" class="form-control" id="product-title-input" placeholder="Enter product code">
                                 </div>
                                 <div class="mb-3">
                                     <label>Product Description</label>
                                     <textarea class="ckeditor" id="ckeditor-classic0"></textarea>
                                 </div>
                                 <div class="mb-3">
                                     <label>Product Key Features</label>
                                     <textarea class="ckeditor" id="ckeditor-classic1"></textarea>
                                 </div>
                                 <div class="mb-3">
                                     <label>Product Specification</label>
                                     <textarea class="ckeditor" id="ckeditor-classic2"></textarea>
                                 </div>

                             </div>
                         </div>
                         <!-- end card -->

                         <div class="card">
                             <div class="card-header">
                                 <h5 class="card-title mb-0">Product Gallery</h5>
                             </div>
                             <div class="card-body">
                                 <div class="mb-4">
                                     <h5 class="fs-14 mb-1">Product Image</h5>
                                     <p class="text-muted">Add Product main Image.</p>
                                     <input class="form-control" id="product-image-input" type="file" accept="image/png, image/gif, image/jpeg">
                                 </div>
                                 <div>
                                     <h5 class="fs-14 mb-1">Product Gallery</h5>
                                     <p class="text-muted">Add Product Gallery Images.</p>

                                     <div class="dropzone text-center">
                                         <div class="fallback">
                                             <input name="file" type="file" multiple="multiple">
                                         </div>
                                         <div class="dz-message needsclick">
                                             <div class="mb-3">
                                                 <i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
                                             </div>

                                             <h5>Drop files here or click to upload.</h5>
                                         </div>
                                     </div>

                                     <ul class="list-unstyled mb-0" id="dropzone-preview">
                                         <li class="mt-2" id="dropzone-preview-list">
                                             <!-- This is used as the file preview template -->
                                             <div class="border rounded">
                                                 <div class="d-flex p-2">
                                                     <div class="flex-shrink-0 me-3">
                                                         <div class="avatar-sm bg-light rounded">
                                                             <img data-dz-thumbnail class="img-fluid rounded d-block" src="#" alt="Product-Image" />
                                                         </div>
                                                     </div>
                                                     <div class="flex-grow-1">
                                                         <div class="pt-1">
                                                             <h5 class="fs-14 mb-1" data-dz-name>&nbsp;</h5>
                                                             <p class="fs-13 text-muted mb-0" data-dz-size></p>
                                                             <strong class="error text-danger" data-dz-errormessage></strong>
                                                         </div>
                                                     </div>
                                                     <div class="flex-shrink-0 ms-3">
                                                         <button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
                                                     </div>
                                                 </div>
                                             </div>
                                         </li>
                                     </ul>
                                     <!-- end dropzon-preview -->
                                 </div>
                             </div>
                         </div>
                         <!-- end card -->

                         <div class="card">
                             <div class="card-header">
                                 <ul class="nav nav-tabs-custom card-header-tabs border-bottom-0" role="tablist">
                                     <li class="nav-item">
                                         <a class="nav-link active" data-bs-toggle="tab" href="#addproduct-general-info" role="tab">
                                             General Info
                                         </a>
                                     </li>
                                     <li class="nav-item">
                                         <a class="nav-link" data-bs-toggle="tab" href="#addproduct-metadata" role="tab">
                                             Meta Data
                                         </a>
                                     </li>
                                 </ul>
                             </div>
                             <!-- end card header -->
                             <div class="card-body">
                                 <div class="tab-content">
                                     <div class="tab-pane active" id="addproduct-general-info" role="tabpanel">
                                         <div class="row">
                                             <!-- end col -->
                                             <div class="col-lg-12">
                                                 <div class="row">
                                                     <div class="col-sm-6">
                                                         <div class="mb-3">
                                                             <label class="form-label" for="product-price-input">Price</label>
                                                             <div class="input-group mb-3">
                                                                 <span class="input-group-text" id="product-price-addon"><i class="mdi mdi-currency-inr"></i></span>
                                                                 <input type="text" class="form-control" id="product-price-input" placeholder="Enter price" aria-label="Price" aria-describedby="product-price-addon">

                                                             </div>
                                                         </div>
                                                     </div>
                                                     <div class="col-sm-6">
                                                         <div class="mb-3">
                                                             <label class="form-label" for="product-discount-input">Discount</label>
                                                             <div class="input-group mb-3">
                                                                 <span class="input-group-text" id="product-discount-addon">%</span>
                                                                 <input type="text" class="form-control" id="product-discount-input" placeholder="Enter discount" aria-label="discount" aria-describedby="product-discount-addon">
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>
                                             </div>
                                             <!-- end col -->
                                             <div class="col-lg-12">
                                                 <div class="row">
                                                     <div class="col-sm-6">
                                                         <div class="mb-3">
                                                             <label class="form-label" for="product-price-input">Minimum price</label>
                                                             <div class="input-group mb-3">
                                                                 <span class="input-group-text" id="product-price-addon"><i class="mdi mdi-currency-inr"></i></span>
                                                                 <input type="text" class="form-control" id="product-price-input" placeholder="Enter min price" aria-label="Price" aria-describedby="product-price-addon">
                                                             </div>
                                                         </div>
                                                     </div>
                                                     <div class="col-sm-6">
                                                         <div class="mb-3">
                                                             <label class="form-label" for="product-discount-input">Maximum Price</label>
                                                             <div class="input-group mb-3">
                                                                 <span class="input-group-text" id="product-price-addon"><i class="mdi mdi-currency-inr"></i></span>
                                                                 <input type="text" class="form-control" id="product-price-input" placeholder="Entermax price" aria-label="Price" aria-describedby="product-price-addon">
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>
                                             </div>
                                             <!-- end col -->
                                         </div>
                                         <!-- end row -->
                                     </div>
                                     <!-- end tab-pane -->

                                     <div class="tab-pane" id="addproduct-metadata" role="tabpanel">
                                         <div class="row">
                                             <div class="col-lg-6">
                                                 <div class="mb-3">
                                                     <label class="form-label" for="meta-title-input">Meta title</label>
                                                     <input type="text" class="form-control" placeholder="Enter meta title" id="meta-title-input">
                                                 </div>
                                             </div>
                                             <!-- end col -->

                                             <div class="col-lg-6">
                                                 <div class="mb-3">
                                                     <label class="form-label" for="meta-keywords-input">Meta Keywords</label>
                                                     <input type="text" class="form-control" placeholder="Enter meta keywords" id="meta-keywords-input">
                                                 </div>
                                             </div>
                                             <!-- end col -->
                                         </div>
                                         <!-- end row -->

                                         <div>
                                             <label class="form-label" for="meta-description-input">Meta Description</label>
                                             <textarea class="form-control" id="meta-description-input" placeholder="Enter meta description" rows="3"></textarea>
                                         </div>
                                     </div>
                                     <!-- end tab pane -->
                                 </div>
                                 <!-- end tab content -->
                             </div>
                             <!-- end card body -->
                         </div>
                         <!-- end card -->
                         <div class="text-end mb-3">
                             <button type="submit" class="btn btn-success w-sm">Submit</button>
                         </div>
                     </form>


                 </div>
                 <!-- end col -->

                 <div class="col-lg-4">
                     <div class="card">
                         <div class="card-header">
                             <h5 class="card-title mb-0">Brand</h5>
                         </div>
                         <div class="card-body">
                             <div class="mb-3">
                                 <label for="choices-publish-status-input" class="form-label">Select product brands</label>

                                 <select class="form-select" id="choices-publish-status-input" data-choices data-choices-search-false>
                                     <option value="Published" selected>Coir on</option>
                                     <option value="Scheduled">Tad</option>
                                     <option value="Scheduled">dr.back</option>
                                 </select>
                             </div>
                         </div>
                         <!-- end card body -->
                     </div>
                     <!-- end card -->

                     <div class="card">
                         <div class="card-header">
                             <h5 class="card-title mb-0">Product Categories</h5>
                         </div>
                         <div class="card-body">
                             <p class="text-muted mb-2"> <a href="{{route('product.category')}}" class="float-end text-decoration-underline">Add New</a>Select product category</p>
                             <select class="form-control" id="choices-single-groups" data-choices="" data-choices-groups="" data-placeholder="Select City" name="choices-single-groups">
                                 <option value="">Choose a category</option>
                                 <optgroup label="Mattress">
                                     <option value="London">Comfort Collection</option>

                                     <option value="London"> &nbsp; &nbsp; - Coolmax</option>
                                     <option value="London"> &nbsp;&nbsp; - Grandeur</option>
                                     <option value="Manchester"> &nbsp; &nbsp; - Majestic</option>
                                     <option value="Liverpool"> &nbsp; &nbsp; - Platinum</option>

                                     <option value="London">Luxury Collection</option>

                                     <option value="London"> &nbsp; &nbsp; - Latux Plus</option>
                                     <option value="London"> &nbsp;&nbsp; - OXY Plus</option>
                                     <option value="London">Wellness Collection</option>

                                     <option value="London"> &nbsp; &nbsp; - Ortho Care Plus</option>
                                     <option value="London"> &nbsp;&nbsp; - Spine support</option>
                                 </optgroup>
                                 <optgroup label="Pillows">
                                     <option value="Paris">Bambo Latex Pillow</option>
                                     <option value="Lyon">luxury Pillow</option>
                                     <option value="Marseille">Plush Pillow</option>
                                 </optgroup>
                                 <optgroup label="Accessories">
                                     <option value="Hamburg">Fluffy Mattress</option>
                                     <option value="Munich">capsule-bolster</option>
                                 </optgroup>
                             </select>
                         </div>
                         <!-- end card body -->
                     </div>


                     <div class="card">
                         <div class="card-header">
                             <h5 class="card-title mb-0">Product Tax</h5>
                         </div>
                         <div class="card-body">

                             <input type="text" class="form-control" id="product-title-input" placeholder="Enter product tax">
                         </div>
                         <!-- end card body -->
                     </div>
                     <div class="card">
                         <div class="card-header">
                             <h5 class="card-title mb-0">Commission Rate</h5>
                         </div>
                         <div class="card-body">

                             <input type="text" class="form-control" id="product-title-input" placeholder="Enter Commission rate">
                         </div>
                         <!-- end card body -->
                     </div>
                     <div class="card">
                         <div class="card-header">
                             <h5 class="card-title mb-0">Product Tags</h5>
                         </div>
                         <div class="card-body">
                             <div class="hstack gap-3 align-items-start">
                                 <div class="flex-grow-1">
                                     <input class="form-control" data-choices data-choices-multiple-remove="true" placeholder="Enter tags" type="text" />
                                 </div>
                             </div>
                         </div>
                         <!-- end card body -->
                     </div>
                     <!-- end card -->
                 </div>
             </div>
             <!-- end row -->

         </div>
         <!-- container-fluid -->
     </div>
     <!-- End Page-content -->

     @endsection