@using HeuristicLab.Clients.Hive.WebJobManager.ViewModels;
@using Newtonsoft.Json;
@model OkbManagementVM
<div id="userId" style="display:none">@ViewBag.SessionId</div>
<script src="~/js/hubs/okbmanagerhubber.js"></script>
<div ng-app="wjmokbmanager" ng-controller="okbmanangerCtrl" id="controllerdiv" class="animated fadeIn" ng-init="init()">


    @Html.Partial("Navbar", new NavbarViewModel("OKBAdmin", Model.User))
    @if (ViewBag.Success != null && ViewBag.Success)
    {

        @Html.Partial("_SuccessMessage", Model.message)
    }
    else
    {
        @Html.Partial("_ErrorMessage", Model.message)

    }
    

    <ul class="nav nav-pills nav-justified">

        <li role="presentation"
            ng-class="{active: currentData.name === 'Platforms'}">
            <a ng-click="selectDataCat('platforms')" href="">
                Platforms
            </a>
        </li>
        <li role="presentation"
            ng-class="{active: currentData.name === 'Algorithm classes'}">
            <a ng-click="selectDataCat('algoclass')" href="">
                Algorithm classes
            </a>
        </li>
        <li role="presentation"
            ng-class="{active: currentData.name === 'Algorithms'}">
            <a ng-click="selectDataCat('algos')" href="">
                Algorithms
            </a>
        </li>
        <li role="presentation"
            ng-class="{active: currentData.name === 'Problem classes'}">
            <a ng-click="selectDataCat('probclass')" href="">
                Problem classes
            </a>
        </li>
        <li role="presentation"
            ng-class="{active: currentData.name === 'Problems'}">
            <a ng-click="selectDataCat('problems')" href="">
                Problems
            </a>
        </li>
    </ul>
    <div class="row animated fadeIn" style="padding:10px">
        <div class="col-sm-4" ng-if="currentData.name != ''" style="padding-left:15px">
            <div class="btn-group btn-group-justified btn-block"
                 role="group" style="margin-bottom:-4px">
                <a class="btn btn-info btn-lg disabled"
                   style="width:6%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                    <i class="fa fa-list"></i> {{currentData.name}}
                </a>
                <a class="btn btn-success"
                   ng-class="{active: currentData.data.selected.Id === -1}"
                   style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;"
                   ng-click="selectDataMember(null)">
                    <i class="fa fa-plus-circle"></i>
                </a>
            </div>
            <div class="btn-group-vertical btn-block">
                <a class="btn btn-default"
                   ng-repeat="dat in currentData.data.arr track by $index"
                   ng-class="{active: currentData.data.selected.Id === dat.Id}"
                   style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); overflow:hidden"
                   ng-click="selectDataMember($index)">
                    {{dat.Name}}
                </a>
            </div>
        </div>
        <!--NOTIFICATIONS-->
        <div class="alert alert-success" id="success-alert" style="display:flex">
            <span id="succText"></span>
        </div>
        <!--Panel-->
        <div class="col-sm-8 animated fadeIn" ng-if="currentData.name != ''"
             id="content"
             style="padding:5px; padding-left:10px;">
            <div class="panel panel-primary"
                 style="border-width:2px!important;
                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
                <div class="panel-heading" style="padding:15px">
                    <!--Title for new algo class and problem class-->
                    <h1 ng-if="currentData.data.selected.Id === -1 && currentData.name.length >  11">Add new {{currentData.name.slice(0,-2) | lowercase}}</h1>
                    <!--Title for new others-->
                    <h1 ng-if="currentData.data.selected.Id === -1 && currentData.name.length < 11">Add new {{currentData.name.slice(0,-1) | lowercase}}</h1>
                    <!--Title for existing member-->
                    <h1 ng-if="currentData.data.selected.Id != -1"> {{currentData.data.selected.Name}}</h1>
                </div>
                <div class="panel-body" style="padding:10px">
                    <div class="form-group" style="padding-bottom:30px">

                        <label for="inpusername"
                               class="col-sm-3 control-label">
                            Name
                        </label>
                        <div class="col-sm-8">
                            <input type="text"
                                   class="form-control"
                                   id="inpusername"
                                   name="inpusername"
                                   placeholder="Name"
                                   ng-model="currentData.data.selected.Name">
                        </div>
                    </div>
                    <div class="form-group">

                        <label for="inpdesc"
                               class="col-sm-3 control-label">
                            Description
                        </label>
                        <div class="col-sm-8">
                            <textarea style="resize:vertical"
                                      class="form-control"
                                      id="inpdesc"
                                      name="inpdesc"
                                      placeholder="Description"
                                      ng-model="currentData.data.selected.Description"></textarea>
                        </div>

                    </div>
                    <!-- PLATFORM-->
                    <div class="form-group"
                         style="padding-top:30px"
                         ng-if="currentData.type != 'ND'">

                        <label for="inpplat"
                               class="col-sm-3 control-label">
                            Platform
                        </label>
                        <div class="col-sm-8">
                            <select class="form-control"
                                    id="inpplat"
                                    name="inpplat"
                                    ng-model="currentData.data.selected.PlatformId"
                                    ng-options="plat.Id as plat.Name for plat in platforms.arr"></select>
                        </div>

                    </div>
                    <!--ALGO CLASS-->
                    <div class="form-group"
                         style="padding-top:30px"
                         ng-if="currentData.type === 'ALG'">
                        <label for="inpplat"
                               class="col-sm-3 control-label">
                            Algorithm Class
                        </label>
                        <div class="col-sm-8">
                            <select class="form-control"
                                    id="inpplat"
                                    name="inpplat"
                                    ng-model="currentData.data.selected.AlgorithmClassId"
                                    ng-options="alg.Id as alg.Name for alg in algoclass.arr"></select>
                        </div>

                    </div>
                    <!--PROBLEM CLASS-->
                    <div class="form-group"
                         style="padding-top:30px"
                         ng-if="currentData.type === 'PROB'">
                        <label for="inpplat"
                               class="col-sm-3 control-label">
                            Problem Class
                        </label>
                        <div class="col-sm-8">
                            <select class="form-control"
                                    id="inpplat"
                                    name="inpplat"
                                    ng-model="currentData.data.selected.ProblemClassId"
                                    ng-options="prob.Id as prob.Name for prob in probclass.arr"></select>
                        </div>

                    </div>
                    <!--DATA TYPE-->

                </div>
                <div class="panel-body"
                     ng-if="currentData.data.selected.Id != -1">
                    <div class="row" ng-if="currentData.type != 'ND'" style="padding:20px;padding-top:0">
                        <h3>Data type</h3>
                        <div class="form-group"
                             style="padding-top:10px">
                            <label class="col-sm-3 control-label">
                                Name
                            </label>
                            <div class="col-sm-8">
                                <input type="text"
                                       class="form-control"
                                       disabled
                                       ng-model="currentData.data.selected.DataTypeName">
                            </div>

                        </div>
                        <div class="form-group"
                             style="padding-top:30px">
                            <label class="col-sm-3 control-label">
                                Type Name
                            </label>
                            <div class="col-sm-8">
                                <input type="text"
                                       class="form-control"
                                       disabled
                                       ng-model="currentData.data.selected.DataTypeTypeName">
                            </div>

                        </div>
                    </div>
                    <form method="post"
                          asp-action="Uploader"
                          asp-controller="OkbManagement" enctype="multipart/form-data">
                        <input onchange="printFile()"
                               type="file"
                               id="fileupl"
                               name="fileupl"
                               accept=".hl"
                               style="display:none" />
                        <div onclick="firefilebutton()"
                             class="btn btn-info"
                             id="uplbutt"
                             style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                                 text-shadow:1px 1px black;">
                            <i class="fa fa-folder-open-o"></i> Choose new file
                        </div>

                        <input type="submit" class="btn btn-primary" id="upl" disabled value="Upload" />
                        <input type="text"
                               id="name"
                               name="name"
                               value="{{currentData.name }}"
                               style="display:none" />
                        <input type="text"
                               id="id"
                               name="id"
                               value="{{currentData.data.selected.Id }}"
                               style="display:none" />
                        <script type="text/javascript">
                            function firefilebutton() {
                                document.getElementById("fileupl").click();


                            }
                            function printFile() {
                                var files = document.getElementById("fileupl").files;
                                if (files.length > 0) {
                                    document.getElementById("upl").disabled = false;

                                    for (var i = 0; i < files.length; i++) {
                                        document.getElementById("uplbutt").innerHTML =  files[i].name + " selected";
                                    }
                                }
                            }


                        </script>
                    </form>
                </div>
                <div class="panel-footer" style="height:60px">
                    <div class="col-sm-3">
                        <a class="btn btn-success btn-block"
                           style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;"
                           ng-if="currentData.data.selected.Id != -1"
                           ng-click="saveCurrent()">
                            <i class="fa fa-save"></i> Save
                        </a>
                        <a class="btn btn-success btn-block"
                           style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;"
                           ng-if="currentData.data.selected.Id === -1"
                           ng-click="saveCurrent()">
                            <i class="fa  fa-plus-circle"></i> Add
                        </a>
                    </div>
                    <div class="col-sm-offset-6 col-sm-3">
                        <a class="btn btn-danger btn-block"
                           style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;"
                           ng-if="currentData.data.selected.Id != -1"
                           ng-click="deleteCurrent()">
                            <i class="fa fa-trash-o"></i> Delete
                        </a>
                    </div>
                </div>



            </div>
        </div>

    </div>

    <script type="text/javascript">
        window.onload = function (){
            var vm = angular.element(document.getElementById('controllerdiv')).scope();
            console.log(vm);
            vm.initData(@Html.Raw(JsonConvert.SerializeObject(Model.client.Platforms)), "platforms");
            vm.initData(@Html.Raw(JsonConvert.SerializeObject(Model.client.AlgorithmClasses)), "algoclass");
            vm.initData(@Html.Raw(JsonConvert.SerializeObject(Model.client.ProblemClasses)), "probclass");
            vm.initData(@Html.Raw(JsonConvert.SerializeObject(Model.client.Algorithms)), "algos");
            vm.initData(@Html.Raw(JsonConvert.SerializeObject(Model.client.Problems)), "problems");
        }
    </script>
</div>