@extends('layouts.app')
@section('title', 'Chi tiết User')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
    <!-- Cột trái: Form thao tác -->
    <div class="col-span-1">
        <div class="form-container">
            <div class="form-header">
                <h3 class="form-header-title">Quản Lý Thẻ: {{ $user->msnv }}</h3>
            </div>
            <div class="form-body">
                <div class="mb-6 pb-6 border-b border-border-light space-y-3">
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-text-medium font-bold">Email:</span> 
                        <span class="font-semibold text-text-dark">{{ $user->mail }}</span>
                    </div>
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-text-medium font-bold">Role:</span> 
                        <span class="font-semibold text-text-dark">{{ $user->role == \App\Models\User::ROLE_ADMIN ? 'Admin' : 'Member' }}</span>
                    </div>
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-text-medium font-bold">Số dư thẻ:</span> 
                        <span class="font-extrabold text-orange-500 text-xl">{{ $user->card }}</span>
                    </div>
                </div>
            </div>

            <form action="{{ route('admin.users.update', $user->msnv) }}" method="POST">
                @csrf
                @method('PUT')
                
                <div class="form-body pt-0">
                    <div class="form-group">
                        <label class="form-label" for="num_card">Nạp thêm thẻ</label>
                        <input type="number" name="num_card" id="num_card" min="1" class="form-input" placeholder="Nhập số lượng thẻ muốn nạp...">
                        @error('num_card')<span class="error-text">{{ $message }}</span>@enderror
                    </div>

                    <div class="form-group mb-0">
                        <label class="flex items-center gap-3 cursor-pointer p-4 border border-[#d9dfe7] rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-colors shadow-sm">
                            <input type="checkbox" name="flag_send" id="flag_send" value="1" class="form-input !w-5 !h-5 !min-h-0" {{ $user->flag_send ? 'checked' : '' }}>
                            <span class="text-[14px] font-[600] text-text-dark">Bật quyền cho phép User gửi thẻ</span>
                        </label>
                    </div>
                </div>

                <div class="form-footer">
                    <a href="{{ route('admin.users.index') }}" class="btn-secondary">Quay lại</a>
                    <button type="submit" class="btn-primary">Lưu Thay Đổi</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Cột phải: Lịch sử -->
    <div class="col-span-1 lg:col-span-2">
        <div class="bg-white rounded-xl shadow-sm border border-border-light overflow-hidden flex flex-col h-full">
            <div class="px-6 py-4 sm:py-5 border-b border-border-light bg-gray-50/50 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <h3 class="text-lg font-bold text-text-dark">Lịch sử nhận / gửi</h3>
                <form action="{{ route('admin.users.edit', $user->msnv) }}" method="GET" class="flex-shrink-0">
                    <input type="month" name="month" value="{{ $selectedMonth }}" onchange="this.form.submit()" class="form-input !min-h-[38px] !py-1.5 !text-sm w-auto border-border-medium rounded">
                </form>
            </div>
            
            <div class="p-0 overflow-y-auto max-h-[600px]">
                <table class="min-w-full divide-y divide-border-light text-sm">
                    <thead class="bg-gray-50/80 sticky top-0">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Ngày</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Hành động</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Đối tượng</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Số lượng</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-border-light">
                        @forelse($administrations as $admin_record)
                            @php
                                $isReceiver = $admin_record->msnv == $user->msnv && $admin_record->received > 0;
                            @endphp
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="px-6 py-3 whitespace-nowrap text-text-medium font-medium">{{ Carbon\Carbon::parse($admin_record->date)->format('d/m/Y') }}</td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    @if($isReceiver)
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-green-100 text-green-800">Nhận thẻ</span>
                                    @else
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-blue-100 text-blue-800">Gửi thẻ</span>
                                    @endif
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap font-bold text-text-dark">
                                    @if($isReceiver)
                                        Từ: <span class="text-primary">{{ $admin_record->sender }}</span>
                                    @else
                                        Tới: <span class="text-primary">{{ $admin_record->receiver }}</span>
                                    @endif
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap font-extrabold text-lg">
                                    @if($isReceiver)
                                        <span class="text-green-600">+{{ $admin_record->received }}</span>
                                    @else
                                        <span class="text-blue-600">-{{ $admin_record->sent }}</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-12 text-center text-text-light font-medium text-base">Không có giao dịch nào trong tháng này.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($administrations->hasPages())
                <div class="px-6 py-4 border-t border-border-light bg-gray-50/30">
                    {{ $administrations->links() }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection