{{!
    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 flex items-center justify-center shadow-lg shadow-brand text-white" style="background-color: var(--ats-primary);">
                    <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-brand hover:bg-white transition-all text-decoration-none">
                <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-brand 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}}">
                        <input type="hidden" name="action" value="add">

                        <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 focus-ring-brand focus:border-brand transition-all" 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 focus-ring-brand focus:border-brand transition-all" placeholder="Brief description..."></textarea>
                        </div>

                        <div class="pt-4">
                            <!-- زر صريح بلون الـ Primary -->
                            <button type="submit" class="w-full py-3.5 rounded-2xl shadow-lg shadow-brand text-white font-bold hover:opacity-90 transition-opacity border-0" style="background-color: var(--ats-primary);">
                                <i class="fas fa-save mr-2"></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-brand"></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>Date</th>
                                <th class="rounded-tr-2xl text-center">Actions</th>
                            </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200/50">
                            {{#categories}}
                                <tr class="hover:bg-brand-light/30 transition-colors">
                                    <td class="font-bold text-gray-800">
                                        <div class="flex items-center gap-2">
                                            <span class="w-2 h-2 rounded-full" style="background-color: var(--ats-primary);"></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>
                                    <td class="text-center">
                                        <div class="flex justify-center gap-2">
                                            <button type="button" class="w-8 h-8 rounded-full bg-brand-light text-brand flex items-center justify-center hover:bg-brand hover:text-white transition-colors edit-btn border border-transparent hover-border-brand" data-id="{{id}}" data-title="{{title}}" data-description="{{description}}">
                                                <i class="fas fa-edit text-sm"></i>
                                            </button>

                                            <form action="{{action_url}}" method="POST" class="inline m-0 delete-form">
                                                <input type="hidden" name="sesskey" value="{{sesskey}}">
                                                <input type="hidden" name="action" value="delete">
                                                <input type="hidden" name="id" value="{{id}}">
                                                <button type="button" class="w-8 h-8 rounded-full bg-red-50 text-red-600 flex items-center justify-center hover:bg-red-600 hover:text-white transition-colors delete-btn border border-transparent hover:border-red-600">
                                                    <i class="fas fa-trash text-sm"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            {{/categories}}
                            {{^categories}}
                                <tr>
                                    <td colspan="5" 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>

    {{#js}}
        const editBtns = document.querySelectorAll('.edit-btn');

        editBtns.forEach(btn => {
        btn.addEventListener('click', function() {
        const id = this.dataset.id;
        const title = this.dataset.title.replace(/"/g, '&quot;');
        const description = this.dataset.description;

        if (typeof Swal !== 'undefined') {
        Swal.fire({
        showConfirmButton: false,
        showCancelButton: false,
        customClass: {
        popup: 'rounded-[2rem] p-6 sm:p-8 shadow-2xl border border-gray-100 bg-white'
        },
        html: `
        <div class="ats-container" style="min-height: auto !important; background: transparent !important; padding: 0 !important; overflow: visible !important;">

            <div class="text-center mb-6 mt-2">
                <div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-sm" style="background-color: var(--ats-primary-light); color: var(--ats-primary);">
                    <i class="fas fa-edit text-3xl"></i>
                </div>
                <h2 class="text-2xl font-extrabold text-gray-800">Edit Department</h2>
                <p class="text-sm text-gray-500 mt-1">Update the details below</p>
            </div>

            <form id="swalEditForm" action="{{action_url}}" method="POST" class="text-left space-y-5 px-1">
                <input type="hidden" name="sesskey" value="{{sesskey}}">
                <input type="hidden" name="action" value="edit">
                <input type="hidden" name="id" value="${id}">

                <div>
                    <label for="swal_edit_title" class="block text-sm font-bold text-gray-600 mb-2">Title <span class="text-red-500">*</span></label>
                    <input type="text" id="swal_edit_title" name="title"
                           class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-800 bg-gray-50 focus:bg-white outline-none transition-all shadow-sm"
                           onfocus="this.style.borderColor='var(--ats-primary)'; this.style.boxShadow='0 0 0 4px var(--ats-primary-light)';"
                           onblur="this.style.borderColor=''; this.style.boxShadow='';"
                           value="${title}" required>
                </div>

                <div>
                    <label for="swal_edit_description" class="block text-sm font-bold text-gray-600 mb-2">Description</label>
                    <textarea id="swal_edit_description" name="description" rows="4"
                              class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-800 bg-gray-50 focus:bg-white outline-none transition-all shadow-sm resize-none"
                              onfocus="this.style.borderColor='var(--ats-primary)'; this.style.boxShadow='0 0 0 4px var(--ats-primary-light)';"
                              onblur="this.style.borderColor=''; this.style.boxShadow='';">${description}</textarea>
                </div>

                <div class="pt-6 mt-4 flex justify-center gap-3">
                    <!-- زر الغاء يعتمد على اللون الثانوي (Secondary) -->
                    <button type="button" onclick="Swal.close()" class="flex-1 text-white font-bold py-3.5 rounded-2xl hover:opacity-90 transition-opacity border-0 shadow-sm" style="background-color: var(--ats-secondary);">
                        Cancel
                    </button>
                    <!-- زر تحديث يعتمد على اللون الرئيسي (Primary) -->
                    <button type="submit" class="flex-1 text-white shadow-brand border-0 py-3.5 rounded-2xl font-bold hover:opacity-90 transition-opacity" style="background-color: var(--ats-primary);">
                        <i class="fas fa-save mr-2"></i> Update
                    </button>
                </div>
            </form>

        </div>
        `
        });
        }
        });
        });

        const deleteBtns = document.querySelectorAll('.delete-btn');
        deleteBtns.forEach(btn => {
        btn.addEventListener('click', function(e) {
        e.preventDefault();
        const form = this.closest('.delete-form');
        if (typeof Swal !== 'undefined') {
        Swal.fire({
        title: '<div class="text-3xl font-extrabold text-gray-800 mb-2">Are you sure?</div>',
        html: '<p class="text-gray-500 font-medium text-lg">This department will be permanently deleted!</p>',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: '<i class="fas fa-trash mr-2"></i> Yes, delete it!',
        cancelButtonText: 'Cancel',
        customClass: {
        popup: 'rounded-[2rem] p-6 shadow-2xl border border-gray-100',
        // حذف باللون الأحمر لأنه خطر
        confirmButton: 'bg-red-500 hover:bg-red-600 text-white font-bold py-3.5 px-8 rounded-2xl shadow-lg shadow-red-500/30 border-0 ml-3 transition-colors text-lg',
        // إلغاء الحذف باللون الثانوي
        cancelButton: 'text-white font-bold py-3.5 px-8 rounded-2xl hover:opacity-90 transition-opacity mr-3 text-lg border-0 shadow-sm'
        },
        buttonsStyling: false,
        didOpen: () => {
        // تعيين اللون الثانوي لزر الالغاء
        const cancelBtn = Swal.getCancelButton();
        if(cancelBtn) cancelBtn.style.backgroundColor = 'var(--ats-secondary)';
        }
        }).then((result) => {
        if (result.isConfirmed) {
        form.submit();
        }
        });
        }
        });
        });

        {{#has_alert}}
            if (typeof Swal !== 'undefined') {
            Swal.fire({
            icon: "{{alert.type}}" === "error" ? "error" : ("{{alert.type}}" === "warning" ? "warning" : "success"),
            title: '<div class="text-2xl font-extrabold text-gray-800">{{alert.title}}</div>',
            html: '<p class="text-gray-500 font-medium text-lg">{{alert.message}}</p>',
            confirmButtonText: 'OK',
            customClass: {
            popup: 'rounded-[2rem] p-6 sm:p-8 shadow-2xl border border-gray-100 bg-white',
            // الزر بياخد كلاسات مبدئية
            confirmButton: 'text-white font-bold py-3.5 px-12 rounded-2xl shadow-lg border-0 text-lg hover:opacity-90 transition-opacity'
            },
            buttonsStyling: false,
            didOpen: () => {
            // إجبار زر OK في رسالة النجاح إنه ياخد لون الـ Primary بتاعك
            const confirmBtn = Swal.getConfirmButton();
            if(confirmBtn) confirmBtn.style.backgroundColor = 'var(--ats-primary)';
            }
            }).then((result) => {
            {{#alert.redirect}}
                window.location.href = "{{alert.redirect}}";
            {{/alert.redirect}}
            });
            }
        {{/has_alert}}
    {{/js}}
</div>
