@extends('layouts.main_dashboard.app')
@section('title', app()->getLocale() === 'ar' ? 'المكتبة الإرشادية' : 'Guidance Resource Library')
@section('skip_page_hero', true)
@php($isArabic = app()->getLocale() === 'ar')
@section('content')
<div class="space-y-6">
    <section class="grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(24rem,0.9fr)]">
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
            <p class="text-xs font-black uppercase tracking-[0.24em] text-brand-600">{{ $isArabic ? 'المكتبة الإرشادية' : 'Guidance library' }}</p>
            <h1 class="mt-3 text-2xl font-black text-zinc-900 dark:text-white md:text-3xl">{{ $isArabic ? 'نشر المقالات والروابط والمواد التوعوية' : 'Publish articles, links, and guidance materials' }}</h1>
        </div>
        <form action="{{ route('social-worker.resources.store') }}" method="POST" enctype="multipart/form-data" class="space-y-3 rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">@csrf
            <input type="text" name="title" placeholder="{{ $isArabic ? 'عنوان المورد' : 'Resource title' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
            <div class="grid gap-3 md:grid-cols-2">
                <select name="type" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"><option value="article">article</option><option value="video">video</option><option value="file">file</option><option value="link">link</option></select>
                <select name="audience" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"><option value="both">{{ $isArabic ? 'الطلاب والأهالي' : 'Students and parents' }}</option><option value="student">{{ $isArabic ? 'الطلاب' : 'Students' }}</option><option value="parent">{{ $isArabic ? 'الأهالي' : 'Parents' }}</option></select>
            </div>
            <div class="grid gap-3 md:grid-cols-3">
                <select name="stage_id" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"><option value="">{{ $isArabic ? 'كل المراحل' : 'All stages' }}</option>@foreach($stages as $stage)<option value="{{ $stage->id }}">{{ $stage->name }}</option>@endforeach</select>
                <select name="grade_id" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"><option value="">{{ $isArabic ? 'كل الصفوف' : 'All grades' }}</option>@foreach($grades as $grade)<option value="{{ $grade->id }}">{{ $grade->name }}</option>@endforeach</select>
                <select name="school_class_id" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"><option value="">{{ $isArabic ? 'كل الفصول' : 'All classes' }}</option>@foreach($classes as $class)<option value="{{ $class->id }}">{{ $class->name }}</option>@endforeach</select>
            </div>
            <textarea name="summary" rows="2" placeholder="{{ $isArabic ? 'ملخص قصير' : 'Short summary' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"></textarea>
            <textarea name="body" rows="4" placeholder="{{ $isArabic ? 'المحتوى النصي' : 'Body content' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"></textarea>
            <input type="url" name="external_url" placeholder="{{ $isArabic ? 'رابط خارجي' : 'External URL' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
            <input type="file" name="attachment" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
            <label class="flex items-center gap-3 rounded-2xl border border-zinc-200 px-4 py-3 text-sm font-bold text-zinc-700 dark:border-zinc-700 dark:text-zinc-200"><input type="checkbox" name="is_published" value="1" checked>{{ $isArabic ? 'نشر المورد فورًا' : 'Publish immediately' }}</label>
            <button class="inline-flex w-full items-center justify-center rounded-2xl bg-brand-600 px-4 py-3 text-sm font-black text-white">{{ $isArabic ? 'حفظ المورد' : 'Save resource' }}</button>
        </form>
    </section>
    <section class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
        @if($resources->count() > 0)
            @foreach($resources as $resource)
                <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
                    <div class="flex items-center justify-between gap-3">
                        <h2 class="text-base font-black text-zinc-900 dark:text-white">{{ $resource->title }}</h2>
                        <span class="rounded-full bg-zinc-100 px-3 py-1 text-xs font-black text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">{{ $resource->type }}</span>
                    </div>
                    <p class="mt-3 text-sm text-zinc-600 dark:text-zinc-300">{{ $resource->summary ?: \Illuminate\Support\Str::limit(strip_tags($resource->body), 110) }}</p>
                    <p class="mt-4 text-xs text-zinc-500 dark:text-zinc-400">{{ $resource->audience }}{{ $resource->published_at ? ' • ' . $resource->published_at->format('Y-m-d') : '' }}</p>
                </article>
            @endforeach
        @endif
    </section>
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white px-6 py-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">{{ $resources->links('pagination::simple-tailwind') }}</section>
</div>
@endsection