<div class="container-fluid">
    <div>
        <h3>Social Login Settings</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">Home</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Settings</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Social Login Settings</li>
            </ol>
        </nav>
    </div>
    <!-- Vertical Layout -->
    <div class="row">
        <div class="col-lg-3 col-md-3">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Social Login Settings</h6>
                    <div class="login-settings-alert"></div>
                    <form class="login-settings" method="POST">
                        <label for="fb_login">Facebook</label>
                        <div class="form-group">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="fb_login" id="fb_login-enabled" value="on" <?php echo ($music->config->fb_login == 'on') ? 'checked': '';?>>
                                <label class="form-check-label" for="fb_login-enabled">Enabled</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="fb_login" id="fb_login-disabled" value="off" <?php echo ($music->config->fb_login == 'off') ? 'checked': '';?>>
                                <label class="form-check-label" for="fb_login-disabled" class="m-l-20">Disabled</label>
                            </div>
                        </div>
                        <label for="tw_login">Twitter</label>
                        <div class="form-group">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="tw_login" id="tw_login-enabled" value="on" <?php echo ($music->config->tw_login == 'on') ? 'checked': '';?>>
                                <label class="form-check-label" for="tw_login-enabled">Enabled</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="tw_login" id="tw_login-disabled" value="off" <?php echo ($music->config->tw_login == 'off') ? 'checked': '';?>>
                                <label class="form-check-label" for="tw_login-disabled" class="m-l-20">Disabled</label>
                            </div>
                        </div>
                        <label for="plus_login">Google+</label>
                        <div class="form-group">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="plus_login" id="plus_login-enabled" value="on" <?php echo ($music->config->plus_login == 'on') ? 'checked': '';?>>
                                <label class="form-check-label" for="plus_login-enabled">Enabled</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="plus_login" id="plus_login-disabled" value="off" <?php echo ($music->config->plus_login == 'off') ? 'checked': '';?>>
                                <label class="form-check-label" for="plus_login-disabled" class="m-l-20">Disabled</label>
                            </div>
                        </div>
                        <label for="plus_login">Soundcloud</label>
                        <div class="form-group">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="soundcloud_login" id="soundcloud_login-enabled" value="on" <?php echo ($music->config->soundcloud_login == 'on') ? 'checked': '';?>>
                                <label class="form-check-label" for="soundcloud_login-enabled">Enabled</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="soundcloud_login" id="soundcloud_login-disabled" value="off" <?php echo ($music->config->soundcloud_login == 'off') ? 'checked': '';?>>
                                <label class="form-check-label" for="soundcloud_login-disabled" class="m-l-20">Disabled</label>
                            </div>
                        </div>
                        <label for="wowonder_login">WoWonder (Your Own Site) <a href="#" data-toggle="modal" data-target="#wowonder">?</a></label>
                        <div class="form-group">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="wowonder_login" id="wowonder_login-enabled" value="on" <?php echo ($music->config->wowonder_login == 'on') ? 'checked': '';?>>
                                <label class="form-check-label" for="wowonder_login-enabled">Enabled</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="wowonder_login" id="wowonder_login-disabled" value="off" <?php echo ($music->config->wowonder_login == 'off') ? 'checked': '';?>>
                                <label class="form-check-label" for="wowonder_login-disabled" class="m-l-20">Disabled</label>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary m-t-15 waves-effect">Save</button>
                        <input type="hidden" name="hash_id" value="<?php echo createMainSession();?>">
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-9 col-md-9">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">API Keys</h6>
                    <div class="api-settings-alert"></div>
                    <form class="api-settings" method="POST">
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">Facebook API ID</label>
                                <input type="text" id="facebook_app_ID" name="facebook_app_ID" class="form-control" value="{{CONFIG facebook_app_ID}}">
                                
                            </div>
                        </div>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">Facebook API Key</label>
                                <input type="text" id="facebook_app_key" name="facebook_app_key" class="form-control" value="{{CONFIG facebook_app_key}}">
                                
                            </div>
                        </div>
                        <br>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">Twitter API ID</label>
                                <input type="text" id="twitter_app_ID" name="twitter_app_ID" class="form-control" value="{{CONFIG twitter_app_ID}}">
                                
                            </div>
                        </div>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">Twitter API Key</label>
                                <input type="text" id="twitter_app_key" name="twitter_app_key" class="form-control" value="{{CONFIG twitter_app_key}}">
                                
                            </div>
                        </div>
                        <br>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">Google API ID</label>
                                <input type="text" id="google_app_ID" name="google_app_ID" class="form-control" value="{{CONFIG google_app_ID}}">
                                
                            </div>
                        </div>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">Google API Key</label>
                                <input type="text" id="google_app_key" name="google_app_key" class="form-control" value="{{CONFIG google_app_key}}">
                                
                            </div>
                        </div>
                        <br>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">Sound Cloud Client ID</label>
                                <input type="text" id="sound_cloud_client_id" name="sound_cloud_client_id" class="form-control" value="{{CONFIG sound_cloud_client_id}}">
                                
                            </div>
                        </div>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">Sound Cloud Client Secret</label>
                                <input type="text" id="sound_cloud_client_secret" name="sound_cloud_client_secret" class="form-control" value="{{CONFIG sound_cloud_client_secret}}">
                                
                            </div>
                        </div>
                        <br>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">WoWonder API Key</label>
                                <input type="text" id="wowonder_app_ID" name="wowonder_app_ID" class="form-control" value="{{CONFIG wowonder_app_ID}}">
                                
                            </div>
                        </div>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">WoWonder API Secret</label>
                                <input type="text" id="wowonder_app_key" name="wowonder_app_key" class="form-control" value="{{CONFIG wowonder_app_key}}">
                                
                            </div>
                        </div>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">WoWonder Domain <small>The domain of your website that uses WoWonder Social Network</small></label>
                                <input type="text" id="wowonder_domain_uri" name="wowonder_domain_uri" class="form-control" value="{{CONFIG wowonder_domain_uri}}">
                                
                            </div>
                        </div>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">WoWonder Icon <small>Link to your icon, example: <a href="https://demo.wowonder.com/themes/default/img/icon.png">https://demo.wowonder.com/themes/default/img/icon.png</a></small></label>
                                <input type="text" id="wowonder_img" name="wowonder_img" class="form-control" value="{{CONFIG wowonder_img}}">
                                
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary m-t-15 waves-effect">Save</button>
                        <input type="hidden" name="hash_id" value="<?php echo createMainSession();?>">
                    </form>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <!-- #END# Vertical Layout -->
