@php $layout = auth()->user()->role === 'super_admin' ? 'layouts.admin' : 'component4.layouts.app'; @endphp
@use(App\Models\Component4\C4StakeholderEngagement)
@extends($layout)
@section('content')
    <div class="container-fluid px-4 py-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:history.back()">Back</a></li>
                <li class="breadcrumb-item"><a href="{{ route('component4.index') }}">Component 4 Dashboard</a></li>
                <li class="breadcrumb-item active">Stakeholders Engagement</li>
            </ol>
        </nav>
        <br/>
        &nbsp;
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4>Stakeholder Engagement Register</h4>
            <div>
                <a href="{{ route('component4.stakeholders.create') }}" class="btn btn-success">+ New Engagement</a>
                <a href="{{ route('component4.stakeholders.report') }}" class="btn btn-info text-white">📊 Report &
                    Visualization</a>
            </div>
        </div>

        <!-- Filters (same as your existing index) -->
        <form method="GET" class="row g-3 mb-4">
            <div class="col-md-3"><select name="state" class="form-select">
                    @foreach (C4StakeholderEngagement::distinct()->pluck('state_province') as $s)
                        <option value="{{ $s }}">{{ $s }}</option>
                    @endforeach
                </select></div>
            <div class="col-md-2"><select name="gender" class="form-select">... (same as your gender filter)</select></div>
            <div class="col-md-2"><button class="btn btn-primary w-100">Filter</button></div>
        </form>

        <!-- Quick Stats -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="stat-card p-3">Total Engagements <h3>{{ $stats['total'] }}</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card p-3">Female <h3 class="text-danger">{{ $stats['total_female'] }}</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card p-3">Male <h3 class="text-primary">{{ $stats['total_male'] }}</h3>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="card">
            <div class="card-body table-responsive">
                <table class="table table-hover">
                    <thead class="table-success">
                        <tr>
                            <th>S/N</th>
                            <th>Name</th>
                            <th>Organization</th>
                            <th>Designation</th>
                            <th>Gender</th>
                            <th>State</th>
                            <th>Date</th>
                            <th>Component</th>
                            <th>Categories</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($engagements as $e)
                            <tr>
                                <td>{{ $e->serial_no ?? $loop->iteration }}</td>
                                <td>{{ $e->name }}</td>
                                <td>{{ $e->organization ?? '-' }}</td>
                                <td>{{ $e->designation ?? '-' }}</td>
                                <td><span
                                        class="badge bg-{{ $e->gender == 'female' ? 'danger' : 'primary' }}">{{ ucfirst($e->gender) }}</span>
                                </td>
                                <td>{{ $e->state_province }}</td>
                                <td>{{ $e->date_of_engagement->format('d M Y') }}</td>
                                <td>{{ $e->component_of_engagement ?? '-' }}</td>
                                <td>
                                    @if ($e->project_launch)
                                        <span class="badge bg-success me-1">Launch</span>
                                    @endif
                                    @if ($e->learning_event)
                                        <span class="badge bg-info me-1">Learning</span>
                                    @endif
                                    @if ($e->partners_forum)
                                        <span class="badge bg-warning me-1">Partners</span>
                                    @endif
                                    @if ($e->orientation)
                                        <span class="badge bg-primary me-1">Orientation</span>
                                    @endif
                                    <!-- add the rest as needed -->
                                </td>
                                <td> <!-- edit/delete buttons (you'll add) --> </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="text-center py-4">No engagements yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                {{ $engagements->links() }}
            </div>
        </div>
    </div>
@endsection
