@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="btn btn-primary mb-2">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/{{ $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="name">SubCategory </label>
                                    <select class="form-control" name="subcategory_id" id="subcategory_id">
                                        <option value="">-Select-</option>
                                        @foreach ($subcategories as $row)
                                            <option value="{{ $row->id }}" selected>{{ $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="description">Description </label>
                                    <textarea class="form-control" id="editor" name="description">{{ $product->description }}</textarea>
                                </div>

                                <div class="col-md-3">
                                    <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-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 => {
            console.log(editor);
        })
        .catch(error => {
            console.error(error);
        });
</script>
<script>
    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);
                }
            },

        });
    }
</script>