<?php
// echo getcwd();
// echo dirname(__dir__);
// echo basename(__dir__);
// echo getcwd();


try {

// $url = "https://clone.onlinetestingserver.com/template_hub/wp-json/wp/v2/categories";
$url = "https://clone.onlinetestingserver.com/template_hub/wp-json/api/get-categorys";
    

$curl = curl_init($url);
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

$headers = array(
"Accept: application/json",
"Authorization: Bearer {token}",
);
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
//for debug only!
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);

$resp = json_decode(curl_exec($curl));
curl_close($curl);

} catch (Exception $e) {

}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>P2P Transfer</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/fonts/fonts.css">
    <link rel="stylesheet" href="assets/css/fontawesome.all.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    
    <style> #wpcontent{padding: 0 !important;} div#wpwrap {background-image: linear-gradient(#c7c1fe, #98a3f6); }
     #wpbody-content {color: #9ca5f7; } 
    .invalid{border: 1px solid red !important;}
    small.invalidText { color: red; }

    </style>
</head>
<body>
<header>
    <div class="container text-center">
        <div class="row">
            <div class="col-12">
                <a href="#"><img src="assets/images/logoo.png"></a>
            </div>
        </div>
    </div>
</header>  
<div class="main_admin">
    <div class="container">
        <div class="banner">
            <h3 style="text-align: center;">
                <span style="color: #000000;">
                    We Make It
                    <strong class="myborder"> Simple </strong>
                    To
                </span>
                <br>
                <strong class="myborder"><span style="color: #000000;">Build A Website</span></strong>
            </h3>
        </div>
        <div class="main_box">
            <form action="" method="" id="main_form" enctype="multipart/form-data">
                <div class="title">
                    <h2 class="m0"><span class="ptp_border"><span class="relative theme_color">P2P Transfer</span></span></h2>
                </div>
                <div class="mySet set_1 active_tab">
                    <div class="row">
                        <div class="col-lg-6 ">
                            <div class="drop_box">
                                <div class="parent_field">
                                    <label class="w-100">Title</label>
                                    <input class="w-100 feald required project_name" type="text" name="post_title" placeholder="Project name" required>
                                </div>
                                <div class="parent_field">
                                    <label class="w-100">Select categories</label>
                                    <select multiple class="w-100 feald required categories" style="width: 100%;" name="post_categories[]" required>
                                        <?php
                                        foreach ((empty($resp) ? [] : $resp) as $key => $value) {
                                        echo '<option value="'. $value->term_id .'" >'. $value->name .'</option>';
                                        }
                                        ?>
                                    </select>
                                </div>
                                <div class="parent_field">
                                    <label class="w-100">Tags</label>
                                        <select class="form-control Tags" id="post_tags" multiple="multiple" name="post_tags[]"></select>
                                        <!-- <input class="w-100 feald" type="text" name="post_tags" placeholder="Project Searching Tags eg. abc, zyz, demo" required> -->
                                </div>
                                <!-- <div class="parent_field">
                                    <label class="w-100">Description</label>
                                    <textarea class="w-100 feald required Description" placeholder="Project Description" required name="description"></textarea>
                                </div> -->
                                <div class="parent_field">
                                    <label class="w-100">Project Image</label>
                                    <input class="w-100 feald required project_img" type="file" name="image" required accept="image/png, image/gif, image/jpeg">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6  col_last overflow-hidden">
                            <div id="lottie1"></div>
                        </div>
                    </div>
                    <a class="theme_btn next_btn mt-4" href="javascript:;"><span>Continue</span></a>
                </div>
                <div class="mySet set_2">
                    <div class="row">
                        <div class="col-lg-8 mx-auto">
                            <div id="lottie_file_transfer"></div>
                            <div class="status_wrap">
                                <div class="uploading_status project_unzip active_status">
                                    <img src="assets/images/zip.png" class="icon_img">
                                    <span class="file_title">Extracting source files</span>
                                </div>
                                <div class="uploading_status create_user">
                                    <img src="assets/images/user.png" class="icon_img">
                                    <span class="file_title">Creating DB</span>
                                </div>
                                <div class="uploading_status create_db">
                                    <img src="assets/images/cloud-database.png" class="icon_img">
                                    <span class="file_title">Creating User</span>
                                </div>
                                <div class="uploading_status generate_password">
                                    <img src="assets/images/password.png" class="icon_img">
                                    <span class="file_title">Generating Password</span>
                                </div>
                                <div class="uploading_status import_db">
                                    <img src="assets/images/cloud-database.png" class="icon_img">
                                    <span class="file_title">Importing DB</span>
                                </div>
                                <div class="uploading_status updateUrl">
                                    <img src="assets/images/url.png" class="icon_img">
                                    <span class="file_title">Updating URLs</span>
                                </div>
                                
                                <div class="uploading_status generate_link">
                                    <img src="assets/images/link.png" class="icon_img">
                                    <span class="file_title">Generating Link</span>
                                </div>
                            </div>
                            <div class="file_range_wrap">
                                <div class="range_inner"></div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="row">
                        <div class="col-lg-6 ">

                            <div class="uploading_bar">
                                <div class="upload_img pink">
                                    <img src="assets/images/jpg-file.png">
                                </div>

                                <div class="uploading_content project_unzip">
                                    <div class="file_title_wrap">
                                        <span class="file_title">Project Unzip</span>
                                        <ul class="file_upload_percentage">
                                            <li class="percent">0%</li>
                                            <li><i class="fa fa-times" aria-hidden="true"></i></li>
                                        </ul>
                                    </div>
                                    <span class="status staus_pending">Pending</span>
                                    <div class="file_range_wrap">
                                        <div class="range_inner bar_pending"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="uploading_bar">
                                <div class="upload_img pink">
                                    <img src="assets/images/cloud-database.png">
                                </div>

                                <div class="uploading_content create_db">
                                    <div class="file_title_wrap">
                                        <span class="file_title">Create Database</span>
                                        <ul class="file_upload_percentage">
                                            <li class="percent">0%</li>
                                            <li><i class="fa fa-times" aria-hidden="true"></i></li>
                                        </ul>
                                    </div>
                                    <span class="status staus_pending">Pending</span>
                                    <div class="file_range_wrap">
                                        <div class="range_inner bar_pending"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="uploading_bar">
                                <div class="upload_img pink">
                                    <img src="assets/images/user.png">
                                </div>

                                <div class="uploading_content create_user">
                                    <div class="file_title_wrap">
                                        <span class="file_title">Create User</span>
                                        <ul class="file_upload_percentage">
                                            <li class="percent">0%</li>
                                            <li><i class="fa fa-times" aria-hidden="true"></i></li>
                                        </ul>
                                    </div>
                                    <span class="status staus_pending">Pending</span>
                                    <div class="file_range_wrap">
                                        <div class="range_inner bar_pending"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="uploading_bar">
                                <div class="upload_img pink">
                                    <img src="assets/images/password.png" class="password_img">
                                </div>

                                <div class="uploading_content generate_password">
                                    <div class="file_title_wrap">
                                        <span class="file_title">Generate Password</span>
                                        <ul class="file_upload_percentage">
                                            <li class="percent">0%</li>
                                            <li><i class="fa fa-times" aria-hidden="true"></i></li>
                                        </ul>
                                    </div>
                                    <span class="status staus_pending">Pending</span>
                                    <div class="file_range_wrap">
                                        <div class="range_inner bar_pending"></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6  col_last">
                            
                            <div class="uploading_bar">
                                <div class="upload_img pink">
                                    <img src="assets/images/cloud-database.png">
                                </div>

                                <div class="uploading_content import_db">
                                    <div class="file_title_wrap">
                                        <span class="file_title">Import Database</span>
                                        <ul class="file_upload_percentage">
                                            <li class="percent">0%</li>
                                            <li><i class="fa fa-times" aria-hidden="true"></i></li>
                                        </ul>
                                    </div>
                                    <span class="status staus_pending">Pending</span>
                                    <div class="file_range_wrap">
                                        <div class="range_inner bar_pending"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="uploading_bar">
                                <div class="upload_img pink">
                                    <img src="assets/images/website.png" class="website_icon">
                                </div>

                                <div class="uploading_content updateUrl">
                                    <div class="file_title_wrap">
                                        <span class="file_title">Update Url</span>
                                        <ul class="file_upload_percentage">
                                            <li class="percent">0%</li>
                                            <li><i class="fa fa-times" aria-hidden="true"></i></li>
                                        </ul>
                                    </div>
                                    <span class="status staus_pending">Pending</span>
                                    <div class="file_range_wrap">
                                        <div class="range_inner bar_pending"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="uploading_bar">
                                <div class="upload_img light_green">
                                    <img src="assets/images/link-file.png">
                                </div>

                                <div class="uploading_content generate_link">
                                    <div class="file_title_wrap">
                                        <span class="file_title">Generate Link</span>
                                        <ul class="file_upload_percentage">
                                            <li class="percent">0%</li>
                                            <li><i class="fa fa-times" aria-hidden="true"></i></li>
                                        </ul>
                                    </div>
                                    <span class="status staus_pending">Pending</span>
                                    <div class="file_range_wrap">
                                        <div class="range_inner bar_pending"></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div> -->
                    
                    <!-- <a class="web_btn theme_bg next_btn" href="javascript:;">Next </a> -->
                    <ul class="go_continue fr mt-4">
                        <!-- <li><a href="#" class="simple_btn">go back</a></li> -->
                        <li>
                            <!-- <a href="javascript:;" class="theme_btn continue">Continue</a> -->
                            <button type="submit" class="continue">Submit</button>
                            <!-- <a href="http://localhost/createplugin/wp-admin/options-general.php?page=p2p_main&act=yes" class="theme_btn">Continue</a> -->
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
</div>
<footer>
    <div class="container">
        <div class="footer text-center">
            <div class="row">
                <div class="col-12">
                    <div class="logo_box">
                        <img src="assets/images/logoo.png">
                    </div>
                    <ul class="contact_detail">
                        <li><a href="tel:8662103898">(866) 210-3898</a></li>
                        <li><a href="mailto:info@blitzmobileapps.com">info@blitzmobileapps.com</a></li>
                        <li><a href="#">3558 Round Barn Blvd Suite #200, Santa Rosa, CA 95403 , United States</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="copyright">
            <div class="row">
                <div class="col-lg-5">
                    <p>© 2022 Blitz Collection. All rights reserved.</p>
                </div>
                <div class="col-lg-7">
                    <ul>
                        <li><a href="#">Our Creations</a></li></li>
                        <li><a href="#">Podcast</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms &amp; Conditions</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>
