@extends('frontend.layouts.app')
@section('content')
@php $dept = $data['department']; @endphp
<section class="page-header py-14 text-white relative overflow-hidden" @if($dept->banner_image) style="background:url('{{ asset($dept->banner_image) }}') center/cover; " @endif>
<div class="absolute inset-0 bg-gradient-to-r from-primary-900/90 to-primary-700/60"></div>
<div class="relative max-w-7xl mx-auto px-4">
<nav class="text-blue-300 text-xs mb-3 flex items-center gap-1.5"><a href="/" class="hover:text-white">Home</a><i class="fas fa-angle-right text-[9px] mx-1"></i><a href="/departments" class="hover:text-white">Departments</a><i class="fas fa-angle-right text-[9px] mx-1"></i><span class="text-white">{{ $dept->short_name }}</span></nav>
<div class="flex items-center gap-4">
<div class="w-16 h-16 rounded-xl flex items-center justify-center text-white text-2xl" style="background:{{ $dept->color }}"><i class="{{ $dept->icon_class ?? 'fas fa-graduation-cap' }}"></i></div>
<div><h1 class="font-display font-bold text-3xl md:text-4xl">Department of {{ $dept->name }}</h1><p class="text-blue-200 mt-1 text-sm">Est. {{ $dept->established_year }} · {{ $dept->intake }} seats/year</p></div>
</div>
</div>
</section>

