<div class="mkdf-tabs-content">
    <div class="tab-content">
        <div class="tab-pane fade in active" id="import">
            <div class="mkdf-tab-content">
                <div class="mkdf-page-title-holder clearfix">
                    <h2 class="mkdf-page-title">Import</h2>
                </div>
                <form method="post" class="mkd_ajax_form mkdf-import-page-holder">
                    <div class="mkdf-page-form">
                        <div class="mkdf-page-form-section-holder">
                            <h3 class="mkdf-page-section-title">Import Demo Content</h3>
                            <div class="mkdf-page-form-section">
                                <div class="mkdf-field-desc">
                                    <h4>Import</h4>

                                    <p>Choose demo content you want to import</p>
                                </div>
                                <!-- close div.mkdf-field-desc -->

                                <div class="mkdf-section-content">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-lg-3">
                                                <select name="import_example" id="import_example" class="form-control mkdf-form-element dependence">
                                                    <option value="onyx10">Original - Services</option>
                                                    <option value="onyx11">Original - Medical</option>
                                                    <option value="onyx12">Original - Business</option>
                                                    <option value="onyx13">Original - Creative</option>
                                                    <option value="onyx14">Original - Construction</option>

                                                    <option value="onyx20">Boxed - Services</option>
                                                    <option value="onyx21">Boxed - Medical</option>
                                                    <option value="onyx22">Boxed - Business</option>
                                                    <option value="onyx23">Boxed - Creative</option>
                                                    <option value="onyx24">Boxed - Construction</option>

                                                    <option value="onyx30">Left Menu - Services</option>
                                                    <option value="onyx31">Left Menu - Medical</option>
                                                    <option value="onyx32">Left Menu - Business</option>
                                                    <option value="onyx33">Left Menu - Creative</option>
                                                    <option value="onyx34">Left Menu - Construction</option>

                                                    <option value="onyx40">Shop - Services</option>
                                                    <option value="onyx41">Shop - Medical</option>
                                                    <option value="onyx42">Shop - Business</option>
                                                    <option value="onyx43">Shop - Creative</option>
                                                    <option value="onyx44">Shop - Construction</option>

                                                    <option value="onyx50">Shop with Left Menu - Services</option>
                                                    <option value="onyx51">Shop with Left Menu - Medical</option>
                                                    <option value="onyx52">Shop with Left Menu - Business</option>
                                                    <option value="onyx53">Shop with Left Menu - Creative</option>
                                                    <option value="onyx54">Shop with Left Menu - Construction</option>

                                                    <option value="onyx60">One Page - Services</option>
                                                    <option value="onyx61">One Page - Medical</option>
                                                    <option value="onyx62">One Page - Business</option>
                                                    <option value="onyx63">One Page - Creative</option>
                                                    <option value="onyx64">One Page - Construction</option>

                                                    <option value="onyx70">Split Catalogue - Services</option>
                                                    <option value="onyx71">Split Catalogue - Medical</option>
                                                    <option value="onyx72">Split Catalogue - Business</option>
                                                    <option value="onyx73">Split Catalogue - Creative</option>
                                                    <option value="onyx74">Split Catalogue - Construction</option>

                                                    <option value="onyx80">Classic - Services</option>
                                                    <option value="onyx81">Classic - Medical</option>
                                                    <option value="onyx82">Classic - Business</option>
                                                    <option value="onyx83">Classic - Creative</option>
                                                    <option value="onyx84">Classic - Construction</option>

                                                    <option value="onyx90">Blog - Services</option>
                                                    <option value="onyx91">Blog - Medical</option>
                                                    <option value="onyx92">Blog - Business</option>
                                                    <option value="onyx93">Blog - Creative</option>
                                                    <option value="onyx94">Blog - Construction</option>

                                                    <option value="onyx100">Shop with Sidebar - Services</option>
                                                    <option value="onyx101">Shop with Sidebar - sMedical</option>
                                                    <option value="onyx102">Shop with Sidebar - Busines</option>
                                                    <option value="onyx103">Shop with Sidebar - Creative</option>
                                                    <option value="onyx104">Shop with Sidebar - Construction</option>

                                                    <option value="onyx110">Full Screen Catalogue - Services</option>
                                                    <option value="onyx111">Full Screen Catalogue - Medical</option>
                                                    <option value="onyx112">Full Screen Catalogue - Business</option>
                                                    <option value="onyx113">Full Screen Catalogue - Creative</option>
                                                    <option value="onyx114">Full Screen Catalogue - Construction</option>

                                                    <option value="onyx120">Coming Soon - Services</option>
                                                    <option value="onyx121">Coming Soon - Medical</option>
                                                    <option value="onyx122">Coming Soon - Business</option>
                                                    <option value="onyx123">Coming Soon - Creative</option>
                                                    <option value="onyx124">Coming Soon - Construction</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- close div.mkdf-section-content -->

                            </div>

                            <div class="mkdf-page-form-section">


                                <div class="mkdf-field-desc">
                                    <h4>Import Type</h4>

                                    <p>Enabling this option will switch to a Side Position (default is Top Position)</p>
                                </div>
                                <!-- close div.mkdf-field-desc -->



                                <div class="mkdf-section-content">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-lg-3">
                                                <select name="import_option" id="import_option" class="form-control mkdf-form-element">
                                                    <option value="">Please Select</option>
                                                    <option value="complete_content">All</option>
                                                    <option value="content">Content</option>
                                                    <option value="widgets">Widgets</option>
                                                    <option value="options">Options</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- close div.mkdf-section-content -->

                            </div>
                            <div class="mkdf-page-form-section">


                                <div class="mkdf-field-desc">
                                    <h4>Import attachments</h4>

                                    <p>Do you want to import media files?</p>
                                </div>
                                <!-- close div.mkdf-field-desc -->
                                <div class="mkdf-section-content">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <p class="field switch">
                                                    <label class="cb-enable dependence"><span>Yes</span></label>
                                                    <label class="cb-disable selected dependence"><span>No</span></label>
                                                    <input type="checkbox" id="import_attachments" class="checkbox" name="import_attachments" value="1">
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- close div.mkdf-section-content -->
                            </div>
                            <div class="mkdf-page-form-section">


                                <div class="mkdf-field-desc">
                                    <input type="submit" class="btn btn-primary btn-sm " value="Import" name="import" id="import_demo_data" />
                                </div>
                                <!-- close div.mkdf-field-desc -->
                                <div class="mkdf-section-content">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="import_load"><span><?php _e('The import process may take some time. Please be patient.', 'mkd') ?> </span><br />
                                                    <div class="mkd-progress-bar-wrapper html5-progress-bar">
                                                        <div class="progress-bar-wrapper">
                                                            <progress id="progressbar" value="0" max="100"></progress>
                                                        </div>
                                                        <div class="progress-value">0%</div>
                                                        <div class="progress-bar-message">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- close div.mkdf-section-content -->
                            </div>
                            <div class="mkdf-page-form-section mkdf-import-button-wrapper">

                                <div class="alert alert-warning">
                                    <strong><?php _e('Important notes:', 'mkd') ?></strong>
                                    <ul>
                                        <li><?php _e('Please note that import process will take time needed to download all attachments from demo web site.', 'mkd'); ?></li>
                                        <li> <?php _e('If you plan to use shop, please install WooCommerce before you run import.', 'mkd')?></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>

            </div><!-- close mkdf-tab-content -->
        </div>
    </div>
