@extends('admin.layouts.app')
@section('title', $department->name)
@section('breadcrumb')
    <span>/</span> <a href="{{ route('admin.departments.index') }}" style="color:inherit;text-decoration:none;">Departments</a>
    <span>/</span> {{ $department->name }}
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>{{ $department->name }}</h1>
        <p class="page-subtitle">Department details and members</p>
    </div>
    <div class="d-flex gap-2">
        @if(auth()->user()->hasPermission('departments.edit'))
        <a href="{{ route('admin.departments.edit', $department) }}" class="btn btn-primary">
            <i class="fas fa-edit me-2"></i>Edit
        </a>
        @endif
        <a href="{{ route('admin.departments.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back
        </a>
    </div>
</div>

<div class="row g-4">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h6 class="fw-700 mb-3"><i class="fas fa-building text-primary me-2"></i>Department Info</h6>
                <div class="mb-2"><small class="text-muted d-block">Name</small><strong>{{ $department->name }}</strong></div>
                <div class="mb-2"><small class="text-muted d-block">Description</small>{{ $department->description ?? '—' }}</div>
                <div class="mb-2"><small class="text-muted d-block">Status</small>{!! $department->status_badge !!}</div>
                <div class="mb-2"><small class="text-muted d-block">Total Members</small>
                    <span class="badge bg-primary">{{ $users->total() }} users</span>
                </div>
                <div><small class="text-muted d-block">Created</small>{{ $department->created_at->format('d M Y') }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0 fw-700"><i class="fas fa-users text-primary me-2"></i>Members ({{ $users->total() }})</h6>
            </div>
            <div class="card-body p-0">
                <table class="table mb-0">
                    <thead style="background:#f8fafc;">
                        <tr><th class="ps-3">Name</th><th>Designation</th><th>Role</th><th>Status</th></tr>
                    </thead>
                    <tbody>
                        @forelse($users as $u)
                        <tr>
                            <td class="ps-3">
                                <div class="d-flex align-items-center gap-2">
                                    <img src="{{ $u->profile_image_url }}" width="28" height="28"
                                        style="border-radius:50%;object-fit:cover;">
                                    <div>
                                        <div style="font-weight:600;font-size:13px;">{{ $u->name }}</div>
                                        <div style="font-size:11px;color:#94a3b8;">{{ $u->email }}</div>
                                    </div>
                                </div>
                            </td>
                            <td style="font-size:12px;">{{ $u->designation ?? '—' }}</td>
                            <td><span class="badge bg-secondary">{{ $u->role->name ?? $u->user_type }}</span></td>
                            <td>{!! $u->status_badge !!}</td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-center py-3 text-muted">No members in this department</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($users->hasPages())
            <div class="card-footer bg-white">{{ $users->links() }}</div>
            @endif
        </div>
    </div>
</div>
@endsection