@extends('layouts.portal')

@section('title', $title)

@section('content')
    <div class="portal-page">
        @include('partials.portal-header')

        <main class="module-main">
            <div class="module-heading">
                <div>
                    <p class="eyebrow"><a href="{{ route('persons.index') }}">{{ __('PERSONS') }}</a> / {{ __('DIRECTORY') }}</p>
                    <h1>{{ __($title) }}</h1>
                    <p>{{ __(':count records', ['count' => $records->total()]) }}</p>
                </div>
                <div class="directory-tools">
                    @if($directory === 'system-users')
                        <a class="action-button" href="{{ route('persons.user-accounts.create') }}"><span aria-hidden="true">+</span> {{ __('Add system user') }}</a>
                    @endif
                    <a class="module-link" href="{{ route('persons.index') }}">{{ __('All persons') }}</a>
                </div>
            </div>

            <div class="data-toolbar">
                <span class="dashboard-caption">{{ __('Inactive system users are hidden by default.') }}</span>
                <form class="inactive-filter" method="GET" action="{{ route('persons.directory', $directory) }}">
                    <input type="hidden" name="save_inactive_filter" value="1">
                    <label class="toggle-switch">
                        <input type="hidden" name="include_inactive" value="0">
                        <input type="checkbox" name="include_inactive" value="1" @checked($includeInactive) onchange="this.form.submit()">
                        <span class="toggle-track"><span class="toggle-thumb"></span></span>
                        <span class="toggle-switch-label">{{ __('Include inactive') }}</span>
                    </label>
                </form>
            </div>

            <div class="table-frame">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>{{ __('Person') }}</th>
                            <th>{{ $directory === 'system-users' ? __('Username') : __('Reference') }}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($records as $record)
                            <tr>
                                <td>
                                    <div class="person-name">{{ $record->person->first_name }} {{ $record->person->last_name }}</div>
                                    <div class="person-subtitle">{{ $record->person->primaryEmailAddress?->email_address ?: $record->person->primaryPhoneNumber?->phone_number }}</div>
                                </td>
                                <td>
                                    @if($directory === 'system-users')
                                        {{ $record->username }}
                                    @elseif($directory === 'employees')
                                        {{ $record->employee_number ?: $record->job_title ?: '—' }}
                                    @elseif($directory === 'suppliers')
                                        {{ $record->supplier_number ?: '—' }}
                                    @else
                                        {{ $record->customer_number ?: '—' }}
                                    @endif
                                </td>
                                <td><a class="table-action" href="{{ route('persons.user-accounts.edit', $record) }}">{{ __('Edit user') }}</a></td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="empty-state">{{ __('No :roles records yet.', ['roles' => strtolower(__($title))]) }}</td></tr>
                        @endforelse
                    </tbody>
                </table>

                @if($records->hasPages())
                    <div class="pagination-row">{{ $records->links() }}</div>
                @endif
            </div>
        </main>
    </div>
@endsection