<div class="max-w-7xl mx-auto px-4 py-10">
<div class="grid lg:grid-cols-3 gap-8">
<div class="lg:col-span-2 space-y-8">
@if($dept->about)
<section data-aos="fade-up"><h2 class="font-display font-bold text-2xl text-gray-900 mb-4">About the Department</h2><div class="prose prose-lg max-w-none text-gray-600 leading-relaxed">{!! $dept->about !!}</div></section>
@endif
@if($dept->vision || $dept->mission)
<section class="grid md:grid-cols-2 gap-5" data-aos="fade-up">
@if($dept->vision)<div class="bg-blue-50 rounded-xl p-5 border-l-4 border-primary-700"><h3 class="font-bold text-primary-800 mb-2"><i class="fas fa-eye mr-2"></i>Vision</h3><p class="text-gray-700 text-sm leading-relaxed">{{ $dept->vision }}</p></div>@endif
@if($dept->mission)<div class="bg-green-50 rounded-xl p-5 border-l-4 border-emerald-600"><h3 class="font-bold text-emerald-800 mb-2"><i class="fas fa-rocket mr-2"></i>Mission</h3><p class="text-gray-700 text-sm leading-relaxed">{{ $dept->mission }}</p></div>@endif
</section>
@endif
@if($data['programs']->count())
<section data-aos="fade-up"><h2 class="font-display font-bold text-2xl text-gray-900 mb-4">Programs Offered</h2>
<div class="space-y-3">
@foreach($data['programs'] as $p)
<div class="bg-white border border-gray-200 rounded-xl p-5 flex items-center justify-between hover:shadow-md transition">
<div><span class="text-xs font-semibold uppercase px-2 py-0.5 rounded {{ $p->type==='ug'?'bg-blue-100 text-blue-700':($p->type==='pg'?'bg-purple-100 text-purple-700':'bg-green-100 text-green-700') }}">{{ strtoupper($p->type) }}</span>
<h3 class="font-semibold text-gray-900 mt-1.5">{{ $p->degree }} in {{ $p->name }}</h3>
<div class="flex gap-4 text-xs text-gray-400 mt-1"><span><i class="fas fa-clock mr-1"></i>{{ $p->duration_years }} years</span><span><i class="fas fa-users mr-1"></i>{{ $p->intake }} seats</span>@if($p->is_nba_accredited)<span class="text-green-600"><i class="fas fa-award mr-1"></i>NBA</span>@endif</div>
</div>
<a href="/academics/programs/{{ $p->slug }}" class="text-primary-600 text-sm font-semibold hover:text-primary-800">Details →</a>
</div>
@endforeach
</div></section>
@endif
@if($data['faculty']->count())
<section data-aos="fade-up"><h2 class="font-display font-bold text-2xl text-gray-900 mb-4">Faculty</h2>
<div class="grid sm:grid-cols-2 gap-4">
@foreach($data['faculty'] as $member)
<a href="/faculty/{{ $member->slug }}" class="flex items-center gap-4 bg-white border border-gray-200 rounded-xl p-4 hover:shadow-md hover:border-primary-200 transition">
@if($member->photo)<img src="{{ asset($member->photo) }}" alt="{{ $member->name }}" class="w-14 h-14 rounded-full object-cover flex-shrink-0">
@else<div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center text-primary-700 font-bold text-xl flex-shrink-0">{{ substr($member->name,0,1) }}</div>@endif
<div><div class="font-semibold text-gray-900 text-sm">{{ $member->name }}@if($member->is_hod)<span class="ml-1 text-[10px] bg-yellow-100 text-yellow-700 px-1.5 py-0.5 rounded">HOD</span>@endif</div>
<div class="text-primary-600 text-xs">{{ $member->designation }}</div>
<div class="text-gray-500 text-xs">{{ $member->qualification }}</div>
</div>
</a>
@endforeach
</div></section>
@endif
</div>
<div class="space-y-5">
@if($data['hod_faculty'])<div class="bg-gradient-to-br from-primary-900 to-primary-700 text-white rounded-xl p-6" data-aos="fade-left">
<p class="text-blue-200 text-xs uppercase tracking-wider mb-3">Head of Department</p>
@php $hod = $data['hod_faculty']; @endphp
<div class="flex items-center gap-3 mb-3">
@if($hod->photo)<img src="{{ asset($hod->photo) }}" alt="{{ $hod->name }}" class="w-14 h-14 rounded-full object-cover border-2 border-yellow-400 flex-shrink-0">
@else<div class="w-14 h-14 rounded-full bg-blue-600 flex items-center justify-center text-2xl font-bold border-2 border-yellow-400">{{ substr($hod->name,0,1) }}</div>@endif
<div><div class="font-bold text-base">{{ $hod->name }}</div><div class="text-blue-200 text-xs">{{ $hod->designation }}</div></div>
</div>
@if($hod->email)<a href="mailto:{{ $hod->email }}" class="text-blue-200 text-xs hover:text-white flex items-center gap-1.5"><i class="fas fa-envelope"></i>{{ $hod->email }}</a>@endif
</div>@endif
<div class="bg-white border border-gray-200 rounded-xl p-5" data-aos="fade-left" data-aos-delay="100">
<h3 class="font-semibold text-gray-900 mb-4">Quick Stats</h3>
<div class="space-y-2.5">
@foreach([['Faculty Members',$data['faculty']->count(),'fas fa-users'],['Programs',$data['programs']->count(),'fas fa-graduation-cap'],['Research Papers',$data['publications_count'],'fas fa-book-open'],['Annual Intake',$dept->intake,'fas fa-user-graduate']] as [$lbl,$val,$icon])
<div class="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
<span class="text-gray-600 text-sm flex items-center gap-2"><i class="{{ $icon }} text-primary-500 w-4"></i>{{ $lbl }}</span>
<span class="font-bold text-gray-900">{{ $val }}</span>
</div>
@endforeach
</div>
</div>
<div class="bg-yellow-50 border border-yellow-200 rounded-xl p-5" data-aos="fade-left" data-aos-delay="200">
<h3 class="font-semibold text-gray-900 mb-3">Contact</h3>
<div class="space-y-2 text-sm text-gray-600 mb-4">
<div class="flex items-center gap-2"><i class="fas fa-phone text-primary-600"></i>+91 8669638081</div>
<div class="flex items-center gap-2"><i class="fas fa-envelope text-primary-600"></i>{{ $dept->hod_email ?? 'dept@ssgmce.ac.in' }}</div>
</div>
<a href="/contact" class="block text-center bg-primary-700 text-white py-2.5 rounded-lg text-sm font-semibold hover:bg-primary-800 transition">Send Enquiry</a>
</div>
</div>
</div>
</div>
@endsection