@include('hk.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>
    <link rel="stylesheet" href="{{ asset('adminlte/plugins/select2/css/select2.min.css') }}">
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="mb-2 row">
          <div class="col-sm-6">
            <h1 class="m-0">{{ $page_title }}</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">{{ $page_title }}</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-md-12">
            <div class="card">
                  <div class="card-body">
                    <p>Company Name: <strong>{{$company['name']}}</strong></p>
                    <form action="/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" 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="price">Related SubCategories </label>
                                <select class="form-control" id="related_subcategories" name="related_subcategories[]" multiple="multiple" style="width: 100%;">
                                    <option value="">-Select-</option>
                                </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>
            </div>
        <!-- /.row -->

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

  @include('hk.footer')

  <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: "/getSubCategories",
            success: function(res) {
                console.log(res)
                if (res) {
                    $('#subcategory_id').html(res);
                    $('#related_subcategories').html(res);
                }
            },

        });
    }

</script>
<script src="{{ asset('adminlte/plugins/select2/js/select2.min.js') }}"></script>
<script>
$(document).ready(function() {
        $('#related_categories').select2();
        $('#related_subcategories').select2();
    });
</script>