@{
    ViewData["Title"] = "Todo";
}
<!DOCTYPE html>
<html lang="sv" ng-app="todoApp">
<head>
    <meta charset="utf-8" />
    <title>@ViewData["Title"]</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <style>
        .todo-board {
            padding: 20px;
            font-family: sans-serif;
        }
        .todo-columns {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
        .todo-column {
            background: #f1f5f9;
            border-radius: 8px;
            padding: 10px;
            width: 250px;
            min-height: 200px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .todo-column h2 {
            margin-top: 0;
        }
        .todo-task {
            background: white;
            padding: 8px;
            border-radius: 6px;
            margin-bottom: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            cursor: move;
        }
        input[type="text"] {
            width: 100%;
            margin-top: 8px;
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            margin-top: 6px;
            padding: 6px 10px;
            background-color: #3b82f6;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .priority-low {
            border-left: 4px solid #10b981;
        }
        .priority-medium {
            border-left: 4px solid #f59e0b;
        }
        .priority-high {
            border-left: 4px solid #ef4444;
        }
    </style>
</head>
<body ng-controller="TodoController" class="todo-board" ng-init="loadTasks()">

    <h1>🗂️ Min idé-board</h1>

    <div class="todo-columns">
        <div class="todo-column" ng-repeat="col in columns">
            <h2>{{ col.title }}</h2>

            <div class="todo-task {{ priorityClass(task.priority) }}"
                 ng-repeat="task in filteredTasks(col.id) track by task.id"
                 draggable-task
                 task="task"
                 on-task-drop="moveTask(task, col.id)">
                {{ task.title }}
                <div>
                    <small>Prioritet:
                        <select ng-model="task.priority" ng-change="updatePriority(task)">
                            <option value="1">Låg</option>
                            <option value="2">Medel</option>
                            <option value="3">Hög</option>
                        </select>
                    </small>
                </div>
            </div>

            <div ng-if="col.id === 'ideas'">
                <input type="text" ng-model="newTask.title" placeholder="Ny idé..." />
                <select ng-model="newTask.priority">
                    <option value="1">Låg</option>
                    <option value="2">Medel</option>
                    <option value="3">Hög</option>
                </select>
                <button type="button" ng-click="addTask()">Lägg till</button>
            </div>
        </div>
    </div>

    <script>
        var app = angular.module("todoApp", []);

        app.controller("TodoController", function ($scope, $http) {
            $scope.columns = [
                { id: "ideas", title: "💡 Idéer" },
                { id: "doing", title: "🔧 Pågående" },
                { id: "done", title: "✅ Klart" }
            ];

            $scope.tasks = [];
            $scope.newTask = {
                title: '',
                priority: 2
            };

            $scope.loadTasks = function () {
                $http.get("/Admin/GetTodoTasks").then(res => {
                    $scope.tasks = res.data;
                });
            };

            $scope.addTask = function () {
                console.log("addTask:");

                const title = $scope.newTask.title;
                const priority = $scope.newTask.priority;

                if (typeof title !== 'string' || !title.trim()) {
                    console.warn("Titel är tom eller ogiltig:", title);
                    return;
                }
                console.log("post check");

                const task = {
                    title: title.trim(),
                    status: "ideas",
                    priority: priority
                };
                console.log("post title trim");

                $http.post("/Admin/AddTodoTask", task, {
                    headers: { 'Content-Type': 'application/json' }
                }).then(res => {
                    $scope.tasks.push(res.data);
                    $scope.newTask.title = '';
                    $scope.newTask.priority = 2;
                    console.log("Created task");
                }, err => {
                    console.error("Fel vid POST:", err);
                });
            };

            $scope.moveTask = function (task, newStatus) {
                task.status = newStatus;
                $http.post("/Admin/UpdateTodoTask", task);
            };

            $scope.updatePriority = function (task) {
                $http.post("/Admin/UpdateTodoTask", task);
            };

            $scope.priorityClass = function (priority) {
                return {
                    1: 'priority-low',
                    2: 'priority-medium',
                    3: 'priority-high'
                }[priority];
            };

        $scope.filteredTasks = function (status) {
            if (!$scope.tasks || !$scope.tasks.length) return [];

            // För säkerhets skull jämför lowercase
            return $scope.tasks.filter(t => (t.status || '').toLowerCase() === status.toLowerCase());
        };

            $scope.loadTasks();
        });

        app.directive("draggableTask", function () {
            return {
                restrict: "A",
                scope: {
                    task: "=",
                    onTaskDrop: "&"
                },
                link: function (scope, element) {
                    element.attr("draggable", true);
                    element.on("dragstart", function (e) {
                        e.dataTransfer.setData("text/plain", JSON.stringify(scope.task));
                    });
                }
            };
        });

        app.directive("ngRepeat", function () {
            return {
                restrict: "A",
                link: function (scope, element) {
                    element.on("dragover", function (e) {
                        e.preventDefault();
                        element.css("background-color", "#e0f2fe");
                    });
                    element.on("dragleave", function () {
                        element.css("background-color", "");
                    });
                    element.on("drop", function (e) {
                        e.preventDefault();
                        const data = e.dataTransfer.getData("text/plain");
                        const task = JSON.parse(data);
                        scope.onTaskDrop({ task });
                        element.css("background-color", "");
                        scope.$apply();
                    });
                }
            };
        });
    </script>
</body>
</html>
