@extends('layouts.admin-layout')
@section('title')
    Add Product
@endsection
@section('content')
    <style>
        .toggle {
            min-width: 89.4px !important;
            min-height: 41px!important;
        }
    </style>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">

                        <div class="card mt-4 card-box-shadow">

                            <div class="card-header">

                                <h3 class="card-title">Add Product</h3>
                                <a href="{{ route('admin.product.list') }}">
                                    <button id="submit_btn" class="btn btn-primary custom_btn_sm_back custom_btn btn-sm float-right">
                                        <i class="fas fa-arrow-circle-left"></i>
                                        Back
                                    </button>
                                </a>
                            </div>

                            <!-- /.card-header -->
                            <div class="card-body">
                                <form action="{{ route('admin.product.store') }}" method="POST"
                                      enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="Name">Product Name:</label>
                                                <input type="text" class="form-control form__field" name="product_name"
                                                       placeholder="Enter Product Name">
                                            </div>
                                            <small class="text-danger">
                                                @error('product_name')
                                                {{ $message }}
                                                @enderror
                                            </small>
                                        </div>

                                        <div class="col-md-4 mt-3">
                                            <div class="form-group">
                                                <label for="category">Select Category:</label>
                                                <select id="category" class="form-control form__field" name="category_name">
                                                    <option value="" selected disabled>Select Category</option>

                                                    @forelse($get_categories as $category)
                                                        <option value="{{ $category->id ?: '' }}">
                                                            {{ $category->category_name ?: '' }}</option>
                                                    @empty
                                                        <option value="" selected disabled>Category Not Found</option>
                                                    @endforelse
                                                </select>

                                                <small class="text-danger">
                                                    @error('category_name')
                                                    {{ $message }}
                                                    @enderror
                                                </small>
                                            </div>
                                        </div>


                                        <div class="col-md-4 mt-3">
                                            <div class="form-group">
                                                <label for="category">Select Sub Category:</label>
                                                <select id="subcategory" class="form-control form__field" name="sub_category_name">
                                                    <option value="" selected disabled>Select Sub Category</option>

                                                    @forelse($get_sub_categories as $sub_category)
                                                        <option value="{{ $sub_category->id ?: '' }}">
                                                            {{ $sub_category->sub_cate_name ?: '' }}</option>
                                                    @empty
                                                        <option value="" selected disabled>Sub Category Not Found</option>
                                                    @endforelse
                                                </select>

                                                <small class="text-danger">
                                                    @error('sub_category_name')
                                                    {{ $message }}
                                                    @enderror
                                                </small>
                                            </div>
                                        </div>


                                        <div class="col-md-4 mt-3">
                                            <div class="form-group">
                                                <label for="category">Select Brand:</label>
                                                <select id="category" class="form-control form__field" name="brand_name">
                                                    <option value="" selected disabled>Select Brand Name</option>

                                                    @forelse($get_brands as $brand)
                                                        <option value="{{ $brand->id ?: '' }}">
                                                            {{ $brand->brand_name ?: '' }}</option>
                                                    @empty
                                                        <option value="" selected disabled>Brand Not Found</option>
                                                    @endforelse
                                                </select>

                                                <small class="text-danger">
                                                    @error('brand_name')
                                                    {{ $message }}
                                                    @enderror
                                                </small>
                                            </div>
                                        </div>


                                        <div class="col-md-6 mt-4">
                                            <div class="form-group">
                                                <label for="Name">Product Main Price:</label>
                                                <input type="number" class="form-control form__field" name="product_price"
                                                       placeholder="Enter Price"oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                            </div>
                                            <small class="text-danger">
                                                @error('product_price')
                                                {{ $message }}
                                                @enderror
                                            </small>
                                        </div>

                                        <div class="col-md-6 mt-4">
                                            <div class="form-group">
                                                <label for="Name">Product Discount Price:</label>
                                                <input type="number" class="form-control form__field" name="product_discount"
                                                       placeholder="Enter Discount Price"oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                            </div>
                                            <small class="text-danger">
                                                @error('product_discount')
                                                {{ $message }}
                                                @enderror
                                            </small>
                                        </div>


                                        <div class="col-md-4 mt-4">
                                            <div class="form-group">
                                                <label for="Name">Product stock :</label>
                                                <input type="number" class="form-control form__field" name="product_stock"
                                                       placeholder="Enter Product Stock"oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                            </div>
                                            <small class="text-danger">
                                                @error('product_stock')
                                                {{ $message }}
                                                @enderror
                                            </small>
                                        </div>
                                        <div class="col-md-8 mt-4">
                                            <div style="display: flex;gap: 22px;">
                                                <label for="Name">New Product:</label>
                                                <label for="Name">Featured Product:</label>
                                                <label for="Name">Popular Product:</label>
                                                <label for="Name">Best Sale Product:</label>
                                                <label for="Name">MakeUp Brushes Product:</label>
                                                <label for="Name">Gift and Sets Product:</label>

                                            </div>

                                            <div style="display: flex;gap: 81px; background: #fff; font: inherit;box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 10px 2px;border: 0;outline: 0;border-radius: 20px;min-height: 50px;padding: 8px;">

                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"
                                                       data-off="No" data-onstyle="success"
                                                       data-offstyle="danger" name="new_product"checked>


                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"
                                                       data-off="No" data-onstyle="success"
                                                       data-offstyle="danger" name="feature_product">


                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"
                                                       data-off="No" data-onstyle="success"
                                                       data-offstyle="danger" name="popular_product">


                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"
                                                       data-off="No" data-onstyle="success"
                                                       data-offstyle="danger" name="best_sale_product">

                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"
                                                       data-off="No" data-onstyle="success"
                                                       data-offstyle="danger" name="makeup_brushes_product">

                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"
                                                       data-off="No" data-onstyle="success"
                                                       data-offstyle="danger" name="gift_sets_product">
                                            </div>

                                        </div>

                                        <div class="col-md-12 mt-4">
                                            <div class="form-group">
                                                <label for="mainProductImageInput">Choose Product Image:</label>
                                                <input type="file" class="form-control form__field  visually-hidden" name="product_main_image"
                                                       id="mainProductImageInput">
                                                <label for="mainProductImageInput" class="file-input-label form__field form-control">
                                                    <i class="fas fa-camera"></i> Choose file
                                                </label>
                                                <small class='text-danger'>
                                                    @error('product_main_image')
                                                    {{ $message }}
                                                    @enderror
                                                </small>
                                            </div>

                                            <img id="mainProductImagePreview" src="{{ asset('upload/No-Image.png') }}"
                                                 alt="Profile Preview"
                                                 style="width: 200px; height: 150px; margin-top: 10px;">

                                        </div>

                                        <div class="col-md-12 mt-4">
                                            <label for="">Short Description</label>
                                            <textarea name="description" rows="4" placeholder="Description" class="form-control" id="summernote1"></textarea>
                                            <small class="text-danger">
                                                @error('description')
                                                {{ $message }}
                                                @enderror
                                            </small>

                                        </div>

                                        <div class="col-md-12 mt-5">
                                            <div class="form-group pt-4">
                                                <div class="card card-box-shadow">
                                                    <h5 class="card-header bg-dark text-white">
                                                        <label for="Name">Show Product Variation:</label>
                                                        <input type="checkbox" id="productVariationCheckbox" style="width: 39px;height: 28px;">
                                                    </h5>

                                                    <div class="col-md-4 mt-4 mx-auto selectVariationName d-none">
                                                        <div class="form-group">
                                                            <label>Select Variation Name:</label>
                                                            <select class="form-control form__field variationNameSelect">
                                                                <option value="" selected disabled>Select Variation Name</option>
                                                                @forelse($get_variation_names as $variation_name)
                                                                    <option value="{{ $variation_name->id }}">{{ $variation_name->variation_name }}</option>
                                                                @empty
                                                                    <option value="" selected disabled>Variation name not found</option>

                                                                @endforelse
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="card-body addProductVariationField">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="text-center mt-3 mb-2">
                                        <button id="submit_btn" class="btn btn-primary custom_btn">
                                            <i class="fa-solid fa-cloud-arrow-up"></i> Submit
                                        </button>
                                    </div>

                                </form>

                            </div>
                            <!-- /.card-body -->
                        </div>

                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('script')
    <script>
        $('#summernote1').summernote({
            placeholder: 'Hello Admin',
            tabsize: 2,
            height: 100
        });
    </script>
    <script>
        function showImagePreview(input, previewId) {
            const preview = document.getElementById(previewId);

            if (input.files && input.files[0]) {
                const reader = new FileReader();

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

                reader.readAsDataURL(input.files[0]);
            }
        }
        const mainProductImageInput = document.getElementById('mainProductImageInput');
        mainProductImageInput.addEventListener('change', function () {
            showImagePreview(this, 'mainProductImagePreview');
        });

        const imageInput = document.getElementById('productFirstGalleryImageInput');
        imageInput.addEventListener('change', function() {
            showImagePreview(this, 'productFirstGalleryImagePreview');
        });
    </script>

    <script>
        function showImagePreview(input, previewId) {
            const preview = document.getElementById(previewId);

            if (input.files && input.files[0]) {
                const reader = new FileReader();

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

                reader.readAsDataURL(input.files[0]);
            }
        }


        // Event delegation for dynamically generated image inputs
        document.addEventListener('change', function (event) {
            if (event.target && event.target.name === 'variation_image[]') {
                const inputId = event.target.id; // ID of the file input
                const previewId = `variationImagePreview${inputId.replace('variationImageInput', '')}`; // Get corresponding preview ID
                showImagePreview(event.target, previewId);
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const checkbox = document.getElementById('productVariationCheckbox');
            const variationField = document.querySelector('.addProductVariationField');
            const selectVariationName = document.querySelector('.selectVariationName');
            const selectField = selectVariationName.querySelector('select'); // Select the actual dropdown

            const inputs = variationField ? variationField.querySelectorAll('.form__field') : [];

            checkbox.addEventListener('change', function () {
                if (checkbox.checked) {
                    selectVariationName.classList.remove('d-none'); // Show the dropdown
                    selectField.setAttribute('required', 'required'); // Add required to dropdown
                    inputs.forEach(input => input.setAttribute('required', 'required')); // Add required to other inputs
                } else {
                    selectVariationName.classList.add('d-none'); // Hide the dropdown
                    selectField.removeAttribute('required'); // Remove required from dropdown
                    inputs.forEach(input => input.removeAttribute('required')); // Remove required from other inputs
                }
            });
        });
    </script>

    <script>
        // Function to generate the first form
        function generateFirstForm(randomId, selectedVariationName, selectedVariationId) {
            return `
        <div class="row product-variation-data mb-4 mt-4" id="formSection${randomId}" data-variation-id="${selectedVariationId}">
            <div class="col-md-12">
                <div class="col-md-4 mt-4 mx-auto">
                   <div class="form-group d-flex" style="background: #242d3e; border: 0;outline: 0;border-radius: 20px;padding:4px;align-items: center;justify-content: center;">
                        <label for="selected_variation_name_id" style="color:#fff;margin-top:7px;">Selected Variation Name : <span style="color:#fff;padding:6px;">${selectedVariationName}</span></label>
                        <input type="hidden" name="selected_variation_name_id[]" value="${selectedVariationId}" class="form-control form__field">
                    </div>
                </div>
                <button type="button" class="custom_btn_sm_back custom_btn btn-sm float-right addSelectedProductVariation" data-variation-id="${selectedVariationId}" data-select-variation-name="${selectedVariationName}">
                    <i class="fas fa-plus"></i>
                    Add Variation
                </button>
                <button type="button" class="custom_btn_sm_back custom_btn btn-sm float-right productVariationRemoveBtn" data-variation-id="${selectedVariationId}">
                    <i class="fas fa-trash-alt"></i>
                    AllRemove
                </button>
            </div>

 <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="option_name[]">Option Name:</label>
                    <input type="text" name="option_name[]"
                           class="form-control form__field"
                           placeholder="Enter Option Name"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="variation_grams[]">Variation Grams:</label>
                    <input type="number" name="variation_grams[]"
                           class="form-control form__field"
                           placeholder="Enter Variation Grams"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="variant_inventory_qty[]">Variant Inventory Qty:</label>
                    <input type="text" name="variant_inventory_qty[]"
                           class="form-control form__field"
                           placeholder="Enter Variant Inventory Qty"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="variant_price[]">Variant Price / Discount / Sale Price:</label>
                    <input type="text" name="variant_price[]"
                           class="form-control form__field"
                           placeholder="Enter Variant Price"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="variant_compare_at_price[]">Variant Compare At Price / Main Price:</label>
                    <input type="text" name="variant_compare_at_price[]"
                           class="form-control form__field"
                           placeholder="Enter Variant Compare At Price"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="cost_per_item[]">Cost Per Item /Product Price:</label>
                    <input type="text" name="cost_per_item[]"
                           class="form-control form__field"
                           placeholder="Enter Cost Per Item"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>
            <div class="col-md-6 mt-4">
            <div class="form-group">
                <label for="variationImageInput${randomId}">Variation Image:</label>
                <input type="file" name="variation_image[]" id="variationImageInput${randomId}"
                       class="form-control visually-hidden" required>
                <label for="variationImageInput${randomId}" class="file-input-label form__field form-control">
                    <i class="fas fa-camera"></i> Choose file
                </label>
            </div>
            <img id="variationImagePreview${randomId}" src="{{ asset('upload/No-Image.png') }}"
                 class="card-img-top" style="height:100px; width:200px;" />
        </div>
        </div>`;
        }

        // Function to generate the second form
        function generateSecondForm(randomId, selectedVariationId) {
            return `
        <div class="row product-variation-data mb-4 mt-4" id="formSection${randomId}" data-variation-id="${selectedVariationId}">
            <div class="col-md-12">
                <button type="button" class="custom_btn_sm_back custom_btn btn-sm float-right selectedProductVariationRemoveBtn">
                    <i class="fas fa-trash-alt"></i>
                    Remove
                </button>
            </div>
            <input type="hidden" name="selected_variation_name_id[]" value="${selectedVariationId}" class="form-control form__field">

 <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="option_name[]">Option Name:</label>
                    <input type="text" name="option_name[]"
                           class="form-control form__field"
                           placeholder="Enter Option Name"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="variation_grams[]">Variation Grams:</label>
                    <input type="number" name="variation_grams[]"
                           class="form-control form__field"
                           placeholder="Enter Variation Grams"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="variant_inventory_qty[]">Variant Inventory Qty:</label>
                    <input type="text" name="variant_inventory_qty[]"
                           class="form-control form__field"
                           placeholder="Enter Variant Inventory Qty"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="variant_price[]">Variant Price / Discount / Sale Price:</label>
                    <input type="text" name="variant_price[]"
                           class="form-control form__field"
                           placeholder="Enter Variant Price"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="variant_compare_at_price[]">Variant Compare At Price / Main Price:</label>
                    <input type="text" name="variant_compare_at_price[]"
                           class="form-control form__field"
                           placeholder="Enter Variant Compare At Price"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="cost_per_item[]">Cost Per Item /Product Price:</label>
                    <input type="text" name="cost_per_item[]"
                           class="form-control form__field"
                           placeholder="Enter Cost Per Item"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>
              <div class="col-md-6 mt-4">
            <div class="form-group">
                <label for="variationImageInput${randomId}">Variation Image:</label>
                <input type="file" name="variation_image[]" id="variationImageInput${randomId}"
                       class="form-control visually-hidden" required>
                <label for="variationImageInput${randomId}" class="file-input-label form__field form-control">
                    <i class="fas fa-camera"></i> Choose file
                </label>
            </div>
            <img id="variationImagePreview${randomId}" src="{{ asset('upload/No-Image.png') }}"
                 class="card-img-top" style="height:100px; width:200px;" />
        </div>
        </div>`;
        }

        $(document).on('change', '.selectVariationName select', function () {
            let selectedOptionText = $(this).find('option:selected').text();
            let selectedOptionId = $(this).find('option:selected').val();

            if (selectedOptionText !== "Select variation name" && selectedOptionId !== "") {
                // Check if form already exists for this variation
                if ($(`.product-variation-data[data-variation-id="${selectedOptionId}"]`).length > 0) {
                    alert("This variation is already added.");
                    return; // Exit if the form for this variation already exists
                }

                // Generate and append the first form (generateFirstForm)
                let randomId = Math.floor(Math.random() * 10000);
                let newFirstForm = generateFirstForm(randomId, selectedOptionText, selectedOptionId);

                // Sanitize the variation name (replace spaces and special characters)
                let sanitizedVariationName = selectedOptionText
                    .replace(/\s+/g, '_')     // Replace spaces with underscores
                    .replace(/[&]/g, 'and')    // Replace '&' with 'and'
                    .toLowerCase();           // Convert to lowercase

                let variationContainerClass = sanitizedVariationName + 'Section';

                // Ensure the container exists, if not create one
                let container = $('.addProductVariationField .' + variationContainerClass);
                if (container.length === 0) {
                    // Dynamically create the container if it doesn't exist
                    $('.addProductVariationField').append('<div class="' + variationContainerClass + '"></div>');
                    container = $('.addProductVariationField .' + variationContainerClass); // Get the newly created container
                }

                // Append the newFirstForm to the dynamically created or found container
                container.append(newFirstForm);
            }
        });


        // Handle "Add Variation" button click to append the second form
        $(document).on('click', '.addSelectedProductVariation', function () {
            let selectedVariationId = $(this).data('variation-id');

            // Ensure a variation name is selected before proceeding
            let selectedVariationName = $(this).data('select-variation-name') // Get the selected variation name

            console.log(selectedVariationName)
            if (!selectedVariationName) {
                alert("Please select a variation name first.");
                return; // Exit if no variation is selected
            }

            let randomId = Math.floor(Math.random() * 10000);

            // Generate and append the second form (generateSecondForm)
            let newSecondForm = generateSecondForm(randomId, selectedVariationId);

            // Sanitize the variation name for the class name
            let sanitizedVariationName = selectedVariationName
                .replace(/\s+/g, '_')     // Replace spaces with underscores
                .replace(/[&]/g, 'and')    // Replace '&' with 'and'
                .toLowerCase();           // Convert to lowercase

            // Log the container class for debugging
            let variationContainerClass = sanitizedVariationName + 'Section'; // e.g., peaches_and_cream_concealerSection
            console.log(variationContainerClass); // This will show the class name in the console for debugging.


            // Ensure the container exists, if not create one
            let container = $('.addProductVariationField .' + variationContainerClass);
            if (container.length === 0) {
                // Dynamically create the container if it doesn't exist
                $('.addProductVariationField').append('<div class="' + variationContainerClass + '"></div>');
                container = $('.addProductVariationField .' + variationContainerClass); // Get the newly created container
            }

            // Append the newSecondForm to the dynamically created or found container
            container.append(newSecondForm);

            // To get the last selected variation option, we can check the select dropdown
            let lastSelectedOption = $('.selectVariationName select option:selected').last();
            let lastSelectedOptionId = lastSelectedOption.val();
            console.log('Last selected variation ID:', lastSelectedOptionId); // Log the last variation ID
        });

        // Handle "AllRemove" button click to remove forms for the same variation
        $(document).on('click', '.productVariationRemoveBtn', function () {
            let selectedVariationId = $(this).data('variation-id');

            // Remove all forms related to the selected variation ID
            $(`[data-variation-id="${selectedVariationId}"]`).remove();
        });

        // Handle individual "Remove" button for second forms
        $(document).on('click', '.selectedProductVariationRemoveBtn', function () {
            $(this).closest('.product-variation-data').remove();
        });
    </script>

@endsection