@extends('layouts.admin')

@section('title', 'Quản lý đơn vị')
@section('admin_shell_attributes')
x-data="unitsApp()" x-init="init()"
@endsection

@section('content')
    @include('partials.admin-topbar', [
        'markImage' => asset('default/Logo.png'),
        'markAlt' => 'Zaron',
        'title' => 'Quản lý đơn vị',
        'subtitle' => 'Mỗi tài khoản admin/nhân viên thuộc đúng 1 đơn vị. Super admin không thuộc đơn vị nào.',
        'actions' => '<a href="'.route('all-accounts.page').'" class="btn btn-primary admin-btn"><i class="bi bi-people-fill"></i> Tất cả tài khoản</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 đơn vị' : 'Thêm đơn vị'"></h2>
                    <div class="admin-panel-note">
                        Tên đơn vị hiển thị cho admin/nhân viên và ở màn quản lý tài khoản.
                    </div>
                </div>
            </div>

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

                <label class="form-label admin-form-label" for="unit-description">Mô tả</label>
                <textarea id="unit-description" class="form-control admin-input mb-3" x-model="form.description" rows="3" maxlength="1000"></textarea>

                <label class="form-label admin-form-label" for="unit-package">Gói dịch vụ</label>
                <select id="unit-package" class="form-select admin-input mb-1" x-model="form.package_id">
                    <option value="">— Không dùng gói (không giới hạn) —</option>
                    <template x-for="pkg in selectablePackages()" :key="pkg.id">
                        <option :value="String(pkg.id)"
                                :selected="String(pkg.id) === form.package_id"
                                x-text="`${pkg.name} · ${pkg.maxZaloAccounts} TK Zalo · ${pkg.durationDays} ngày${pkg.isActive ? '' : ' (ngừng hoạt động)'}`"></option>
                    </template>
                </select>
                <div class="form-text mb-3" x-show="!editing && selectedPackage()" x-cloak>
                    Ngày hết hạn sẽ tự tính: <strong x-text="formatDate(previewExpiry())"></strong>
                </div>
                <div class="mb-3" x-show="!(!editing && selectedPackage())"></div>

                <label class="form-label admin-form-label" for="unit-max-accounts">Số tài khoản Zalo tối đa (ghi đè)</label>
                <input type="number"
                       id="unit-max-accounts"
                       class="form-control admin-input mb-1"
                       x-model="form.max_zalo_accounts"
                       min="1"
                       max="100000"
                       :placeholder="selectedPackage() ? `Theo gói: ${selectedPackage().maxZaloAccounts}` : 'Không giới hạn'">
                <div class="form-text mb-3">Để trống để theo gói. Dùng khi khuyến mãi thêm tài khoản mà không cần tạo gói mới.</div>

                <template x-if="editing">
                    <div>
                        <label class="form-label admin-form-label" for="unit-expires-at">Ngày hết hạn</label>
                        <input type="date" id="unit-expires-at" class="form-control admin-input mb-1" x-model="form.expires_at">
                        <div class="form-text mb-3">
                            Ngày cuối cùng còn đăng nhập được. Để trống = không hết hạn
                            <span x-show="form.package_id && String(editing.packageId ?? '') !== form.package_id">(đổi gói mà để trống thì tự tính theo gói mới)</span>.
                        </div>
                    </div>
                </template>

                <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" id="unit-active" x-model="form.is_active">
                    <label class="form-check-label" for="unit-active">Đang hoạt động</label>
                </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 đơn vị'"></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 đơn vị</h2>
                    <div class="admin-panel-note">
                        <span x-text="pagination.total"></span> đơn vị
                    </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 đơn vị"
                           x-model="filters.keyword"
                           @input="onFilterInput()">
                </div>
            </div>

            <div class="table-responsive admin-table-wrap">
                <table class="table align-middle mb-0 admin-table">
                    <thead>
                        <tr>
                            <th>Tên đơn vị</th>
                            <th>Mô tả</th>
                            <th>Gói</th>
                            <th>TK Zalo</th>
                            <th>Ngày hết hạn</th>
                            <th>Trạng thái</th>
                            <th>Số tài khoản</th>
                            <th class="text-end">Thao tác</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="unit in units" :key="unit.id">
                            <tr>
                                <td><span class="fw-semibold" x-text="unit.name"></span></td>
                                <td><span class="text-muted" x-text="unit.description || '—'"></span></td>
                                <td><span x-text="unit.packageName || '—'"></span></td>
                                <td class="text-nowrap">
                                    <span :class="unit.zaloAccountLimit !== null && unit.zaloAccountsCount >= unit.zaloAccountLimit ? 'text-danger fw-semibold' : ''"
                                          x-text="`${unit.zaloAccountsCount ?? 0}/${unit.zaloAccountLimit ?? '∞'}`"></span>
                                    <i class="bi bi-gift text-success ms-1" x-show="unit.maxZaloAccounts !== null" x-cloak title="Ghi đè giới hạn của gói"></i>
                                </td>
                                <td class="text-nowrap">
                                    <span x-text="unit.expiresAt ? formatDate(unit.expiresAt) : '—'"></span>
                                    <i class="bi bi-exclamation-triangle-fill text-danger ms-1"
                                       x-show="unit.isExpiringSoon"
                                       x-cloak
                                       :title="expiryTitle(unit)"
                                       :aria-label="expiryTitle(unit)"></i>
                                    <span class="badge text-bg-danger ms-1" x-show="unit.isExpired" x-cloak>Đã hết hạn</span>
                                </td>
                                <td>
                                    <span class="badge" :class="unit.isActive ? 'text-bg-success' : 'text-bg-secondary'"
                                          x-text="unit.isActive ? 'Hoạt động' : 'Ngừng hoạt động'"></span>
                                </td>
                                <td>
                                    <span class="employee-count" x-text="unit.usersCount ?? 0"></span>
                                </td>
                                <td class="text-end">
                                    <button type="button"
                                            class="btn btn-sm btn-outline-secondary admin-icon-action"
                                            title="Sửa đơn vị"
                                            aria-label="Sửa đơn vị"
                                            @click="edit(unit)">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    <button type="button"
                                            class="btn btn-sm btn-outline-danger admin-icon-action"
                                            :disabled="unit.usersCount > 0"
                                            :title="unit.usersCount > 0 ? 'Còn tài khoản thuộc đơn vị này, chuyển họ đi trước' : 'Xoá đơn vị'"
                                            :aria-label="unit.usersCount > 0 ? 'Còn tài khoản thuộc đơn vị này, chuyển họ đi trước' : 'Xoá đơn vị'"
                                            @click="askDelete(unit)">
                                        <i class="bi bi-trash3"></i>
                                    </button>
                                </td>
                            </tr>
                        </template>
                        <tr x-show="!loading && pagination.total === 0">
                            <td colspan="8" class="text-center text-muted py-4" x-text="filters.keyword ? 'Không tìm thấy đơn vị phù hợp.' : 'Chưa có đơn vị 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> đơn vị
                </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á đơn vị?</h5>
                    </div>
                    <div class="modal-body">
                        <p class="mb-0">
                            Xoá đơn vị <strong x-text="deleteTarget.name"></strong>?
                        </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 src="{{ asset('js/super-admin-units.js') }}?v={{ filemtime(public_path('js/super-admin-units.js')) }}"></script>
@endpush