@php
    $colors = array('BB71E4', '4B2E83', 'FEC8D8', 'BB1E64', 'FFFFFF', '365DDA', 'F96D31', 'FFFE71', 'B83C26', 'C5C6D3', /*sep 2022 color update*/'94FAAC', '964B00', '000080', 'FF69B4', 'FFD580', '601EF9', '30D5C8', '9999FF', '4C4CFF', '004C00');

@endphp

        <!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex">
    <title>Settings - Doxbin</title>
    @include('_scripts')
    <style>
        .info-cont {
            font-size: 16px;
            color: #bfbfbf;
            margin: 0 auto;
            text-align: left;
        }

        .info-cont p {
            margin: 0;
        }

        .info-cont p b {
            margin-right: 6px;
        }

        .profile-cont {
            margin-bottom: 50px;
            margin-top: 60px;
            padding-top: 1px;
        }

        .banner-img {
            max-width: 500px;
            max-height: 120px;
            background-color: gray;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        #banner-image {
            display: block;
            max-width: 500px;
            max-height: 120px;
            height: 120px;
            background-color: black;
            opacity: 0;
            transition: opacity .1s ease-in-out;
            -moz-transition: opacity .1s ease-in-out;
            -webkit-transition: opacity .1s ease-in-out;
            left: 0;
            right: 0;
            position: absolute;
            cursor: pointer;
            margin: 0px auto 0px auto;
        }

        #banner-image:hover {
            opacity: 0.7;
        }

        #banner-image p {
            padding-top: 45px;
            text-align: center;
            font-size: 18px;
            color: white;
        }

        .gray {
            color: #bfbfbf;
            margin-top: 5px;
        }

        .admin-text {
            color: red;
            font-weight: bold;
        }

        .profile-img {
            width: 120px;
            height: 120px;
            background-color: gray;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        #profile-image {
            display: block;
            width: 120px;
            height: 120px;
            background-color: black;
            opacity: 0;
            transition: opacity .1s ease-in-out;
            -moz-transition: opacity .1s ease-in-out;
            -webkit-transition: opacity .1s ease-in-out;
            left: 0;
            right: 0;
            position: absolute;
            cursor: pointer;
            margin: 0px auto 0px auto;
        }

        #profile-image:hover {
            opacity: 0.7;
        }

        #profile-image p {
            padding-top: 45px;
            text-align: center;
            font-size: 18px;
            color: white;
        }

        input, textarea {
            line-height: 1.2;
            color: white;
            background: #282828;
            border: 0;
            border-radius: 2px;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
            outline: none;
            padding: 7px 5px;
            width: 100%;
            font-size: 100%;
            margin-bottom: 30px;
        }

        input::placeholder, textarea::placeholder {
            color: rgb(167, 167, 167);
        }

        input[type=submit] {
            line-height: 1.2;
            color: white;
            background: #282828;
            border: 0;
            border-radius: 2px;
            display: block;
            -webkit-font-smoothing: antialiased;
            outline: none;
            padding: 7px 5px;
            width: 90%;
            margin: 15px auto 50px auto;
        }

        input[type=submit]:hover {
            color: white;
            background: #3d3d3d;
            text-decoration: none;
        }

        .username-change {
            width: 100%;
        }

        .username-change a {
            position: absolute;
            padding-top: 8px;
            right: 25px;
            display: block;
            font-size: 15px;
        }

        input:disabled, textarea:disabled {
            color: #757575;
        }

        textarea {
            max-height: 58px;
            max-width: 100%;
            resize: none;
        }

        input[type="file"] {
            opacity: 0;
            cursor: pointer;
        }

        #file-upload {
            height: 0px;
            padding: 0;
        }

        #file-upload-banner {
            height: 0px;
            padding: 0;
        }

        .help-tip {
            position: absolute;
            right: 23px;
            margin-top: 6px;
            text-align: center;
            background-color: #666666;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            cursor: default;
            z-index: 1;
        }

        .help-tip:before {
            content: '?';
            font-weight: bold;
            color: #fff;
        }

        .help-tip:hover p {
            display: block;
            transform-origin: 100% 0%;

            -webkit-animation: fadeIn 0.3s ease-in-out;
            animation: fadeIn 0.3s ease-in-out;

        }

        .help-tip p {
            display: none;
            text-align: left;
            background-color: #1E2021;
            padding: 16px;
            width: 300px;
            position: absolute;
            border-radius: 3px;
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
            right: -4px;
            color: white;
            font-size: 13px;
            line-height: 1.4;
        }

        .help-tip p:before {
            position: absolute;
            content: '';
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-bottom-color: #1E2021;
            right: 10px;
            top: -12px;
        }

        .help-tip p:after {
            width: 100%;
            height: 40px;
            content: '';
            position: absolute;
            top: -40px;
            left: 0;
        }

        @-webkit-keyframes fadeIn {
            0% {
                opacity: 0;
                transform: scale(0.6);
            }

            100% {
                opacity: 100%;
                transform: scale(1);
            }
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 100%;
            }
        }

        .b-button-red {
            background-color: #211212;
            font-weight: bold;
            padding: 5px 8px;
            border-radius: 2px;
            text-transform: uppercase;
            font-size: 15px;
            color: white
        }

        .b-button-green {
            background-color: #122112;
            font-weight: bold;
            padding: 5px 8px;
            border-radius: 2px;
            text-transform: uppercase;
            font-size: 15px;
            color: white
        }

        .b-button-red:hover {
            background-color: #281919;
        }

        .b-button-green:hover {
            background-color: #192819;
        }

        button:focus {
            outline: none;
        }

        .b-border-red {
            border: solid 1px red;
        }

        .b-border-green {
            border: solid 1px green;
        }

        .colors {
            position: relative;
            background-color: #282828;
            box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
            text-align: center;
            padding: 10px 10px 4px;
        }

        .color-block {
            display: inline-block;
            height: 30px;
            width: 30px;
            cursor: pointer;
            margin: 0 3px;
        }


        .color-active {
            border: solid 2px white;
        }

        .colors-locked {
            position: absolute;
            top: 0;
            left: 0;
            padding-top: 14px;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
        }
    </style>
    <link rel="stylesheet" href="/legacy/index.css">
