@extends('layouts.admin')

@section('title', 'Gói dịch vụ')
@section('admin_shell_attributes')
x-data="packagesApp()" x-init="init()"
@endsection

@section('content')
    @include('partials.admin-topbar', [
        'markImage' => asset('default/Logo.png'),
        'markAlt' => 'Zaron',
        'title' => 'Gói dịch vụ',
        'subtitle' => 'Gói quyết định số tài khoản Zalo tối đa và thời hạn sử dụng của đơn vị.',
        'actions' => '<a href="'.route('units.page').'" class="btn btn-primary admin-btn"><i class="bi bi-diagram-2"></i> Đơ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 gói' : 'Thêm gói'"></h2>
                    <div class="admin-panel-note">
                        Sửa giới hạn tài khoản có hiệu lực ngay với các đơn vị đang dùng gói; ngày hết hạn đã tính của họ giữ nguyên.
                    </div>
                </div>
            </div>

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

                <label class="form-label admin-form-label" for="package-description">Mô tả</label>
                <textarea id="package-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="package-max-accounts">Số tài khoản Zalo được phép tạo</label>
                <input type="number" id="package-max-accounts" class="form-control admin-input mb-3" x-model="form.max_zalo_accounts" min="1" max="100000" required>

                <label class="form-label admin-form-label" for="package-duration">Thời hạn (ngày)</label>
                <input type="number" id="package-duration" class="form-control admin-input mb-3" x-model="form.duration_days" min="1" max="36500" required>

                <label class="form-label admin-form-label" for="package-price">Giá (VNĐ)</label>
                <input type="number" id="package-price" class="form-control admin-input mb-3" x-model="form.price" min="0" step="1000" required>

                <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" id="package-active" x-model="form.is_active">
                    <label class="form-check-label" for="package-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 gói'"></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 gói</h2>
                    <div class="admin-panel-note">
                        <span x-text="pagination.total"></span> gói
                    </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 gói"
                           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 gói</th>
                            <th>Mô tả</th>
                            <th>TK Zalo</th>
                            <th>Thời hạn</th>
                            <th>Giá</th>
                            <th>Trạng thái</th>
                            <th>Đơn vị dùng</th>
                            <th class="text-end">Thao tác</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="pkg in packages" :key="pkg.id">
                            <tr>
                                <td><span class="fw-semibold" x-text="pkg.name"></span></td>
                                <td><span class="text-muted" x-text="pkg.description || '—'"></span></td>
                                <td x-text="pkg.maxZaloAccounts"></td>
                                <td x-text="`${pkg.durationDays} ngày`"></td>
                                <td class="text-nowrap" x-text="formatPrice(pkg.price)"></td>
                                <td>
                                    <span class="badge" :class="pkg.isActive ? 'text-bg-success' : 'text-bg-secondary'"
                                          x-text="pkg.isActive ? 'Hoạt động' : 'Ngừng hoạt động'"></span>
                                </td>
                                <td>
                                    <span class="employee-count" x-text="pkg.unitsCount ?? 0"></span>
                                </td>
                                <td class="text-end text-nowrap">
                                    <button type="button"
                                            class="btn btn-sm btn-outline-secondary admin-icon-action"
                                            title="Sửa gói"
                                            aria-label="Sửa gói"
                                            @click="edit(pkg)">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    <button type="button"
                                            class="btn btn-sm btn-outline-danger admin-icon-action"
                                            :disabled="pkg.unitsCount > 0"
                                            :title="pkg.unitsCount > 0 ? 'Còn đơn vị dùng gói này' : 'Xoá gói'"
                                            :aria-label="pkg.unitsCount > 0 ? 'Còn đơn vị dùng gói này' : 'Xoá gói'"
                                            @click="askDelete(pkg)">
                                        <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 gói phù hợp.' : 'Chưa có gói 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="pagination.from ?? 0"></span>-<span x-text="pagination.to ?? 0"></span>
                    trong <span x-text="pagination.total"></span> gói
                </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á gói?</h5>
                    </div>
                    <div class="modal-body">
                        <p class="mb-0">Xoá gói <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-packages.js') }}?v={{ filemtime(public_path('js/super-admin-packages.js')) }}"></script>
@endpush