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

@section('content')
<div class="mb-6 flex flex-col sm:flex-row 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>
        <button type="button" onclick="openModal('resetModal')" class="cursor-pointer border border-red-200 bg-red-50/50 hover:bg-red-50 text-red-600 font-bold py-2.5 px-5 rounded-xl text-sm transition-colors shadow-sm w-full sm:w-auto">Reset Card Tháng</button>
    </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" :flag-send="$flagSend" :selected-month="$selectedMonth" />

<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" />

<x-modal id="resetModal" title="Xác nhận reset card" maxWidth="md" hideHeader="true">
    <div class="flex items-start gap-4">
        <div class="flex-shrink-0 flex items-center justify-center w-12 h-12 bg-red-100 rounded-full">
            <svg class="w-6 h-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
        </div>
        <div class="flex-1 mt-1">
            <h3 class="text-lg font-bold text-gray-900">Xác nhận reset card tháng</h3>
            <p class="text-sm text-gray-600 mt-2 leading-relaxed">
                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?<br><br>Hành động này thường chỉ thực hiện vào cuối tháng và không thể hoàn tác.
            </p>
        </div>
    </div>

    <x-slot name="footer">
        <form action="{{ route('admin.reset_cards') }}" method="POST" class="w-full sm:w-auto">
            @csrf
            <button type="submit" class="w-full btn-primary !px-6 shadow-sm bg-red-600 hover:bg-red-700">Đồng ý Reset</button>
        </form>
        <button type="button" onclick="closeModal('resetModal')" class="w-full sm:w-auto btn-secondary !px-6 shadow-sm">Hủy bỏ</button>
    </x-slot>
</x-modal>
@endsection