@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">
                <form action="/admin/products/{{ $product->id }}" method="post" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <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 }}" selected>
                                            {{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="subcategory_id">SubCategory</label>
                                                                <select class="form-control" name="subcategory_id[]" id="subcategory_id" multiple="multiple" style="width: 100%;">
                                    <option value="">-Select-</option>
                                    @foreach ($subcategories as $row)
                                        <option value="{{ $row->id }}" @if(in_array($row->id,$selected_sub_categories)) selected @endif>
                                            {{ $row->name }}
                                        </option>
                                    @endforeach
                                </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"
                                    value="{{ $product->name }}" required>
                            </div>
                            <div class="form-group col-md-12">
                                <label for="related_categories">Related Categories</label>
                                                                <select class="form-control" id="related_categories" name="related_categories[]" multiple="multiple" style="width: 100%;">
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}" @if(in_array($category->id, $selected_related_categories)) selected @endif>
                                            {{ $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">{{ $product->description }}</textarea>
                            </div>

                            <div class="col-md-6">
                                <label for="price">Price </label>
                                <input type="text" class="form-control" id="price" name="price"
                                    value="{{ $product->price }}">
                            </div>
                            <div class="col-md-3">
                                <label for="discount">Discount </label>
                                <input type="text" class="form-control" id="discount" name="discount"
                                    value="{{ $product->discount }}">
                            </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"
                                    value="{{ $product->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" value="{{ $product->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" value="{{ $product->meta_description }}">
                            </div>
                            <div class="col-md-12">
                                <label for="price">Keywords </label>
                                <input type="text" class="form-control" id="tags" name="tags"
                                    value="{{ $product->tags }}">
                            </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>
            </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>