@extends('layouts.admin')

@section('content')
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
		<div class="bg-white p-6 rounded-3xl shadow-sm border-b-4 border-blue-500 hover:shadow-xl transition-all duration-300 group">
			<div class="flex justify-between items-center">
				<div>
					<p class="text-gray-400 text-xs font-bold uppercase">মোট ছাত্র</p>
					<h3 class="text-3xl font-black text-gray-800 group-hover:text-blue-600">{{ number_format($stats['total_students']) }}</h3>
				</div>
				<div class="text-4xl opacity-40">👨‍🎓</div>
			</div>
		</div>

		<div class="bg-white p-6 rounded-3xl shadow-sm border-b-4 border-red-500 hover:shadow-xl transition-all duration-300 group">
			<div class="flex justify-between items-center">
				<div>
					<p class="text-gray-400 text-xs font-bold uppercase">শিক্ষক মন্ডলী</p>
					<h3 class="text-3xl font-black text-gray-800 group-hover:text-red-600">{{ number_format($stats['total_teachers']) }}</h3>
				</div>
				<div class="text-4xl opacity-40">👨‍🏫</div>
			</div>
		</div>

		<div class="bg-white p-6 rounded-3xl shadow-sm border-b-4 border-yellow-500 hover:shadow-xl transition-all duration-300 group">
			<div class="flex justify-between items-center">
				<div>
					<p class="text-gray-400 text-xs font-bold uppercase">আজকের ফি</p>
					<h3 class="text-3xl font-black text-gray-800 group-hover:text-yellow-600">৳ {{ number_format($stats['today_fees'], 0) }}</h3>
				</div>
				<div class="text-4xl opacity-40">💰</div>
			</div>
		</div>

		<div class="bg-white p-6 rounded-3xl shadow-sm border-b-4 border-green-500 hover:shadow-xl transition-all duration-300 group">
			<div class="flex justify-between items-center">
				<div>
					<p class="text-gray-400 text-xs font-bold uppercase">বকেয়া ইনভয়েস</p>
					<h3 class="text-3xl font-black text-gray-800 group-hover:text-green-600">{{ number_format($stats['pending_tasks']) }}</h3>
				</div>
				<div class="text-4xl opacity-40">📢</div>
			</div>
		</div>
	</div>

    <div class="bg-white p-8 rounded-3xl shadow-sm border border-gray-100">
        <div class="flex items-center gap-3 mb-6">
            <div class="w-2 h-8 bg-red-600 rounded-full"></div>
            <h3 class="font-black text-xl text-gray-800 tracking-tight">কুইক অ্যাকশন মেনু</h3>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <a href="{{ route('students.index') }}" class="flex flex-col items-center justify-center gap-3 p-6 bg-red-50 text-red-600 rounded-2xl font-bold hover:bg-red-600 hover:text-white transition-all group">
                <span class="text-3xl group-hover:animate-bounce">👤</span> নতুন ভর্তি
            </a>
            <a href="#/" onclick="return triggerFingerMachine();" class="flex flex-col items-center justify-center gap-3 p-6 bg-blue-50 text-blue-600 rounded-2xl font-bold hover:bg-blue-600 hover:text-white transition-all group">
                <span class="text-3xl group-hover:animate-bounce">📅</span> উপস্থিতি
            </a>
            <a href="{{ url('admin/payments/collect') }}" class="flex flex-col items-center justify-center gap-3 p-6 bg-green-50 text-green-600 rounded-2xl font-bold hover:bg-green-600 hover:text-white transition-all group">
                <span class="text-3xl group-hover:animate-bounce">📄</span> ফি কালেকশন
            </a>
            <a href="{{ url('admin/reports') }}" class="flex flex-col items-center justify-center gap-3 p-6 bg-purple-50 text-purple-600 rounded-2xl font-bold hover:bg-purple-600 hover:text-white transition-all group">
                <span class="text-3xl group-hover:animate-bounce">📊</span> রিপোর্ট
            </a>
        </div>
    </div>

    <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="bg-white p-6 rounded-3xl shadow-sm min-h-[300px]">
            <h4 class="font-bold text-gray-700 mb-4 border-b pb-2">সর্বশেষ ভর্তি</h4>
            @forelse($latest_students as $student)
                <div class="flex items-center justify-between py-3 border-b border-gray-50 last:border-0">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-xs font-bold">{{ substr($student->student_name_en, 0, 1) }}</div>
                        <div>
                            <p class="font-bold text-sm text-gray-800">{{ $student->student_name_en }}</p>
                            <p class="text-[10px] text-gray-400">শ্রেণী: {{ $student->class_name }}</p>
                        </div>
                    </div>
                    <span class="text-[10px] bg-blue-50 text-blue-600 px-2 py-1 rounded-lg font-bold">ID: {{ $student->admission_no }}</span>
                </div>
            @empty
                <p class="text-gray-400 text-center py-20 italic">এখনো কোনো ছাত্র ভর্তি হয়নি</p>
            @endforelse
        </div>

        <div class="bg-white p-6 rounded-3xl shadow-sm min-h-[300px]">
            <h4 class="font-bold text-gray-700 mb-4 border-b pb-2">সাম্প্রতিক লেনদেন</h4>
            @forelse($recent_payments as $payment)
                <div class="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
                    <div>
                        <p class="font-bold text-sm text-gray-800">{{ $payment->student_name_en }}</p>
                        <p class="text-[10px] text-gray-400">{{ date('d M, Y', strtotime($payment->payment_date)) }} | {{ $payment->payment_method }}</p>
                    </div>
                    <div class="text-right">
                        <p class="font-black text-green-600 text-sm">+{{ number_format($payment->total_paid, 0) }} ৳</p>
                        <p class="text-[9px] text-gray-300 font-mono">{{ $payment->receipt_no }}</p>
                    </div>
                </div>
            @empty
                <p class="text-gray-400 text-center py-20 italic">এখনো কোনো লেনদেন হয়নি</p>
            @endforelse
        </div>
    </div>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
	function triggerFingerMachine()
	{
		Swal.fire('এরর!', 'আপনার ফিঙ্গারপ্রিন্ট মেশিন ইন্সটল করা নেই।', 'error');
	}
</script>
@endsection