@include('admin.header')
<style>
.ck-editor__editable {
    min-height: 300px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #3779eb !important;
    border: 1px solid #3779eb !important;
    color: #ffffff;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px;
}
</style>
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<!-- MAIN-CONTENT -->
<div class="main-content app-content">
    <div class="main-container container-fluid">
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">{{ $page_title }} </h4>
                {{-- <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Pages</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Profile</li>
                </ol> --}}
            </div>
            <div class="d-flex my-xl-auto right-content align-items-center">


            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <p>Company Name: <strong>{{$company['name']}}</strong></p>
                <form action="/admin/products" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                     <div class="mb-3 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" multiple="multiple" style="width: 100%;">
                                <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="price">Related Categories </label>
                            <select class="form-control" id="related_categories" name="related_categories[]" multiple="multiple" style="width: 100%;">
                                <option value="">-Select-</option>
                                @foreach($categories as $category)
                                <option value="{{$category->id}}">{{$category->name}}</option>
                                @endforeach
                            </select>
                        </div>

                      <div class="form-group col-md-12">
                        <label for="description">Description </label>
                        <button class="btn btn-info float-end" type="button" onclick="getAIDescription()">Get AI Description</button>
                        <textarea class="form-control descriptionn" id="editor" name="description"></textarea>
                      </div>

                      <div class="col-md-6">
                        <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-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 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="col-md-12">
                            <label for="price">Url Slug</label>
                            <input type="text" class="form-control" id="url_slug" name="url_slug">
                        </div>
                        <div class="col-md-12">
                            <label for="price">Meta title</label>
                            <input type="text" class="form-control" id="meta_title" name="meta_title">
                        </div>
                        <div class="col-md-12">
                            <label for="price">Meta description</label>
                            <input type="text" class="form-control" id="meta_description" name="meta_description">
                        </div>
                        <div class="col-md-12">
                            <label for="price">Keywords </label>
                            <input type="text" class="form-control" id="tags" name="tags">
                        </div>

                    </div>
                    <div class="mb-3 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" checked> 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>
            </div>
        <!-- /.row -->

        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  @include('admin.footer')
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ asset('node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>
  <script>
    ClassicEditor
       .create(document.querySelector('#editor'))
       .then(editor => {
           window.editorInstance = editor; // Store editor instance globally
       })
       .catch(error => {
           console.error(error);
       });

       function getAIDescription() {
       var productName = $('#name').val();

       if (productName != "") {
           $.ajax({
               url: "/getProductAIDescription",
               type: "POST",
               data: {
                   "_token": $('meta[name="csrf-token"]').attr('content'),
                   "product_name": productName
               },
               success: function(res) {
                   console.log(res);
                   if (res && res.ai_description) {
                       window.editorInstance.setData(res.ai_description); // Set formatted HTML content
                   }
               },
           });
       }
   }

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

           });
       }

   $(document).ready(function() {
           $('#related_categories').select2();
           $('#subcategory_id').select2();
       });
   </script>