@extends('layouts.app')
@section('title', __('config.application_statuses.title'))

@section('content')
<x-filter-card>
    <x-filter-field filter="stage_group" :label="__('config.application_statuses.stage_group')" col="col-6 col-md-4"
        :options="collect(\App\Http\Controllers\Admin\ApplicationStatusController::GROUPS)
            ->mapWithKeys(fn($g) => [$g => __('config.application_statuses.groups.' . $g)])->all()" />
    <x-filter-field filter="is_active" :label="__('config.is_active')" col="col-6 col-md-4"
        :options="['1' => __('config.active'), '0' => __('config.inactive')]" />
</x-filter-card>

<div class="card shadow-sm">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <span class="fw-bold"><i class="bi bi-signpost-split me-1"></i> {{ __('config.application_statuses.title') }}</span>
        <a href="{{ route('admin.application-statuses.create') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg"></i> {{ __('config.application_statuses.create') }}
        </a>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover table-striped align-middle w-100" id="application-statuses-table">
                <thead class="table-light">
                    <tr>
                        <th>{{ __('config.sort_order') }}</th>
                        <th>{{ __('config.code') }}</th>
                        <th>{{ __('app.name') }}</th>
                        <th>{{ __('config.application_statuses.stage_group') }}</th>
                        <th>—</th>
                        <th>{{ __('config.is_active') }}</th>
                        <th>{{ __('app.actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    window.dtFilteredTable('#application-statuses-table', '{{ route('admin.application-statuses.data') }}', [
        { data: 'sort_order' },
        { data: 'code' },
        { data: 'name' },
        { data: 'stage_group' },
        { data: 'flags', orderable: false, searchable: false },
        { data: 'is_active' },
        { data: 'actions', orderable: false, searchable: false, className: 'text-center' },
    ], { order: [[0, 'asc']] });
});
</script>
@endpush