@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">
    <h2 class="text-xl font-bold text-text-dark flex items-center gap-2">
        Danh sách User (Tháng {{ Carbon\Carbon::parse($selectedMonth)->format('m/Y') }})
    </h2>
    <div class="flex flex-wrap items-center gap-4">
        <form id="filterForm" action="{{ route('admin.users.index') }}" method="GET" class="flex items-center gap-2">
            <input type="month" name="month" value="{{ $selectedMonth }}" class="form-input !py-1.5 !text-sm w-auto border-border-medium rounded">
            <button type="submit" id="btnFilter" class="btn-primary !py-1.5 !px-4 text-sm rounded shadow-sm hover:translate-y-[-1px] flex items-center justify-center min-w-[70px]">Lọc</button>
        </form>
        
        <form action="{{ route('admin.reset_cards') }}" method="POST" 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="bg-red-500 hover:bg-red-600 text-white font-bold py-1.5 px-4 rounded text-sm shadow-md transition-colors">Reset Card Tháng</button>
        </form>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="card-stat-active !bg-[#0f4c81]">
        <div class="space-y-2">
            <div class="flex justify-between items-center">
                <span class="text-white/90 text-xs font-bold uppercase tracking-wider">User nhận nhiều nhất</span>
                <span class="text-2xl font-black">{{ $topReceivedUser && $topReceivedUser->total_received > 0 ? $topReceivedUser->msnv : 'Chưa có' }}</span>
            </div>
            <div class="flex justify-between items-center pt-2 border-t border-white/20">
                <span class="text-white/80 text-[10px] font-bold">Tổng thẻ đã nhận</span>
                <span class="text-lg font-bold text-yellow-300">{{ $topReceivedUser ? $topReceivedUser->total_received : 0 }} thẻ</span>
            </div>
        </div>
    </div>

    <div class="card-stat-active !bg-[#ef222e]">
        <div class="space-y-2">
            <div class="flex justify-between items-center">
                <span class="text-white/90 text-xs font-bold uppercase tracking-wider">User gửi nhiều nhất</span>
                <span class="text-2xl font-black">{{ $topSentUser && $topSentUser->total_sent > 0 ? $topSentUser->msnv : 'Chưa có' }}</span>
            </div>
            <div class="flex justify-between items-center pt-2 border-t border-white/20">
                <span class="text-white/80 text-[10px] font-bold">Tổng thẻ đã gửi</span>
                <span class="text-lg font-bold text-yellow-300">{{ $topSentUser ? $topSentUser->total_sent : 0 }} thẻ</span>
            </div>
        </div>
    </div>
</div>

<div class="bg-white shadow-sm rounded-xl overflow-hidden border border-border-light mt-2">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-border-light text-sm">
            <thead class="bg-gray-50/80">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">MSNV</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Email</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Đã Nhận</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Đã Gửi</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Số dư thẻ</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Quyền gửi</th>
                    <th class="px-6 py-4 text-right text-xs font-bold text-text-light uppercase tracking-wider">Thao tác</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-border-light">
                @forelse($users as $u)
                <tr class="hover:bg-slate-50 transition-colors">
                    <td class="px-6 py-3 whitespace-nowrap font-bold text-text-dark">{{ $u->msnv }}</td>
                    <td class="px-6 py-3 whitespace-nowrap text-text-medium">{{ $u->mail }}</td>
                    <td class="px-6 py-3 whitespace-nowrap font-extrabold text-green-600">+{{ $u->total_received }}</td>
                    <td class="px-6 py-3 whitespace-nowrap font-extrabold text-blue-600">{{ $u->total_sent }}</td>
                    <td class="px-6 py-3 whitespace-nowrap font-extrabold text-orange-500">{{ $u->card }}</td>
                    <td class="px-6 py-3 whitespace-nowrap">
                        @if($u->flag_send)
                            <span class="px-2 py-1 inline-flex text-[10px] leading-5 font-semibold rounded-full bg-green-100 text-green-800">Được gửi</span>
                        @else
                            <span class="px-2 py-1 inline-flex text-[10px] leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">Không</span>
                        @endif
                    </td>
                    <td class="px-6 py-3 whitespace-nowrap text-right text-sm font-medium space-x-3">
                        <a href="{{ route('admin.users.edit', $u->msnv) }}" class="text-primary hover:text-[#0f4c81] font-semibold underline underline-offset-2">Quản lý</a>
                        <button type="button" onclick="openDeleteModal('{{ $u->msnv }}', '{{ route('admin.users.destroy', $u->msnv) }}')" class="text-red-500 hover:text-red-700 font-semibold underline underline-offset-2">Nghỉ việc</button>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-6 py-10 text-center text-text-light font-medium">Chưa có user nào đang hoạt động.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($users->hasPages())
        <div class="px-6 py-4 border-t border-border-light bg-gray-50/30">
            {{ $users->links() }}
        </div>
    @endif
</div>

<!-- Modal Xác nhận Nghỉ việc -->
<x-modal id="deleteModal" title="Xác nhận nghỉ việc" 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" id="modal-title">Xác nhận nghỉ việc</h3>
            <p class="text-sm text-gray-600 mt-2 leading-relaxed">
                Bạn có chắc chắn muốn đánh dấu nhân viên <span id="deleteMsnv" class="font-extrabold text-red-600"></span> đã nghỉ việc?<br><br>
                Thao tác này sẽ ngăn user đăng nhập vào hệ thống, nhưng dữ liệu lịch sử vẫn được giữ lại.
            </p>
        </div>
    </div>

    <x-slot name="footer">
        <form id="deleteForm" method="POST" class="w-full sm:w-auto">
            @csrf
            @method('DELETE')
            <button type="submit" class="w-full btn-primary !bg-red-600 hover:!bg-red-700 focus:!ring-red-500 !px-6 shadow-sm">Xác nhận Nghỉ việc</button>
        </form>
        <button type="button" onclick="closeModal('deleteModal')" class="w-full sm:w-auto btn-secondary !px-6 shadow-sm">Hủy bỏ</button>
    </x-slot>
