<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title') | EduKids ERP</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Hind Siliguri', sans-serif; }
        .sidebar-scroll::-webkit-scrollbar { width: 5px; }
        .sidebar-scroll::-webkit-scrollbar-track { background: #1e293b; }
        .sidebar-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
    </style>
	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"  />
</head>
<body class="bg-gray-100 flex h-screen overflow-hidden">

    <aside class="w-72 bg-[#1e293b] min-h-screen text-slate-300 shadow-xl hidden md:block overflow-y-auto">
		<div class="p-6 bg-[#0f172a] mb-4">
			<h2 class="text-2xl font-black text-yellow-400 tracking-tighter uppercase">EduKids ERP</h2>
			<p class="text-[10px] text-slate-500 font-bold tracking-widest uppercase">School Management System</p>
		</div>

		<nav class="px-4 pb-10 space-y-1">
			
			<a href="{{ route('dashboard') }}" class="flex items-center p-3 text-white bg-red-600 rounded-xl font-bold shadow-lg shadow-red-900/20 mb-6">
				<span class="mr-3 text-xl">📊</span> ড্যাশবোর্ড
			</a>

			<div class="pt-2 pb-1 ml-2 text-[11px] font-bold text-slate-500 uppercase tracking-widest">একাডেমিক সেটআপ</div>
			<a href="{{ route('classes.index') }}" class="flex items-center p-3 hover:bg-slate-800 hover:text-white rounded-xl transition group">
				<span class="mr-3 group-hover:scale-120 transition">🏫</span> ক্লাসেস (Classes)
			</a>
			<a href="{{ route('sections.index') }}" class="flex items-center p-3 hover:bg-slate-800 hover:text-white rounded-xl transition group">
				<span class="mr-3 group-hover:scale-120 transition">📂</span> সেকশন (Sections)
			</a>

			<div class="pt-4 pb-1 ml-2 text-[11px] font-bold text-slate-500 uppercase tracking-widest">প্রশাসন</div>
			<a href="{{ route('students.index') }}" class="flex items-center p-3 hover:bg-slate-800 hover:text-white rounded-xl transition group">
				<span class="mr-3 group-hover:scale-120 transition">👨‍🎓</span> ছাত্র/ছাত্রী তালিকা (Students)
			</a>
			
			<div class="space-y-1">
				<div x-data="{ open: false }">
					<button @click="open = !open" 
					   class="w-full flex items-center justify-between gap-3 px-4 py-3 rounded-2xl transition-all text-gray-500 hover:bg-gray-50">
						<div class="flex items-center gap-3">
							<span class="text-xl">🪪</span>
							<span class="font-black text-sm">আইডি কার্ড</span>
						</div>
						<span :class="open ? 'rotate-180' : ''" class="transition-transform text-xs">▼</span>
					</button>

					<div x-show="open" x-cloak class="ml-9 mt-1 space-y-1 border-l-2 border-gray-100">
						@php
							$all_classes = DB::table('classes')->get();
						@endphp
						
						@foreach($all_classes as $class)
							<a href="{{ route('admin.students.id_cards', $class->id) }}" 
							   target="_blank"
							   class="block px-4 py-2 text-xs font-bold text-gray-500 hover:text-indigo-600 transition-all">
								● {{ $class->class_name }}
							</a>
						@endforeach
					</div>
				</div>
			</div>
			<a href="{{ route('teachers.index') }}" class="flex items-center p-3 hover:bg-slate-800 hover:text-white rounded-xl transition group">
				<span class="mr-3 group-hover:scale-120 transition">👨‍🏫</span> শিক্ষক মন্ডলী (Teachers)
			</a>
			<a href="#/" onclick="return triggerFingerMachine();" class="flex items-center p-3 hover:bg-slate-800 hover:text-white rounded-xl transition group">
				<span class="mr-3 group-hover:scale-120 transition">📝</span> উপস্থিতি (Attendance)
			</a>

			<div class="pt-4 pb-1 ml-2 text-[11px] font-bold text-slate-500 uppercase tracking-widest">অর্থায়ন</div>
			<div class="space-y-1">
				<div class="p-3 font-bold text-slate-200 flex items-center">
					<span class="mr-3">💰</span> ফি ম্যানেজমেন্ট
				</div>
				<div class="ml-9 space-y-1 border-l border-slate-700 pl-4">
					<a href="{{ route('feetypes.index') }}" class="block py-2 text-sm hover:text-yellow-400 transition">ফি সেটআপ</a>
					<a href="{{ route('classfees.index') }}" class="block py-2 text-sm hover:text-yellow-400 transition">শ্রেণিভিত্তিক ফি</a>
					<a href="{{ route('waivers.index') }}" class="block py-2 text-sm hover:text-yellow-400 transition">স্টুডেন্ট ওয়েভার</a>
					<a href="{{ route('invoices.index') }}" class="block py-2 text-sm hover:text-yellow-400 transition">ফি জেনারেট</a>
					<a href="{{ route('payments.collect') }}" class="block py-2 text-sm hover:text-yellow-400 transition font-bold text-green-400">ফি কালেকশন</a>
					<a href="{{ route('reports.due') }}" class="block py-2 text-sm hover:text-yellow-400 transition font-bold text-green-400">বকেয়া রিপোর্ট</a>					
				</div>
			</div>
			
			<div class="space-y-1">
				<div class="p-3 font-bold text-slate-200 flex items-center">
					<span class="mr-3">💰</span> জমা-খরচ
				</div>
				<div class="ml-9 space-y-1 border-l border-slate-700 pl-4">
					<a href="{{ route('accounts.chart') }}" class="block py-2 text-sm hover:text-yellow-400 transition">হিসাবের খাত (Chart)</a>
					<a href="{{ route('admin.transactions') }}" class="block py-2 text-sm hover:text-yellow-400 transition">লেনদেন (Transactions)</a>
					<a href="{{ route('reports.income_expense') }}" class="block py-2 text-sm hover:text-yellow-400 transition">জমা-খরচ রিপোর্ট</a>
				</div>
			</div>

			<!--a href="#" class="flex items-center p-3 hover:bg-slate-800 hover:text-white rounded-xl transition group mt-2">
				<span class="mr-3 group-hover:scale-120 transition">💵</span> স্টাফ স্যালারি
			</a -->

			<div class="pt-4 pb-1 ml-2 text-[11px] font-bold text-slate-500 uppercase tracking-widest">কনফিগারেশন</div>
			<a href="{{ route('admin.settings.company') }}" class="flex items-center p-3 hover:bg-slate-800 hover:text-white rounded-xl transition group">
				<span class="mr-3 group-hover:scale-120 transition">⚙️</span> সিস্টেম সেটিংস
			</a>

			<div class="pt-10">
				<a href="#" class="flex items-center p-3 text-red-400 hover:bg-red-500/10 rounded-xl transition font-bold">
					<span class="mr-3">🚪</span> লগআউট
				</a>
			</div>
		</nav>
	</aside>

    <div class="flex-1 flex flex-col h-full overflow-hidden">
        <header class="bg-white shadow-sm h-16 flex justify-between items-center px-8">
            <h1 class="text-xl font-bold text-gray-700">@yield('page_title')</h1>
            <div class="flex items-center gap-4">
                <span class="text-sm font-bold">{{ Auth::user()->name }}</span>
                <div class="w-10 h-10 bg-red-500 rounded-xl flex items-center justify-center text-white font-bold">A</div>
            </div>
        </header>

        <main class="flex-1 overflow-y-auto p-8">
            @yield('content')
        </main>
    </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>
</body>
</html>