@extends('admin.layouts.app')

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

@push('styles')
<style>
    .cmt-toolbar { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
    .cmt-toolbar > .cmt-toolbar__search { flex: 1 1 320px; min-width: 220px; }
    .cmt-status-chip {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 10px; border-radius: 999px;
        font-size: 12px; font-weight: 700; letter-spacing: .02em;
    }
    .cmt-status-chip--active   { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
    .cmt-status-chip--inactive { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
    .cmt-status-chip .dot {
        width: 8px; height: 8px; border-radius: 999px; background: currentColor;
    }
    /* Clickable variant — the chip becomes a button that submits the
       activate / deactivate form. Hover lifts the surface a touch so
       the affordance reads even without an icon. */
    button.cmt-status-chip {
        font: inherit;
        cursor: pointer;
        transition: filter .12s ease, transform .08s ease, box-shadow .12s ease;
    }
    button.cmt-status-chip:hover {
        filter: brightness(.97);
        box-shadow: 0 2px 6px -2px rgba(15,23,42,.12);
    }
    button.cmt-status-chip:active { transform: translateY(1px); }
    button.cmt-status-chip:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(99,102,241,.32);
    }

    /* ── Status-change confirmation dialog ────────────────────────────
       Single instance per page — triggered by the inline status chip
       on any row. Mirrors the form-page activation dialog so the
       visual language stays consistent. */
    .cmt-confirm-dialog {
        position: fixed; inset: 0;
        z-index: 9998;
        display: none; align-items: center; justify-content: center;
        padding: 18px;
    }
    .cmt-confirm-dialog.is-open { display: flex; }
    .cmt-confirm-dialog__backdrop {
        position: absolute; inset: 0;
        background: rgba(15, 23, 42, .55);
        backdrop-filter: blur(4px);
    }
    .cmt-confirm-dialog__panel {
        position: relative; z-index: 1;
        width: 100%; max-width: 440px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 28px 70px -12px rgba(15, 23, 42, .35);
        overflow: hidden;
    }
    .cmt-confirm-dialog__head {
        display: flex; align-items: center; gap: 10px;
        padding: 16px 20px;
        border-bottom: 1px solid #f1f5f9;
    }
    .cmt-confirm-dialog__head h3 { margin: 0; font-size: 15px; font-weight: 800; color: #0f172a; }
    .cmt-confirm-dialog__head svg { color: #4f46e5; }
    .cmt-confirm-dialog__body { padding: 16px 20px; font-size: 14px; color: #334155; line-height: 1.6; }
    .cmt-confirm-dialog__foot {
        display: flex; justify-content: flex-end; gap: 8px;
        padding: 14px 20px;
        background: #f8fafc;
        border-top: 1px solid #f1f5f9;
    }
    .cmt-confirm-dialog__foot button {
        padding: 8px 16px; border-radius: 8px; font-weight: 700; font-size: 13px;
        cursor: pointer; transition: background-color .12s, border-color .12s;
    }
    .cmt-confirm-dialog__foot .btn-ghost { background: #fff; color: #334155; border: 1px solid #cbd5e1; }
    .cmt-confirm-dialog__foot .btn-ghost:hover { background: #f1f5f9; }
    .cmt-confirm-dialog__foot .btn-primary { background: #4f46e5; color: #fff; border: 0; }
    .cmt-confirm-dialog__foot .btn-primary:hover { background: #4338ca; }
    .cmt-count-badge {
        display: inline-block; padding: 2px 9px;
        background: #eef2ff; color: #4338ca;
        border-radius: 999px; font-weight: 700; font-size: 12px;
    }
    .cmt-month {
        font-weight: 700; color: #1e293b; font-size: 14px;
    }
    .cmt-month small { display: block; font-size: 12px; color: #64748b; font-weight: 500; margin-top: 2px; }

    .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.committees.list_title')"
        :subtitle="__('admin.committees.list_subtitle', ['count' => $committees->total()])">
        <x-slot:actions>
            <x-admin.btn-create :href="route('admin.committees.create')" :label="__('admin.committees.create')" />
        </x-slot:actions>
    </x-admin.page-header>

    @include('admin.partials.flash')

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

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

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

        <x-admin.form-input
            type="month"
            name="month"
            :label="__('admin.committees.fields.month')"
            :value="request('month')" />
    </x-admin.filter-bar>

    <div class="card card-table">
        @if ($committees->isEmpty())
            <x-admin.empty-state
                :title="__('admin.committees.empty_title')"
                :subtitle="__('admin.committees.empty_hint')" />
        @else
            <div class="card-table-wrap">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th><x-admin.sortable column="meeting_date" :label="__('admin.committees.fields.month')" /></th>
                            <th>{{ __('admin.committees.fields.meeting_time') }}</th>
                            <th>{{ __('admin.committees.fields.startups') }}</th>
                            <th>{{ __('admin.committees.fields.investors') }}</th>
                            <th><x-admin.sortable column="status" :label="__('admin.fields.status')" /></th>
                            <th>{{ __('admin.committees.fields.created_by') }}</th>
                            <th class="actions" style="width:140px;text-align:end;">{{ __('admin.fields.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($committees as $committee)
                            <tr>
                                <td>
                                    <a href="{{ route('admin.committees.show', $committee) }}" style="text-decoration:none;">
                                        <span class="cmt-month">
                                            {{ $committee->monthLabel() }}
                                            <small>{{ optional($committee->meeting_date)->format('Y-m-d') }}</small>
                                        </span>
                                    </a>
                                </td>
                                <td>{{ $committee->formattedMeetingTime() }}</td>
                                <td><span class="cmt-count-badge">{{ $committee->startups_count ?? $committee->startups->count() }}</span></td>
                                <td><span class="cmt-count-badge">{{ $committee->investors_count ?? $committee->investors->count() }}</span></td>
                                <td>
                                    {{-- Status chip — read-only. The activate /
                                         deactivate inline toggles were removed
                                         (2026-06) when status became a lifecycle
                                         column managed exclusively by the daily
                                         `committees:expire-past` cron. --}}
                                    @if ($committee->status === \App\Models\Committee::STATUS_ACTIVE)
                                        <span class="cmt-status-chip cmt-status-chip--active" aria-label="{{ __('admin.committees.status.active') }}">
                                            <span class="dot"></span>{{ __('admin.committees.status.active') }}
                                        </span>
                                    @else
                                        <span class="cmt-status-chip cmt-status-chip--inactive" aria-label="{{ __('admin.committees.status.expired') }}">
                                            <span class="dot"></span>{{ __('admin.committees.status.expired') }}
                                        </span>
                                    @endif
                                </td>
                                <td>{{ $committee->creator?->name ?? '—' }}</td>
                                <td class="actions" style="text-align:end;white-space:nowrap;">
                                    <x-admin.row-actions
                                        :editUrl="route('admin.committees.edit', $committee)"
                                        :deleteUrl="route('admin.committees.destroy', $committee)" />
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="pagination-wrap">{{ $committees->links() }}</div>
        @endif
    </div>

    {{-- Shared status-change confirmation dialog. Single instance on
         the page — any row's status chip triggers it. The chosen
         row's form is stored on `data-pending-form` so the Confirm
         button can submit it after approval. --}}
    <div id="cmt-status-confirm" class="cmt-confirm-dialog" role="dialog"
         aria-modal="true" aria-labelledby="cmt-status-confirm-title" aria-hidden="true">
        <div class="cmt-confirm-dialog__backdrop" data-cmt-confirm-cancel></div>
        <div class="cmt-confirm-dialog__panel">
            <header class="cmt-confirm-dialog__head">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                </svg>
                <h3 id="cmt-status-confirm-title">{{ __('admin.committees.status_change_dialog.title') }}</h3>
            </header>
            <div class="cmt-confirm-dialog__body">
                <p style="margin:0;">{{ __('admin.committees.status_change_dialog.message') }}</p>
            </div>
            <footer class="cmt-confirm-dialog__foot">
                <button type="button" class="btn-ghost" data-cmt-confirm-cancel>
                    {{ __('admin.committees.status_change_dialog.cancel') }}
                </button>
                <button type="button" class="btn-primary" data-cmt-confirm-ok>
                    {{ __('admin.committees.status_change_dialog.confirm') }}
                </button>
            </footer>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var dialog  = document.getElementById('cmt-status-confirm');
        if (! dialog) return;
        var pending = null;   // the form awaiting confirmation

        function openDialog(form) {
            pending = form;
            dialog.classList.add('is-open');
            dialog.setAttribute('aria-hidden', 'false');
        }
        function closeDialog() {
            pending = null;
            dialog.classList.remove('is-open');
            dialog.setAttribute('aria-hidden', 'true');
        }

        // Intercept every row's toggle form. The submit fires the
        // confirmation dialog instead of going to the server directly.
        document.querySelectorAll('[data-cmt-toggle-form]').forEach(function (form) {
            form.addEventListener('submit', function (e) {
                // The post-confirm submit goes through this same handler
                // because the form is re-submitted programmatically. Guard
                // with a sentinel attribute the confirm path sets.
                if (form.dataset.cmtConfirmed === '1') return;
                e.preventDefault();
                openDialog(form);
            });
        });

        dialog.querySelectorAll('[data-cmt-confirm-cancel]').forEach(function (btn) {
            btn.addEventListener('click', closeDialog);
        });
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape' && dialog.classList.contains('is-open')) closeDialog();
        });

        var okBtn = dialog.querySelector('[data-cmt-confirm-ok]');
        if (okBtn) {
            okBtn.addEventListener('click', function () {
                if (! pending) { closeDialog(); return; }
                pending.dataset.cmtConfirmed = '1';
                pending.submit();
            });
        }
    });
</script>
@endpush