</x-modal>

@push('scripts')
<script>
    function openDeleteModal(msnv, url) {
        document.getElementById('deleteMsnv').innerText = msnv;
        document.getElementById('deleteForm').action = url;
        openModal('deleteModal');
    }

    document.getElementById('filterForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        const btn = document.getElementById('btnFilter');
        
        btn.classList.add('opacity-50', 'cursor-not-allowed');
        btn.disabled = true;
        
        const tableBody = document.querySelector('.bg-white.shadow-sm tbody');
        if(tableBody) {
            let skeletonHtml = '';
            for(let i=0; i<5; i++) {
                skeletonHtml += `
                <tr class="animate-pulse">
                    <td class="px-6 py-4"><div class="h-4 bg-gray-200 rounded w-16"></div></td>
                    <td class="px-6 py-4"><div class="h-4 bg-gray-200 rounded w-48"></div></td>
                    <td class="px-6 py-4"><div class="h-4 bg-gray-200 rounded w-12"></div></td>
                    <td class="px-6 py-4"><div class="h-4 bg-gray-200 rounded w-12"></div></td>
                    <td class="px-6 py-4"><div class="h-4 bg-gray-200 rounded w-16"></div></td>
                    <td class="px-6 py-4"><div class="h-4 bg-gray-200 rounded w-20"></div></td>
                    <td class="px-6 py-4"><div class="h-6 bg-gray-200 rounded-full w-20"></div></td>
                    <td class="px-6 py-4 flex justify-end gap-3"><div class="h-8 bg-gray-200 rounded w-20"></div></td>
                </tr>`;
            }
            tableBody.innerHTML = skeletonHtml;
        }

        try {
            const url = this.action + '?' + new URLSearchParams(new FormData(this)).toString();
            
            const [res] = await Promise.all([
                fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }),
                new Promise(resolve => setTimeout(resolve, 200))
            ]);
            
            if(!res.ok) throw new Error('Network response was not ok');
            const html = await res.text();
            
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            
            const updateDOM = () => {
                const currentTitle = document.querySelector('h2.text-xl');
                const newTitle = doc.querySelector('h2.text-xl');
                if(currentTitle && newTitle) currentTitle.innerHTML = newTitle.innerHTML;
                
                const currentGrid = document.querySelector('.grid.grid-cols-1');
                const newGrid = doc.querySelector('.grid.grid-cols-1');
                if(currentGrid && newGrid) currentGrid.innerHTML = newGrid.innerHTML;
                
                const currentTable = document.querySelector('.bg-white.shadow-sm');
                const newTable = doc.querySelector('.bg-white.shadow-sm');
                if(currentTable && newTable) currentTable.innerHTML = newTable.innerHTML;
            };

            if (document.startViewTransition) {
                document.startViewTransition(updateDOM);
            } else {
                updateDOM();
            }
            
            window.history.pushState({}, '', url);
            
        } catch(err) {
            console.error('Error fetching data:', err);
            window.location.reload();
        } finally {
            btn.classList.remove('opacity-50', 'cursor-not-allowed');
            btn.disabled = false;
        }
    });

    // Intercept pagination clicks for AJAX loading
    document.addEventListener('click', async function(e) {
        const link = e.target.closest('.bg-white.shadow-sm nav a');
        if (!link) return;
        
        e.preventDefault();
        
        const tableBody = document.querySelector('.bg-white.shadow-sm tbody');
        if(tableBody) {
            let skeletonHtml = '';
            for(let i=0; i<5; i++) {
                skeletonHtml += `
                <tr class="animate-pulse">
                    <td class="px-6 py-4"><div class="h-4 bg-gray-200 rounded w-16"></div></td>
                    <td class="px-6 py-4"><div class="h-4 bg-gray-200 rounded w-48"></div></td>
                    <td class="px-6 py-4"><div class="h-4 bg-gray-200 rounded w-12"></div></td>
                    <td class="px-6 py-4"><div class="h-4 bg-gray-200 rounded w-12"></div></td>
                    <td class="px-6 py-4"><div class="h-4 bg-gray-200 rounded w-16"></div></td>
                    <td class="px-6 py-4 flex justify-end gap-3"><div class="h-8 bg-gray-200 rounded w-20"></div></td>
                </tr>`;
            }
            tableBody.innerHTML = skeletonHtml;
        }

        try {
            const url = link.href;
            const res = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            if(!res.ok) throw new Error('Network response was not ok');
            const html = await res.text();
            
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            
            const updateDOM = () => {
                const currentTable = document.querySelector('.bg-white.shadow-sm');
                const newTable = doc.querySelector('.bg-white.shadow-sm');
                if(currentTable && newTable) currentTable.innerHTML = newTable.innerHTML;
            };

            if (document.startViewTransition) {
                document.startViewTransition(updateDOM);
            } else {
                updateDOM();
            }
            
            window.history.pushState({}, '', url);
        } catch(err) {
            console.error('Error fetching pagination data:', err);
            window.location.reload();
        }
    });
</script>
@endpush
@endsection