@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-10">
    <h1 class="text-2xl sm:text-3xl font-extrabold text-neutral-900 mb-2">Department-Wise Official Government Web Links</h1>
    <p class="text-sm text-neutral-600 mb-8">Complete directory of Central Ministries, State Departments, and District Portals stored in the sunmagaj_csc MySQL database.</p>

    <div class="space-y-8">
        @foreach($departments as $dept)
            <div class="border border-neutral-200 rounded-2xl overflow-hidden bg-white">
                <div class="bg-[#105C35] text-white px-5 py-4 flex justify-between items-center">
                    <div>
                        <h2 class="text-lg font-extrabold">{{ $dept->name }} ({{ $dept->name_hindi }})</h2>
                        <p class="text-xs text-emerald-100">{{ $dept->ministry }} • Helpline: {{ $dept->helpline }}</p>
                    </div>
                    <span class="px-3 py-1 bg-[#F4B942] text-neutral-900 text-xs font-extrabold rounded-xl">{{ $dept->webLinks->count() }} Links</span>
                </div>
                <div class="p-5 grid grid-cols-1 md:grid-cols-3 gap-4">
                    @foreach($dept->webLinks as $link)
                        <div class="p-4 rounded-xl border border-neutral-200 flex flex-col justify-between">
                            <div>
                                <span class="text-[10px] font-bold text-[#168447]">{{ $link->category }} • {{ $link->state }}</span>
                                <h3 class="text-sm font-bold text-neutral-900 mt-1">{{ $link->title }}</h3>
                                <a href="{{ $link->url }}" target="_blank" class="text-xs font-mono text-[#168447] underline break-all">{{ $link->url }}</a>
                                <p class="text-xs text-neutral-600 mt-2">{{ $link->portal_description }}</p>
                            </div>
                            <a href="{{ $link->url }}" target="_blank" class="mt-3 inline-block text-center py-1.5 bg-[#168447] text-white text-xs font-bold rounded-lg">Open Official Website ↗</a>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection