@section('title','Add Product')
@include('layout.header')
@include('layout.sidebar')
<style>
    .error{
        color: red;
    }
</style>

<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Add Product</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
            <a href="{{ url('/dashboard') }}" class="text-muted text-hover-primary">Dashboard</a>
            </li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">Add Product</li>
        </ul>
    </div>

</div>
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5 mb-xl-8">
            <div class="card-body py-3">
                <form action="{{ route('create-product')}}" method="POST" id="product_form" enctype="multipart/form-data">
                    @csrf
                    <div class="mt-5">
                        <div class="row mt-6">
                            <div class="col-md-6 mt-3">
                                <label  for="productTitle" class="form-label">Product Title <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <input type="text"  class="form-control " id="product_title" name="product_title" placeholder="Product title" autocomplete="off">
                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label  for="product_category_id" class="form-label">Product Category <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <select class="form-select" name="product_category_id" id="product_category_id" data-control="select2" data-placeholder="Select Product Category" onchange="getproductSubCategory()">
                                        <option value=""> Select Product Category </option>
                                        @foreach(@$productCategory as $productCategory)
                                            <option value="{{$productCategory->id}}"> {{ $productCategory->category_name_en }} </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label  for="product_sub_category_id" class="form-label">Product Sub Category <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <select class="form-select" name="product_sub_category_id[]" id="product_sub_category_id" data-control="select2" data-placeholder="Select Product Sub Category" multiple>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label  for="status" class="form-label">Status <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <select class="form-select" name="status" data-control="select2" data-placeholder="Select Status">
                                        <option value=""> Select Status </option>
                                        <option value="1"> Active </option>
                                        <option value="0"> InActive </option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-12 mt-3">
                                <label  for="productDescription" class="form-label">Product Description <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <textarea class="form-control" id="product_description" name="product_description" rows="5" placeholder="Product Description"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="generalInfoMainDiv-cls">
                                <h4>General Information</h4>
                                <div class="generalInfoDivCount-cls" id="generalInfoDivId_0" key="0">
                                    <div class="row align-items-center">
                                        <div class="col-md-5 mt-3">
                                            <label for="generalInfoFeature" class="form-label">Feature <span class="error"> * </span></label>
                                            <div class="form-group mb-5">
                                                <input type="text" class="form-control" id="general_info_feature_0" name="general_info_feature[0]" placeholder="Feature" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-5 mt-3">
                                            <label for="generalInfoValue" class="form-label">Value <span class="error"> * </span></label>
                                            <div class="form-group mb-5">
                                                <input type="text" class="form-control" id="general_info_value_0" name="general_info_value[0]" placeholder="Value" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-1 mt-3">
                                            <div class="form-group mb-5">
                                                <label class="checkbox">
                                                    <input type="checkbox" name="generalInfoHighlight[0]"/>
                                                    <span></span>
                                                    Highlight
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 mt-3 mb-3">
                                <button type="button" class="btn btn-primary mt-3" id="addBanner" onclick="AddMoreGeneralInfoDiv()">Add More General Information</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="prodCompositionMainDiv-cls">
                                <h4>Product Composition</h4>
                                <div class="prodCompositionDivCount-cls" id="prodCompositionDivId_0" key="0">
                                    <div class="row align-items-center">
                                        <div class="col-md-6 mt-3">
                                            <label for="prodCompositionFeature" class="form-label">Feature <span class="error"> * </span></label>
                                            <div class="form-group mb-5">
                                                <input type="text" class="form-control" id="prod_comp_feature_0" name="prod_comp_feature[0]" placeholder="Feature" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-6 mt-3">
                                            <label for="prodCompositionValue" class="form-label">Value <span class="error"> * </span></label>
                                            <div class="form-group mb-5">
                                                <input type="text" class="form-control" id="prod_comp_value_0" name="prod_comp_value[0]" placeholder="Value" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-3">
                                            <label for="prodCompositionValue" class="form-label">Description <span class="error"> * </span></label>
                                            <div class="form-group mb-5">
                                                <textarea class="form-control" id="prod_comp_description_0" name="prod_comp_description[0]" rows="5" placeholder="Description"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-1 mt-3">
                                            <div class="form-group mb-5">
                                                <label class="checkbox">
                                                    <input type="checkbox" name="prodCompositionHighlight[0]"/>
                                                    <span></span>
                                                    Highlight
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 mt-3 mb-3">
                                <button type="button" class="btn btn-primary mt-3" id="addBanner" onclick="AddMoreProdCompositionDiv()">Add More Product Composition</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="nutritionalInfoMainDiv-cls">
                                <h4>Nutritional Information</h4>
                                <div class="nutritionalInfoDivCount-cls" id="nutritionalInfoDivId_0" key="0">
                                    <div class="row align-items-center">
                                        <div class="col-md-5 mt-3">
                                            <label for="nutritionalInfoFeature" class="form-label">Feature <span class="error"> * </span></label>
                                            <div class="form-group mb-5">
                                                <input type="text" class="form-control" id="nutritional_info_feature_0" name="nutritional_info_feature[0]" placeholder="Feature" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-5 mt-3">
                                            <label for="nutritionalInfoValue" class="form-label">Value <span class="error"> * </span></label>
                                            <div class="form-group mb-5">
                                                <input type="text" class="form-control" id="nutritional_info_value_0" name="nutritional_info_value[0]" placeholder="Value" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-2 mt-3">
                                            <div class="form-group mb-5">
                                                <label class="checkbox">
                                                    <input type="checkbox" name="nutritionalInfoHighlight[0]"/>
                                                    <span></span>
                                                    Highlight
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 mt-3 mb-3">
                                <button type="button" class="btn btn-primary mt-3" id="addBanner" onclick="AddMoreNutritionalInfoDiv()">Add More Product Composition</button>
                            </div>
                        </div>
                        <div class="row mt-6">
                            <div class="col-md-12 mt-3">
                                <label for="nutritionalInfoValue" class="form-label">Nutritional Information Description <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <textarea class="form-control" id="nutritional_description" name="nutritional_description" rows="5" placeholder="Description"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-6">
                            <div class="col-md-12 mt-3">
                                <label  for="productApplication" class="form-label">Product Application <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <textarea class="tiny" id="product_application" name="product_application" rows="5" placeholder="Product Application"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-6">
                            <label  for="productApplication" class="form-label">Upload Multiple Poduct Image</label>
                            <div class="col-12 mb-4">
                                <div class="image-container">
                                    <div class="row" id="image-preview-container">
                                        <!-- Image previews will be added here dynamically -->
                                    </div>                            
                                </div>
                            </div>                            
                            <div class="col-12 mb-2">
                                <button type="button" id="add-more-images" class="btn btn-primary">
                                    <i class="ki-duotone ki-plus fs-2"></i>Add Image
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group mb-5 col-md-2">
                                <button type="submit" class="form-control btn btn-primary">Submit</button>
                            </div>
                            <div class="form-group mb-5 col-md-2">
                                <a  href="{{ url('/Product')}}"  class="form-control btn btn-secondary">Back</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


@include('layout.footer')
<script>
    $("#product_form").validate({
        debug: true,
        rules: {
            product_title: {
                required: true,
                remote: {
                            url:"{{ url('Product/is-available-product') }}",
                            type: "get",
                            async: false,
                            data: {
                                product_title: function() {
                                    return $("#product_title").val();
                                }
                            }
                        }
            },
            product_category_id:{required: true},
            product_sub_category_id:{required: true},
            product_description:{required: true},
            status:{required: true},
        },
        messages: {

            category_name_en: {
                required: 'Product is required.',
                remote:"Product alredy exist!!"
            },

            product_category_id: {
                required: 'Product category is required.',
            },

            product_sub_category_id: {
                required: 'Product sub category is required.',
            },

            product_description: {
                required: 'Product description is required.',
            },

            status: {
                required: 'Status is Required.',
            },
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        },
        submitHandler: function(form) {
            $(".submit").attr("disabled", true);
            form.submit();
        }
    });

    function getproductSubCategory() {
        var productCategory = $('#product_category_id').val();
        if (productCategory) {
            $.ajax({
                type: "GET",
                url: "{{ url('Product/get-sub-category') }}",
                data: { productCategory: productCategory },
                success: function (data) {
                    $('#product_sub_category_id').empty();
                    $('#product_sub_category_id').append('<option value="">Select Subcategory</option>');
                    $.each(data, function (key, value) {
                        $('#product_sub_category_id').append('<option value="' + value.id + '">' + value.sub_category_title + '</option>');
                    });
                },
                error: function (xhr, status, error) {
                    console.error("Error fetching subcategories:", error);
                    $('#product_sub_category_id').empty();
                    $('#product_sub_category_id').append('<option value="">No Subcategories Found</option>');
                }
            });
        } else {
            $('#product_sub_category_id').empty();
            $('#product_sub_category_id').append('<option value="">Select Subcategory</option>');
        }
    }

    function AddMoreGeneralInfoDiv(){
        var generalInfoDivCount = $('.generalInfoDivCount-cls').last().attr('key');
        generalInfoDivCount++;

        const generalInfoCount = generalInfoDivCount;
         
        var generalInfoDivHtml = `
        <div class="generalInfoDivCount-cls" id="generalInfoDivId_${generalInfoCount}" key="${generalInfoCount}">
            <div class="row align-items-center">
                <div class="col-md-5 mt-3">
                    <label for="generalInfoFeature" class="form-label">Feature <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <input type="text" class="form-control" id="general_info_feature_${generalInfoCount}" name="general_info_feature[${generalInfoCount}]" placeholder="Feature" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-5 mt-3">
                    <label for="generalInfoValue" class="form-label">Value <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <input type="text" class="form-control" id="general_info_value_${generalInfoCount}" name="general_info_value[${generalInfoCount}]" placeholder="Value" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-1 mt-3">
                    <div class="form-group mb-5">
                        <label class="checkbox">
                            <input type="checkbox" name="generalInfoHighlight[${generalInfoCount}]"/>
                            <span></span>
                            Highlight
                        </label>
                    </div>
                </div>
                <div class="col-md-1 mt-3">
                    <div class="form-group">
                        <button type='button' class='btn btn-primary' onclick="removeGeneralInfoDiv(${generalInfoCount})">Remove</button>
                    </div>
                </div>
            </div> 
        </div>`;
        $(".generalInfoMainDiv-cls").append(generalInfoDivHtml);
    }

    function removeGeneralInfoDiv(idKey){
        $('#generalInfoDivId_'+idKey).remove();
    }

    function AddMoreProdCompositionDiv(){
        var prodComDivCount = $('.prodCompositionDivCount-cls').last().attr('key');
        prodComDivCount++;

        const prodComCount = prodComDivCount;
         
        var prodComDivHtml = `
        <div class="prodCompositionDivCount-cls" id="prodCompositionDivId_${prodComCount}" key="${prodComCount}">
            <div class="row align-items-center">
                <div class="col-md-6 mt-3">
                    <label for="prodCompositionFeature" class="form-label">Feature <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <input type="text" class="form-control" id="prod_comp_feature_${prodComCount}" name="prod_comp_feature[${prodComCount}]" placeholder="Feature" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-6 mt-3">
                    <label for="prodCompositionValue" class="form-label">Value <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <input type="text" class="form-control" id="prod_comp_value_${prodComCount}" name="prod_comp_value[${prodComCount}]" placeholder="Value" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-12 mt-3">
                    <label for="prodCompositionValue" class="form-label">Description <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <textarea class="form-control" id="prod_comp_description_${prodComCount}" name="prod_comp_description[${prodComCount}]" rows="5" placeholder="Description"></textarea>
                    </div>
                </div>
                <div class="col-md-11 mt-3">
                    <div class="form-group mb-5">
                        <label class="checkbox">
                            <input type="checkbox" name="prodCompositionHighlight[${prodComCount}]"/>
                            <span></span>
                            Highlight
                        </label>
                    </div>
                </div>
                <div class="col-md-1 mt-3">
                    <div class="form-group">
                        <button type='button' class='btn btn-primary' onclick="removeProdComDiv(${prodComCount})">Remove</button>
                    </div>
                </div>
            </div>
        </div>`;
        $(".prodCompositionMainDiv-cls").append(prodComDivHtml);
    }

    function removeProdComDiv(idKey){
        $('#prodCompositionDivId_'+idKey).remove();
    }

    function AddMoreNutritionalInfoDiv(){
        var nutritionalInfoDivCount = $('.nutritionalInfoDivCount-cls').last().attr('key');
        nutritionalInfoDivCount++;

        const nutritionalInfoCount = nutritionalInfoDivCount;
         
        var nutritionalInfoDivHtml = `
        <div class="nutritionalInfoDivCount-cls" id="nutritionalInfoDivId_${nutritionalInfoCount}" key="${nutritionalInfoCount}">
            <div class="row align-items-center">
                <div class="col-md-5 mt-3">
                    <label for="nutritionalInfoFeature" class="form-label">Feature <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <input type="text" class="form-control" id="nutritional_info_feature_${nutritionalInfoCount}" name="nutritional_info_feature[${nutritionalInfoCount}]" placeholder="Feature" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-5 mt-3">
                    <label for="nutritionalInfoValue" class="form-label">Value <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <input type="text" class="form-control" id="nutritional_info_value_${nutritionalInfoCount}" name="nutritional_info_value[${nutritionalInfoCount}]" placeholder="Value" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-1 mt-3">
                    <div class="form-group mb-5">
                        <label class="checkbox">
                            <input type="checkbox" name="nutritionalInfoHighlight[${nutritionalInfoCount}]"/>
                            <span></span>
                            Highlight
                        </label>
                    </div>
                </div>
                <div class="col-md-1 mt-3">
                    <div class="form-group">
                        <button type='button' class='btn btn-primary' onclick="removenutritionalInfoDiv(${nutritionalInfoCount})">Remove</button>
                    </div>
                </div>
            </div>
        </div>`;
        $(".nutritionalInfoMainDiv-cls").append(nutritionalInfoDivHtml);
    }

    function removenutritionalInfoDiv(idKey){
        $('#nutritionalInfoDivId_'+idKey).remove();
    }

    // multiple image upload
    let imageCounter = 0;

    // Function to create image preview
    function createImagePreview(file, inputId) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const previewHtml = `
                <div class="col-2 mb-3">
                    <div class="card">
                        <div class="position-relative">
                            <img src="${e.target.result}" class="card-img-top" alt="Preview" style="height: 150px; object-fit: cover;">
                            <button type="button" class="btn btn-icon btn-danger btn-sm position-absolute top-0 end-0 m-2 remove-image" 
                                    data-input-id="${inputId}">
                                <i class="ki-duotone ki-cross fs-2">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                </i>
                            </button>
                        </div>
                        <div class="card-body p-2">
                            <input type="file" name="product_image[]" id="${inputId}" class="d-none">
                            <button type="button" class="btn btn-sm btn-light w-100 change-image" data-input-id="${inputId}">
                                Change Image
                            </button>
                        </div>
                    </div>
                </div>`;
            
            $("#image-preview-container").append(previewHtml);
            updateAddButtonText();
        }
        reader.readAsDataURL(file);
    }

    // Add more images button click handler
    $("#add-more-images").click(function() {
        const tempInput = $(`<input type="file" multiple style="display: none;">`);
        $("body").append(tempInput);
        tempInput.click();

        tempInput.on("change", function(e) {
            if (this.files && this.files.length > 0) {
                Array.from(this.files).forEach(file => {
                    const inputId = `image-${++imageCounter}`;
                    createImagePreview(file, inputId);
                    setTimeout(() => {
                        const dataTransfer = new DataTransfer();
                        dataTransfer.items.add(file);
                        $(`#${inputId}`).prop('files', dataTransfer.files);
                    }, 100);
                });
            }
            $(this).remove();
        });
    });

    // Function to update add button text
    function updateAddButtonText() {
        const imageCount = $("#image-preview-container").children().length;
        const $addButton = $("#add-more-images");
        const buttonText = imageCount > 0 ? "Add More Images" : "Add Image";
        $addButton.html(`<i class="ki-duotone ki-plus fs-2"></i> ${buttonText}`);
    }

    // Handle remove image
    $(document).on("click", ".remove-image", function() {
        $(this).closest(".col-2").remove();
        updateAddButtonText();
    });

    // Handle change image
    $(document).on("click", ".change-image", function() {
        const inputId = $(this).data("input-id");
        $(`#${inputId}`).click();
    }); 
           
    // Handle file change for existing preview cards
    $(document).on("change", "input[type='file'][name='product_image[]']", function(e) {
        if (this.files && this.files[0]) {
            const inputId = $(this).attr("id");
            const card = $(this).closest(".card");
            const reader = new FileReader();
            
            reader.onload = function(e) {
                card.find("img").attr("src", e.target.result);
            }
            
            reader.readAsDataURL(this.files[0]);
        }
    });
</script>