@extends('Component.layout')

@section('title', 'Teacher Dashboard - Iqra')
@section('breadcrumb', 'Teacher Dashboard')

@section('content')
<div class="space-y-8">
    
    <!-- Top Greeting and Actions -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight text-slate-800">Dashboard</h1>
            <p class="text-xs text-slate-500 font-medium mt-1">Plan, prioritize, and accomplish your tasks with ease.</p>
        </div>
        <div class="flex items-center gap-2">
            <button onclick="document.getElementById('profileModal').classList.remove('hidden')" class="px-4 py-2.5 bg-emerald-700 hover:bg-emerald-600 text-white text-xs font-bold rounded-full transition-all flex items-center gap-2 shadow-lg shadow-emerald-700/10 shrink-0">
                Edit My Profile
            </button>
        </div>
    </div>

    <!-- Teacher Stats Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Stat Card 1: Total Students -->
        <a href="{{ route('teacher.students.index') }}" class="block rounded-3xl bg-emerald-700 hover:bg-emerald-800 transition-colors p-6 text-white relative overflow-hidden shadow-xl shadow-emerald-700/15 cursor-pointer">
            <div class="flex justify-between items-start mb-4">
                <span class="text-xs font-bold tracking-tight text-emerald-100 uppercase">My Students</span>
                <span class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white">
                    <svg class="w-4 h-4 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
                </span>
            </div>
            <div class="text-4xl font-extrabold tracking-tight mb-2">{{ $totalStudents }}</div>
            <div class="inline-flex items-center gap-1 text-[10px] font-bold text-emerald-300">
                Click to manage your students &rarr;
            </div>
        </a>

        <!-- Stat Card 2: Total Tests -->
        <a href="{{ route('teacher.exams.index') }}" class="block rounded-3xl bg-white hover:bg-slate-50 transition-colors border border-slate-200 p-6 text-slate-800 relative overflow-hidden shadow-sm cursor-pointer">
            <div class="flex justify-between items-start mb-4">
                <span class="text-xs font-bold tracking-tight text-slate-400 uppercase">Tests Taken</span>
                <span class="w-8 h-8 rounded-full border border-slate-200 flex items-center justify-center text-slate-600 bg-slate-50">
                    <svg class="w-4 h-4 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
                </span>
            </div>
            <div class="text-4xl font-extrabold tracking-tight mb-2 text-slate-800">{{ $totalExams }}</div>
            <div class="inline-flex items-center gap-1 text-[10px] font-bold text-slate-400">
                Click to view and grade tests &rarr;
            </div>
        </a>

        <!-- Stat Card 3: Total Tickets -->
        <a href="{{ route('teacher.tickets.index') }}" class="block rounded-3xl bg-white hover:bg-slate-50 transition-colors border border-slate-200 p-6 text-slate-800 relative overflow-hidden shadow-sm cursor-pointer">
            <div class="flex justify-between items-start mb-4">
                <span class="text-xs font-bold tracking-tight text-slate-400 uppercase">Parent Tickets</span>
                <span class="w-8 h-8 rounded-full border border-slate-200 flex items-center justify-center text-slate-600 bg-slate-50">
                    <svg class="w-4 h-4 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
                </span>
            </div>
            <div class="text-4xl font-extrabold tracking-tight mb-2 text-slate-800">{{ $totalTickets }}</div>
            <div class="inline-flex items-center gap-1 text-[10px] font-bold text-slate-400">
                Click to respond to queries &rarr;
            </div>
        </a>
    </div>

    <!-- Main Grid: Analytics & Details -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Project Analytics -->
        <div class="lg:col-span-2 bg-white border border-slate-200 rounded-3xl p-6 shadow-sm">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-sm font-bold text-slate-800">Project Analytics</h3>
                <span class="text-xs font-semibold text-slate-400">Weekly Tracker</span>
            </div>
            <div class="flex justify-between items-end h-44 gap-2 pt-4">
                <div class="flex flex-col items-center flex-1 gap-2">
                    <div class="w-full bg-slate-100 rounded-full h-24 flex items-end justify-center overflow-hidden">
                        <div class="w-full bg-slate-300/60 pattern-diagonal h-12"></div>
                    </div>
                    <span class="text-[10px] font-bold text-slate-400">S</span>
                </div>
                <div class="flex flex-col items-center flex-1 gap-2">
                    <div class="w-full bg-slate-100 rounded-full h-32 flex items-end justify-center overflow-hidden">
                        <div class="w-full bg-emerald-700 h-28"></div>
                    </div>
                    <span class="text-[10px] font-bold text-slate-400">M</span>
                </div>
                <div class="flex flex-col items-center flex-1 gap-2 relative">
                    <div class="absolute -top-7 bg-emerald-500 text-white text-[8px] font-bold px-1.5 py-0.5 rounded-md shadow-sm">74%</div>
                    <div class="w-full bg-slate-100 rounded-full h-28 flex items-end justify-center overflow-hidden">
                        <div class="w-full bg-emerald-400 h-20"></div>
                    </div>
                    <span class="text-[10px] font-bold text-slate-400">T</span>
                </div>
                <div class="flex flex-col items-center flex-1 gap-2">
                    <div class="w-full bg-slate-100 rounded-full h-36 flex items-end justify-center overflow-hidden">
                        <div class="w-full bg-emerald-950 h-32"></div>
                    </div>
                    <span class="text-[10px] font-bold text-slate-400">W</span>
                </div>
                <div class="flex flex-col items-center flex-1 gap-2">
                    <div class="w-full bg-slate-100 rounded-full h-28 flex items-end justify-center overflow-hidden">
                        <div class="w-full bg-slate-300/60 pattern-diagonal h-16"></div>
                    </div>
                    <span class="text-[10px] font-bold text-slate-400">T</span>
                </div>
                <div class="flex flex-col items-center flex-1 gap-2">
                    <div class="w-full bg-slate-100 rounded-full h-32 flex items-end justify-center overflow-hidden">
                        <div class="w-full bg-slate-300/60 pattern-diagonal h-22"></div>
                    </div>
                    <span class="text-[10px] font-bold text-slate-400">F</span>
                </div>
                <div class="flex flex-col items-center flex-1 gap-2">
                    <div class="w-full bg-slate-100 rounded-full h-24 flex items-end justify-center overflow-hidden">
                        <div class="w-full bg-slate-300/60 pattern-diagonal h-10"></div>
                    </div>
                    <span class="text-[10px] font-bold text-slate-400">S</span>
                </div>
            </div>
        </div>

        <!-- Reminders Panel -->
        <div class="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm flex flex-col justify-between">
            <div>
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-sm font-bold text-slate-800">Reminders</h3>
                </div>
                <div class="mt-4 space-y-1">
                    <h4 class="text-base font-extrabold text-slate-800 leading-snug">Meeting with Arc Company</h4>
                    <p class="text-[10px] font-semibold text-slate-400 mt-1">Time : 02.00 pm - 04.00 pm</p>
                </div>
            </div>
            <button class="w-full py-3 bg-emerald-950 hover:bg-emerald-900 text-white font-bold rounded-2xl transition-all flex items-center justify-center gap-2 mt-6">
                Start Meeting
            </button>
        </div>
    </div>
