@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">
                            <form action="/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" style="width: 100%;">
                                                <option value="">-Select-</option>
                                                @foreach ($subcategories as $row)
                                                    <option value="{{ $row->id }}" @if($row->id==$product->subcategory_id) 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="related_subcategories">Related SubCategories</label>

                                            <select class="form-control" id="related_subcategories" name="related_subcategories[]" 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>
                </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) {
    $.ajax({
        type: "POST",
        data: {
            "_token": $('meta[name="csrf-token"]').attr('content'),
            "cat_id": catId
        },
        url: "/getSubCategories",
        success: function(res) {
            if (res) {
                $('#subcategory_id').html(res);
                $('#related_subcategories').html(res);

                var selectedRelatedSubcategories = @json($selected_related_subcategories);

                // Re-select options after loading
                $('#related_subcategories option').each(function() {
                    if (selectedRelatedSubcategories.includes(parseInt($(this).val()))) {
                        $(this).prop('selected', true);
                    }
                });

                $('#related_subcategories').trigger('change'); // Refresh Select2
            }
        },
    });
}

</script>
<script src="{{ asset('adminlte/plugins/select2/js/select2.min.js') }}"></script>
<script>
    $(document).ready(function() {
    var selectedCategory_id = $('#category_id').val();
    var selectedRelatedSubcategories = @json($selected_related_subcategories); // Blade variable passed into JS

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

                // Now, mark already selected subcategories
                $('#related_subcategories option').each(function() {
                    if (selectedRelatedSubcategories.includes(parseInt($(this).val()))) {
                        $(this).prop('selected', true);
                    }
                });

                $('#related_subcategories').trigger('change'); // Refresh Select2
            }
        },
    });

    $('#related_categories').select2();
    $('#related_subcategories').select2();
});

</script>