<!DOCTYPE html>
<html lang="en">

@include('includes.head')

<body id="kt_body"
    class="header-fixed header-tablet-and-mobile-fixed toolbar-enabled toolbar-fixed aside-enabled aside-fixed"
    style="--kt-toolbar-height:55px;--kt-toolbar-height-tablet-and-mobile:55px">
    <!--begin::Root-->
    <div class="d-flex flex-column flex-root">
        <!--begin::Page-->
        <div class="page d-flex flex-row flex-column-fluid">
            <!-- Left side column. contains the logo and sidebar -->
            @include('includes.side-nav')
            <!-- Content Wrapper. Contains page content -->
            <div class="wrapper d-flex flex-column flex-row-fluid" id="kt_wrapper">

                @include('includes.header')
                <!--begin::Content-->
                <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
                    <!--begin::Toolbar-->
                    <div class="toolbar" id="kt_toolbar">
                        <!--begin::Container-->
                        <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
                            <!--begin::Page title-->
                            <div data-kt-swapper="true" data-kt-swapper-mode="prepend"
                                data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
                                class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
                                <!--begin::Title-->
                                <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">
                                    Edit Product Meta Tag
                                    <!--begin::Separator-->
                                    <span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
                                    <!--end::Separator-->
                                    <!--begin::Description-->
                                    <small class="text-muted fs-7 fw-bold my-1 ms-1">Product</small>
                                    <!--end::Description-->
                                </h1>
                                <!--end::Title-->
                            </div>
                            <!--end::Page title-->
                            <!--begin::Actions-->
                            <div class="d-flex align-items-center py-1">
                                <!--begin::Button-->
                                <a href="{{route('product.list')}}" class="btn btn-sm btn-primary">
                                    Back To List
                                </a>
                                <!--end::Button-->
                            </div>
                            <!--end::Actions-->
                        </div>
                        <!--end::Container-->
                    </div>
                    <!--end::Toolbar-->
                    <!--begin::Post-->
                    <div class="post d-flex flex-column-fluid" id="kt_post">
                        <!--begin::Container-->
                        <div id="kt_content_container" class="container-xxl">
                            <!--begin::Card-->
                            <div class="card">
                                @include('includes.messages')
                                <!--begin::Card body-->
                                <div class="card-body pt-6">
                                    <form method="post" enctype="multipart/form-data" action="{{ route('product.update.meta', $product->id) }}">
                                        @csrf








                                        <div class="row mb-5">
                                            <dilv class="col-md-12">
                                                <label class="required form-label">Meta Title</label>
                                                <input type="text" required name="meta_title" class="form-control form-control-solid"
                                                    value="{{ old('meta_title', $product->meta_title) }}" placeholder="Enter product name" />
                                            </dilv>
                                        </div>
                                        <div class="row mb-5">
                                            <div class="col-md-12">
                                                <label class="form-label">Meta Keywords</label>
                                                <textarea name="meta_keywords" required class="form-control form-control-solid" rows="3"
                                                    placeholder="Enter meta keywords">{{ old('meta_keywords', $product->meta_keywords) }}</textarea>
                                            </div>
                                        </div>
                                        <div class="row mb-5">

                                            <div class="col-md-12">
                                                <label class="form-label">Meta Description</label>
                                                <textarea name="meta_description" required  class="form-control form-control-solid" rows="3"
                                                    placeholder="Enter Meta Description">{{ old('meta_description', $product->meta_description) }}</textarea>
                                            </div>
                                        </div>







                                        <div class="d-flex justify-content-end">
                                            <button type="reset" class="btn btn-light me-3">Reset</button>
                                            <button type="submit" class="btn btn-primary">
                                                <span class="indicator-label">Update</span>
                                                <span class="indicator-progress">Please wait...
                                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                                <!--end::Card body-->

                            <!--end::Card-->
                        </div>
                        <!--end::Container-->
                    </div>
                    <!--end::Post-->
                </div>
                <!--end::Content-->
                @include('includes.footer')
            </div>
            <!-- /.content-wrapper -->
        </div>
        <!-- ./wrapper -->
    </div>
    @include('includes.scripts')

    <!-- CKEditor JS -->
    <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

    <script>
        // Initialize Select2 for category dropdown
        $(document).ready(function() {
            $('[data-control="select2"]').select2({
                dropdownParent: $('#kt_content_container')
            });

            // Initialize CKEditor for rich text areas with existing content
            $('.editor').each(function() {
                CKEDITOR.replace(this.id, {
                    toolbar: [
                        { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
                        { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Blockquote'] },
                        { name: 'links', items: ['Link', 'Unlink'] },
                        { name: 'insert', items: ['Image', 'Table'] },
                        { name: 'tools', items: ['Maximize'] },
                        { name: 'styles', items: ['Styles', 'Format'] }
                    ],
                    height: 150
                });
            });
        });

        // Image preview function
        function previewImage(input, previewId) {
            const preview = document.getElementById(previewId);
            const file = input.files[0];

            if (file) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                }

                reader.readAsDataURL(file);
            }
        }
    </script>
</body>
</html>
