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

@section('content')
<div class="mb-6 flex flex-col sm:flex-row flex-wrap sm:items-center sm:justify-between gap-4 pl-1">
    <div>
        <h1 class="text-[28px] font-extrabold text-[#1a2b49] flex items-center gap-2 mb-1.5 tracking-tight">
            <span id="pageTitle" class="inline-flex items-center gap-2">
                @include('admin.users.partials.title')
            </span>
        </h1>
        <p class="text-gray-500 font-medium text-[14px]">
            Xem danh sách nhân viên, cấp phát thẻ và cập nhật trạng thái làm việc.
        </p>
    </div>
    
    <div class="flex flex-col sm:flex-row items-center gap-3 shrink-0 w-full sm:w-auto">
        <a href="{{ route('admin.users.create') }}" class="inline-flex items-center justify-center bg-[#3462f7] hover:bg-blue-700 text-white font-bold py-2.5 px-5 rounded-xl text-sm transition-colors shadow-md shadow-blue-500/10 w-full sm:w-auto">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 mr-2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
            </svg>
            Thêm user mới
        </a>
    </div>
</div>

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

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

<div id="userTableContainer" class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] border border-white overflow-hidden mt-4">
    @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