@extends('admin.layouts.app')

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

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

@push('styles')
<style>
    /* ── Group colour pill in the table ─────────────────────────── */
    .grp-pill {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 5px 12px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--gc, #94a3b8) 12%, transparent);
        color: var(--gc, #475569);
        border: 1px solid color-mix(in srgb, var(--gc, #94a3b8) 26%, transparent);
        font-size: 12.5px; font-weight: 700;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .grp-pill__dot {
        flex: 0 0 auto;
        width: 9px; height: 9px; border-radius: 999px;
        background: var(--gc, #94a3b8);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc, #94a3b8) 20%, transparent);
    }
    @supports not (background: color-mix(in srgb, red, white)) {
        .grp-pill { background: #f1f5f9; border-color: #e2e8f0; }
        .grp-pill__dot { box-shadow: none; }
    }

    .grp-type-chip {
        display: inline-block;
        padding: 3px 10px;
        background: #f1f5f9; color: #475569;
        border-radius: 6px;
        font-size: 11.5px; font-weight: 700;
        text-transform: capitalize;
        letter-spacing: .01em;
    }
    .grp-type-chip--investor { background: #eef2ff; color: #4338ca; }
    .grp-type-chip--startup  { background: #ecfeff; color: #0e7490; }

    /* Order column — tiny monospaced badge instead of a raw number. */
    .grp-order {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 28px; height: 24px;
        padding: 0 8px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        font-family: 'SFMono-Regular', Consolas, monospace;
        font-size: 12px; font-weight: 600;
        color: #475569;
    }

    /* Description column — let it breathe a bit. Two-line truncate so the
       row height stays predictable but a longer description still hints
       at its real content. */
    .grp-desc {
        color: #475569;
        font-size: 13px;
        line-height: 1.5;
        max-width: 480px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .grp-desc--empty { color: #cbd5e1; font-style: italic; }

    /* Table polish — slightly more vertical breathing room, soft hover,
       column dividers stay invisible at rest. */
    .grp-table-shell .data-table thead th {
        background: #f8fafc;
        color: #475569;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: 12px 16px;
        border-bottom: 1px solid #e2e8f0;
    }
    .grp-table-shell .data-table tbody td {
        padding: 14px 16px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
    }
    .grp-table-shell .data-table tbody tr:last-child td {
        border-bottom: 0;
    }
    .grp-table-shell .data-table tbody tr {
        transition: background-color .12s;
    }
    .grp-table-shell .data-table tbody tr:hover {
        background: #fafbfd;
    }
    .grp-table-shell .data-table .actions {
        width: 110px; text-align: end;
    }
    .grp-table-shell .data-table tbody td.actions {
        white-space: nowrap;
    }

    /* Mobile: collapse description on narrow viewports — it's the most
       expendable column. Type chip moves under the name. */
    @media (max-width: 820px) {
        .grp-table-shell .data-table th.col-desc,
        .grp-table-shell .data-table td.col-desc { display: none; }
    }
    @media (max-width: 640px) {
        .grp-table-shell .data-table th.col-order,
        .grp-table-shell .data-table td.col-order { display: none; }
    }

    .grp-toolbar {
        display: flex; align-items: flex-start; gap: 10px;
        flex-wrap: wrap;
        margin: 0 0 12px;
    }
    .grp-toolbar > .grp-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.groups.list_title')"
        :subtitle="__('admin.groups.list_subtitle', ['count' => $groups->total()])">
        <x-slot:actions>
            <x-admin.btn-create :href="route('admin.groups.create')" :label="__('admin.groups.create')" />
        </x-slot:actions>
    </x-admin.page-header>

    @include('admin.partials.flash')

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

        <form method="GET" action="{{ url()->current() }}" class="pp-wrap" id="groups-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="groups-per-page">{{ __('admin.pagination.per_page') }}</label>
            <select name="per_page" id="groups-per-page" onchange="document.getElementById('groups-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="groups-filter-bar">
        @foreach (request()->only(['q', 'sort', 'dir']) as $key => $value)
            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
        @endforeach

        <x-admin.form-select name="type" :label="__('admin.groups.fields.type')"
            :options="[
                \App\Models\Group::TYPE_INVESTOR => __('admin.groups.types.investor'),
                \App\Models\Group::TYPE_STARTUP  => __('admin.groups.types.startup'),
            ]"
            :selected="$selectedType" :placeholder="__('admin.filters.all')" />

        <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 grp-table-shell">
        @if ($groups->isEmpty())
            <x-admin.empty-state :title="__('admin.groups.empty_title')" />
        @else
            <div class="card-table-wrap">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th><x-admin.sortable column="name"          :label="__('admin.groups.fields.name')" /></th>
                            <th><x-admin.sortable column="type"          :label="__('admin.groups.fields.type')" /></th>
                            <th class="col-order"><x-admin.sortable column="display_order" :label="__('admin.groups.fields.display_order')" /></th>
                            <th class="col-desc">{{ __('admin.groups.fields.description') }}</th>
                            <th><x-admin.sortable column="is_active"     :label="__('admin.fields.status')" /></th>
                            <th class="actions">{{ __('admin.fields.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($groups as $group)
                            <tr>
                                <td>
                                    <span class="grp-pill" style="--gc: {{ $group->resolveColor() }};">
                                        <span class="grp-pill__dot" aria-hidden="true"></span>
                                        {{ $group->name }}
                                    </span>
                                </td>
                                <td>
                                    @if ($group->type === \App\Models\Group::TYPE_INVESTOR)
                                        <span class="grp-type-chip grp-type-chip--investor">{{ __('admin.groups.types.investor') }}</span>
                                    @elseif ($group->type === \App\Models\Group::TYPE_STARTUP)
                                        <span class="grp-type-chip grp-type-chip--startup">{{ __('admin.groups.types.startup') }}</span>
                                    @else
                                        <span class="grp-type-chip">—</span>
                                    @endif
                                </td>
                                <td class="col-order">
                                    <span class="grp-order">{{ $group->display_order }}</span>
                                </td>
                                <td class="col-desc">
                                    @if ($group->description)
                                        <div class="grp-desc">{{ $group->description }}</div>
                                    @else
                                        <span class="grp-desc grp-desc--empty">—</span>
                                    @endif
                                </td>
                                <td><x-admin.row-toggle :action="route('admin.groups.toggle', $group)" :checked="$group->is_active" /></td>
                                <td class="actions">
                                    <x-admin.row-actions
                                        :editUrl="route('admin.groups.edit', $group)"
                                        :deleteUrl="route('admin.groups.destroy', $group)" />
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="pagination-wrap">{{ $groups->links() }}</div>
        @endif
    </div>
@endsection