@extends('layouts.admin')

@section('title', 'Tất cả tài khoản')
@section('admin_shell_attributes')
x-data="superAdminAccountsApp()" x-init="init()"
@endsection

@section('content')
    @include('partials.admin-topbar', [
        'markImage' => asset('default/Logo.png'),
        'markAlt' => 'Zaron',
        'title' => 'Tất cả tài khoản',
        'subtitle' => 'Tài khoản của mọi đơn vị. Admin thường chỉ thấy tài khoản cùng đơn vị của mình ở trang Nhân viên.',
        'actions' => '<a href="'.route('units.page').'" class="btn btn-primary admin-btn"><i class="bi bi-diagram-2"></i> Quản lý đơn vị</a>',
    ])

    @include('settings.partials.nav-tabs')

    <div class="alert alert-danger admin-alert" x-show="errorMessage" x-cloak x-text="errorMessage"></div>
    <div class="alert alert-success admin-alert" role="status" x-show="successMessage" x-cloak x-text="successMessage"></div>

    <div class="admin-layout admin-layout-wide">
        <div class="admin-panel">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title" x-text="editing ? 'Sửa tài khoản' : 'Thêm tài khoản'"></h2>
                    <div class="admin-panel-note">
                        Đăng nhập bằng số điện thoại. Mật khẩu tối thiểu 8 ký tự.
                    </div>
                </div>
            </div>

            <form class="admin-panel-body" @submit.prevent="submit()">
                <label class="form-label admin-form-label" for="account-name">Tên</label>
                <input type="text" id="account-name" class="form-control admin-input mb-3" x-model="form.name" maxlength="255" required>

                <label class="form-label admin-form-label" for="account-phone">Số điện thoại</label>
                <input type="tel" id="account-phone" class="form-control admin-input mb-3" x-model="form.phone" maxlength="20" required>

                <label class="form-label admin-form-label" for="account-password">
                    <span x-text="editing ? 'Mật khẩu mới (để trống nếu không đổi)' : 'Mật khẩu'"></span>
                </label>
                <input type="password" id="account-password" class="form-control admin-input mb-3" x-model="form.password"
                       autocomplete="new-password" :required="!editing">

                <label class="form-label admin-form-label" for="account-role">Vai trò</label>
                <select id="account-role" class="form-select admin-select mb-3" x-model="form.role" @change="onRoleChange()">
                    <option value="staff">Nhân viên</option>
                    <option value="admin">Quản trị viên</option>
                    <option value="super_admin">Super Admin</option>
                </select>

                <label class="form-label admin-form-label" for="account-unit">Đơn vị</label>
                <select id="account-unit" class="form-select admin-select mb-3" x-model="form.unit_id"
                        :disabled="form.role === 'super_admin'" :required="form.role !== 'super_admin'">
                    <option value="">— Chọn đơn vị —</option>
                    <template x-for="unit in units" :key="unit.id">
                        <option :value="unit.id" x-text="unit.name"></option>
                    </template>
                </select>
                <div class="form-text mb-3" x-show="form.role === 'super_admin'">
                    Super admin không thuộc đơn vị nào.
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary admin-btn" :disabled="saving">
                        <span x-show="saving" class="spinner-border spinner-border-sm me-1"></span>
                        <span x-text="editing ? 'Lưu thay đổi' : 'Tạo tài khoản'"></span>
                    </button>
                    <button type="button" class="btn btn-outline-secondary admin-btn" x-show="editing" @click="resetForm()">
                        Huỷ
                    </button>
                </div>
            </form>
        </div>

        <div class="admin-panel">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Danh sách tài khoản</h2>
                    <div class="admin-panel-note">
                        <span x-text="pagination.total"></span> tài khoản
                    </div>
                </div>
                <button type="button"
                        class="btn btn-outline-secondary admin-icon-action"
                        title="Làm mới"
                        aria-label="Làm mới"
                        :disabled="loading"
                        @click="load()">
                    <span x-show="loading" class="spinner-border spinner-border-sm"></span>
                    <i class="bi bi-arrow-clockwise" x-show="!loading"></i>
                </button>
            </div>

            <div class="admin-filter-bar">
                <div class="admin-filter-search">
                    <i class="bi bi-search"></i>
                    <input type="search"
                           class="form-control admin-input"
                           placeholder="Tìm theo tên hoặc số điện thoại"
                           x-model="filters.keyword"
                           @input="onFilterInput()">
                </div>
                <select class="form-select admin-select admin-filter-role"
                        x-model="filters.role"
                        @change="applyFilters()">
                    <option value="">Tất cả vai trò</option>
                    <option value="super_admin">Super Admin</option>
                    <option value="admin">Quản trị viên</option>
                    <option value="staff">Nhân viên</option>
                </select>
                <select class="form-select admin-select admin-filter-role"
                        x-model="filters.unitId"
                        @change="applyFilters()">
                    <option value="">Tất cả đơn vị</option>
                    <template x-for="unit in units" :key="unit.id">
                        <option :value="unit.id" x-text="unit.name"></option>
                    </template>
                </select>
            </div>

            <div class="table-responsive admin-table-wrap">
                <table class="table align-middle mb-0 admin-table">
                    <thead>
                        <tr>
                            <th>Tên</th>
                            <th>Số điện thoại</th>
                            <th>Vai trò</th>
                            <th>Đơn vị</th>
                            <th>TK Zalo</th>
                            <th class="text-end">Thao tác</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="user in users" :key="user.id">
                            <tr>
                                <td>
                                    <div class="employee-cell">
                                        <span class="employee-avatar" x-text="(user.name || 'N').slice(0, 1).toUpperCase()"></span>
                                        <span class="employee-name" x-text="user.name"></span>
                                    </div>
                                </td>
                                <td><code class="employee-phone" x-text="user.phone"></code></td>
                                <td>
                                    <span class="badge employee-role"
                                          :class="user.role === 'admin' ? 'is-admin' : (user.role === 'super_admin' ? 'is-admin' : 'is-staff')"
                                          x-text="user.roleLabel"></span>
                                </td>
                                <td><span x-text="user.unitName || '—'"></span></td>
                                <td>
                                    <span class="employee-count" x-text="user.zaloAccountCount ?? 0"></span>
                                </td>
                                <td class="text-end">
                                    <button type="button"
                                            class="btn btn-sm btn-outline-secondary admin-icon-action"
                                            title="Sửa tài khoản"
                                            aria-label="Sửa tài khoản"
                                            @click="edit(user)">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    <button type="button"
                                            class="btn btn-sm btn-outline-danger admin-icon-action"
                                            :disabled="user.id === currentUserId"
                                            :title="user.id === currentUserId ? 'Không thể tự xoá mình' : 'Xoá tài khoản'"
                                            :aria-label="user.id === currentUserId ? 'Không thể tự xoá mình' : 'Xoá tài khoản'"
                                            @click="askDelete(user)">
                                        <i class="bi bi-trash3"></i>
                                    </button>
                                </td>
                            </tr>
                        </template>
                        <tr x-show="!loading && pagination.total === 0">
                            <td colspan="6" class="text-center text-muted py-4" x-text="filters.keyword || filters.role || filters.unitId ? 'Không tìm thấy tài khoản phù hợp.' : 'Chưa có tài khoản nào.'"></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="admin-pagination" x-show="pagination.total > 0">
                <div class="admin-pagination-summary">
                    Hiển thị
                    <span x-text="paginationStart()"></span>-<span x-text="paginationEnd()"></span>
                    trong <span x-text="pagination.total"></span> tài khoản
                </div>
                <div class="admin-pagination-actions">
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary admin-icon-action"
                            title="Trang trước"
                            aria-label="Trang trước"
                            :disabled="currentPage <= 1"
                            @click="goToPage(currentPage - 1)">
                        <i class="bi bi-chevron-left"></i>
                    </button>
                    <span class="admin-page-indicator">
                        Trang <span x-text="currentPage"></span>/<span x-text="totalPages()"></span>
                    </span>
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary admin-icon-action"
                            title="Trang sau"
                            aria-label="Trang sau"
                            :disabled="currentPage >= totalPages()"
                            @click="goToPage(currentPage + 1)">
                        <i class="bi bi-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <template x-if="deleteTarget">
        <div class="modal d-block" style="background: rgba(15,23,42,.45);" @click="deleteTarget = null">
            <div class="modal-dialog modal-dialog-centered" @click.stop>
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Xoá tài khoản?</h5>
                    </div>
                    <div class="modal-body">
                        <p class="mb-2">
                            Xoá <strong x-text="deleteTarget.name"></strong> (<span x-text="deleteTarget.phone"></span>)?
                        </p>
                        <p class="small text-muted mb-0">
                            <span x-text="deleteTarget.zaloAccountCount ?? 0"></span> tài khoản Zalo của người này
                            <strong>không bị xoá</strong>, chỉ chuyển sang trạng thái không có chủ.
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" @click="deleteTarget = null">Huỷ</button>
                        <button type="button" class="btn btn-danger" :disabled="saving" @click="confirmDelete()">
                            <span x-show="saving" class="spinner-border spinner-border-sm me-1"></span>
                            Xoá
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </template>
@endsection

@push('scripts')
<script>
    window.CURRENT_USER_ID = @json(auth()->id());
</script>
<script src="{{ asset('js/super-admin-accounts.js') }}?v={{ filemtime(public_path('js/super-admin-accounts.js')) }}"></script>
@endpush