<div class="paypopup success tc">
    <div class="poppup_box">
        <div class="pop_close closer">x</div>
        <div class="content">
            <div id="lottie2"></div>
            <h3 class="black ">Successfull</h3>
            <p class="my-4">Your Template Has Been Uploaded <br> Successfully!</p>
            <div class="uplode_detail">
                
            </div>
        </div>
    </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie_svg.min.js?ver=1.0.0'></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/sweetalert.min.js"></script>
<script src="assets/js/select2.min.js"></script>
<script src="assets/js/main.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
//     var height = jQuery('.active_tab').height();
//     jQuery('.setp_wrap').css('height',height);
    jQuery('.continue').hide();
    jQuery('.next_btn').click(function(){

        $vlid = true; 
        $('.invalid').removeClass('invalid');
        $('.invalidText').remove();
        $('.required').each(function(i, obj) {
            if($(this).val()){ $vlid = ($vlid) ? true : false; }
            else{ $vlid = false;
                $(this).addClass('invalid')
                $(this).after('<small class="invalidText" >This Field is required</small>')
            }
        });

        if(!$vlid){
            return false;
        }

        if($('#post_tags').val().length < 5) {
            swal({
                title: "Error!",
                text: 'Minimum 5 tags required',
                icon: "warning",
                button: "Close",
            });

            return false;
        }

        jQuery('.mySet').removeClass('active_tab');
        jQuery(this).parent().next().addClass('active_tab');
        jQuery('.continue').click();
        //var height = jQuery('.active_tab').height();
        //jQuery('.setp_wrap').css('height',height);
    });

