@extends('layouts.app')
@section('title', 'Quản lý Users')

@section('content')
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-border-light pb-4 mb-4">
    <h2 id="pageTitle" class="text-xl font-bold text-text-dark flex items-center gap-2">
        @include('admin.users.partials.title')
    </h2>
    <form action="{{ route('admin.reset_cards') }}" method="POST" class="w-full sm:w-auto" onsubmit="return confirm('Bạn có chắc chắn muốn reset toàn bộ số card hiện tại của các user về 0? Hành động này thường chỉ thực hiện vào cuối tháng.');">
        @csrf
        <button type="submit" class="border border-red-200 hover:bg-red-50 text-red-600 font-semibold py-1.5 px-4 rounded text-sm transition-colors shadow-sm w-full sm:w-auto">Reset Card Tháng</button>
    </form>
</div>

<div id="statsGrid" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
    @include('admin.users.partials.stats')
</div>

<x-user-filter-form :action="route('admin.users.index')" :search="$search" :flag-send="$flagSend" :selected-month="$selectedMonth" />

<div id="userTableContainer" class="bg-white shadow-sm rounded-xl overflow-hidden border border-border-light mt-2">
    @include('admin.users.partials.table')
</div>

<x-confirm-modal id="deleteModal" title="Xác nhận nghỉ việc" confirmText="Xác nhận Nghỉ việc" />
@endsection