@extends('admin.layouts.dashboard')
@php
$title = empty($item) ? 'Add Item' : 'Edit Item';
$button_text = empty($item) ? 'Submit' : 'Update';
@endphp
@section('title', $title)
@section('content')
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<style>
.close-img {
    position: absolute;
    right: 12px;
    color: #3a3b45;
    background-color: #dee2e6;
    font-size: 20px;
    padding: 5px;
    border-radius: 50%;
}
.steps {
    color: black;
}
.select2-container--default .select2-search--inline .select2-search__field {
    padding: 6px;
}
.custom-delete-button {
    position: absolute;
    top: -10px;
    right: 5px;
    border: none;
    background-color: rgba(255, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    line-height: 1; /* Ensure text is centered */
}

</style>
@if(!empty($item))
<form method="POST" action="{{ route('admin.items.update', $item) }}" enctype="multipart/form-data"
    onsubmit="loader(true)">
    @method('put')
    @else
    <form method="POST" action="{{ route('admin.items.store') }}" enctype="multipart/form-data" onsubmit="loader(true)">
        @endif
        @csrf
        <div class="container-fluid">
            <div class="row d-flex justify-content-center">
                @if (Session::has('failure'))
                <div class="alert alert-dismissable alert-danger">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span> </button>
                    {{ Session::get('failure') }}
                </div>
                @endif
                <div class="col-lg-2 col-md-4 p-3  text-center a" id="general_click">
                    <h4 class="steps bg-active bg-shad">01</h4>
                    <h5 class="pinkit">General Info.</h5>
                    <p class="psmall">Setup Basic Product Details</p>
                </div>
                <!-- <div class="col-lg-2 col-md-4 p-3 text-center a" id="inventory_click">
                    <h4 class="steps bg-shad">02</h4>
                    <h5>Inventory Details</h5>
                    <p class="psmall">Stock & Pricing Options</p>
                </div> -->
                <!-- <div class="col-lg-2 col-md-4 p-3 text-center a" id="variant_click">
                    <h4 class="steps bg-shad">03</h4>
                    <h5>Options & Variants</h5>
                    <p class="psmall">Add Option details</p>
                </div> -->
                <!-- <div class="col-lg-2 col-md-4 p-3 text-center a" id="attribute_click">
                    <h4 class="steps bg-shad">02</h4>
                    <h5>Product Attribute</h5>
                    <p class="psmall">Product Specifications</p>
                </div> -->
                <div class="col-lg-2 col-md-4 p-3 text-center" id="media_click">
                    <h4 class="steps bg-shad">02</h4>
                    <h5>Product Media</h5>
                    <p class="psmall">Add Option Based Product Media</p>
                </div>
            </div>
            <div class="mt-5 mb-4 row border-0 rounded-4 bg-white px-2 py-3" id="general_div">
                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-3 pb-3">
                        <label>Category<span style="color:red;">*</span></label>
                        <select class="selectpicker form-control1 rounded-2" id="category" name="category"
                            value="{{ !empty($item->category_id) ? $item->category_id : "" }}" required="">
                            <option value="" disabled="" hidden="" selected>Category</option>
                            @foreach($categories as $category)
                            <option value="{{ $category->id }}" @if(!empty($item->category_id)) @if($item->category_id
                                == $category->id) selected @endif @endif>{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-6 pb-3">
                        <label>Product Code<span style="color:red;">*</span></label>
                        <input type="text" name="product_code" id="product_code" class="form-control" required=""
                            placeholder="Product Code" value="{{ !empty($item->code) ? $item->code : "" }}"
                            oninput="checkCode(this.value)" />
                        <span style="display:none" id="code_msg"></span>
                    </div>
                    <div class="col-md-12 col-lg-3 form-outline pb-3">
                        <label>Product Title<span style="color:red;">*</span></label>
                        <input type="text" name="product_title" id="" placeholder="Product title" class="form-control"
                            value="{{ !empty($item->name) ? $item->name : "" }}" required="">
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-3 pb-3 d-none">
                        <label>Selling Type</label>
                        <select class="selectpicker form-control1 rounded-2" id="selling_type" name="selling_type"
                            value="{{ !empty($item->selling_type) ? $item->selling_type : "" }}">
                            <option value="" disabled="" hidden="" selected>Select Selling Type</option>
                            <option value="buy" selected @if(!empty($item->selling_type)) @if($item->selling_type == 'buy')
                                selected @endif @endif >Buy</option>
                            <option value="rent" @if(!empty($item->selling_type)) @if($item->selling_type == 'rent')
                                selected @endif @endif >Rent</option>
                            {{-- <option value="both" @if(!empty($item->selling_type)) @if($item->selling_type == 'both')
                                selected @endif @endif >Both</option> --}}
                        </select>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-12 pb-3">
                        <label>Description</label>
                        <textarea id="description" name="description" class="form-control2"
                            value="">{{ !empty($item->description) ? $item->description : "" }}</textarea>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="d-flex justify-content-end">

                        <!-- <a href="/admin/items/create" class="btn-yellow-all " data-bs-toggle="modal"
                            data-bs-target="">DISCARD</a> -->
                        <button class="ml-3 p-0" id="general_next" style="border: none;"> <a href="#"
                                class="btn-yellow-all">NEXT <i class="fas text-black fa-arrow-right"></i> </a></button>
                    </div>
                </div>
            </div>
            <!-- --------------------------------Section 2--------------------------- -->
            <div class="mt-5 mb-4 row border-0 rounded-4 bg-white px-2 py-3 d-none " id="inventory_div">
                <div class="row ">
                    <div class="col-md-12 col-lg-8">
                        <p class="ptext"> Backsplash</p>
                    </div>
                    <div class="col-md-12 col-lg-4 form-outline">
                        <span class="ml-3 mr-4">
                            <input class="form-check-input" type="radio" name="gift_wrap" value="1"
                                {{ isset($item->gift_wrap) && $item->gift_wrap == 1 ? 'checked' : '' }}>
                            <label class="form-check-label clabel" for="flexRadioDefault1">
                                Yes
                            </label>
                        </span>
                        <span class="ml-3">
                            <input class="form-check-input" type="radio" name="gift_wrap" value="0"
                                {{ isset($item->gift_wrap) && $item->gift_wrap == 0 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                No
                            </label>
                        </span>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-md-12 col-lg-8">
                        <p class="ptext"> Do you want to track inventory for this product?</p>
                    </div>
                    <div class="col-md-12 col-lg-4 form-outline">
                        <span class="ml-3 mr-4">
                            <input class="form-check-input" type="radio" name="track_inventory" value="1"
                                {{ isset($item->track_inventory) && $item->track_inventory == 1 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                Yes
                            </label>
                        </span>
                        <span class="ml-3">
                            <input class="form-check-input" type="radio" name="track_inventory" value="0"
                                {{ isset($item->track_inventory) && $item->track_inventory == 0 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                No
                            </label>
                        </span>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-md-12 col-lg-8">
                        <p class="ptext"> You want to sell this product as?</p>
                    </div>
                    <div class="col-md-12 col-lg-4 form-outline">
                        <span class="ml-3 mr-4">
                            <input class="form-check-input" type="radio" name="selling_at" value="shipping"
                                {{ isset($item->selling_at) && $item->selling_at == 'shipping' ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                Shipping
                            </label>
                        </span>
                        <span class="ml-3 mr-4">
                            <input class="form-check-input" type="radio" name="selling_at" value="pickup"
                                {{ isset($item->selling_at) && $item->selling_at == 'pickup' ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                Pick Up
                            </label>
                        </span>
                        <span class="ml-3">
                            <input class="form-check-input" type="radio" name="selling_at" value="both"
                                {{ isset($item->selling_at) && $item->selling_at == 'both' ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                Both
                            </label>
                        </span>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-md-12 col-lg-8">
                        <p class="ptext"> Continue selling when out of stock</p>
                    </div>
                    <div class="col-md-12 col-lg-4 form-outline">
                        <span class="ml-3 mr-4">
                            <input class="form-check-input" type="radio" name="continue_selling" value="1"
                                {{ isset($item->continue_selling_when_stock_out) && $item->continue_selling_when_stock_out == 1 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                Yes
                            </label>
                        </span>
                        <span class="ml-3">
                            <input class="form-check-input" type="radio" name="continue_selling" value="0"
                                {{ isset($item->continue_selling_when_stock_out) && $item->continue_selling_when_stock_out == 0 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                No
                            </label>
                        </span>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-md-12 col-lg-8">
                        <p class="ptext">Available for Cash on Delivery</p>
                    </div>
                    <div class="col-md-12 col-lg-4 form-outline">
                        <span class="ml-3 mr-4">
                            <input class="form-check-input" type="radio" name="cash_on_delivery" value="1"
                                {{ isset($item->cash_on_delivery) && $item->cash_on_delivery == 1 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                Yes
                            </label>
                        </span>
                        <span class="ml-3">
                            <input class="form-check-input" type="radio" name="cash_on_delivery" value="0"
                                {{ isset($item->cash_on_delivery) && $item->cash_on_delivery == 0 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                No
                            </label>
                        </span>
                    </div>
                </div>
                <div class="row  mt-5">
                    <div class="d-flex justify-content-end">
                        <!-- <a href="/admin/items/create" class="btn-yellow-all" data-bs-toggle="modal"
                            data-bs-target="">DISCARD</a> -->
                        <span class="ml-1 mr-1" id="inventory_previous"> <a href="#" class="btn-yellow-all"><i
                                    class="fas text-black fa-arrow-left"></i> PREVIOUS</a></span>
                        <span class="ml-1 mr-1" id="inventory_next"> <a href="#" class="btn-yellow-all">NEXT <i
                                    class="fas text-black fa-arrow-right"></i> </a></span>
                    </div>
                </div>
            </div>
            <!-- ---------------------------------------------section4-------------------------- -->
            <div class="bg-white px-2 py-3 mt-5 mb-4 border-0 row rounded-4 d-none" id="attribute_div">
                <div class="row ">
                    <h5>Attributes</h5>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-12 pb-3">
                        <label>Key Features</label>
                        <textarea id="key_features" name="key_features" class="form-control2"
                            value="">{{ !empty($item->key_features	) ? $item->key_features	 : "" }}</textarea>
                    </div>
                </div>
                <div class="mt-5">
                    <div class="d-flex justify-content-end">
                        <!-- <a href="/admin/items/create" class="btn-yellow-all " data-bs-toggle="modal"
                            data-bs-target="">DISCARD</a> -->
                        <span class="ml-1 mr-1" id="attribute_previous"> <a href="#" class="btn-yellow-all"><i
                                    class="fas text-black fa-arrow-left"></i> PREVIOUS</a></span>
                        <span class="ml-1 mr-1" id="attribute_next"> <a href="#" class="btn-yellow-all">NEXT <i
                                    class="fas text-black fa-arrow-right"></i> </a></span>
                    </div>
                </div>
            </div>
            <!-- ---------------------------------------------section5-------------------------- -->
            <div class="d-none bg-white mt-5 rounded-4 px-2 py-3 row mb-4" id="media_div">
                    <div class="col-lg-3 col-md-12 col-sm-12">
                        <p class="ptext"> Images <span style="color:red;">*</span></p>
                    </div>
                    <div class="col-lg-9">
                        <input type="file" name="product_image[]" id="imgInp" accept="image/*" class="file-box"
                            {{-- onchange="image_upload()" --}}multiple onchange="imageUpload()" />
                        <p class="text-secondary mt-2"><b> Image Disclaimer: </b>File type must be a .jpg,
                            .gif or .png smaller than 2MB and at least 800x1067 in 3:4 aspect ratio
                        </p>
                    </div>
                    <div id="productImagePreview" class="mt-3"></div>
                    @if(empty($item))
                      
                    @else
                        @php
                            $jsonString = $item->image;
                            $sanitizedString = str_replace('\/', '/', $jsonString);
                            $images = json_decode($sanitizedString, true);
                        @endphp
                        @if(!empty($images) && is_array($images))
                            <div class="row">
                                @foreach ($images as $image)
                                    <div class="col-md-4 position-relative mb-3" id="image-{{ $loop->index }}">
                                        <img src="{{ asset('storage/' . $image) }}" alt="Product Image" class="img-thumbnail"
                                            style="width: 100%; height: auto;">
                                        <button type="button" class="btn btn-danger btn-sm position-absolute custom-delete-button" 
                                            onclick="deleteImage('{{ $image }}', {{ $loop->index }}, {{ $item->id }})">
                                            X
                                        </button>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p>No images available.</p>
                        @endif
                    @endif
                    <div class="col-md-12 col-lg-3 form-outline p-2">
                        <p class="ptext">Video</p>
                    </div>
                    <div class="col-md-12 col-lg-9 form-outline p-2">
                        <input type="text" name="video_url" id="video_url" placeholder="Video Url" class="form-control"
                            value="{{ !empty($item->video) ? $item->video : "" }}">
                    </div>
                    <div class="col-md-12 col-lg-3 form-outline p-2">
                        <p class="ptext">Product Published</p>
                    </div>
                    <div class="col-md-12 col-lg-9 form-outline p-2">
                        <select class="selectpicker form-control1 rounded-2" id="publish" name="publish" required=""
                            value="{{ !empty($item->is_active) ? $item->is_active : "" }}">
                            <option value="" disabled="">Product Published</option>
                            <option value="1" selected="">Yes</option>
                            <option value="0">No</option>
                        </select>
                    </div>
                    <div class="col-md-12 col-lg-3 form-outline p-2">
                        <p class="ptext">Product Published From</p>
                    </div>
                    <div class="col-md-12 col-lg-9 form-outline p-2">
                        <input type="date" name="publish_date"
                            value="{{ !empty($item->publish_date) ? $item->publish_date : '' }}" id="" class="form-control">
                    </div>
                    <div class="mt-5">
                        <div class="d-flex justify-content-end">
                            <!-- <a href="/admin/items/create" class="btn-yellow-all " data-bs-toggle="modal"
                                data-bs-target="">DISCARD</a> -->
                            <span class="ml-1 mr-1" id="media_previous"> <a href="#" class="btn-yellow-all"><i
                                        class="fas text-black fa-arrow-left"></i> PREVIOUS</a></span>
                            <button class="btn-yellow-all" id="lastSubmit">{{ $button_text }} </button>
                        </div>
                    </div>
                </div>
                <button class="buttonload d-none" id="loading">
                    <i class="fa fa-spinner fa-spin"></i>
                </button>
            </div>
    </form>
    </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>- -->
    <!-- <script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script> -->
    <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script>
    function deleteImage(imagePath, index ,id) {
        // Confirm deletion
        if (confirm("Are you sure you want to delete this image?")) {
            // Send an AJAX request to delete the image
            $.ajax({
                url: '{{ route("admin.items.deleteImage") }}',  // Your delete image route
                type: 'DELETE',
                data:
                {
                    _token:'{{ csrf_token() }}',
                    image_path: imagePath , // Send the image path to be deleted
                    item_id:id,
                },
                success: function(response) 
                {
                    // On success, remove the image and its delete button from the UI
                    $('#image-' + index).remove();
                    alert('Image deleted successfully');
                },
                error: function(xhr, status, error) {
                    // Handle errors if any
                    console.log(xhr,status,error);
                    alert('Failed to delete the image');
                }
            });
        }
    }
    $('#related_item').select2({
        placeholder: "Select products",
        allowClear: true
    });
    $(document).ready(function() {
        // Handle form display based on product type selection
        $('#selling_type').on('change', function() {
            var productType = $(this).val();
            if (productType === 'buy') {
                $('#buy_form').show();
                $('#rent_form').hide();
                $('.price-field').show();
                $('.rent-fields').hide();
                $('#return_days_container').show();
            } else if (productType === 'rent') {
                $('#buy_form').hide();
                $('#rent_form').show();
                $('.price-field').hide();
                $('.rent-fields').show();
                $('#return_days_container').hide(); // Hide the container
                $('#return').val('');
            }
        });
        // Trigger change event on page load to display the correct form
        $('#selling_type').trigger('change');
    });
    </script>
    <script>
    ClassicEditor
        .create(document.querySelector('#key_features'))
        .catch(error => {
            console.error(error);
        });
    ClassicEditor
        .create(document.querySelector('#description'))
        .catch(error => {
            console.error(error);
        });
    </script>
    <script>
    let fileArray = [];

    function imageUpload() {
        const input = document.getElementById('imgInp');
        const previewContainer = document.getElementById('productImagePreview');

        // Update the fileArray with the selected files
        fileArray = Array.from(input.files);

        // Clear previous previews
        previewContainer.innerHTML = '';

        // Loop through the files
        for (let i = 0; i < fileArray.length; i++) {
            const file = fileArray[i];

            // Check if file is an image
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    // Create a new container for the image and delete button
                    const imageContainer = document.createElement('div');
                    imageContainer.style.position = 'relative';
                    imageContainer.style.display = 'inline-block';
                    imageContainer.style.marginRight = '10px';

                    // Create a new image element
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.classList.add('img-thumbnail');
                    
                    img.style.width = '150px'; // Set width as desired

                    // Create a delete button
                    const deleteButton = document.createElement('button');
                    deleteButton.textContent = 'X';
                    deleteButton.classList.add('btn', 'btn-danger');
                    deleteButton.style.position = 'absolute';
                    deleteButton.style.top = '5px';
                    deleteButton.style.right = '5px';
                    deleteButton.style.border = 'none';
                    deleteButton.style.backgroundColor = 'rgba(255, 0, 0, 0.7)';
                    deleteButton.style.color = 'white';
                    deleteButton.style.borderRadius = '50%';
                    deleteButton.style.width = '25px';
                    deleteButton.style.height = '25px';
                    deleteButton.style.display = 'flex';
                    deleteButton.style.alignItems = 'center';
                    deleteButton.style.justifyContent = 'center';
                    deleteButton.style.cursor = 'pointer';

                    // Append image and delete button to the container
                    imageContainer.appendChild(img);
                    imageContainer.appendChild(deleteButton);

                    // Append the container to the preview container
                    previewContainer.appendChild(imageContainer);

                    // Add click event to delete button
                    deleteButton.addEventListener('click', function() {
                        // Remove image from the preview
                        previewContainer.removeChild(imageContainer);

                        // Remove file from fileArray
                        const index = fileArray.indexOf(file);
                        if (index > -1) {
                            fileArray.splice(index, 1);
                            updateFileInput();
                        }
                    });
                }

                // Read the file
                reader.readAsDataURL(file);
            }
        }
    }

    function updateFileInput() {
        const dataTransfer = new DataTransfer();
        fileArray.forEach(file => dataTransfer.items.add(file));
        document.getElementById('imgInp').files = dataTransfer.files;
    }
    document.getElementById('general_next').addEventListener('click', function(event) {
        let isValid = true;
        // Select the form fields
        const category = document.getElementById('category');
        const productCode = document.getElementById('product_code');
        const productTitle = document.querySelector('input[name="product_title"]');
        const selling_type = document.getElementById('selling_type');
        // Clear previous validation errors
        const errorMessages = document.querySelectorAll('.error-message');
        errorMessages.forEach(function(errorMessage) {
            errorMessage.remove();
        });
        // Function to display error message
        const showError = (element, message) => {
            const error = document.createElement('span');
            error.classList.add('error-message');
            error.style.color = 'red';
            error.innerHTML = message;
            element.parentElement.appendChild(error);
            isValid = false;
        };
        // Validate Category
        if (category.value === '') {
            showError(category, 'Please select a category');
        }
        if (selling_type.value === '') {
            showError(selling_type, 'Please select a Selling Type');
        }
        // Validate Product Code
        if (productCode.value.trim() === '') {
            showError(productCode, 'Product code is required');
        }
        // Validate Product Title
        if (productTitle.value.trim() === '') {
            showError(productTitle, 'Product title is required');
        }
        // If the form is valid, execute the section toggle logic
        if (isValid) {
            // Hide the general section and show the inventory section
            document.getElementById('general_div').classList.add('d-none');
           // document.getElementById('attribute_div').classList.remove('d-none');
            document.getElementById('media_div').classList.remove('d-none');
            // Toggle the active state on the buttons
            document.getElementById('general_click').classList.remove('bg-active');
          //  document.getElementById('attribute_click').classList.add('bg-active');
            document.querySelector('#media_click h4').classList.add('bg-active');

            document.querySelector('#general_click .psmall').style.color = '#797474';
           // document.querySelector('#attribute_click .psmall').style.color = 'white';
            // document.querySelector('#media_click .psmall').style.color = 'white';
        } else {
            // If form is not valid, prevent submission
            event.preventDefault();
        }
    });


    document.getElementById('attribute_next').addEventListener('click', function(event) {
        let isValid = true;
        // Clear previous validation errors
        const errorMessages = document.querySelectorAll('.error-message');
        errorMessages.forEach(function(errorMessage) {
            errorMessage.remove();
        });
        // Function to display error message
        const showError = (element, message) => {
            const error = document.createElement('span');
            error.classList.add('error-message');
            error.style.color = 'red';
            error.innerHTML = message;
            element.parentElement.appendChild(error);
            isValid = false;
        };
        const keyFeatures = document.getElementById('key_features');

        // Validate Key Features
        if (keyFeatures.value.trim() === '') { // `.trim()` to remove extra spaces
            // showError(keyFeatures, 'Please enter the key features');
        } else {
            console.log('Key Features:', keyFeatures.value);
        }
        // If form is not valid, prevent submission
        if (!isValid) {
            event.preventDefault();
        } else {
            // Move to the next tab if form is valid
            document.getElementById('general_div').classList.add('d-none');
            document.getElementById('attribute_div').classList.add('d-none');
            document.getElementById('media_div').classList.remove('d-none');

            document.getElementById('general_click').classList.remove('bg-active');
            document.getElementById('attribute_click').classList.remove('bg-active');
            document.querySelector('#media_click h4').classList.add('bg-active');

            document.querySelector('#general_click .psmall').style.color = '#797474';
            document.querySelector('#attribute_click .psmall').style.color = '#797474';
            document.querySelector('#media_click .psmall').style.color = 'white';
        }
    });
    // Click event for the "NEXT" button
    document.addEventListener('DOMContentLoaded', function() {
        // Get the button and image input element
        const lastSubmitButton = document.getElementById('lastSubmit');
        const imageInput = document.getElementById('imgInp');
        // Function to check if the image input has a file selected
        function checkImageField() {
            return imageInput.files.length > 0;
        }
        // Event listener for the lastSubmit button
        lastSubmitButton.addEventListener('click', function(event) {
            if (!checkImageField()) {
                event.preventDefault(); // Prevent form submission
                alert('Please upload an image before submitting.');
            }
        });
    });

    function isNumberKey(evt, obj) {
        // Only ASCII character in that range allowed
        // var ASCIICode = (evt.which) ? evt.which : evt.keyCode
        // if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
        //     return false;
        // return true;
        var charCode = (evt.which) ? evt.which : event.keyCode
        var value = obj.value;
        var dotcontains = value.indexOf(".") != -1;
        if (dotcontains)
            if (charCode == 46) return false;
        if (charCode == 46) return true;
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    }

    function checkValidPrice() {
        var cost_price = $('#cost_price').val();
        var sale_price = $('#sale_price').val();

        if (cost_price < sale_price) {
            $('#sale_price_Required_error').css('display', 'block');
        }
    }

    function checkValidPrice1() {
        var unit_price = $('#unit_price').val();
        var sale_price = $('#sale_price').val();
        if (sale_price < unit_price) {

            $('#sale_price_Required_error').css('display', 'block');
        }
    }

    function image_upload() {
        const fileInput = document.getElementById('imgInp');
        var files = [...fileInput.files];
        var i = 0;
        for (const f of files) {
            document.getElementById('blah' + i).classList.remove('d-none');
            document.getElementById('icon' + i).classList.remove('d-none');
            document.getElementById('blah' + i).src = URL.createObjectURL(f);

            i++;
        }
    }

    function image_upload1() {
        const fileInput = document.getElementById('image');
        var file = fileInput.files;
        if (fileInput.files[0].type == "video/mp4") {
            $('#blah0_v').removeClass('d-none');
            document.querySelector('.vedio1').classList.remove('d-none');
            document.querySelector('.image1').classList.add('d-none');
            document.getElementById('blah0').src = URL.createObjectURL(fileInput.files[0]);
        } else {
            if (document.getElementById('blah0').tagName == "VIDEO") {
                document.querySelector('.image1').classList.remove('d-none');
                document.querySelector('.vedio1').classList.add('d-none');
                document.getElementById('blah0').src = URL.createObjectURL(fileInput.files[0]);
            } else {
                document.querySelector('.vedio1').classList.add('d-none');
                document.querySelector('.image1').classList.remove('d-none');
                document.getElementById('blah0').src = URL.createObjectURL(fileInput.files[0]);
            }
        }
        //  document.getElementById('blah0').classList.remove('d-none');
        document.getElementById('icon1').classList.remove('d-none');
        document.getElementById('delete_image').value = 1;
    }

    function icon_click1() {
        const fileInput = document.getElementById('image');
        var files = [...fileInput.files];
        files.splice(1, 1);
        if (document.querySelector('.vedio2').classList.contains('vedio2')) {
            document.querySelector('.vedio2').classList.add('d-none');
        } else {
            document.querySelector('.image2').classList.add('d-none');
        }
        document.getElementById('blah0').classList.add('d-none');
        document.getElementById('delete_image').value = null;
        document.getElementById('icon1').classList.add('d-none')
    }

    function image_upload2() {
        const fileInput = document.getElementById('image1');
        var file = fileInput.files;
        if (fileInput.files[0].type == "video/mp4") {
            $('#blah1_v').removeClass('d-none');
            document.querySelector('.vedio2').classList.remove('d-none');
            document.querySelector('.image2').classList.add('d-none');
            document.getElementById('blah1').src = URL.createObjectURL(fileInput.files[0]);
        } else {
            if (document.getElementById('blah2').tagName == "VIDEO") {
                document.querySelector('.image2').classList.remove('d-none');
                document.querySelector('.vedio2').classList.add('d-none');
                document.getElementById('blah1').src = URL.createObjectURL(fileInput.files[0]);
            } else {
                document.querySelector('.vedio2').classList.add('d-none');
                document.querySelector('.image2').classList.remove('d-none');
                document.getElementById('blah1').src = URL.createObjectURL(fileInput.files[0]);
            }
        }
        document.getElementById('icon2').classList.remove('d-none');
        document.getElementById('blah1').src = URL.createObjectURL(fileInput.files[0]);
        document.getElementById('delete_image1').value = 1;
    }

    function icon_click2() {
        const fileInput = document.getElementById('image');
        var files = [...fileInput.files];
        files.splice(1, 1);
        if (document.querySelector('.vedio2').classList.contains('vedio2')) {
            document.querySelector('.vedio2').classList.add('d-none');
        } else {
            document.querySelector('.image2').classList.add('d-none');
        }
        document.getElementById('blah1').classList.add('d-none');
        document.getElementById('delete_image1').value = null;
        document.getElementById('icon2').classList.add('d-none')
    }

    function image_upload3() {
        const fileInput = document.getElementById('image2');
        var file = fileInput.files;
        if (fileInput.files[0].type == "video/mp4") {
            $('#blah2_v').removeClass('d-none');
            document.querySelector('.vedio3').classList.remove('d-none');
            document.querySelector('.image3').classList.add('d-none');
            document.getElementById('blah2').src = URL.createObjectURL(fileInput.files[0]);
        } else {
            if (document.getElementById('blah3').tagName == "VIDEO") {
                document.querySelector('.image3').classList.remove('d-none');
                document.querySelector('.vedio3').classList.add('d-none');
                document.getElementById('blah2').src = URL.createObjectURL(fileInput.files[0]);
            } else {
                document.querySelector('.vedio3').classList.add('d-none');
                document.querySelector('.image3').classList.remove('d-none');
                document.getElementById('blah2').src = URL.createObjectURL(fileInput.files[0]);
            }
        }
        document.getElementById('icon3').classList.remove('d-none');
        document.getElementById('delete_image2').value = 1;
    }

    function icon_click3() {
        const fileInput = document.getElementById('image');
        var files = [...fileInput.files];
        files.splice(1, 1);
        if (document.querySelector('.vedio3').classList.contains('vedio3')) {
            document.querySelector('.vedio3').classList.add('d-none');
        } else {
            document.querySelector('.image3').classList.add('d-none');
        }
        document.getElementById('blah2').classList.add('d-none');
        document.getElementById('delete_image2').value = null;
        document.getElementById('icon3').classList.add('d-none')
    }

    function image_upload4() {
        const fileInput = document.getElementById('image3');
        var file = fileInput.files;
        if (fileInput.files[0].type == "video/mp4") {
            $('#blah3_v').removeClass('d-none');
            document.querySelector('.vedio4').classList.remove('d-none');
            document.querySelector('.image4').classList.add('d-none');
            document.getElementById('blah3').src = URL.createObjectURL(fileInput.files[0]);
        } else {
            if (document.getElementById('blah3').tagName == "VIDEO") {
                document.querySelector('.image4').classList.remove('d-none');
                document.querySelector('.vedio4').classList.add('d-none');
                document.getElementById('blah3').src = URL.createObjectURL(fileInput.files[0]);
            } else {
                document.querySelector('.vedio4').classList.add('d-none');
                document.querySelector('.image4').classList.remove('d-none');
                document.getElementById('blah3').src = URL.createObjectURL(fileInput.files[0]);
            }
        }
        document.getElementById('icon4').classList.remove('d-none');
        document.getElementById('delete_image3').value = 1;
    }

    function icon_click4() {
        const fileInput = document.getElementById('image');
        var files = [...fileInput.files];
        files.splice(1, 1);
        if (document.querySelector('.vedio4').classList.contains('vedio4')) {
            document.querySelector('.vedio4').classList.add('d-none');
        } else {
            document.querySelector('.image4').classList.add('d-none');
        }
        document.getElementById('blah3').classList.add('d-none');
        document.getElementById('delete_image3').value = null;
        document.getElementById('icon4').classList.add('d-none')
    }

    function loader(iRun) {
        var loader = document.getElementById('loading').classList;
        if (iRun) {
            loader.remove('d-none');
        } else {
            loader.add('d-none');
        }
    }
    $(document).ready(function() {
        loader(false);
        $('#icon0').click(function() {
            const fileInput = document.getElementById('imgInp');
            var files = [...fileInput.files];
            files.splice(0, 1);
            document.getElementById('blah0').classList.add('d-none');
            document.getElementById('icon0').classList.add('d-none');
        });
        $('#icon1').click(function() {
            const fileInput = document.getElementById('imgInp');
            var files = [...fileInput.files];
            files.splice(1, 1);
            document.getElementById('blah1').classList.add('d-none');
            document.getElementById('icon1').classList.add('d-none');
        });
        $('#icon2').click(function() {
            const fileInput = document.getElementById('imgInp');
            var files = [...fileInput.files];
            files.splice(2, 1);
            document.getElementById('blah2').classList.add('d-none');
            document.getElementById('icon2').classList.add('d-none');
        });
        $('#icon3').click(function() {
            const fileInput = document.getElementById('imgInp');

            var files = [...fileInput.files];

            files.splice(2, 1);
            document.getElementById('blah3').classList.add('d-none');
            document.getElementById('icon3').classList.add('d-none');

        });

        $('#general_click').click(function() {
            document.getElementById('general_div').classList.remove('d-none');
           // document.getElementById('attribute_div').classList.add('d-none');
            document.getElementById('media_div').classList.add('d-none');

            document.getElementById('general_click').classList.add('bg-active');
          //  document.getElementById('attribute_click').classList.remove('bg-active');
            document.querySelector('#media_click h4').classList.remove('bg-active');

            document.querySelector('#general_click .psmall').style.color = 'white';
          //  document.querySelector('#attribute_click .psmall').style.color = '#797474';
            document.querySelector('#media_click .psmall').style.color = '#797474';
        });

        $('#attribute_click').click(function() {

            document.getElementById('general_div').classList.add('d-none');
            document.getElementById('attribute_div').classList.remove('d-none');
            document.getElementById('media_div').classList.add('d-none');

            document.getElementById('general_click').classList.remove('bg-active');

            document.getElementById('attribute_click').classList.add('bg-active');
            document.querySelector('#media_click h4').classList.remove('bg-active');

            document.querySelector('#general_click .psmall').style.color = '#797474';
            document.querySelector('#attribute_click .psmall').style.color = 'white';
            document.querySelector('#media_click .psmall').style.color = '#797474';

        });

        $('#media_click').click(function() {
            document.getElementById('general_div').classList.add('d-none');
          //  document.getElementById('attribute_div').classList.add('d-none');
            document.getElementById('media_div').classList.remove('d-none');

            document.getElementById('general_click').classList.remove('bg-active');
           // document.getElementById('attribute_click').classList.remove('bg-active');
            document.querySelector('#media_click h4').classList.add('bg-active');

            document.querySelector('#general_click .psmall').style.color = '#797474';
           // document.querySelector('#attribute_click .psmall').style.color = '#797474';
            document.querySelector('#media_click .psmall').style.color = 'white';
        });
        // for previous button
        $('#inventory_previous').click(function() {

            document.getElementById('general_div').classList.remove('d-none');
            document.getElementById('inventory_div').classList.add('d-none');
            document.getElementById('variant_div').classList.add('d-none');
            document.getElementById('attribute_div').classList.add('d-none');
            document.querySelector('#media_div h4').classList.add('d-none');

            document.getElementById('general_click').classList.add('bg-active');
            document.getElementById('inventory_click').classList.remove('bg-active');
            document.getElementById('variant_click').classList.remove('bg-active');
            document.getElementById('attribute_click').classList.remove('bg-active');
            document.querySelector('#media_div h4').classList.remove('bg-active');

        });

        $('#variant_previous').click(function() {

            document.getElementById('general_div').classList.add('d-none');
            document.getElementById('inventory_div').classList.remove('d-none');
            document.getElementById('variant_div').classList.add('d-none');
            document.getElementById('attribute_div').classList.add('d-none');
            document.querySelector('#media_div h4').classList.add('d-none');

            document.getElementById('general_click').classList.remove('bg-active');
            document.getElementById('inventory_click').classList.add('bg-active');
            document.getElementById('variant_click').classList.remove('bg-active');
            document.getElementById('attribute_click').classList.remove('bg-active');
            document.querySelector('#media_click h4').classList.remove('bg-active');

        });

        $('#attribute_previous').click(function() {

            document.getElementById('general_div').classList.remove('d-none');
            // document.getElementById('inventory_div').classList.add('d-none');
            // document.getElementById('variant_div').classList.remove('d-none');
            document.getElementById('attribute_div').classList.add('d-none');
            document.getElementById('media_div').classList.add('d-none');

            document.getElementById('general_click').classList.add('bg-active');
            // document.getElementById('inventory_click').classList.remove('bg-active');
            // document.getElementById('variant_click').classList.add('bg-active');
            document.getElementById('attribute_click').classList.remove('bg-active');
            document.querySelector('#media_click h4').classList.remove('bg-active');

            document.querySelector('#general_click .psmall').style.color = 'white';
            document.querySelector('#attribute_click .psmall').style.color = '#797474';
            document.querySelector('#media_click .psmall').style.color = '#797474';

        });

        $('#media_previous').click(function() {

            document.getElementById('general_div').classList.remove('d-none');
            // document.getElementById('inventory_div').classList.add('d-none');
            // document.getElementById('variant_div').classList.add('d-none');
            //document.getElementById('attribute_div').classList.remove('d-none');
            document.getElementById('media_div').classList.add('d-none');

            document.getElementById('general_click').classList.add('bg-active');
            // document.getElementById('inventory_click').classList.remove('bg-active');
            // document.getElementById('variant_click').classList.remove('bg-active');
            //document.getElementById('attribute_click').classList.add('bg-active');
            document.querySelector('#media_click h4').classList.remove('bg-active');

            document.querySelector('#general_click .psmall').style.color = 'white';
          //  document.querySelector('#attribute_click .psmall').style.color = 'white';
            document.querySelector('#media_click .psmall').style.color = '#797474';

        });

    });
    </script>
    <script>
    function updateColorName(colorPicker) {
        const parentDiv = colorPicker.nextElementSibling; // Get the wrapper div
        const colorNameElement = parentDiv.querySelector('#colorName'); // Get the <span> inside the wrapper
        const boxColorElement = parentDiv.querySelector('.box-color'); // Get the <div> with class 'box-color'

        // Update the <span> with the selected color code
        colorNameElement.textContent = colorPicker.value;

        // Update the <div> background color to the selected color
        boxColorElement.style.backgroundColor = colorPicker.value;
    }
    $(document).ready(function() {

        let optionsLen = 1;
        $(document).on('click', '.btn-add', function() {
            // alert('jhvhj');
            $(this).hide();
            optionsLen++;
            $('#more-options').append(`<div class="row mb-2">
   <div class="col-4">
   <select class="form-control" style="width: 120%;">
   <option value="size">Size</option>
   <option value="color">Color</option>
   </select>
   </div>
   <div class="col-6">
   <input class="form-control tags-input" type="text" />
   </div>
   <div class="col-2">
   <button type="button" class="btn btn-danger btn-sm btn-remove">x</button>
   <button type="button" class="btn btn-info btn-sm btn-add">+</button>
   </div>
   </div>`);
        });
        $(document).on('click', '.btn-remove', function() {
            optionsLen--;
            $(this).parent().parent().remove();
        });


        function generateVariants() {
            let variants = '';
            const selects = $('#more-options').find('select');
            for (let i = 0; i < selects.length; i++) {
                // fetching selects and setting select for each option
                const optionsValue = $(selects[i]).find(':selected').val();
                const input = $(selects[i]).closest('.row').find('input[type="text"]');
                variants += `<select name="type[]" class="form-control ${optionsValue}"></select>`;
                generateOption(input);
            }

            return variants;
        }

        $(document).ready(function() {
            function previewImage(input) {
                const fileInput = input;
                const file = fileInput.files[0];
                const previewContainer = fileInput.closest('td').querySelector('.image-preview');

                // Clear any existing preview
                previewContainer.innerHTML = '';

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

                    reader.onload = function(e) {
                        // Create an image element
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.style.width = '100px'; // Set the width for the preview
                        img.style.height = '100px'; // Set the height for the preview
                        img.style.objectFit = 'cover'; // Maintain aspect ratio

                        // Append the image to the preview container
                        previewContainer.appendChild(img);
                    };

                    // Read the file as a data URL
                    reader.readAsDataURL(file);
                }
            }

            $(document).on('change', 'input[type="file"]', function() {
                previewImage(this);
            });
            $(document).on('click', '.btn-add-row', function() {
                // $(this).hide();
                $('#tbody').append(`<tr>
            
            <td><input type="color" name="color[]" class="form-control" placeholder="Enter color" value="" onchange="updateColorName(this)"/>
            <div style="display: flex; align-items: center;">
                                    <span id="colorName">  &nbsp;&nbsp;</span>
                                    <div class="box-color" style=" width: 20px; height: 20px;"></div>
                                </div></td>
            <td><input type="text" name="variant[]"   class="form-control"  placeholder="Enter Color Name"  />
            </td>
            <td><input type="text" name="qty[]" class="form-control" placeholder="Enter qty" min="1"/></td>   
             
                                <td class="price-field" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="price[]" class="form-control" placeholder="Enter Price" />
                                </td>
                                
                               
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_weekend[]" class="form-control" placeholder="Weekend Rate" />
                                </td>
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_7days[]" class="form-control" placeholder="7-Day Rate" />
                                </td>
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_14days[]" class="form-control" placeholder="14-Day Rate" />
                                </td>
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_21days[]" class="form-control" placeholder="21-Day Rate" />
                                </td>
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_month[]" class="form-control" placeholder="Monthly Rate" />
                                </td>
            <td><input type="text" name="sku[]" class="form-control" placeholder="Enter sku" /></td>
            <td><div style="display:flex;"><input type="file" name="images[]" class="form-control" placeholder="Select Image" />
                  <div class="image-preview" style="margin-top: 10px; margin-left:15px;">
            <!-- Image preview will be shown here -->
         </div></div></td>
   <td>
       <button type="button" class="btn btn-danger btn-sm btn-remove-row">x</button>
       
       <button type="button" class="btn btn-info btn-sm btn-add-row">+</button>
       </td>
   </tr>`);
                var productType = $('#selling_type').val();
                if (productType === 'buy') {
                    $('.price-field').show();
                    $('.rent-fields').hide();
                } else if (productType === 'rent') {
                    $('.price-field').hide();
                    $('.rent-fields').show();
                }
            });
            // Handle selling_type change to toggle fields


        });

        $(document).on('click', '.btn-remove-row', function() {
            console.log('Clicked');
            $(this).parent().parent().remove();
        });

        function generateOption(ele) {
            const values = ele.val();
            const arr = values.split(' ');
            const selectedOption = $(ele).closest('.row').find('select option:selected').val();
            // const foundValues = $(`select option[value="${selectedOption}"]`).closest('.row').find('input[type="text"]').val();
            // console.log(foundValues);
            let options = '';
            for (let i = 0; i < arr.length; i++) {
                options += `<option value="${arr[i]}">${arr[i]}</option>`;
            }

            $('.size').append(options);
            // console.log($(document).find("select .size"))
            // $(document).find("."+selectedOption).append(options);
        }

    });
    </script>

    @endsection