<div class="container-fluid">
    <div>
        <h3>Change Site Design</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">Home</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Design</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Change Site Design</li>
            </ol>
        </nav>
    </div>
    <!-- Vertical Layout -->
    <div class="row">
        <div class="col-lg-6 col-md-6">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Change Site Design</h6>
                    <div class="d-settings-alert"></div>
                    <form class="d-settings" method="POST">
						<div class="btn-file d-flex align-items-center">
							<input type="file" id="homelogo" accept="image/x-png, image/gif, image/jpeg" name="homelogo" class="hidden">
							<div class="mr-3 change-file-ico">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z"></path></svg>
							</div>
							<div>
								<b>Home page logo</b>
								<div class="mt-1 hidden" id="homelogo-i">
									<input type="text" class="change-file-input" readonly="">
								</div>
							</div>
						</div>
                        <div class="clearfix"></div><br>
                        <div class="btn-file d-flex align-items-center">
                            <input type="file" id="favicon" accept="image/x-png, image/gif, image/jpeg" name="favicon" class="hidden">
                            <div class="mr-3 change-file-ico">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z"></path></svg>
                            </div>
                            <div>
                                <b>Favicon</b>
                                <div class="mt-1 hidden" id="favicon-i">
                                    <input type="text" class="change-file-input" readonly="">
                                </div>
                            </div>
                        </div>
						<div class="clearfix"></div><br>
						<div class="btn-file d-flex align-items-center">
							<input type="file" id="logo" accept="image/x-png, image/gif, image/jpeg" name="logo" class="hidden">
							<div class="mr-3 change-file-ico">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"></path></svg>
							</div>
							<div>
								<b>Logo (366x111)</b>
								<div class="mt-1 hidden" id="logo-i">
									<input type="text" class="change-file-input" readonly="">
								</div>
							</div>
						</div>
                        <div class="clearfix"></div><br>
                        <div class="btn-file d-flex align-items-center">
                            <input type="file" id="light-logo" accept="image/x-png, image/gif, image/jpeg" name="light-logo" class="hidden">
                            <div class="mr-3 change-file-ico">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"></path></svg>
                            </div>
                            <div>
                                <b>Light Logo</b>
                                <div class="mt-1 hidden" id="light-logo-i">
                                    <input type="text" class="change-file-input" readonly="">
                                </div>
                            </div>
                        </div>
                        <hr>
                        <label for="night_mode">Design Mode</label>
                        <div class="form-group">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="night_mode" id="night_mode-night" value="night" <?php echo ($music->config->night_mode == 'night') ? 'checked': '';?>>
                                <label class="form-check-label" for="night_mode-night" class="m-l-20">Night</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="night_mode" id="night_mode-light" value="day" <?php echo ($music->config->night_mode == 'day') ? 'checked': '';?>>
                                <label class="form-check-label" for="night_mode-light" class="m-l-20">Light</label>
                            </div>
                        </div>
                        <div>Please make sure to clean your browser cache after changing the design settings.</div>
                        <input type="hidden" name="hash_id" value="<?php echo createMainSession();?>">
                        <br>
                        <button type="submit" class="btn btn-primary m-t-15 waves-effect">Save</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <!-- #END# Vertical Layout -->
<script>
$(function() {
	$("#light-logo").change(function () {
         var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
         $("#light-logo-i input").val(filename);
         $("#light-logo-i").removeClass('hidden');
    });
    $("#homelogo").change(function () {
         var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
         $("#homelogo-i input").val(filename);
         $("#homelogo-i").removeClass('hidden');
    });
    $("#favicon").change(function () {
         var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
         $("#favicon-i input").val(filename);
         $("#favicon-i").removeClass('hidden');
    });
    $("#logo").change(function () {
         var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
         $("#logo-i input").val(filename);
         $("#logo-i").removeClass('hidden');
    });
    var form_d_settings = $('form.d-settings');
    form_d_settings.ajaxForm({
        url: '{{CONFIG ajax_url}}/ap/save-design',
        beforeSend: function() {
            form_d_settings.find('.waves-effect').text('Please wait..');
        },
        success: function(data) {
            if (data.status == 200) {
                form_d_settings.find('.waves-effect').text('Save');
                $("html, body").animate({ scrollTop: 0 }, "slow");
                $('.d-settings-alert').html('<div class="alert alert-success"><i class="fa fa-check"></i> Settings updated successfully</div>');
                setTimeout(function () {
                    $('.d-settings-alert').empty();
                }, 2000);
            }
        }
    });
});
</script>
<style type="text/css">
	.btn-file { position: relative; overflow: hidden;cursor: pointer;}
	.btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; opacity: 0; outline: none; background: #fff; cursor: inherit; display: block; }
	.change-file-ico svg {border-radius: 50%;background: rgb(230 135 62 / 15%);color: #e6873e;padding: 10px;width: 50px;height: 50px;}
	.change-file-input {padding: 3px 6px;border: 0;line-height: 1;background: rgb(0 0 0 / 10%);border-radius: 2em;font-size: 13px;width: 100%;}
	.colorpicker {z-index: 0 !important;}
</style>