@extends('user::layouts/panel')

@section('module-content')
    <!-- 在表格上方添加篩選區域 -->
    <div class="card shadow border-0 mb-4">
        <div class="card-header bg-white py-3 border-bottom-0">
            <h5 class="card-title text-primary fw-bold mb-0">
                使用者篩選
            </h5>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <!-- 搜尋框 -->
                <div class="col-md-4">
                    <label for="globalSearch" class="form-label d-flex align-items-center">
                        <span>關鍵字搜尋</span>
                    </label>
                    <input type="text" class="form-control" id="globalSearch" placeholder="搜尋使用者...">
                </div>

                <!-- 狀態篩選 -->
                <div class="col-md-4">
                    <label for="status-filter" class="form-label d-flex align-items-center">
                        <span>使用者狀態</span>
                    </label>
                    <select id="status-filter" class="form-select select2">
                        <option value="啟用" selected>啟用</option>
                        <option value="停用">停用</option>
                    </select>
                </div>

                <!-- 使用者部門篩選 -->
                <div class="col-md-4">
                    <label for="dept-filter" class="form-label d-flex align-items-center">
                        <span>使用者部門</span>
                    </label>
                    <select id="dept-filter" class="form-select select2">
                        <option value="">所有部門</option>
                        @foreach($uniqueDepts as $deptName)
                            <option value="{{ $deptName }}">{{ $deptName }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow border-0">
        <div class="card-header bg-white py-3 border-bottom-0">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="select-all">
                        <label class="form-check-label" for="select-all">全選</label>
                    </div>
                    <div class="btn-group mt-2 batch-actions d-none">
                        <button type="button" class="btn btn-sm btn-outline-danger batch-delete">
                            <i class="fas fa-trash me-1"></i><span class="d-sm-inline">批次刪除</span>
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-success batch-enable">
                            <i class="fas fa-check me-1"></i><span class="d-sm-inline">批次啟用</span>
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-warning batch-disable">
                            <i class="fas fa-ban me-1"></i><span class="d-sm-inline">批次停用</span>
                        </button>
                    </div>
                </div>
                <a href="{{ route('panel.user.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>新增使用者
                </a>
            </div>
        </div>
        <div class="card-body p-0 p-sm-3">
            <div>
                <table id="dataTable" class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th></th>
                            <th class="text-center">帳號</th>
                            <th class="text-center">姓名</th>
                            <th class="text-center">角色</th>
                            <th class="text-center">狀態</th>
                            <th class="text-center">部門</th>
                            <th class="text-end">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 引入刪除確認 Modal -->
    @include('custom::components.modal.delete', ['title' => '確認刪除使用者?'])
@endsection

@push('meta')
    <meta name="dataTable-url" content="{{ $binding['dataTable-url'] }}">
    <meta name="batch-url" content="{{ $binding['batch-url'] }}">
    <meta name="user-status-url" content="{{ $binding['user-status-url'] }}">
    <meta name="user-destroy-url" content="{{ $binding['user-destroy-url'] }}">
@endpush

@push('module-scripts')
    @vite('resources/js/datatable.js')
    <script src="{{ Module::asset('user:js/panel/user/index.js') }}"></script>
@endpush

@push('links')
    @vite('resources/css/datatable.css')
@endpush