@php
use \Carbon\Carbon;
@endphp
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doxbin (Admin)</title>
    @include('_scripts', ['adminPage' => 1])
    <meta name="robots" content="noindex">
    <script src="https://{{$currentDomain}}/legacy/jscolor.js"></script>
    <link rel="stylesheet" href="https://{{$currentDomain}}/legacy/index.css">
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    
    <style>
        .admin-text{
            color: red;
            font-weight: bold;
        }
        .nav-space{
            height: 50px;
            width: 100%;
        }
        div.page-content{
            display: block;
            margin-left: 250px;
            transition: margin-left .4s;
            padding: 21px;
        }
        body{
            position:relative;
        }
        *{
            box-sizing: border-box;
        }
        @media only screen and (max-width: 992px){
        }
        textarea{
            background-color: #282828;
            border: none;
            border-radius: 2px;
            color: white;
        }
        .blacklist-container td{
            padding: 3px;
        }
        .blacklist-container tr:hover{
            background-color: #323232;
        }
        .blacklist-container tr{
            background-color: #444444;
        }
        a.button{
            display: inline-block;
            padding: 5px 8px;
            background-color: #232323;
            color: white;
            border-radius: 2px;
            text-transform: uppercase;
            font-size: 15px;
            font-weight: bold;
            margin: 0;
            width: auto;
        }
        a.button:focus{
            text-decoration: none;
        }
        a.button:hover{
            background-color: #232323;
            text-decoration:none;
        }
        a.button.button-red{
            border: solid 1px #ff0000;
        }
        a.button.button-green{
            border: solid 1px #00ff00;
        }
        a.button.button-blue{
            border: solid 1px #0000ff;
        }
        .add-to-blacklist > div > a.button{
            display: inline-block;
            padding: 5px 8px;
            border: solid 1px #00ff00;
            background-color: #272727;
            color: white;
            border-radius: 2px;
            text-transform: uppercase;
            font-size: 15px;
            font-weight: bold;
            margin: 0;
            width: 50%;
        }
        .add-to-blacklist > div > a.button:hover{
            text-decoration: none;
            color: white;
            background-color: #1D1D1D;
        }
        .add-to-blacklist{
            width: 50%;
        }
        @media only screen and (max-width: 600px){
            .add-to-blacklist > div > a.button{
                width: 100%;
            }
            .add-to-blacklist{
                width: 100%;
            }
        }
        input[type=text], select, option{
            line-height: 1.2;
            color: white;
            background: #282828;
            border: 0;
            border-radius: 2px;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
            outline: none;
            padding: 5px 5px;
            width: 200px;
        }

        input[type=text]::placeholder{
            color: rgb(167, 167, 167);
        }
        input, select, option{
            font-size: 100%;
        }

        input[type=submit]:hover{
            color: white;
            background: #3d3d3d;
            text-decoration: none;
        }
        .center {
            text-align: center;
        }
        .add{
            background-color: green;
        }
        .add:hover{
            background-color: #1b6e10;
        }

        a.confirm{
            background-color: green;
            font-size: 15px;
            font-weight: bold;
            padding: 7px 10px;
        }
        a.confirm:hover{
            background-color: #1b6e10;
        }
        .word-container{
            background-color: #282828;
            width: 50%;
            border-radius: 7px;
            margin-top: 20px;
            box-shadow: 0 1px 3px #181a1f;
            padding: 0px 10px;
            position:relative;
            display: inline-block;
            -webkit-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
            -moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
            box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
        }

        .word-container .word-row{
            padding: 10px 10px;
            border-bottom: solid 1px gray;
        }
        .word-container .word-row:last-of-type{
            border: none;
        }
        .row {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }
        .col {
            position: relative;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            -ms-flex-preferred-size: 0;
            flex-basis: 0;
            -ms-flex-positive: 1;
            flex-grow: 1;
            max-width: 100%;
        }
        .top-btn, .top-btn p{
            display: block;
            outline: none;
            background: #303030;
            letter-spacing: .5px;
            line-height: 1.5;
            border-right: 1px solid #26282e;
            padding: 12px 0;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            cursor: pointer;
            color: #a8a8a8;
            margin: 0;
        }

        .top-btn-disabled, .top-btn-disabled p{
            display: block;
            outline: none;
            background: #292929;
            letter-spacing: .5px;
            line-height: 1.5;
            border-right: 1px solid #26282e;
            padding: 12px 0;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            cursor: not-allowed;
            color: #5d5d5d;
            margin: 0;
        }
        .top-btn:hover, .top-btn p:hover{
            color: white !important;
            text-decoration: none;
        }
        .top-btn p:focus{
            color: #a8a8a8;
            text-decoration: none;
        }
        .active p{
            color: white;
        }
        .checkbox{
            height: 0;
            width: 0;
            visibility: hidden;
        }
        .checkbox-label {
            cursor: pointer;
            text-indent: -9999px;
            width: 60px;
            height: 30px;
            background: grey;
            display: block;
            border-radius: 100px;
            position: relative;
            transition: 0.3s;
        }
        .checkbox-label:after {
            content: '';
            position: absolute;
            top: 3px;
            left: 4px;
            width: 24px;
            height: 24px;
            background: #fff;
            border-radius: 90px;
            transition: 0.3s;
        }
        .checkbox:checked + label {
            background: #4cba30;
            transition: 0.3s;
        }
        .checkbox:checked + .checkbox-label:after {
            left: calc(100% - 5px);
            transform: translateX(-100%);
        }
        /* .checkbox-label:active:after {
            width: 30px;
        } */
        input{
            margin-bottom: 4px;
        }
        .word-container input[type=text]{
            background-color: rgb(31,31,31);
            border: solid 1px rgb(26,26,26);  
        }
        .word-row input.role-weight{
            color: white;
            background: #282828;
            border: none;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
            outline: none;
            padding: 2px;
            width: 30px;
            height: 100%;
            float: left;
            text-align: center;
            margin-right: 7px;
            border-right: solid 1px gray;
            border-radius: 0;
        }
        label.redirect-label{
            margin:0;
            display:inline-block;
            background-color:#272727;
            padding:6px 0 6px 6px;
            line-height: 1.2;
            border-radius: 2px 0 0 2px;
            font-weight:400;
        }
        input.redirect-input{
            padding: 6px 6px 6px 0;
            background-color: #272727;
            border-radius: 0 2px 2px 0;
        }

        .anx{
            font-size: 17px;
        }

        .anxs{
            font-size: 19px;
        }

        .b-wrd{
            display: inline;
            color: white;
            font-size: 15px;
        }
        @media only screen and (max-width: 900px) {
        .word-container {
            width:100%;
        }
        }

        @media screen and (max-width:500px){
            body{
                font-size: 10px;
            }
            .col-md-12{
                padding: 0;
                width: 100%;
            }
            .col-md-7{
                padding: 0;
                width: 100%;
            }
            .top-btn, .top-btn p{
                font-size: 10px;
            }
            .anx{
                font-size: 14px;
            }
            .anxs{
                font-size: 16px;
            }
            a.confirm{
                font-size: 13px;
            }
            .b-wrd{
                font-size: 12px;
            }
        }
        .flag-row td{
            padding: 5px;
        }
        input[type=text]{
            font-size: 13px;
        }

        #ann1-confirm, #ann2-confirm, #ann3-confirm, #ann4-confirm{
            float: right;
            font-size: 14px;
        }
        a.button.button-small{
            font-size: 14px;
            padding: 4px 6px 3px;
        }
        </style>
