@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="mb-2 btn btn-primary">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-10">
                                    <label for="name">Product name </label>
                                    <input type="text" class="form-control" id="name" name="name" required>
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="name">Sort order </label>
                                    <input type="number" class="form-control" id="sort_order" name="sort_order">
                                </div>
                                {{-- <div class="form-group col-md-12">
                                        <label for="short_description">Short Description </label>
                                        <textarea class="form-control" id="short_description" name="short_description" maxlength="490"></textarea>
                                      </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-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 => {
            window.editorInstance = editor;
        })
        .catch(error => {
            console.error(error);
        });

    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);
                }
            },

        });
    }

    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
                    }
                },
            });
        }
    }
</script>