@extends('admin.layouts.main')

@section('title', 'Admin - Add Post') 

@section('content')
<div class="container">
    <div class="page-inner">
        <div class="page-header d-flex align-items-center justify-content-between">
            <div>
                <div class="d-flex align-items-center">
                    <h3 class="fw-bold mb-3">Products</h3>
                    <ul class="breadcrumbs mb-3 ml-3 d-flex align-items-center">
                        <li class="nav-home"><a href="#"><i class="icon-home"></i></a></li>
                        <li class="separator"><i class="icon-arrow-right"></i></li>
                        <li class="nav-item"><a href="#">Products</a></li>
                        <li class="separator">
                            <i class="icon-arrow-right"></i>
                        </li>
                        <li class="nav-item">
                            <a href="#">ADD</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form class="saveData" action="{{ route('products.store') }}" returnurl="{{ route('products.index') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <label for="title" class="form-label">Product Name<sup>*</sup></label>
                                                    <input type="text" class="form-control" name="product" placeholder="Enter Product Name">
                                                    <div class="product_error errorClass"></div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label for="title" class="form-label">Product Code<sup>*</sup></label>
                                                    <input type="text" class="form-control" name="product_code" placeholder="Enter Product Code">
                                                    <div class="product_code_error errorClass"></div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label for="category_id" class="form-label">Category<sup>*</sup></label>
                                                    <select class="form-control select2 categories" id="status" name="category_id">
                                                        <option value=""> -- Choose Category -- </option>
                                                        @foreach($categories as $category)
                                                            <option value="{{ $category->id }}">{{ $category->category }}</option>
                                                        @endforeach
                                                    </select>
                                                    <div class="category_id_error errorClass"></div>
                                                </div>
                                                
                                            </div>                                            
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <label for="product_info" class="form-label">Product Info<sup>*</sup></label>
                                                    <textarea class="form-control summernote" name="product_info"></textarea>
                                                    <div class="product_info_error errorClass"></div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <label for="description" class="form-label">Description<sup>*</sup></label>
                                                    <textarea class="form-control summernote" name="description"></textarea>
                                                    <div class="description_error errorClass"></div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label for="meta_title" class="form-label">Meta Title</label>
                                                    <textarea class="form-control" name="meta_title"></textarea>
                                                    <div class="meta_title_error errorClass"></div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label for="meta_description" class="form-label">Meta Description</label>
                                                    <textarea class="form-control" name="meta_description"></textarea>
                                                    <div class="meta_description_error errorClass"></div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label for="keywords" class="form-label">Keywords</label>
                                                    <textarea class="form-control" name="keywords"></textarea>
                                                    <div class="keywords_error errorClass"></div>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="d-flex align-items-center justify-content-between">
                                                <h3>FAQs</h3>
                                                <a class="btn btn-primary ms-auto" onclick="addMoreFaqs()">
                                                    <i class="fa fa-plus"></i>
                                                    ADD
                                                </a>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label for="questions" class="form-label">Question<sup>*</sup></label>
                                                    <textarea class="form-control" name="questions[]"></textarea>
                                                    <div class="questions0_error errorClass"></div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label for="answers" class="form-label">Answer<sup>*</sup></label>
                                                    <textarea class="form-control" name="answers[]"></textarea>
                                                    <div class="answers0_error errorClass"></div>
                                                </div>
                                            </div>
                                            <div class="morefaqs"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <label for="featured_image" class="form-label">Featured Image<sup>*</sup></label>
                                                    <input type="file" class="form-control" name="image" onchange="previewImage(event)">
                                                    <div class="image_error errorClass"></div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <div class="featured_image_preview">
                                                        <img id="imagePreview" src="" alt="Featured Image" />
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <label for="gallery" class="form-label">Gallery</label>
                                                    <input type="file" class="form-control" name="gallery[]" onchange="galleryImage(event)" multiple>
                                                    <div class="gallery_error errorClass"></div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <div class="gallery_image_preview">
                                                        <div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
                                                            <div class="carousel-inner" id="galleryPreviewContainer">
                                                                <div class="carousel-item active">
                                                                    <img src="https://via.placeholder.com/300" class="d-block w-100" alt="Gallery Image">
                                                                </div>
                                                            </div>
                                                            <!-- Carousel Controls -->
                                                            <a class="carousel-control-prev" href="#galleryCarousel" role="button" data-bs-slide="prev">
                                                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                <span class="visually-hidden">Previous</span>
                                                            </a>
                                                            <a class="carousel-control-next" href="#galleryCarousel" role="button" data-bs-slide="next">
                                                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                <span class="visually-hidden">Next</span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <label for="coa" class="form-label">COA</label>
                                                    <input type="file" class="form-control" name="coa">
                                                    <div class="coa_error errorClass"></div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <label for="msds" class="form-label">MSDS</label>
                                                    <input type="file" class="form-control" name="msds">
                                                    <div class="msds_error errorClass"></div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <label for="status" class="form-label">Status</label>
                                                    <select class="form-control" name="status">
                                                        <option value="1" selected>Published</option>
                                                        <option value="2">Draft</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-secondary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Include Summernote -->
<link href="{{ asset('admin/css/summernote-bs5.min.css') }}" rel="stylesheet">
<script src="{{ asset('admin/js/plugin/summernote/summernote-bs5.min.js') }}"></script>
<script src="{{ asset('admin/js/plugin/select2/select2.full.min.js') }}"></script>

<script>
    $(document).ready(function() {
        $('.summernote').summernote({
            placeholder: 'Write your content here...',
            tabsize: 2,
            height: 400,
            toolbar: [
                // customize the toolbar
                ['style', ['bold', 'italic', 'underline', 'clear']], // basic styles
                ['fontsize', ['fontsize']], // allow only font size change
                ['color', ['color']], // text color
                ['para', ['ul', 'ol', 'paragraph']], // paragraph formatting
                ['insert', ['link', 'picture', 'video']], // insert media
                ['view', ['fullscreen', 'codeview', 'help']] // view options
            ],
            fontNames: [], // disable font family options
        });
    });

    function previewImage(event) {
        const reader = new FileReader();
        reader.onload = function() {
            const preview = document.getElementById('imagePreview');
            preview.src = reader.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(event.target.files[0]);
    }

    function galleryImage(event) {
        var files = event.target.files;
        var previewContainer = document.getElementById('galleryPreviewContainer');
        previewContainer.innerHTML = ''; // Clear previous images

        if (files.length > 0) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var reader = new FileReader();

                reader.onload = function(e) {
                    var isActive = previewContainer.children.length === 0 ? 'active' : '';

                    var carouselItem = `
                        <div class="carousel-item ${isActive}">
                            <img src="${e.target.result}" class="d-block w-100" alt="Gallery Image">
                        </div>
                    `;
                    previewContainer.innerHTML += carouselItem;
                };

                reader.readAsDataURL(file);
            }
        }
    }

    function addMoreFaqs() {
        let index = $('textarea[name="questions[]"]').length;
        $.ajax({
            url: '{{ route('addmorefaq') }}',
            type: 'GET',
            data: { index: index }, // pass index
            success: function(response) {
                $('.morefaqs').append(response);
            },
            error: function(xhr, status, error) {
                console.error('Failed to load more faqs');
            }
        });
    }

    function removeNearestRow(e) {
        $(e).closest('div.row').remove();
    }


</script>

@endsection