<script type="text/template" id="qq-template">
    <div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
        <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
            <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
        </div>
        <div class="qq-upload-drop-area-selector qq-upload-drop-area">
            <span class="qq-upload-drop-area-text-selector">Drop the plugin .Zip file(s) here to install it</span>
        </div>
        <div class="qq-upload-button-selector qq-upload-button button-primary">
            <div>Upload a file</div>
        </div>
        <span class="qq-drop-processing-selector qq-drop-processing">
            <span>Processing dropped files...</span>
            <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
        </span>
        <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
            <li>
                <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                <div class="qq-progress-bar-container-selector qq-progress-bar-container">
                    <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                </div>
                <!-- <span class="qq-upload-spinner-selector qq-upload-spinner"></span> -->
                <div class="qq-thumbnail-wrapper">
                    <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
                </div>
                <div class="buttons-wrap">
                    <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">Close</button>
                    <button type="button" class="qq-upload-retry-selector qq-upload-retry">
                        <span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
                        Retry
                    </button>
                </div>
                
                <div class="qq-file-info">
                    <div class="qq-file-name">
                        <span class="qq-upload-file-selector qq-upload-file"></span>
                        <span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
                    </div>
                    <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
                        <span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
                    </button>
                    <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
                        <span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
                    </button>
                    <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
                        <span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
                    </button>
                </div>
            </li>
        </ul>

        <dialog class="qq-alert-dialog-selector">
            <div class="qq-dialog-message-selector"></div>
            <div class="qq-dialog-buttons">
                <button type="button" class="qq-cancel-button-selector button-primary">Close</button>
            </div>
        </dialog>

        <dialog class="qq-confirm-dialog-selector">
            <div class="qq-dialog-message-selector"></div>
            <div class="qq-dialog-buttons">
                <button type="button" class="qq-cancel-button-selector">No</button>
                <button type="button" class="qq-ok-button-selector">Yes</button>
            </div>
        </dialog>

        <dialog class="qq-prompt-dialog-selector">
            <div class="qq-dialog-message-selector"></div>
            <input type="text">
            <div class="qq-dialog-buttons">
                <button type="button" class="qq-cancel-button-selector">Cancel</button>
                <button type="button" class="qq-ok-button-selector">Ok</button>
            </div>
        </dialog>
    </div>
</script>
<script>
    // tabs
    function openDPDEVTab(evt, tabName) {
        // Declare all variables
        var i, tabcontent, tablinks;

        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        // Show the current tab, and add an "active" class to the button that opened the tab
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>
<!-- Tab links -->
<div class="tab">
  <button class="tablinks active" onclick="openDPDEVTab(event, 'plugins_install')">Plugins Install</button>
  <button class="tablinks" onclick="openDPDEVTab(event, 'wp_reset')">WP Reset</button>
</div>
<!-- Install/Download plguins Tab content -->
<div id="plugins_install" class="tabcontent" style="display: block;">
    <div class="panel" id="panel-plugin-tools">
        <div class="panel-body clearfix">
            <h3>Install new plugins</h3>
            <div id="activate-plugins" class="dp--checkbox">
                <label class="of-input">
                    <input type="checkbox" /> Activate plugins on Install<input type="hidden" id="activate" value="" />
                </label>
            </div>
            <div id="DPDEV-uploader"></div>
            <?php if(class_exists('\ZipArchive')){ ?>
                <?php $plugins = get_plugins(); ?>
                <h3>Download installed plugins</h3>
                <form action="<?= admin_url('admin-post.php') ?>" method="post">
                    <?php wp_nonce_field('DPDEV_download') ?>
                    <input type="hidden" name="action" value="DPDEV_download">
                    <div class="dp--select">
                        <select name="DPDEV_plugin" required="">
                                <option value="">-- Select a plugin</option>
                                <?php foreach ($plugins as $base => $plugin): ?>
                                    <option value="<?= $base ?>,<?= $plugin['Version'] ?>"><?= $plugin['Name'] ?> v<?= $plugin['Version'] ?></option>
                                <?php endforeach; ?>
                            </select>
                            <button class="button-primary">Download</button>
                    </div>
                </form>
            <?php } ?>
        </div>
    </div>
</div> <!-- Install/Download plguins Tab content -->

<!-- WP Reset Tab content -->
<div id="wp_reset" class="tabcontent">
    <div class="panel" id="panel-plugin-tools">
        <div class="panel-body clearfix">
            <form id="reset-form" action="<?= admin_url('admin-post.php') ?>" method="post">
                <?php wp_nonce_field('DPDEV_reset') ?>
                <input type="hidden" name="action" value="DPDEV_reset">
                <div class="dp--checkbox">
                    <ul class="features--list">
                        <label class="of-input">
                            <input type="checkbox" class="of-checkboxes" name="reset_database"> Reset database
                        </label>
                        <label class="of-input">
                            <input type="checkbox" class="of-checkboxes" name="empty_wpcontent"> Empty wp-content folders
                        </label>
                        <label class="of-input">
                            <input type="checkbox" class="of-checkboxes" name="delete_content"> Delete content
                        </label>
                        <label class="of-input">
                            <input type="checkbox" class="of-checkboxes" name="delete_plugins"> Delete plugins
                        </label>
                        <label class="of-input">
                            <input type="checkbox" class="of-checkboxes" name="delete_themes"> Delete themes
                        </label>
                    </ul>
                </div>
                <a href="#" class="wp-reset button-primary">Reset</a>
            </form>
        </div>
    </div>
</div> <!-- WP Reset Tab content -->

<!-- The Modal -->
<div id="resetModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">

    <div class="modal-header">
        <span class="close">&times;</span>
        <h3>Are you sure you want to reset?</h3>    
    </div>
    
    <div class="modal-body">
        <a href="#" class="cancel button">Cancel</a>
        <a href="#" class="reset button-primary">Reset</a>
    </div>
    
  </div>

</div>

<script type="text/javascript">
    jQuery(document).ready(function(){
        var resetModal = document.getElementById("resetModal");
        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
          resetModal.style.display = "none";
        }
        jQuery(".wp-reset").click(function(e){
            e.preventDefault();
            var reset_array = [];
            jQuery(".of-input").each(function(){
                if(jQuery(this).find("input").is(":checked")){
                    reset_array.push(1);
                }
            }).promise().done(function(){
                if(reset_array.length > 0){
                    resetModal.style.display = "block";
                }
            });
        });

        jQuery("#resetModal .cancel").click(function(e){
            e.preventDefault();
            resetModal.style.display = "none";
        });

        jQuery("#resetModal .reset").click(function(e){
            e.preventDefault();
            jQuery("#reset-form").submit();
        });
    });
</script>