{{!
    This file is part of Moodle - https://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <https://www.gnu.org/licenses/>.

    @package    local_academic_ticket_system
    @copyright  2025 learn-ix support@learn-ix.com
    @license    https://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
}}
<div class="ats-container">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

    <div class="fixed inset-0 z-[-1] bg-gray-100 overflow-hidden">
        <div class="blob blob-1 rounded-full"></div>
        <div class="blob blob-2 rounded-full"></div>
        <div class="blob blob-3 rounded-full"></div>
        <div class="absolute inset-0 bg-white/60 backdrop-blur-[60px]"></div>
    </div>

    <div class="container mx-auto p-4 sm:p-6 lg:p-10 max-w-7xl relative z-10 min-h-screen flex flex-col">

        <header class="glass-panel rounded-3xl p-6 mb-10 flex flex-col md:flex-row items-center justify-between gap-6 transition-all duration-500 hover:shadow-2xl">
            <div class="flex items-center gap-6 w-full md:w-auto">
                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center shadow-lg text-white">
                    <i class="fas fa-plus text-3xl"></i>
                </div>
                <div class="flex-1">
                    <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-800 flex items-center gap-2 flex-wrap">
                        {{#str}}add_new_department, local_academic_ticket_system{{/str}}
                    </h1>
                    <p class="text-gray-500 font-medium truncate max-w-md mt-1">Create and manage ticket categories</p>
                </div>
            </div>

            <a href="{{index_url}}" class="glass-card px-6 py-3 rounded-2xl flex items-center gap-2 text-gray-700 font-bold hover:text-purple-600 hover:bg-white transition-all">
                <i class="fas fa-arrow-left"></i>
                {{#str}}return_home, local_academic_ticket_system{{/str}}
            </a>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

            <div class="lg:col-span-1">
                <div class="glass-panel rounded-3xl p-8 sticky top-10">
                    <h2 class="text-xl font-extrabold text-gray-800 mb-6 flex items-center pb-4 border-b border-gray-200/50">
                        <i class="fas fa-pen-nib text-purple-600 mr-3 text-xl"></i> Department Details
                    </h2>

                    <form action="{{action_url}}" method="POST" class="space-y-6">
                        <input type="hidden" name="sesskey" value="{{sesskey}}">

                        <div>
                            <label for="title" class="block text-sm font-bold text-gray-600 mb-2">Title <span class="text-red-500">*</span></label>
                            <input type="text" id="title" name="title" class="glass-input" placeholder="e.g., IT Support" required>
                        </div>

                        <div>
                            <label for="description" class="block text-sm font-bold text-gray-600 mb-2">Description <span class="text-gray-400 font-normal">(Optional)</span></label>
                            <textarea id="description" name="description" rows="4" class="glass-input resize-none" placeholder="Brief description..."></textarea>
                        </div>

                        <div class="pt-4">
                            <button type="submit" class="btn-gradient bg-grad-purple w-full py-3 shadow-lg shadow-purple-500/20">
                                <i class="fas fa-save"></i> Save Department
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="lg:col-span-2">
                <div class="glass-panel rounded-3xl p-1 overflow-hidden">
                    <div class="bg-white/40 p-6 border-b border-white/50">
                        <h2 class="text-xl font-extrabold text-gray-800 flex items-center gap-3">
                            <i class="fas fa-list-ul text-blue-600"></i> Existing Departments
                        </h2>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="w-full custom-table text-left">
                            <thead>
                            <tr>
                                <th class="rounded-tl-2xl">Name</th>
                                <th>Description</th>
                                <th>Created By</th>
                                <th class="rounded-tr-2xl">Date</th>
                            </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200/50">
                            {{#categories}}
                                <tr>
                                    <td class="font-bold text-gray-800">
                                        <div class="flex items-center gap-2">
                                            <span class="w-2 h-2 rounded-full bg-purple-400"></span>
                                            {{title}}
                                        </div>
                                    </td>
                                    <td class="text-sm text-gray-600">
                                        {{#description}}
                                            {{description}}
                                        {{/description}}
                                        {{^description}}
                                            <span class="text-gray-400 italic text-xs">No description</span>
                                        {{/description}}
                                    </td>
                                    <td class="text-sm">
                                        <div class="flex items-center gap-2">
                                            <div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-xs text-gray-500">
                                                <i class="fas fa-user"></i>
                                            </div>
                                            {{created_by}}
                                        </div>
                                    </td>
                                    <td class="text-xs text-gray-500 font-mono">{{created_at}}</td>
                                </tr>
                            {{/categories}}
                            {{^categories}}
                                <tr>
                                    <td colspan="4" class="text-center py-10">
                                        <div class="flex flex-col items-center justify-center text-gray-400">
                                            <i class="fas fa-folder-open text-4xl mb-2 opacity-50"></i>
                                            <p>No departments found.</p>
                                        </div>
                                    </td>
                                </tr>
                            {{/categories}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{#has_alert}}
    {{#js}}
    require(['local_academic_ticket_system/category_alert'], function(categoryAlert) {
        categoryAlert.init({
            type: "{{alert.type}}",
            title: "{{alert.title}}",
            message: "{{alert.message}}",
            redirect: "{{alert.redirect}}"
        });
    });
    {{/js}}
    {{/has_alert}}
</div>
