@extends('admin.layouts.app')

@section('title', __('admin.admins.list_title') . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.admins.list_title'))

@php
    $filterKeys    = ['is_active'];
    $activeFilters = collect($filterKeys)->filter(fn ($k) => filled(request($k)))->count();
@endphp

@push('styles')
<style>
    /* Avatar tile in the name column — initials on a soft tinted background.
       Same chrome the rest of the admin uses (mirrors the row-avatar on the
       investor index) so the listing feels native. */
    .adm-cell-name { display: inline-flex; align-items: center; gap: 10px; }
    .adm-avatar {
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        background: #eef2ff; color: #4338ca;
        border: 1px solid #c7d2fe;
        border-radius: 999px;
        font-size: 12.5px; font-weight: 800;
        text-transform: uppercase;
    }
    .adm-name { font-weight: 700; color: #0f172a; }
    .adm-self {
        display: inline-block; margin-inline-start: 6px;
        padding: 1px 8px;
        background: #fef3c7; color: #92400e;
        border-radius: 999px; font-size: 10.5px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .04em;
    }
    .adm-status {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 3px 10px; border-radius: 999px;
        font-size: 12px; font-weight: 700;
    }
    .adm-status--active   { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
    .adm-status--inactive { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
    .adm-status .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }

    .adm-toolbar { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
    .adm-toolbar > .adm-toolbar__search { flex: 1 1 320px; min-width: 220px; }

    .pp-wrap {
        display: inline-flex; align-items: center; gap: 8px;
        height: 42px; padding: 0 14px 0 16px;
        background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
        box-shadow: 0 1px 2px rgba(15,23,42,.04);
        color: #475569; font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap;
    }
    .pp-wrap select {
        appearance: auto; background: transparent; border: 0;
        font: inherit; font-size: 13.5px; font-weight: 700;
        color: #0f172a; cursor: pointer; padding: 0 4px;
    }
    .pp-wrap select:focus { outline: none; }
</style>
@endpush

@section('content')
    <x-admin.page-header
        :title="__('admin.admins.list_title')"
        :subtitle="__('admin.admins.list_subtitle', ['count' => $admins->total()])">
        <x-slot:actions>
            <x-admin.btn-create :href="route('admin.admins.create')" :label="__('admin.admins.create')" />
        </x-slot:actions>
    </x-admin.page-header>

    @include('admin.partials.flash')

    <div class="adm-toolbar">
        <div class="adm-toolbar__search">
            <x-admin.list-toolbar
                :searchPlaceholder="__('admin.admins.search_placeholder')"
                :activeFilters="$activeFilters"
                filterTargetId="admins-filter-bar" />
        </div>

        <form method="GET" action="{{ url()->current() }}" class="pp-wrap" id="admins-per-page-form">
            @foreach (request()->except(['per_page', 'page']) as $k => $v)
                @if (is_array($v))
                    @foreach ($v as $vv)
                        <input type="hidden" name="{{ $k }}[]" value="{{ $vv }}">
                    @endforeach
                @else
                    <input type="hidden" name="{{ $k }}" value="{{ $v }}">
                @endif
            @endforeach
            <label for="admins-per-page">{{ __('admin.pagination.per_page') }}</label>
            <select name="per_page" id="admins-per-page" onchange="document.getElementById('admins-per-page-form').submit()">
                @foreach ($perPageOptions as $opt)
                    <option value="{{ $opt }}" @selected($perPage === $opt)>{{ $opt }}</option>
                @endforeach
            </select>
        </form>
    </div>

    <x-admin.filter-bar id="admins-filter-bar">
        @foreach (request()->only(['q', 'sort', 'dir']) as $key => $value)
            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
        @endforeach

        <x-admin.form-select name="is_active" :label="__('admin.fields.status')"
            :options="['1' => __('admin.statuses.active'), '0' => __('admin.statuses.inactive')]"
            :selected="request('is_active')" :placeholder="__('admin.filters.all')" />
    </x-admin.filter-bar>

    <div class="card card-table">
        @if ($admins->isEmpty())
            <x-admin.empty-state :title="__('admin.admins.empty_title')" />
        @else
            <div class="card-table-wrap">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th><x-admin.sortable column="name"       :label="__('admin.admins.fields.name')" /></th>
                            <th><x-admin.sortable column="email"      :label="__('admin.admins.fields.email')" /></th>
                            <th><x-admin.sortable column="is_active"  :label="__('admin.fields.status')" /></th>
                            <th><x-admin.sortable column="created_at" :label="__('admin.admins.fields.created_at')" /></th>
                            <th class="actions">{{ __('admin.fields.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($admins as $admin)
                            @php
                                $isSelf = (int) $admin->id === $currentAdminId;
                                $initials = collect(explode(' ', trim((string) $admin->name)))
                                    ->filter()->take(2)
                                    ->map(fn ($p) => mb_strtoupper(mb_substr($p, 0, 1)))
                                    ->implode('');
                                if ($initials === '') { $initials = mb_strtoupper(mb_substr((string) $admin->email, 0, 1)); }
                            @endphp
                            <tr>
                                <td>
                                    <span class="adm-cell-name">
                                        <span class="adm-avatar">{{ $initials }}</span>
                                        <span>
                                            <span class="adm-name">{{ $admin->name ?: '—' }}</span>
                                            @if ($isSelf)
                                                <span class="adm-self">{{ __('admin.admins.you') }}</span>
                                            @endif
                                        </span>
                                    </span>
                                </td>
                                <td>
                                    @if ($admin->email)
                                        <a href="mailto:{{ $admin->email }}">{{ $admin->email }}</a>
                                    @else
                                        —
                                    @endif
                                </td>
                                <td>
                                    @if ($admin->is_active)
                                        <span class="adm-status adm-status--active">
                                            <span class="dot"></span>{{ __('admin.statuses.active') }}
                                        </span>
                                    @else
                                        <span class="adm-status adm-status--inactive">
                                            <span class="dot"></span>{{ __('admin.statuses.inactive') }}
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @if ($admin->created_at)
                                        {{ $admin->created_at->format('Y-m-d') }}
                                        <small style="display:block; font-size:11px; color:#94a3b8;">
                                            {{ $admin->created_at->format('H:i') }}
                                        </small>
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="actions" style="white-space:nowrap;">
                                    {{-- Toggle is a small form so it's progressive-
                                         enhancement friendly (no JS required). --}}
                                    @unless ($isSelf)
                                        <form method="POST"
                                              action="{{ route('admin.admins.toggle', $admin) }}"
                                              style="display:inline; margin-inline-end:6px;"
                                              onsubmit="return confirm({{ Js::from(__('admin.admins.confirm_toggle')) }});">
                                            @csrf
                                            <button type="submit" class="btn-secondary btn-sm">
                                                {{ $admin->is_active ? __('admin.admins.actions.deactivate') : __('admin.admins.actions.activate') }}
                                            </button>
                                        </form>
                                    @endunless
                                    <x-admin.row-actions
                                        :editUrl="route('admin.admins.edit', $admin)"
                                        :deleteUrl="$isSelf ? null : route('admin.admins.destroy', $admin)" />
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="pagination-wrap">{{ $admins->links() }}</div>
        @endif
    </div>
@endsection