</div>

<!-- Profile Modal (Teacher access only) -->
<div id="profileModal" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden transition-all">
    <div class="bg-white rounded-3xl w-full max-w-md p-6 shadow-2xl">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-base font-extrabold text-slate-800">Edit My Profile</h3>
            <button onclick="document.getElementById('profileModal').classList.add('hidden')" class="text-slate-400 hover:text-slate-600">
                <svg class="w-5 h-5 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        <form action="{{ route('teacher.profile.update') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1">Full Name</label>
                <input type="text" name="name" value="{{ $teacher->name }}" required class="w-full px-4 py-2.5 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-xs">
            </div>

            <div>
                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1">Email Address</label>
                <input type="email" name="email" value="{{ $teacher->email }}" required class="w-full px-4 py-2.5 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-xs">
            </div>

            <div>
                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1">New Password (leave blank to keep current)</label>
                <input type="password" name="password" class="w-full px-4 py-2.5 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-xs">
            </div>

            <div>
                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1">Confirm New Password</label>
                <input type="password" name="password_confirmation" class="w-full px-4 py-2.5 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-xs">
            </div>

            <button type="submit" class="w-full py-3 bg-emerald-700 hover:bg-emerald-600 text-white font-bold rounded-2xl transition-all shadow-md shadow-emerald-700/20 mt-2">
                Save Profile Changes
            </button>
        </form>
    </div>
</div>

<style>
    .pattern-diagonal {
        background-color: transparent;
        background-image: repeating-linear-gradient(45deg, rgba(16, 185, 129, 0.15) 0px, rgba(16, 185, 129, 0.15) 2px, transparent 2px, transparent 10px);
    }
</style>
@endsection