jQuery('.required').change(function(e){

    if($(this).val()){ 
        $(this).removeClass('invalid');
        $(this).siblings('.invalidText').remove();
    }
});


});

$("#post_tags").select2({
tags: true,
tokenSeparators: [',', ' ']
});

$(".categories").select2();


try {

    var animation = bodymovin.loadAnimation({
        container: document.getElementById('lottie1'),
        path: 'assets/lottie/ltd.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
    });
    var animation = bodymovin.loadAnimation({
        container: document.getElementById('lottie2'),
        path: 'assets/lottie/successful.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
    });

    var animation = bodymovin.loadAnimation({
        container: document.getElementById('lottie_file_transfer'),
        path: 'assets/lottie/lf20_r5BMbX.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
    });
}
catch (e) {}
////////////////////////////////////////////////////////////////POPUP JS
jQuery('.closer').click(function(){
    jQuery('.paypopup').css('opacity','0');
    jQuery('.paypopup').css('z-index','-1');
    jQuery('.poppup_box').css('transform','scale(0)');
    jQuery('.poppup_box').css('opacity','0');
    window.location.reload();
});
jQuery('#success').click(function(){
    jQuery('.paypopup').css('opacity','1');
    jQuery('.paypopup').css('z-index','99999');
    jQuery('.success .poppup_box').css('transform','scale(1)');
    jQuery('.success .poppup_box').css('opacity','1');
});
////////////////////////////////////////////////////////////////POPUP JS
</script>
</body>
</html>