<div class="modal fade" id="wowonder" tabindex="-1" role="dialog" aria-labelledby="exampleModal1Label" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModal1Label">WoWonder Integration</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>This feature allows you to integrate users from your own website that uses <a href="http://www.wowonder.com" target="_blank">WoWonder</a>.</p>
                    <p>To get started please follow those steps:</p>
                    <ul>
                        <li>Go to http://yoursite.com/developers, you'll get the following <a target="_blank" href="<?php echo PT_LoadAdminLink('images/Screenshot_1.png'); ?>">Page</a></li>
                        <li>Click on "Create an app", and fill the required information.</li>
                        <li>On the form, make sure the info are similar as shown <a target="_blank" href="<?php echo PT_LoadAdminLink('images/Screenshot_2.png'); ?>">Here</a>.</li>
                        <li>Save the form, get the <a  target="_blank" href="<?php echo PT_LoadAdminLink('images/Screenshot_4.png'); ?>">Keys</a>, and use them <a target="_blank" href="<?php echo PT_LoadAdminLink('images/Screenshot_3.png'); ?>">Here</a>.</li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
<style>
.modal-body img {
    max-width: 100%;
}
</style>
<script>
$(function() {
    var form_login_settings = $('form.login-settings');

    form_login_settings.ajaxForm({
        url: '{{CONFIG ajax_url}}/ap/save-settings',
        beforeSend: function() {
            form_login_settings.find('button').text("Please wait...");
        },
        success: function(data) {
            if (data.status == 200) {
            	form_login_settings.find('button').text('Save');
            	$('.login-settings-alert').html('<div class="alert alert-success"><i class="fa fa-check"></i> Settings updated successfully</div>');
            	setTimeout(function () {
            		$('.login-settings-alert').empty();
            	}, 2000);
            }
        }
    });

    var form_api_settings = $('form.api-settings');

    form_api_settings.ajaxForm({
        url: '{{CONFIG ajax_url}}/ap/save-settings',
        beforeSend: function() {
            form_api_settings.find('button').text("Please wait...");
        },
        success: function(data) {
            if (data.status == 200) {
            	form_api_settings.find('button').text('Save');
            	$('.api-settings-alert').html('<div class="alert alert-success"><i class="fa fa-check"></i> Settings updated successfully</div>');
            	setTimeout(function () {
            		$('.api-settings-alert').empty();
            	}, 2000);
            }
        }
    });
});
</script>