<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<link rel="stylesheet" href="https://kainamo.com/beta-testing/wp-content/themes/salient-child/frontend/assets/front/css/all.css">
<link rel="stylesheet" href="https://kainamo.com/beta-testing/wp-content/themes/salient-child/frontend/assets/front/css/main.css">
<link rel="stylesheet" href="https://kainamo.com/beta-testing/wp-content/themes/salient-child/frontend/assets/front/css/responsive.css">
<style>

    .add_click {
        width: 100px;
        height: 90px;
    }

    h2.products_top_holder_note_lite {
        margin-bottom: 10px;
    }

    .products_top_holder_txt {
        margin-bottom: 15px;
    }
    span.tags {
        background: #084025;
        color: #fff;
        padding: 3px 6px;
        border-radius: 7px;
    }

    .container-wrap {
        padding-top: 0px !important;
    }
    .file-row img {
        height: 50px !important;
    }

    .row-template {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }

    .file-row select, .file-row input {
        margin-top: 8px;
        padding: 4px 10px;
    }
  
    .file-row {
        width: 15%;
        margin-right: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    input#file {
        margin-top: 10px;
    }

    button.remove-row {
        background-color: #328d50;
        color: #fff;
        border: 1px solid #328d50;
        padding: 5px 11px;
        height: 30px;
        margin-top: 10px;
    }
    input.quantity-input {
        background: #ffff;
        border: 1px solid #e1e1e1;
        width: 50%;
    }

    select.material-select {
        background: #ffff;
        border: 1px solid #e1e1e1;
        width: 80%;
    }
   
    .itemTypeDiv{
        display: flex;
        gap:10px;
    }
    .itemLabel{
        margin-bottom: unset !important;
    }
    input#physical, input#digital, input#both {
        width: auto;
        height: auto;
    }
    .container.main-content {
        padding: 0;
    }
    .file-preview {
        display: flex;
        align-items: center;
        margin-top: 50px;
        gap:20px;
    }
    .file-item img {
        max-width: 100px;
        max-height: 100px;
        margin-right: 10px;
    }
    .file-item .remove-file {
        color: red;
        cursor: pointer;
        margin-left: 10px;
    }

    body .container-wrap .form_strip button {
        /* height: 90px; */
        margin-bottom: -38px;
        /* border-radius: 4px !important; */
    }

     body .container-wrap .form_strip button.quote_btn {
        width: 100%;
    }

    .products_top_holder_txt .products_top_holder_note, .products_top_holder_txt .products_top_holder_note_lite {
        font-size: 40px;
    }
    @media only screen and (max-width: 1799px) {
        .products_top_holder_txt .products_top_holder_note, .products_top_holder_txt .products_top_holder_note_lite {
            font-size: 40px;
        }
    }

    .add_click .remove-btn {
        position: relative;
        right: -40px;
        top: -40px;
        background: red;
        color: #fff;
        border: none;
        border-radius: 50%;
        padding: 2px 6px;
        font-size: 12px;
        cursor: pointer;
        display: none;
    }

    .add_click.loaded .remove-btn {
        display: block;
    }

    .add_click.loaded {
        width: 100px;
        height: 90px;
        background: url(https://kainamo.com/beta-testing/wp-content/uploads/2025/02/black-stl-3d-line.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .add_click.loaded i {
        display: none;
    }

    .file-item {
        text-align: center;
    }

    .form_upper_stripe_init {
        display: block !important;
        width: 50% !important;
    }

</style>
<!-- <section class="products_top_holder">
    <div class="box_frame">
        <div class="products_top_holder_txt">
            <h1 class="products_top_holder_note">Service</h1>
            <h2 class="products_top_holder_note_lite">ON DEMAND</h2>
        </div>
        <div class="pic_frame">
            <img src="https://kainamo.com/beta-testing/wp-content/themes/salient-child/frontend/assets/front/images/sclupture_img.png" alt="img" class="">
        </div>
    </div>
</section> -->
<section class="products_first_holder">
    <div class="box_frame">
        <div class="print_demand_inner_holder">
            <div class="print_demand_inner_left_slice">

            <div class="products_top_holder_txt">
                <h2 class="products_top_holder_note_lite">Service</h2>
                                
            </div>
                <form id="print_demand_form" class="print_demand_form" enctype="multipart/form-data">
                    <div class="form_strip">
                        <input name="title" type="text" placeholder="Title" required>
                    </div>
                    <!-- <div class="form_strip">
                        <input name="category" type="text" placeholder="Category" value="Service"  readonly>
                    </div> -->
                    <div class="form_strip">
                        <textarea name="description" placeholder="Description" required></textarea>
                    </div>
                                                                                <div class="form_upper_stripe_init">
                        <div class="form_strip relative_item">
                            <label for="">Budget</label>
                            <input type="number" name="price" placeholder="Enter Budget" required>
                        </div>
                        <div class="form_strip">
                            <input type="hidden" name="type" value="">
                            <input type="hidden" name="action" value="add_new_request">
                            <input type="hidden" name="tag" value="">
                            <button class="quote_btn" type="submit" data-url=""> Get a quote </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="print_demand_inner_right_slice">
                <div class="img_strip">
                    <img src="https://kainamo.com/beta-testing/wp-content/themes/salient-child/frontend/assets/front/images/print_on_demand_img.png" alt="img">
                </div>    
            </div>
        </div>
    </div>
</section>
<!-- clone fields -->
<!-- <div class="pod-fields" style="display:none;">
    <div class="form_strip w-50">
        <label for="">Quantity</label>
        <input type="number" name="quantity" placeholder="Enter Quantity" required />
    </div>
    <div class="form_strip w-50">
        <label for="">Material</label>
        <select name="material">
                    <optgroup class="swe-car" label="Filament">
                                <option value="PLA">PLA</option>
                                <option value="PETG">PETG</option>
                                <option value="ABS">ABS</option>
                                <option value="ASA">ASA</option>
                                <option value="TPU">TPU</option>
                                <option value="PC">PC</option>
                                <option value="Nylon">Nylon</option>
                            </optgroup>
                    <optgroup class="swe-car" label="Resin">
                                <option value="Standard">Standard</option>
                                <option value="Standard +">Standard +</option>
                                <option value="ABS like">ABS like</option>
                                <option value="Clear">Clear</option>
                                <option value="Flexible">Flexible</option>
                                <option value="Color Changing">Color Changing</option>
                                <option value="Heat Resistant">Heat Resistant</option>
                                <option value="Burnout">Burnout</option>
                                <option value="Medical">Medical</option>
                            </optgroup>
                </select>
    </div>
</div> -->
<!-- clone fields -->
<!-- <script src="https://kainamo.com/beta-testing/wp-content/themes/salient-child/frontend/assets/front/js/custom.js"></script> -->
<script>
    jQuery(document).ready(function() {
        
        jQuery(document).on('change','.stl_input',function(){
            // jQuery('.stl_input').on('change', function() {

            const file = this.files[0];
            if (!file) {
                alert('No file selected!');
                return;
            }

            // 1. Check File Extension (.stl)
            const fileName = file.name.toLowerCase();
            if (!fileName.endsWith('.stl')) {
                alert('Error: Only STL files are allowed!');
                jQuery(this).val(''); // Clear input
                return;
            }

            var input = jQuery(this);
            var label = input.prev('.add_click');

            if (this.files.length > 0) {
            label.addClass('loaded');

            // Agar remove button ab tak nahi add hua
            if (label.find('.remove-btn').length === 0) {
                var removeBtn = jQuery('<button class="remove-btn" type="button">&times;</button>');

                // removeBtn.on('click', function(e) {
                //     e.preventDefault();
                //     input.val(''); // file clear
                //     label.removeClass('loaded');
                //     jQuery(this).remove(); // button remove
                // });

                label.append(removeBtn);
            }
            }
        });

        jQuery(document).on('click', '.remove-btn', function (e) {
            e.preventDefault();
            var btn = jQuery(this);
            var label = btn.closest('.add_click');
            var input = label.next('.stl_input');

            input.val(''); // Clear file input
            label.removeClass('loaded'); // Remove loaded class
            btn.remove(); // Remove the button
        });

       // Add new row on clicking the add button

        var count = 1;
        jQuery(document).on('click', '.add_new', function () {
        
            // Clone the row template and make it visible
            var newRow = jQuery('.row-template .file-row').first().clone();
            // Remove the 'initial-row' class and make the remove button visible in the new row
            newRow.removeClass('initial-row').find('.remove-row').show();
            newRow.find('.loaded').removeClass('loaded');
            // Add 'required' attribute to the input fields in the new row
            newRow.find('input[type="file"]').attr('required', true);
            newRow.find('input[type="file"]').attr('id', 'file'+count);
            newRow.find('label').attr('for', 'file'+count);
            newRow.find('input[type="number"]').attr('required', true);
            newRow.find('select').attr('required', true);
            
            // Clear any existing values in the cloned inputs
            newRow.find('input').val('');

            // Append the new row to the container
            jQuery('.row-template .form_strip').before(newRow);
            count++;
        });

    // Handle file input change to show the image preview

    let imageFiles = [];
    jQuery(document).on('change', '.file_input', function (e) {
        var file = e.target.files[0];
        if (!file) return; // Exit if no file is selected

        var reader = new FileReader();
        var row = jQuery(this).closest('.form_strip'); // Get the parent container

        reader.onload = function (event) {
            // Show the image preview
            row.find('.file-preview-image').attr('src', event.target.result).show();
            // Hide the file upload box
            // row.find('.file_upload_box').hide();
        };

        reader.readAsDataURL(file);
    });

    // Remove row on clicking the remove button
    jQuery(document).on('click', '.remove-row', function () {
        jQuery(this).closest('.file-row').remove();
    });


    });
</script>
<script>
    const type = "";
    if(type != 'print-on-demand'){
        const addClickButtons = document.querySelectorAll('.add_click');
        const fileInputs = document.querySelectorAll('.file_input');
        addClickButtons.forEach((addButton, index) => {
            addButton.addEventListener('click', function () {
                fileInputs[index].click();
            });
        });

        let imageFiles = [];
        // When files are selected
        jQuery('.file_input').on('change', function(e) {
            const files = Array.from(e.target.files);
            const filePreview = jQuery('.file-preview');

            files.forEach(function(file) {
                imageFiles.push(file);

                const reader = new FileReader();
                reader.onload = function(event) {
                    const fileType = file.type.split('/')[0];
                    const isImage = fileType === 'image';

                    const previewHtml = `
                        <div class="file-item" data-file="${file.name}">
                            <img src="${isImage ? event.target.result : 'https://kainamo.com/beta-testing/wp-content/themes/salient-child/frontend/assets/front/images/document.png'}" alt="${file.name}" width="50" />
                            <button type="button" class="remove-file" data-file="${file.name}">Remove</button>
                        </div>
                    `;

                    const $box = jQuery(previewHtml);
                    $box.find('.remove-file').on('click', function () {
                        const fileName = jQuery(this).data('file');

                        $box.remove(); // remove DOM
                        imageFiles = imageFiles.filter(f => f.name !== fileName); // remove from array
                        updateInputFiles(); // update input
                        console.log(imageFiles);
                    });

                    filePreview.append($box);
                };

                reader.readAsDataURL(file);
            });

            updateInputFiles();
            console.log(imageFiles);
        });


        function updateInputFiles() {
            const dataTransfer = new DataTransfer();
            imageFiles.forEach(file => dataTransfer.items.add(file));
            jQuery('.file_input')[0].files = dataTransfer.files;
        }

    }
</script>
<script>
    jQuery(document).ready(function() {
        var redirect_url = jQuery("#print_demand_form").find('button[type=submit]').data('url');
        var service_type = "";
        // console.log(service_type);
        jQuery("#print_demand_form").submit(function(e) {
            e.preventDefault(); // prevent the default form submission

            if(service_type == 'service-on-demand'){
                const featuredImage = jQuery('#file')[0]; // Access the file input element
            
                if (featuredImage.files.length === 0) {
                    Swal.fire({
                        title: "Info",
                        text:  "Please upload file before submitting",
                        icon: "info",
                    })
                    return false;
                }
            }

            if (redirect_url) {
                Swal.fire({
                    title: "Unauthorize",
                    text:  "Please register yourself as a business to avail this feature",
                    icon: "info",
                }).then((willDelete) => {
                    window.location.href = redirect_url;
                }); 
                return false;
            }
            var form = new FormData(this);
            jQuery(this).find('button[type=submit]').append('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');
            jQuery(this).find('button[type=submit]').prop('disabled', true);
            var $thiss = jQuery(this);
            jQuery('body').waitMe({
                effect: 'bounce',
                text: '',
                bg: 'rgba(255,255,255,0.7)',
                color: '#000',
                maxSize: '',
                waitTime: -1,
                textPos: 'vertical',
                fontSize: '',
                source: ''
            });
            jQuery.ajax({
                type: 'post',
                url: 'https://kainamo.com/beta-testing/wp-admin/admin-ajax.php',
                data: form,
                dataType: 'json',
                cache: false,
                contentType: false,
                processData: false,
                success: function(response) {
                    jQuery('.fa.fa-spinner.fa-spin').remove();
                    jQuery('body').waitMe('hide');
                    jQuery($thiss).find('button[type=submit]').prop('disabled', false);
                    if (!response.status) {
                        toastr.error(response.message, response.title);
                    } else {
                        toastr.success(response.message, response.title);
                        jQuery("#print_demand_form")[0].reset();
                        // jQuery('.file_upload_box').show();
                        // jQuery('.file-preview').html('');
                        jQuery('.file-row').html('');
                        // if (response.auto_redirect) {
                        //     window.location.href = response.redirect_url;
                        // }
                    }
                },
                error: function(errorThrown) {
                    console.log(errorThrown);
                    jQuery('body').waitMe('hide');
                }
            });
        });
    });
</script>
{"id":1217,"date":"2024-09-25T18:03:27","date_gmt":"2024-09-25T18:03:27","guid":{"rendered":"https:\/\/kainamo.com\/beta-testing\/?page_id=1217"},"modified":"2024-10-17T21:08:26","modified_gmt":"2024-10-17T21:08:26","slug":"add-new-request","status":"publish","type":"page","link":"https:\/\/kainamo.com\/beta-testing\/add-new-request\/","title":{"rendered":"Demand Request Form"},"content":{"rendered":"[vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; column_margin=&#8221;default&#8221; column_direction=&#8221;default&#8221; column_direction_tablet=&#8221;default&#8221; column_direction_phone=&#8221;default&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; row_border_radius=&#8221;none&#8221; row_border_radius_applies=&#8221;bg&#8221; overflow=&#8221;visible&#8221; overlay_strength=&#8221;0.3&#8243; gradient_direction=&#8221;left_to_right&#8221; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_tablet=&#8221;inherit&#8221; column_padding_phone=&#8221;inherit&#8221; column_padding_position=&#8221;all&#8221; column_element_direction_desktop=&#8221;default&#8221; column_element_spacing=&#8221;default&#8221; desktop_text_alignment=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_backdrop_filter=&#8221;none&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; column_link_target=&#8221;_self&#8221; column_position=&#8221;default&#8221; gradient_direction=&#8221;left_to_right&#8221; overlay_strength=&#8221;0.3&#8243; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; animation_type=&#8221;default&#8221; bg_image_animation=&#8221;none&#8221; border_type=&#8221;simple&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221;][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"<p>[vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; column_margin=&#8221;default&#8221; column_direction=&#8221;default&#8221; column_direction_tablet=&#8221;default&#8221; column_direction_phone=&#8221;default&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; row_border_radius=&#8221;none&#8221; row_border_radius_applies=&#8221;bg&#8221; overflow=&#8221;visible&#8221; overlay_strength=&#8221;0.3&#8243; gradient_direction=&#8221;left_to_right&#8221; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_tablet=&#8221;inherit&#8221; column_padding_phone=&#8221;inherit&#8221; column_padding_position=&#8221;all&#8221; column_element_direction_desktop=&#8221;default&#8221; column_element_spacing=&#8221;default&#8221; desktop_text_alignment=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_backdrop_filter=&#8221;none&#8221; column_shadow=&#8221;none&#8221;&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1217","page","type-page","status-publish"],"acf":[],"_links":{"self":[{"href":"https:\/\/kainamo.com\/beta-testing\/wp-json\/wp\/v2\/pages\/1217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kainamo.com\/beta-testing\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kainamo.com\/beta-testing\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kainamo.com\/beta-testing\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kainamo.com\/beta-testing\/wp-json\/wp\/v2\/comments?post=1217"}],"version-history":[{"count":5,"href":"https:\/\/kainamo.com\/beta-testing\/wp-json\/wp\/v2\/pages\/1217\/revisions"}],"predecessor-version":[{"id":1452,"href":"https:\/\/kainamo.com\/beta-testing\/wp-json\/wp\/v2\/pages\/1217\/revisions\/1452"}],"wp:attachment":[{"href":"https:\/\/kainamo.com\/beta-testing\/wp-json\/wp\/v2\/media?parent=1217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}