</head>

<body class="bin" style="height: 100%; margin: 0 auto;">
{!! csrf_field() !!}
@include('_nav')
<div class="container"
     style="background-color: #111111; text-align: center; min-height: 100%; -webkit-box-shadow: 0px 0px 7px 0px rgba(31,31,31,1);-moz-box-shadow: 0px 0px 7px 0px rgba(31,31,31,1);box-shadow: 0px 0px 7px 0px rgba(31,31,31,1);">

    <div class="profile-cont">

        <h5 style="font-size: 25px;">Settings</h5>

        <span>Use a rectangular image to avoid problems</span>
        <label id="banner-image" for="file-upload-banner">
            <p>Change</p>
        </label>
        <form id="banner-form" action="" method="POST">
            <input id="file-upload-banner" name="image" type="file" accept="image/*"/>
            {!! csrf_field() !!}
            <input type="hidden" name="type" value="image">
            <input type="hidden" name="modal" value="banner_pic">
        </form>
        <div class="banner-img" style="overflow-y: hidden;">
            <img class="banner-img-src" style="width: 500px;"
                 src="@if($myUser->banner_pic == null) https://i.pinimg.com/1200x/84/f5/53/84f5533218ae3fbc050349d5d1937d13.jpg @else https://{{env('CDN_DOMAIN')}}/banner_pic/{{ $myUser->banner_pic}} @endif">
        </div>

        <a href="#" id="banner-pic-edit"
           style="font-weight: bold; font-size: 15x; @if($myUser->banner_pic == null) display: none; @endif">Remove</a>
        <p id="image-err-msg" style="color: red;"></p>
        <span>Use a square image, at least 120x120px to avoid problems</span>
        <label id="profile-image" for="file-upload">
            <p>Change</p>
        </label>
        <form id="pfp-form" action="" method="POST">
            <input id="file-upload" name="image" type="file" accept="image/*"/>
            {!! csrf_field() !!}
            <input type="hidden" name="type" value="image">
            <input type="hidden" name="modal" value="profile_pic">
        </form>
        <div class="profile-img" style="overflow-y: hidden;">
            <img class="profile-img-src" style="width: 120px;"
                 src="https://{{env('CDN_DOMAIN')}}/profile_pic/{{ $myUser->profile_pic != null ? $myUser->profile_pic : 'default.jpg'}}">
        </div>

        <a href="#" id="profile-pic-edit"
           style="font-weight: bold; font-size: 15x; @if($myUser->profile_pic == null) display: none; @endif">Remove</a>
        <p id="image-err-msg" style="color: red;"></p>


        <h5 class="gray" style="font-size: 24px; "></h5>
        <div class="col-md-5 info-cont" style="float: none;">
            <div class="username-change">
                <p><b>Username</b></p>
                @if($myUser->name_changes > 0 || $myUser->role > RoleId::COUNCIL)
                    <p>Your old name will be free for anyone to take when if you change it.@if($myUser->role != RoleId::ADMIN)
                            You can change your name <b id="namechanges"
                                                        style="margin: 0;">{{ $myUser->name_changes }}</b> {{ Illuminate\Support\Str::plural('time', $myUser->name_changes) }}
                            .
                        @endif</p>
                    <a id="change-username" href="#">Change</a>
                @else
                    <div class="help-tip"><p>Users with ranks can change their username - <a href="/upgrade">Upgrade</a>
                        </p></div>
                @endif
                <input id="setting-username" type="text" value="{{$myUser->username}}" style="margin-bottom: 20px;"
                       disabled>
            </div>
            <div class="username-change">
                <p><b>Bio</b></p>
                <a id="change-bio" href="#">Edit</a>
                <textarea id="setting-bio" style="margin-bottom: 20px; height: 70px"
                          disabled>{{$myUser->bio}}</textarea>
            </div>
            <div class="username-change">
                <p><b>Email</b></p>
                <a id="change-email" href="#">Change</a>
                <input id="setting-email" type="text" value="{{$myUser->email}}" style="margin-bottom: 20px;" disabled>
            </div>
            <p id="password-error" style="color: red;margin-top:20px;"></p>
            <div class="username-change">
                <p><b id="password-text">Password</b></p>
                <a id="change-password" href="#">Change</a>
                <input id="setting-password" type="password" style="margin-bottom: 20px;" disabled>
            </div>
            <div id="confpass-div" style="display: none;" class="username-change">
                <p><b>New Password</b></p>
                @if(!$myUser->tfa_enabled)
                    <a id="save-password" href="#">Change Password</a>
                @endif
                <input id="setting-confpass" type="password" style="margin-bottom: 20px;">
            </div>
            <div id="two-factor" style="display: none;" class="username-change">
                @if($myUser->tfa_enabled)
                    <p><b>Two Factor Code</b></p>
                    <a id="save-password" href="#">Change Password</a>
                    <input id="setting-2fa-code" type="number" style="margin-bottom: 20px;">
                @endif
            </div>
            <hr style="margin-bottom: 10px;">

            <h5 style="font-size: 18px;">Username Color</h5>
            <p style="margin-bottom: 10px;">Change the color of your name</p>

            <p><b>Choose one:</b></p>
            <div class="colors">
                @if(!$myUser->has_name_color && $myUser->role < 95)
                    <div class="colors-locked"><span
                                style="background-color: rgba(0, 0, 0, 0.8);display: inline-block;padding: 0 3px;">Purchase / preview at <a
                                    href="/upgrade">https://doxbin.org/upgrade</a></span></div>
                @endif
                @foreach($colors as $color)
                    <span id="{{$color}}"
                          class="color-block{{ $myUser->has_name_color ? '' : ' locked' }}{{ $myUser->name_color != $color ? '' : ' color-active' }}"
                          type="radio" name="name-color" style="background-color: #{{ $color }};"></span>
                @endforeach
                @if($myUser->admin)
                    <p style="text-align: left;"><b>Custom:</b></p>
                    <input type="text" id="custom-color" placeholder="Hex Code">
                    <input type="text" id="custom-css" placeholder="CSS">
                @endif
            </div>

            <hr style="margin-bottom: 10px;">

            <h5 style="font-size: 18px;">Two Factor Authentication</h5>

            @if($myUser->tfa_enabled == 1)
                <p style="margin-bottom: 10px;">Enabled since {{ date('jS M Y', floor($myUser->tfa_added / 1000)) }}</p>
                <b>Disable 2FA</b>

                <input type="number" id="disable-2fa-code" placeholder="2FA code" style="margin-bottom: 5px;">
                <button class="b-button-red b-border-red" id="disable-2fa-btn">Disable 2FA</button>
            @else
                <p style="margin-bottom: 10px;">Requires a OTP generated through a phone app every time you login to
                    make your account more secure</p>
                <button class="b-button-green b-border-green" id="enable-2fa-btn">Enable 2FA</button>
            @endif
        </div>
    </div>
    @if($myUser->admin == 1)
        <script src="{{ asset('/legacy/admin.js') }}"></script>
    @endif
    <script>
        var file = "none";
        var colorSelected = {!! $myUser->name_color != null ? '"'.$myUser->name_color.'"' : 'false' !!};
        $(document).ready(function () {
            $('.color-block').on('click', function (e) {
                if (colorSelected != false) {
                    $('#' + colorSelected).removeClass('color-active');
                }
                if (colorSelected != $(this).attr('id')) {
                    $(this).addClass('color-active');
                    colorSelected = $(this).attr('id');
                    $('.dropbtn').css('color', "#" + $(this).attr('id'));
                } else {
                    colorSelected = false;
                    $('.dropbtn').css('color', '');
                }

                $.post('/settings/change-color', {
                    _token: $('input[name=_token]').val(),
                    color: (colorSelected == false ? 'none' : colorSelected)
                });
            });
            $('#enable-2fa-btn').on('click', function (e) {
                window.location = '/verify/new';
            });

            $('#disable-2fa-btn').on('click', function (e) {
                if ($('#disable-2fa-code').val().length == 6) {
                    $.post('/account/disable-2fa', {
                        _token: $('input[name=_token]').val(),
                        code: $('#disable-2fa-code').val()
                    }, function (resp) {
                        if (resp.status == "err" && resp.locked == 0) {
                            alert("Wrong code. Max 5 attempts");
                        } else if (resp.status == "err" && resp.locked == 1) {
                            alert("Wrong code. Account locked");
                            location.reload();
                        } else {
                            location.reload();
                        }
                    });
                } else {
                    alert("Enter a valid code")
                }
            });

            var namechanges = {{ $myUser->name_changes }};

            $('#change-username').on('click', function (e) {
                if ($('#change-username').text() == "Change") {
                    $('#setting-username').prop('disabled', false).focus();
                    $('#change-username').text('Save');
                } else {
                    $('#change-username').text('...');
                    $.post('/settings', {
                        _token: $('input[name=_token]').val(),
                        type: 'username',
                        username: $('#setting-username').val()
                    }, function (resp) {
                        if (resp.status == "done") {
                            $('#setting-username').prop('disabled', true);
                            $('#change-username').text('Edit');
                            $('#namechanges').text(namechanges - 1);
                            namechanges--;
                        } else {
                            alert("Error - invalid username?");
                            $('#change-username').text('Save');
                        }
                    });
                }
                e.preventDefault();
            });

            $('#change-bio').on('click', function (e) {
                if ($('#change-bio').text() == "Edit") {
                    $('#setting-bio').prop('disabled', false).focus();
                    $('#change-bio').text('Save');
                } else {
                    $('#change-bio').text('...');
                    $.post('/settings', {
                        _token: $('input[name=_token]').val(),
                        type: 'change-bio',
                        value: $('#setting-bio').val()
                    }, function (resp) {
                        if (resp.status == "done") {
                            $('#setting-bio').prop('disabled', true);
                            $('#change-bio').text('Edit');
                        } else {
                            alert(resp.msg);
                            $('#change-bio').text('Save');
                        }
                    });
                }
                e.preventDefault();
            });
            $('#change-email').on('click', function (e) {
                if ($('#change-email').text() == "Change") {
                    $('#setting-email').prop('disabled', false).focus();
                    $('#change-email').text('Save');
                } else {
                    $('#change-email').text('...');
                    $.post('/settings', {
                        _token: $('input[name=_token]').val(),
                        type: 'email',
                        value: $('#setting-email').val()
                    }, function (resp) {
                        if (resp.status == "done") {
                            $('#setting-email').prop('disabled', true);
                            $('#change-email').text('Change');
                        } else {
                            alert(resp.msg);
                            $('#change-email').text('Save');
                        }
                    });
                }
                e.preventDefault();
            });
            $('#change-password').on('click', function (e) {
                if ($('#change-password').text() == "Change") {
                    $('#setting-password').prop('disabled', false).focus();
                    $('#confpass-div').show();
                    $('#two-factor').show();
                    $('#password-text').text('Current Password');
                    $('#change-password').hide();
                    $('#save-password').show();
                    e.preventDefault();
                }
            });
            $('#save-password').on('click', function (e) {
                if ($('#save-password').text() == "Save" || $('#save-password').text() == "Change Password") {
                    $('#save-password').text('...');
                    $('#change-password').hide();
                    $.post('/settings', {
                        _token: $('input[name=_token]').val(),
                        type: 'password',
                        oldpass: $('#setting-password').val(),
                        newpass: $('#setting-confpass').val(),
                        code: $('#setting-2fa-code').val()
                    }, function (resp) {
                        if (resp.status == "done") {
                            $('#setting-password').prop('disabled', true).focus().val("");
                            $('#setting-confpass').val("");
                            $('#setting-2fa-code').val("");
                            $('#change-password').text('Change').show();
                            $('#save-password').hide();
                            $('#confpass-div').hide();
                            $('#two-factor').hide();
                            $('#password-text').text('Password');
                        } else {
                            $('#password-error').text(resp.msg);
                        }
                        $('#save-password').text('Save');
                    });
                }
                e.preventDefault();
            });


            $('#banner-pic-edit').on('click', function (e) {
                if ($('#banner-pic-edit').text() == "Save") {
                    $('#banner-pic-edit').text('Saving...');
                    $.ajax({
                        url: '/settings',
                        type: 'POST',
                        data: new FormData($('#banner-form')[0]),
                        cache: false,
                        contentType: false,
                        processData: false,
                        xhr: function () {
                            var myXhr = $.ajaxSettings.xhr();
                            return myXhr;
                        },
                        success: function (resp) {
                            if (resp.status != 'err') {
                                $('#banner-pic-edit').text('Remove');
                            } else {
                                $('#banner-pic-edit').text('Save');
                                $('#image-err-msg').text(resp.msg);
                            }
                        },
                        error: function (e) {
                            console.log(e);
                        }

                    });
                } else {
                    $.post('/settings', {
                        _token: $('input[name=_token]').val(),
                        type: 'remove-image',
                        modal: 'banner_pic'
                    }, function (resp) {
                        if (resp.status == "done") {
                            $('.banner-img-src').removeAttr('src');
                            $('#banner-pic-edit').text('');
                        }
                    });
                }
                e.preventDefault();
            })


            $('#profile-pic-edit').on('click', function (e) {
                if ($('#profile-pic-edit').text() == "Save") {
                    $('#profile-pic-edit').text('Saving...');
                    $.ajax({
                        url: '/settings',
                        type: 'POST',
                        data: new FormData($('#pfp-form')[0]),
                        cache: false,
                        contentType: false,
                        processData: false,
                        xhr: function () {
                            var myXhr = $.ajaxSettings.xhr();
                            return myXhr;
                        },
                        success: function (resp) {
                            if (resp.status != 'err') {
                                $('#profile-pic-edit').text('Remove');
                            } else {
                                $('#profile-pic-edit').text('Save');
                                $('#image-err-msg').text(resp.msg);
                            }
                        },
                        error: function (e) {
                            console.log(e);
                        }

                    });
                } else {
                    $.post('/settings', {
                        _token: $('input[name=_token]').val(),
                        type: 'remove-image',
                        modal: 'profile_pic',
                    }, function (resp) {
                        if (resp.status == "done") {
                            $('.profile-img-src').removeAttr('src');
                            $('#profile-pic-edit').text('');
                        }
                    });
                }
                e.preventDefault();
            })


            function setImageDiv(input, name) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('.' + name + '-img-src').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(input.files[0]);
                    $('#' + name + '-pic-edit').show().text('Save');
                }
            }

            $("#file-upload").change(function () {
                setImageDiv(this, 'profile');
                file = this.files[0];
            });
            $("#file-upload-banner").change(function () {
                setImageDiv(this, 'banner');
                file = this.files[0];
            });
        });
    </script>
</body>
</html>
<!-- brenton b@doxbin.org t.me/brenton -->