@extends('layout.layout')

@section('content')
    @include('components.alert')

    @php
        $showDepartmentColumns = Auth::user()->staff->department->slug !== 'academy';
        $showStudentsColumn = Auth::user()->staff->department->slug === 'academy' && request('job_title_id');
        $headers = ['ID', 'Photo', 'First Name', 'Last Name'];

        if ($showDepartmentColumns) {
            $headers[] = 'Department';
        }

        $headers[] = 'Job Title';

        if ($showDepartmentColumns) {
            $headers[] = 'Manager';
        }

        $headers[] = 'Employee Type';
        $headers[] = 'Date Of Joining';

        if ($showStudentsColumn) {
            $headers[] = 'Students';
        }

        $headers[] = 'Actions';
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title
                    title="Staff Directory"
                    description="Browse staff members, search by name, and review their department, manager, and employment details."
                />

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap">
                            <div style="margin-right: auto;">
                                <h6 class="mb-0 ui-title">Staff List</h6>
                                <p class="mb-0 ui-muted">Use the controls below to search staff members and adjust how many rows appear per page.</p>
                            </div>

                            <x-table-controls
                                :action="route('staffs.index')"
                                searchPlaceholder="Search first name or last name"
                                formId="staff-table-controls"
                            >
                                @if (request('job_title_id'))
                                    <input type="hidden" name="job_title_id" value="{{ request('job_title_id') }}">
                                @endif
                            </x-table-controls>
                        </div>
                    </div>

                    <x-table
                        :headers="$headers"
                        :paginator="$staffs"
                        emptyMessage="No staff found."
                    >
                        @foreach ($staffs as $staff)
                            <tr>
                                <td class="ui-id text-center">{{ $staff->id }}</td>
                                <td class="text-center">
                                    <img
                                        src="{{ $staff->staff_photo ?: asset('assets/images/logo-icon.png') }}"
                                        alt="{{ $staff->first_name }}"
                                        class="staff-avatar"
                                    >
                                </td>
                                <td class="text-center">
                                    <a href="{{ route('staffs.show', $staff->id) }}" class="ui-title">
                                        {{ $staff->first_name }}
                                    </a>
                                </td>
                                <td class="text-center">
                                    <a href="{{ route('staffs.show', $staff->id) }}" class="ui-title">
                                        {{ $staff->last_name }}
                                    </a>
                                </td>

                                @if ($showDepartmentColumns)
                                    <td class="text-center ui-muted">{{ $staff->department->name ?? 'N/A' }}</td>
                                @endif

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--neutral">{{ $staff->jobTitle->name ?? 'N/A' }}</span>
                                </td>

                                @if ($showDepartmentColumns)
                                    <td class="text-center ui-muted">
                                        {{ trim(optional($staff->manager)->first_name . ' ' . optional($staff->manager)->last_name) ?: 'N/A' }}
                                    </td>
                                @endif

                                <td class="text-center ui-muted">{{ $staff->roleType->title ?? 'N/A' }}</td>
                                <td class="text-center ui-muted">{{ $staff->date_of_joining ?? 'N/A' }}</td>

                                @if ($showStudentsColumn)
                                    <td class="text-center">
                                        @if (($staff->jobTitle->name ?? null) !== 'academic-manager')
                                            <a
                                                href="{{ config('app.Retention_URL') }}students?staff_id={{ $staff->id }}"
                                                class="ui-pill ui-pill--info staff-pill-link"
                                            >
                                                View Students
                                            </a>
                                        @else
                                            <span class="ui-pill ui-pill--neutral">N/A</span>
                                        @endif
                                    </td>
                                @endif

                                <td class="text-center">
                                    <div class="ui-actions justify-content-center">
                                        <x-table-action
                                            type="view"
                                            :url="route('staffs.show', $staff->id)"
                                            title="View Staff"
                                        />
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .staff-avatar {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            object-fit: cover;
            border: 1px solid #e2e8f0;
            background: #fff;
        }

        .staff-pill-link {
            text-decoration: none;
        }
    </style>
@endpush