@extends('layouts.app')

@section('content')
<div class="container py-4">
    <h4 class="mb-4">Department Posts</h4>

    {{-- Add Post Button --}}
    <div class="mb-3">
        <a href="{{ route('departments.create') }}" class="btn btn-success">
            + Add Department Post
        </a>
    </div>

    {{-- Entries/Per‑Page & Search --}}
    <div class="row mb-3 align-items-center">
        <div class="col-md-6">
            <form method="GET" class="d-flex align-items-center">
                <label class="me-2 mb-0">Show</label>
                <select name="perPage" class="form-select w-auto" onchange="this.form.submit()">
                    @foreach([5,10,25,50] as $n)
                        <option value="{{ $n }}" {{ request('perPage',10)==$n ? 'selected' : '' }}>
                            {{ $n }}
                        </option>
                    @endforeach
                </select>
                <label class="ms-2 mb-0">entries</label>
                <input type="hidden" name="search" value="{{ request('search') }}">
            </form>
        </div>
        <div class="col-md-6">
            <form method="GET" class="d-flex justify-content-end">
                <input
                    type="text"
                    name="search"
                    class="form-control w-50"
                    placeholder="Search by title..."
                    value="{{ request('search') }}"
                >
                <button type="submit" class="btn btn-primary ms-2">Search</button>
            </form>
        </div>
    </div>

    {{-- Table --}}
    <div class="table-responsive">
        <table class="table table-bordered align-middle">
            <thead class="table-light">
                <tr>
                    <th>Image</th>
                    <th>Title</th>
                    <th>Department</th>
                    <th>Posted On</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($posts as $post)
                <tr>
                    <td style="width:80px;">
                        @if($post->image)
                            <img
                                src="{{ asset('storage/'.$post->image) }}"
                                alt="{{ $post->title }}"
                                class="img-fluid"
                            >
                        @else
                            —
                        @endif
                    </td>
                    <td>{{ $post->title }}</td>
                    <td>{{ $post->department->name }}</td>
                    <td>{{ $post->created_at->format('d/m/Y') }}</td>
                    <td>
                        <a href="{{ route('departments.editPost', $post->id) }}" class="btn btn-sm btn-info text-white">
                            Edit
                        </a>
                        <form
                            action="{{ route('departments.destroyPost', $post->id) }}"
                            method="POST"
                            class="d-inline"
                        >
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-sm btn-danger">Delete</button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center py-4 text-muted">
                        No posts found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination & Info --}}
    <div class="row mt-3 align-items-center">
        <div class="col-md-6">
            <p class="mb-0">
                Showing
                <strong>{{ $posts->firstItem() ?? 0 }}</strong>
                to
                <strong>{{ $posts->lastItem() ?? 0 }}</strong>
                of
                <strong>{{ $posts->total() }}</strong>
                entries
            </p>
        </div>
        <div class="col-md-6">
            <nav class="d-flex justify-content-end">
                {{ $posts->withQueryString()->links() }}
            </nav>
        </div>
    </div>
</div>
@endsection