@extends('layouts.app')

@section('content')
    @php
        $toggleableColumns = [
            ['key' => 'description', 'label' => 'Mô tả'],
            ['key' => 'created_by_name', 'label' => 'Người tạo'],
            ['key' => 'priority', 'label' => 'Mức ưu tiên'],
            ['key' => 'due_at', 'label' => 'Hạn hoàn thành'],
            ['key' => 'completed_at', 'label' => 'Ngày hoàn thành'],
            ['key' => 'created_at', 'label' => 'Ngày tạo'],
            ['key' => 'access', 'label' => 'Đối tượng xem'],
        ];

        $taskColumns = [
            ['key' => '_stt', 'label' => 'STT', 'type' => 'index', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs', 'truncate' => false, 'toggleable' => false],
            ['key' => 'title', 'label' => 'Tiêu đề', 'toggleable' => false, 'cellClass' => 'col-left', 'widthClass' => 'col-lg', 'sticky' => 'left'],
            ['key' => 'description', 'label' => 'Mô tả', 'render' => 'window.buildDescriptionToggleHtml(row.description)', 'cellClass' => 'col-center', 'widthClass' => 'col-sm', 'truncate' => false],
            ['key' => 'created_by_name', 'label' => 'Người tạo', 'cellClass' => 'col-center', 'widthClass' => 'col-md'],
            ['key' => 'created_at', 'label' => 'Ngày tạo', 'type' => 'date', 'cellClass' => 'col-center', 'widthClass' => 'col-md'],
            ['key' => 'assigned_to_name', 'label' => 'Người được giao', 'toggleable' => false, 'cellClass' => 'col-center', 'widthClass' => 'col-md'],
            ['key' => 'status', 'label' => 'Trạng thái', 'toggleable' => false, 'render' => 'renderStatusDropdown(row)', 'cellClass' => 'col-center col-status', 'widthClass' => 'col-sm', 'truncate' => false],
            ['key' => 'priority', 'label' => 'Ưu tiên', 'toggleable' => false, 'render' => 'renderPriorityDropdown(row)', 'cellClass' => 'col-center col-status', 'widthClass' => 'col-sm', 'truncate' => false],
            ['key' => 'due_at', 'label' => 'Hạn hoàn thành', 'type' => 'date', 'cellClass' => 'col-center', 'widthClass' => 'col-md'],
            ['key' => 'completed_at', 'label' => 'Ngày hoàn thành', 'type' => 'date', 'cellClass' => 'col-center', 'widthClass' => 'col-md'],
            ['key' => 'access', 'label' => 'Đối tượng xem', 'cellClass' => 'col-center', 'widthClass' => 'col-sm', 'render' => 'renderAccessBadge(row.access)'],
        ];
    @endphp

    <div id="tasks-page"
         x-data="tasksPage()"
         data-data-url="{{ route('tasks.data') }}"
         data-current-user-id="{{ auth()->user()->hex_id }}"
         data-current-user-role="{{ auth()->user()->role?->name ?? 'staff' }}">

        <x-layout.page-header
            title="Quản Lý Công Việc"
            iconFa="check-circle"
            iconFaStyle="fas"
            description="Quản lý và giao việc cho nhân viên"
        />

        <div class="list-page-content">
            <div x-data="columnVisibility({
                columns: @js($toggleableColumns),
            })">
            <x-ui.cards type="section-card" title="Danh sách công việc" cardClass="list-page-card list-page-table-card">
                <x-slot name="header">
                    <div class="section-header-actions">
                        <div class="header-search-wrap">
                            <div class="filter-search-inline">
                                <div class="search-input-icon">
                                    <x-fas-search class="search-icon" />
                                </div>
                                <input type="text" id="search-tasks" placeholder="Tìm kiếm công việc..." class="search-input" x-model.debounce.300ms="filters.keyword" @keydown.enter="page = 1; loadRows()">
                            </div>
                        </div>
                        <label style="display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:12px;color:var(--gray-600);">
                            <span>Ngày tạo</span>
                            <input type="date" class="filter-date-input" x-model="filters.created_at" @change="page = 1; loadRows()">
                        </label>
                        <label style="display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:12px;color:var(--gray-600);">
                            <span>Hạn</span>
                            <input type="date" class="filter-date-input" x-model="filters.due_at" @change="page = 1; loadRows()">
                        </label>
                        <select class="filter-select" x-model="filters.status" @change="page = 1; loadRows()">
                            <option value="">Trạng thái</option>
                            <template x-for="opt in statusOptions" :key="opt.value">
                                <option :value="opt.value" x-text="opt.label"></option>
                            </template>
                        </select>
                        <select class="filter-select" x-model="filters.priority" @change="page = 1; loadRows()">
                            <option value="">Ưu tiên</option>
                            <template x-for="opt in priorityOptions" :key="opt.value">
                                <option :value="opt.value" x-text="opt.label"></option>
                            </template>
                        </select>
                        <select class="filter-select" x-model="filters.created_by" @change="page = 1; loadRows()">
                            <option value="">Người tạo</option>
                            <template x-for="user in users" :key="user.id">
                                <option :value="user.id" x-text="user.display_name"></option>
                            </template>
                        </select>
                        <select class="filter-select" x-model="filters.assigned_to" @change="page = 1; loadRows()">
                            <option value="">Người được giao</option>
                            <template x-for="user in users" :key="user.id">
                                <option :value="user.id" x-text="user.display_name"></option>
                            </template>
                        </select>
                        <template x-if="canAssign()">
                            <x-ui.buttons type="button" variant="add" iconFa="plus" label="Giao việc" @click="openAddModal()" />
                        </template>
                        <x-ui.column-visibility />
                    </div>
                </x-slot>

                <x-ui.tabular
                    id="tasks-table"
                    :columns="$taskColumns"
                    column-visibility="visible"
                    rows="rows"
                    loading="loading"
                    loadingText="Đang tải dữ liệu..."
                    emptyText="Chưa có công việc"
                    hasActions="true"
                    :sortable="false"
                    startIndex="startItem"
                >
                    <x-slot name="actions">
                        <button class="btn-icon" type="button" @click="openEditModal(row)" :disabled="!row.can_edit_priority" title="Sửa">&#x270F;&#xFE0F;</button>
                        <button class="btn-icon btn-icon-danger" type="button" @click="confirmDelete(row.id)" :disabled="!row.can_delete" title="Xóa">&#x1F5D1;&#xFE0F;</button>
                    </x-slot>
                </x-ui.tabular>

                <x-ui.pagination id="tasks-pagination" />
            </x-ui.cards>
            </div>
        </div>

        <x-features.task.task-modal
            mode="create"
            id="addTaskModal"
            title="Giao việc"
            formId="addTaskForm"
            submitLabel="Giao việc"
        />

        <x-features.task.task-modal
            mode="edit"
            id="editTaskModal"
            title="Sửa công việc"
            formId="editTaskForm"
            submitLabel="Lưu"
        />

        <x-modals.confirm-modal
            id="deleteTaskConfirmModal"
            title="Xóa công việc"
            message="Bạn có chắc chắn muốn xóa công việc này? Hành động này không thể hoàn tác."
            level="error"
            confirm-label="Xóa"
            onConfirm="executeDeleteTask"
        />
    </div>
@endsection
