@extends('layouts.app')

@section('content')
    <div id="staff-page"
         x-data="staffPage()"
         x-init="init()"
            data-data-url="{{ route('staff.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ý Nhân Viên"
            iconFa="users"
            iconFaStyle="fas"
            description="Quản lý thành viên trong tổ chức"
        />

        <div class="list-page-content">
            @php
                $toggleableColumns = [
                    ['key' => 'email', 'label' => 'Email'],
                    ['key' => 'created_at', 'label' => 'Ngày tạo'],
                ];

                $staffColumns = [
                    ['key' => '_stt', 'label' => 'STT', 'type' => 'index', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs', 'truncate' => false, 'toggleable' => false],
                    ['key' => 'name', 'label' => 'Họ và tên', 'toggleable' => false, 'cellClass' => 'col-left', 'widthClass' => 'col-lg', 'sticky' => 'left'],
                    ['key' => 'display_name', 'label' => 'Tên hiển thị', 'toggleable' => false, 'cellClass' => 'col-left', 'widthClass' => 'col-md'],
                    ['key' => 'email', 'label' => 'Email', 'cellClass' => 'col-left', 'widthClass' => 'col-lg'],
                    ['key' => 'role', 'label' => 'Vai trò', 'toggleable' => false, 'render' => 'roleLabel(row.role)', 'cellClass' => 'col-center', 'widthClass' => 'col-sm', 'truncate' => false],
                    ['key' => 'created_at', 'label' => 'Ngày tạo', 'type' => 'date', 'cellClass' => 'col-center', 'widthClass' => 'col-md'],
                ];
            @endphp

            <div x-data="columnVisibility({
                columns: {{ Illuminate\Support\Js::from($toggleableColumns) }},
            })">
                <x-ui.cards type="section-card" title="Danh sách nhân viên" 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-staff" placeholder="Tìm kiếm nhân viên..." class="search-input" x-model.debounce.300ms="filters.keyword" @keydown.enter="page = 1; loadRows()">
                                </div>
                            </div>
                            <x-ui.buttons type="button" variant="add" iconFa="plus" label="Thêm nhân viên" @click="openAddModal()" />
                            <x-ui.column-visibility />
                        </div>
                    </x-slot>

                    <x-ui.tabular
                        id="staff-table"
                        :columns="$staffColumns"
                        column-visibility="visible"
                        rows="rows"
                        loading="loading"
                        loadingText="Đang tải dữ liệu..."
                        emptyText="Chưa có nhân viên"
                        hasActions="true"
                        :sortable="false"
                        startIndex="startItem"
                    >
                        <x-slot name="actions">
                            <button class="btn-icon" type="button" @click="openEditModal(row)" :disabled="!row.can_update" 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="staff-pagination" />
                </x-ui.cards>
            </div>
        </div>

        {{-- Add Modal --}}
        <x-features.staff.staff-modal
            mode="create"
            id="addStaffModal"
            title="Thêm nhân viên"
            formId="addStaffForm"
            submitLabel="Thêm nhân viên"
        />

        {{-- Edit Modal --}}
        <x-features.staff.staff-modal
            mode="edit"
            id="editStaffModal"
            title="Sửa nhân viên"
            formId="editStaffForm"
            submitLabel="Lưu"
        />

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