</head>
<body style="min-height: 100%;height:100%">
    {!! csrf_field() !!}
    @include('_nav')
    <div class="nav-space"></div>
    <div class="page">
        @include('_admin_sidebar')
        <div class="page-content">
        {{-- This has been added due as I do not want the developer rank having access to announcements --}}
        @if ($myUser->isManager(true))
            <h5>Announcements</h5>
            <label class="anx">Announcement 1</label><br>
            <div class="word-container" style="padding: 10px 20px; margin-top:0;">
                <div style="text-align:center;">
                    {!! ($announcement1->link != null ? '<a id="ann1-preview" target="_blank" class="anxs" style="text-decoration: underline;color:#' . ($announcement1->colour != null ? $announcement1->colour : '008000') . '" href="' . $announcement1->link . '">' . $announcement1->text . '</a>' : '<a href="javascript:void(0)" class="anxs" style="margin:0;color: #' . ($announcement1->colour != null ? $announcement1->colour : '008000') . '; text-decoration: underline;">' . $announcement1->text . '</a>') !!}
                </div>
                <p style="margin: 0;text-align:left"><b>Text</b></p>
                <input id="ann1-text" style="width: 100%" type="text" value="{{ $announcement1->text }}">
                <p style="margin: 2px 0 0 0;text-align:left"><b>Link</b></p>
                <input id="ann1-link" style="width: 100%" type="text" value="{{ $announcement1->link }}">
                <p style="margin: 2px 0 0 0;text-align:left"><b>Colour</b></p>
                <input id="ann1-color" style="width:100%" type="text" value="{{ ($announcement1->colour != null ? $announcement1->colour : '008000') }}" class="jscolor {onFineChange:'preview(1, this)'}" placeholder="Role color (hex)">
                <a class="button button-green" id="ann1-confirm" href="#">Update</a>
            </div>
            <br><br>
            <label class="anx">Announcement 2</label><br>
            <div class="word-container" style="padding:10px 20px;margin-top:0;">
                <div style="text-align:center;">
                    {!! ($announcement2->link != null ? '<a id="ann2-preview" target="_blank" class="anxs" style="text-decoration: underline; color:#' . ($announcement2->colour != null ? $announcement2->colour : '2a9fd6') . '" href="' . $announcement2->link . '">' . $announcement2->text . '</a>' : '<a href="javascript:void(0)" class="anxs" style="margin:0;color: #' . ($announcement2->colour != null ? $announcement2->colour : '2a9fd6') . '; text-decoration: underline;">' . $announcement2->text . '</a>') !!}
                </div>
                <p style="margin: 0;text-align:left"><b>Text</b></p>
                <input id="ann2-text" style="width: 100%;" type="text" value="{{ $announcement2->text }}">
                <p style="margin: 2px 0px 0px 0px;text-align:left"><b>Link</b></p>
                <input id="ann2-link" style="width: 100%;" type="text" value="{{ $announcement2->link }}">
                <p style="margin: 2px 0px 0px 0px;text-align:left"><b>Colour</b></p>
                <input id="ann2-color" style="width:100%" type="text" value="{{ ($announcement2->colour != null ? $announcement2->colour : '2a9fd6') }}" class="jscolor {onFineChange:'preview(2, this)'}" placeholder="Role color (hex)">
                <a class="button button-green" id="ann2-confirm" href="#">Update</a>
            </div>
            <br><br>
            <label class="anx">Announcement 3</label><br>
            <div class="word-container" style="padding:10px 20px;margin-top:0;">
                <div style="text-align:center;">
                    {!! ($announcement3->link != null ? '<a id="ann3-preview" target="_blank" class="anxs" style="text-decoration: underline; color:#' . ($announcement3->colour != null ? $announcement3->colour : '2a9fd6') . '" href="' . $announcement3->link . '">' . $announcement2->text . '</a>' : '<a href="javascript:void(0)" class="anxs" style="margin:0;color: #' . ($announcement3->colour != null ? $announcement3->colour : '2a9fd6') . '; text-decoration: underline;">' . $announcement3->text . '</a>') !!}
                </div>
                <p style="margin: 0;text-align:left"><b>Text</b></p>
                <input id="ann3-text" style="width: 100%;" type="text" value="{{ $announcement3->text }}">
                <p style="margin: 2px 0px 0px 0px;text-align:left"><b>Link</b></p>
                <input id="ann3-link" style="width: 100%;" type="text" value="{{ $announcement3->link }}">
                <p style="margin: 2px 0px 0px 0px;text-align:left"><b>Colour</b></p>
                <input id="ann3-color" style="width:100%" type="text" value="{{ ($announcement3->colour != null ? $announcement3->colour : '2a9fd6') }}" class="jscolor {onFineChange:'preview(3, this)'}" placeholder="Role color (hex)">
                <a class="button button-green" id="ann3-confirm" href="#">Update</a>
            </div>
            <br><br>
            <label class="anx">Announcement 4</label><br>
            <div class="word-container" style="padding:10px 20px;margin-top:0">
                <div style="text-align:center;">
                    {!! ($announcement4->link != null ? '<a id="ann4-preview" target="_blank" class="anxs" style="text-decoration: underline; color:#' . ($announcement4->colour != null ? $announcement4->colour : '2a9fd6') . '" href="' . $announcement4->link . '">' . $announcement4->text . '</a>' : '<a href="javascript:void(0)" class="anxs" style="margin:0;color: #' . ($announcement4->colour != null ? $announcement4->colour : '2a9fd6') . '; text-decoration: underline;">' . $announcement4->text . '</a>') !!}
                </div>
                <p style="margin: 0;text-align:left"><b>Text</b></p>
                <input id="ann4-text" style="width: 100%;" type="text" value="{{ $announcement4->text }}">
                <p style="margin: 2px 0px 0px 0px;text-align:left"><b>Link</b></p>
                <input id="ann4-link" style="width: 100%;" type="text" value="{{ $announcement4->link }}">
                <p style="margin: 2px 0px 0px 0px;text-align:left"><b>Colour</b></p>
                <input id="ann4-color" style="width:100%" type="text" value="{{ ($announcement4->colour != null ? $announcement4->colour : '2a9fd6') }}" class="jscolor {onFineChange:'preview(4, this)'}" placeholder="Role color (hex)">
                <a class="button button-green" id="ann4-confirm" href="#">Update</a>
            </div>
            <hr>
            @endif
            <label class="anx" style="margin-bottom: 0px;">Maintenance</label>
            <p>Turn maintenance on/off</p>
            @php
            $maintenance = DB::table('site_settings')->where('setting', 'maintenance')->get();
            @endphp
            @if($maintenance != null)
                <div style="display:table;"><input class="checkbox" type="checkbox" id="switch" {{ $maintenance[0]->intval == 1 ? 'checked' : '' }}/><label class="checkbox-label" for="switch">Toggle</label></div>
            @else
                (Cant load button)
            @endif
            @if ($myUser->isAdmin(true))
                <br>
                <hr>
                <label class="anx" style="margin-bottom: 0px;">Roles</label><br>
                <a class="button button-blue" href="#" id="createRole">Create New Role</a>
                <div id="create-role-div" style="display: none;">
                    <b>Preview:</b>
                    {{ $myUser->username }} <b id="preview" style="color: white;"></b><br>
                    <input type="text" id="roleName" placeholder="Role name"><br>
                    <input type="text" id="roleText" placeholder="Role text"><br>
                    <input type="text" class="jscolor {onFineChange:'preview(66, this)'}" id="roleColor" placeholder="Role color (hex)"><br>
                    <a class="button button-green" href="#" id="submitCreateRole">Create</a>
                </div>
                <p style="margin: 10px 0 0 0; font-size: 12px;">(All users with a role will lose it when it is deleted)</p>
                <div class="word-container" style="margin:0 0 30px 0; text-align: left;">
                    @foreach ($roles as $role)
                    <div class="word-row">
                        <input type="text" class="role-weight" onchange="updateWeight({{ $role->id }}, this)" value="{{ $role->weight }}">
                        <p class="b-wrd">{{ $role->name }} - <b style="color: #{{ $role->color }}">[{{ $role->text }}]</b></p>@if($role->id > 3)<a class="button button-red button-small" style="float:right;margin-top: -4px;" onclick="delRole({{ $role->id }})" href="javascript:void(0)">Delete</a>@endif
                    </div>
                    @endforeach
                </div>
            @endif
        </div>          
    </div>
    <script src="https://{{$currentDomain}}/legacy/admin.js"></script>
    <script>
        
        function preview(id, color){
            if(id == 1){
                $('#ann1-preview').css('color', color.toHEXString());
            }else if(id == 2){
                $('#ann2-preview').css('color', color.toHEXString());
            }else if(id == 3){
                $('#ann3-preview').css('color', color.toHEXString());
            }else if(id == 4){
                $('#ann4-preview').css('color', color.toHEXString());
            }else{
                $('#preview').css('color', color.toHEXString());
            }
        }
        $(document).ready(function(e){
            
            $('#createRole').on('click', function(e){
                $('#create-role-div').show();
                $(this).hide();
                e.preventDefault();
            });

            $('#roleText').on('keyup', function(e){
                if($(this).val().trim().length > 0){
                    if(/^[a-zA-Z0-9]+$/.test($(this).val().trim())){
                        $('#preview').text('[' + $(this).val().trim() + ']');
                    }else{
                        $('#preview').text('');
                    }
                }else{
                    $('#preview').text('');
                }
                e.preventDefault();
            });
            $('#ann1-confirm').on('click', function(e){
                $.post('admin/api/announcements', {
                    _token: $('input[name=_token]').val(),
                    ann: 1,
                    text: $('#ann1-text').val(),
                    link: $('#ann1-link').val(),
                    color: $('#ann1-color').val()
                }, function(resp){
                    if(resp.status == "done"){
                        window.location = '/admin';
                    }else{
                        alert(resp.msg);
                    }
                });
                e.preventDefault();
            });


            $('#ann2-confirm').on('click', function(e){
                $.post('admin/api/announcements', {
                    _token: $('input[name=_token]').val(),
                    ann: 2,
                    text: $('#ann2-text').val(),
                    link: $('#ann2-link').val(),
                    color: $('#ann2-color').val()
                }, function(resp){
                    if(resp.status == "done"){
                        window.location = '/admin';
                    }else{
                        alert(resp.msg);
                    }
                });
                e.preventDefault();
            });

            $('#ann3-confirm').on('click', function(e){
                $.post('admin/api/announcements', {
                    _token: $('input[name=_token]').val(),
                    ann: 3,
                    text: $('#ann3-text').val(),
                    link: $('#ann3-link').val(),
                    color: $('#ann3-color').val()
                }, function(resp){
                    if(resp.status == "done"){
                        window.location = '/admin';
                    }else{
                        alert(resp.msg);
                    }
                });
                e.preventDefault();
            });

            $('#ann4-confirm').on('click', function(e){ // announce 4 btn
                $.post('admin/api/announcements', {
                    _token: $('input[name=_token]').val(),
                    ann: 4,
                    text: $('#ann4-text').val(),
                    link: $('#ann4-link').val(),
                    color: $('#ann4-color').val()
                }, function(resp){
                    if(resp.status == "done"){
                        window.location = '/admin';
                    }else{
                        alert(resp.msg);
                    }
                });
                e.preventDefault();
            });
            var logsDropdown = false;
            $('#logs-button').on('click', function(e){ // logs dropdown admin sidebar
                if(!logsDropdown){
                    $('.logs-dropdown').show();
                    logsDropdown = true;
                }else{
                    $('.logs-dropdown').hide();
                    logsDropdown = false;
                }
                e.preventDefault();
            });
            $('#switch').on('change', function(e){ // maintenance button
                var enabled = $('#switch').prop('checked');
                $.post('/admin/api/switch-maintenance', {
                    _token: $('input[name=_token]').val()
                }, function(resp){
                    if(resp.status == 'done'){
                        $('#switch').prop('checked', resp.enabled);
                    }else{
                        alert(resp.msg);
                    }
                }).fail(function(resp){
                    $('#switch').prop('checked', !enabled);
                });
            });
            
            $('#ann1-text, #ann2-text, #ann3-text, #ann4-text').on('keyup', function(e){
                if($(this).attr('id') == 'ann1-text'){
                    $('#ann1-preview').html($(this).val());
                }else if($(this).attr('id') == 'ann2-text'){
                    $('#ann2-preview').html($(this).val());
                }else if($(this).attr('id') == 'ann3-text'){
                    $('#ann3-preview').html($(this).val());
                }else{
                    $('#ann4-preview').html($(this).val());
                }
                e.preventDefault();
            });
            $('#ann1-link, #ann2-link, #ann3-link, #ann4-link').on('keyup', function(e){
                if($(this).attr('id') == 'ann1-link'){
                    if($(this).val().trim().length == 0){
                        $('#ann1-preview').removeAttr('href');
                    }else{
                        $('#ann1-preview').attr('href', $(this).val());
                    }
                }else if($(this).attr('id') == 'ann2-link'){
                    if($(this).val().trim().length == 0){
                        $('#ann2-preview').removeAttr('href');
                    }else{
                        $('#ann2-preview').attr('href', $(this).val());
                    }
                }else if($(this).attr('id') == 'ann3-link'){
                    if($(this).val().trim().length == 0){
                        $('#ann3-preview').removeAttr('href');
                    }else{
                        $('#ann3-preview').attr('href', $(this).val());
                    }
                }else if($(this).attr('id') == 'ann4-link'){
                    if($(this).val().trim().length == 0){
                        $('#ann4-preview').removeAttr('href');
                    }else{
                        $('#ann4-preview').attr('href', $(this).val());
                    }
                }
                e.preventDefault();
            });

            $('#submitCreateRole').on('click', function(e){
                $.post('/admin/api/create-role', {
                    _token: $('input[name=_token]').val(),
                    rankName: $('#roleName').val(),
                    rankText: $('#roleText').val(),
                    rankColor: $('#roleColor').val()
                }, function(resp){
                    if(resp.status == 'err'){
                        alert(resp.msg);
                    }else{
                        window.location.reload();
                    }
                });
                e.preventDefault();
            });
        });
    </script>
</body>
</html>