@extends('layouts.app')

@section('title', 'Standar Operasional Prosedur')

@section('content')
<div class="max-w-6xl mx-auto py-12 px-4">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">📚 Daftar SOP</h1>

    <form method="GET" class="mb-6 flex flex-wrap gap-4 items-center">
        {{-- Input Pencarian --}}
        <input type="text" name="search" value="{{ request('search') }}"
               class="w-full md:w-1/2 border px-4 py-2 rounded dark:bg-gray-800 dark:text-white"
               placeholder="🔍 Cari berdasarkan judul SOP...">

        {{-- Tombol Reset --}}
        @if(request('search'))
            <a href="{{ route('frontend.sop.index') }}"
               class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition">
               🔄 Reset
            </a>
        @endif
    </form>

    @if ($sops->isEmpty())
        <div class="text-center text-gray-500 dark:text-gray-300">Belum ada SOP yang sesuai.</div>
    @else
        <div class="grid gap-6 md:grid-cols-2">
            @foreach ($sops as $sop)
                <a href="{{ route('frontend.sop.show', $sop->id) }}"
                   class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition">
                    <h2 class="text-xl font-semibold text-blue-600 dark:text-blue-400">{{ $sop->judul }}</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-300 mt-2 line-clamp-2">
                        {{ \Illuminate\Support\Str::limit(strip_tags($sop->deskripsi), 100) }}
                    </p>
                    <div class="mt-4 text-sm text-gray-400">📅 {{ $sop->updated_at->format('d M Y') }}</div>
                </a>
            @endforeach
        </div>

        <div class="mt-8">
            {{ $sops->links('vendor.pagination.tailwind') }}
        </div>
    @endif
</div>
@endsection