@include('vendorr.header')
<style>
.ck-editor__editable {
    min-height: 500px;
}
</style>
<!-- MAIN-CONTENT -->
<div class="main-content app-content">
    <div class="main-container container-fluid">

                        <a href="/my/products" class="btn btn-primary mb-2">View Products </a>

                        <div class="row">
                            <!-- left column -->
                            <div class="col-md-12">
                              <!-- general form elements -->
                              <div class="card card-primary">
                                <!-- form start -->
                                <form action="/my/products" method="post" enctype="multipart/form-data">
                                  @csrf
                                  <div class="card-body">
                                   <div class="row">
                                      <div class="form-group col-md-6">
                                          <label for="name">Category </label>
                                          <select class="form-control" name="category_id" id="category_id" onchange="getSubCategories(this.value)" required>
                                              <option value="">-Select-</option>
                                              @foreach($categories as $category)
                                              <option value="{{$category->id}}">{{$category->name}}</option>
                                              @endforeach
                                          </select>
                                      </div>
                                      <div class="form-group col-md-6">
                                          <label for="name">SubCategory </label>
                                          <select class="form-control" name="subcategory_id" id="subcategory_id">
                                              <option value="">-Select-</option>
                                          </select>
                                      </div>
                                    <div class="form-group col-md-12">
                                      <label for="name">Product name </label>
                                      <input type="text" class="form-control" id="name" name="name" required>
                                    </div>

                                    <div class="form-group col-md-12">
                                      <label for="description">Description </label>
                                      <textarea class="form-control" id="editor" name="description"></textarea>
                                    </div>

                                  <div class="col-md-3">
                                      <label for="price">Price </label>
                                      <input type="text" class="form-control" id="price" name="price">
                                  </div>
                                  <div class="col-md-3">
                                      <label for="discount">Discount </label>
                                      <input type="text" class="form-control" id="discount" name="discount" value="0">
                                  </div>

                                    <div class="form-group col-md-6">
                                      <label for="image">Image </label>
                                      <input type="file" class="form-control" id="image" name="image" accept="image/*">
                                    </div>
                                    <div class="form-group col-md-6">
                                      <label for="image">Catalogue </label>
                                      <input type="file" class="form-control" id="catalogue" name="catalogue">
                                    </div>

                                    <div class="form-group col-md-3">
                                      <label for="status">Status </label>
                                      <select class="form-control" name="status" id="status">
                                          <option value="1">Active</option>
                                          <option value="0">Inactive</option>
                                      </select>
                                    </div>
                                  </div>
                                  <div class="row">
                                      <div class="col-md-4">
                                          <input type="checkbox" name="featured" id="featured" value="1"> Featured
                                      </div>
                                      <div class="col-md-4">
                                          <input type="checkbox" name="new_arrivals" id="new_arrivals" value="1"> New Arrivals
                                      </div>
                                      <div class="col-md-4">
                                          <input type="checkbox" name="trusted" id="trusted" value="1"> Trusted
                                      </div>
                                  </div>
                                  </div>
                                  <!-- /.card-body -->

                                  <div class="card-footer">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                  </div>
                                </form>
                              </div>
                              <!-- /.card -->

                              <!-- general form elements -->

                              <!-- /.card -->

                              <!-- Input addon -->

                              <!-- /.card -->
                              <!-- Horizontal Form -->

                              <!-- /.card -->

                            </div>
                            <!--/.col (left) -->
                            <!-- right column -->
                            <div class="col-md-6">
                              <!-- Form Element sizes -->

                              <!-- /.card -->


                              <!-- /.card -->

                              <!-- general form elements disabled -->

                              <!-- /.card -->
                              <!-- general form elements disabled -->

                              <!-- /.card -->
                            </div>
                            <!--/.col (right) -->
                          </div>
                          <!-- /.row -->
                        </div>




                   </div>
            </div>


@include('vendorr.footer')
<script src="{{ asset('node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(editor => {
            console.log(editor);
        })
        .catch(error => {
            console.error(error);
        });
</script>

<script>
    function getSubCategories(catId)
    {
        console.log(catId);
        $.ajax({
            type: "POST",
            data: { "_token": $('meta[name="csrf-token"]').attr('content'), "cat_id": catId },
            url: "/getsubCategories",
            success: function(res){
                console.log(res)
                if(res)
                {
                    $('#subcategory_id').html(res);
                }
            },

        });
    }

</script>