<!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">
                                    Add New Product
                                    <!--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.store') }}">
                                        @csrf
                                        <div class="row mb-5">
                                            <div class="col-md-6">
                                                <label class="required form-label">Product Name (English)</label>
                                                <input type="text" name="name_en" class="form-control form-control-solid" placeholder="Enter product name" required />
                                            </div>

                                            <div class="col-md-6">
                                                <label class="required form-label">Category</label>
                                                <select name="cat_id" class="form-select form-select-solid" data-control="select2" data-placeholder="Select category" required>
                                                    <option value="">Select Category</option>
                                                    @foreach($Categories as $cat)
                                                        <option value="{{ $cat->id }}">{{ $cat->name_en }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="row mb-5">
                                            <div class="col-md-12">
                                                <label class="form-label">Composition</label>
                                                <textarea name="composition" class="form-control form-control-solid" rows="3" placeholder="Enter composition"></textarea>
                                            </div>

                                            <div class="col-md-12">
                                                <label class="form-label">Introduction</label>
                                                <textarea name="introduction" id="introduction" class="form-control form-control-solid editor" rows="3" placeholder="Enter introduction"></textarea>
                                            </div>
                                        </div>

                                        <div class="row mb-5">
                                            <div class="col-md-12">
                                                <label class="form-label">Benefits</label>
                                                <textarea name="benefits" id="benefits" class="form-control form-control-solid editor" rows="3" placeholder="Enter benefits"></textarea>
                                            </div>

                                            <div class="col-md-12">
                                                <label class="form-label">Details</label>
                                                <textarea name="details" id="details" class="form-control form-control-solid editor" rows="3" placeholder="Enter details"></textarea>
                                            </div>
                                        </div>

                                        <div class="row mb-5">
                                            <div class="col-md-6">
                                                <label class="form-label">Brand Logo</label>
                                                <input type="file" name="brand_logo" id="brand_logo" class="form-control form-control-solid" accept="image/*" onchange="previewImage(this, 'brand_logo_preview')" />
                                                <div class="form-text">Allowed file types: png, jpg, jpeg.</div>
                                                <div class="mt-2">
                                                    <img id="brand_logo_preview" src="" alt="Brand Logo Preview" style="max-width: 200px; max-height: 200px; display: none;" class="img-thumbnail" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row mb-5">
                                            <div class="col-md-3">
                                                <label class="form-label">Image 1</label>
                                                <input type="file" name="img_1" id="img_1" class="form-control form-control-solid" accept="image/*" onchange="previewImage(this, 'img_1_preview')" />
                                                <div class="mt-2">
                                                    <img id="img_1_preview" src="" alt="Image 1 Preview" style="max-width: 200px; max-height: 200px; display: none;" class="img-thumbnail" />
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <label class="form-label">Image 2</label>
                                                <input type="file" name="img_2" id="img_2" class="form-control form-control-solid" accept="image/*" onchange="previewImage(this, 'img_2_preview')" />
                                                <div class="mt-2">
                                                    <img id="img_2_preview" src="" alt="Image 2 Preview" style="max-width: 200px; max-height: 200px; display: none;" class="img-thumbnail" />
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <label class="form-label">Image 3</label>
                                                <input type="file" name="img_3" id="img_3" class="form-control form-control-solid" accept="image/*" onchange="previewImage(this, 'img_3_preview')" />
                                                <div class="mt-2">
                                                    <img id="img_3_preview" src="" alt="Image 3 Preview" style="max-width: 200px; max-height: 200px; display: none;" class="img-thumbnail" />
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <label class="form-label">Image 4</label>
                                                <input type="file" name="img_4" id="img_4" class="form-control form-control-solid" accept="image/*" onchange="previewImage(this, 'img_4_preview')" />
                                                <div class="mt-2">
                                                    <img id="img_4_preview" src="" alt="Image 4 Preview" style="max-width: 200px; max-height: 200px; display: none;" class="img-thumbnail" />
                                                </div>
                                            </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">Submit</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-->
                            </div>
                            <!--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
            $('.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);
            } else {
                preview.src = '';
                preview.style.display = 'none';
            }
        }
    </script>
</body>
</html>