</div> <!-- close div.mkdf-tabs-content -->

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $(document).on('click', '#import_demo_data', function(e) {
                e.preventDefault();
                if (confirm('Are you sure, you want to import Demo Data now?')) {
                    $('.import_load').css('display','block');
                    var progressbar = $('#progressbar');
                    var import_opt = $( "#import_option" ).val();
                    var import_expl = $( "#import_example" ).val();
                    var p = 0;
                    if(import_opt == 'content'){
                        for(var i=1;i<10;i++){
                            var str;
                            if (i < 10) str = 'onyx_content_0'+i+'.xml';
                            else str = 'onyx_content_'+i+'.xml';
                            jQuery.ajax({
                                type: 'POST',
                                url: ajaxurl,
                                data: {
                                    action: 'mkd_dataImport',
                                    xml: str,
                                    example: import_expl,
                                    import_attachments: ($("#import_attachments").is(':checked') ? 1 : 0)
                                },
                                success: function(data, textStatus, XMLHttpRequest){
                                    p+= 10;
                                    $('.progress-value').html((p) + '%');
                                    progressbar.val(p);
                                    if (p == 90) {
                                        str = 'onyx_content_10.xml';
                                        jQuery.ajax({
                                            type: 'POST',
                                            url: ajaxurl,
                                            data: {
                                                action: 'mkd_dataImport',
                                                xml: str,
                                                example: import_expl,
                                                import_attachments: ($("#import_attachments").is(':checked') ? 1 : 0)
                                            },
                                            success: function(data, textStatus, XMLHttpRequest){
                                                p+= 10;
                                                $('.progress-value').html((p) + '%');
                                                progressbar.val(p);
                                                $('.progress-bar-message').html('<div class="alert alert-success"><strong>Import is completed</strong></div>');
                                            },
                                            error: function(MLHttpRequest, textStatus, errorThrown){
                                            }
                                        });
                                    }
                                },
                                error: function(MLHttpRequest, textStatus, errorThrown){
                                }
                            });
                        }
                    } else if(import_opt == 'widgets') {
                        jQuery.ajax({
                            type: 'POST',
                            url: ajaxurl,
                            data: {
                                action: 'mkd_widgetsImport',
                                example: import_expl
                            },
                            success: function(data, textStatus, XMLHttpRequest){
                                $('.progress-value').html((100) + '%');
                                progressbar.val(100);
                            },
                            error: function(MLHttpRequest, textStatus, errorThrown){
                            }
                        });
                        $('.progress-bar-message').html('<div class="alert alert-success"><strong>Import is completed</strong></div>');
                    } else if(import_opt == 'options'){
                        jQuery.ajax({
                            type: 'POST',
                            url: ajaxurl,
                            data: {
                                action: 'mkd_optionsImport',
                                example: import_expl
                            },
                            success: function(data, textStatus, XMLHttpRequest){
                                $('.progress-value').html((100) + '%');
                                progressbar.val(100);
                            },
                            error: function(MLHttpRequest, textStatus, errorThrown){
                            }
                        });
                        $('.progress-bar-message').html('<div class="alert alert-success"><strong>Import is completed</strong></div>');
                    }else if(import_opt == 'complete_content'){
                        for(var i=1;i<10;i++){
                            var str;
                            if (i < 10) str = 'onyx_content_0'+i+'.xml';
                            else str = 'onyx_content_'+i+'.xml';
                            jQuery.ajax({
                                type: 'POST',
                                url: ajaxurl,
                                data: {
                                    action: 'mkd_dataImport',
                                    xml: str,
                                    example: import_expl,
                                    import_attachments: ($("#import_attachments").is(':checked') ? 1 : 0)
                                },
                                success: function(data, textStatus, XMLHttpRequest){
                                    p+= 10;
                                    $('.progress-value').html((p) + '%');
                                    progressbar.val(p);
                                    if (p == 90) {
                                        str = 'onyx_content_10.xml';
                                        jQuery.ajax({
                                            type: 'POST',
                                            url: ajaxurl,
                                            data: {
                                                action: 'mkd_dataImport',
                                                xml: str,
                                                example: import_expl,
                                                import_attachments: ($("#import_attachments").is(':checked') ? 1 : 0)
                                            },
                                            success: function(data, textStatus, XMLHttpRequest){
                                                jQuery.ajax({
                                                    type: 'POST',
                                                    url: ajaxurl,
                                                    data: {
                                                        action: 'mkd_otherImport',
                                                        example: import_expl
                                                    },
                                                    success: function(data, textStatus, XMLHttpRequest){
                                                        //alert(data);
                                                        $('.progress-value').html((100) + '%');
                                                        progressbar.val(100);
                                                        $('.progress-bar-message').html('<div class="alert alert-success">Import is completed.</div>');
                                                    },
                                                    error: function(MLHttpRequest, textStatus, errorThrown){
                                                    }
                                                });
                                            },
                                            error: function(MLHttpRequest, textStatus, errorThrown){
                                            }
                                        });
                                    }
                                },
                                error: function(MLHttpRequest, textStatus, errorThrown){
                                }
                            });
                        }
                    }
                }
                return false;
            });
        });
    })(jQuery);

</script>