@extends('layouts.portal')

@section('title', __('admin_components.title') . ' — ' . config('app.name'))
@section('page_title', __('admin_components.title'))
@section('page_subtitle', number_format($components->total()) . ' · ' . __('admin_components.subtitle'))

@section('page_actions')
    <a href="{{ route('portal.admin.components.create') }}" class="btn-brand !px-5 !py-2.5 text-sm">{{ __('admin_components.new') }}</a>
@endsection

@php
    $num = fn ($value, $decimals = 1) => $value === null ? '—' : rtrim(rtrim(number_format((float) $value, $decimals, '.', ''), '0'), '.');
    $tags = fn (?array $items, ?string $prefix = null) => collect($items ?? [])
        ->map(fn ($item) => $prefix ? __($prefix . $item) : $item)
        ->implode(', ') ?: '—';
@endphp

@section('content')
    <form method="GET" class="card-sc mb-5 grid gap-3 md:grid-cols-6">
        <div class="md:col-span-2">
            <label for="q" class="field-label">{{ __('common.search') }}</label>
            <input id="q" name="q" type="search" value="{{ request('q') }}" class="field-input" placeholder="{{ __('admin_components.name_en') }} / {{ __('admin_components.name_ar') }}">
        </div>
        <div>
            <label for="food_group_id" class="field-label">{{ __('admin_components.food_group') }}</label>
            <select id="food_group_id" name="food_group_id" class="field-input">
                <option value="">{{ __('common.all') }}</option>
                @foreach ($foodGroups as $group)
                    <option value="{{ $group->id }}" @selected((string) request('food_group_id') === (string) $group->id)>{{ $group->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label for="menu_label" class="field-label">{{ __('admin_components.menu_labels') }}</label>
            <select id="menu_label" name="menu_label" class="field-input">
                <option value="">{{ __('common.all') }}</option>
                @foreach (\App\Models\Component::MENU_LABELS as $label)
                    <option value="{{ $label }}" @selected(request('menu_label') === $label)>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label for="status" class="field-label">{{ __('common.status') }}</label>
            <select id="status" name="status" class="field-input">
                <option value="">{{ __('common.all') }}</option>
                <option value="active" @selected(request('status') === 'active')>{{ __('admin_components.active') }}</option>
                <option value="paused" @selected(request('status') === 'paused')>{{ __('admin_components.paused_status') }}</option>
            </select>
        </div>
        <div class="flex items-end gap-2">
            <button type="submit" class="btn-brand !px-5 !py-2.5 text-sm">{{ __('common.filter') }}</button>
            <a href="{{ route('portal.admin.components.index') }}" class="btn-ghost !px-5 !py-2.5 text-sm no-underline">{{ __('common.reset') }}</a>
        </div>
    </form>

    <div class="overflow-hidden rounded-3xl border border-ink-100 bg-white shadow-card">
        <div class="overflow-x-auto">
            <table class="table-sc whitespace-nowrap">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>{{ __('admin_components.name') }}</th>
                        <th>{{ __('admin_components.food_group') }}</th>
                        <th>{{ __('admin_components.menu_labels') }}</th>
                        <th>{{ __('admin_components.reference') }}</th>
                        <th>{{ __('admin_components.serving') }}</th>
                        <th>{{ __('admin_components.kcal') }}</th>
                        <th>{{ __('admin_components.fat_g') }}</th>
                        <th>{{ __('admin_components.saturated_fat_g') }}</th>
                        <th>{{ __('admin_components.protein_g') }}</th>
                        <th>{{ __('admin_components.carbs_g') }}</th>
                        <th>{{ __('admin_components.fiber_g') }}</th>
                        <th>{{ __('admin_components.sugar_g') }}</th>
                        <th>{{ __('admin_components.calcium_mg') }}</th>
                        <th>{{ __('admin_components.vitamin_c_mg') }}</th>
                        <th>{{ __('admin_components.vitamin_d_mcg') }}</th>
                        <th>{{ __('admin_components.micronutrients') }}</th>
                        <th>{{ __('admin_components.allergens') }}</th>
                        <th>{{ __('admin_components.meal_slots') }}</th>
                        <th>{{ __('admin_components.diet_types') }}</th>
                        <th>{{ __('admin_components.data_note') }}</th>
                        <th>{{ __('common.status') }}</th>
                        <th>{{ __('common.updated') }}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($components as $component)
                        <tr @class(['opacity-60' => ! $component->is_active])>
                            <td class="numeric text-ink-400">{{ $component->id }}</td>
                            <td>
                                <span class="font-semibold text-ink-900">{{ $component->name_en }}</span>
                                <span class="block text-xs text-ink-400" dir="rtl">{{ $component->name_ar }}</span>
                            </td>
                            <td>{{ $component->foodGroup?->name ?? '—' }}</td>
                            <td>
                                @forelse ($component->menu_labels ?? [] as $label)
                                    <span class="badge-sc bg-brand-50 text-brand-700">{{ $label }}</span>
                                @empty
                                    —
                                @endforelse
                            </td>
                            <td class="numeric">{{ $num($component->reference_quantity) }} {{ $component->reference_unit }}</td>
                            <td>
                                {{ __('admin_components.measure_methods.' . ($component->measure_method ?? 'weight')) }}
                                @if (filled($component->serving_size))
                                    <span class="block text-xs text-ink-400">{{ $component->serving_size }}</span>
                                @endif
                            </td>
                            <td class="numeric">{{ $num($component->kcal) }}</td>
                            <td class="numeric">{{ $num($component->fat_g, 2) }}</td>
                            <td class="numeric">{{ $num($component->saturated_fat_g, 2) }}</td>
                            <td class="numeric">{{ $num($component->protein_g, 2) }}</td>
                            <td class="numeric">{{ $num($component->carbs_g, 2) }}</td>
                            <td class="numeric">{{ $num($component->fiber_g, 2) }}</td>
                            <td class="numeric">{{ $num($component->sugar_g, 2) }}</td>
                            <td class="numeric">{{ $num($component->calcium_mg) }}</td>
                            <td class="numeric">{{ $num($component->vitamin_c_mg) }}</td>
                            <td class="numeric">{{ $num($component->vitamin_d_mcg, 2) }}</td>
                            <td class="text-xs">
                                @forelse ($component->micronutrients ?? [] as $key => $value)
                                    <span class="block">{{ $key }}: <span class="numeric">{{ is_scalar($value) ? $value : json_encode($value) }}</span></span>
                                @empty
                                    —
                                @endforelse
                            </td>
                            <td>{{ $tags($component->allergens) }}</td>
                            <td>{{ $tags($component->meal_slots, 'admin_components.meals.') }}</td>
                            <td>{{ $tags($component->diet_types, 'admin_components.diets.') }}</td>
                            <td class="max-w-xs truncate text-xs" title="{{ $component->data_note }}">{{ $component->data_note ?: '—' }}</td>
                            <td>
                                <span class="badge-sc {{ $component->is_active ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800' }}">
                                    {{ $component->is_active ? __('admin_components.active') : __('admin_components.paused_status') }}
                                </span>
                            </td>
                            <td class="numeric text-xs text-ink-400">{{ $component->updated_at?->format('Y-m-d') }}</td>
                            <td class="text-end">
                                <form method="POST" action="{{ route('portal.admin.components.toggle', $component) }}" class="inline-block">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="btn-soft {{ $component->is_active ? 'text-amber-700' : 'text-emerald-700' }}">
                                        {{ $component->is_active ? __('admin_components.pause') : __('admin_components.resume') }}
                                    </button>
                                </form>
                                <a href="{{ route('portal.admin.components.edit', $component) }}" class="btn-soft no-underline">{{ __('common.edit') }}</a>
                                <form method="POST" action="{{ route('portal.admin.components.destroy', $component) }}" class="inline-block" onsubmit="return confirm('{{ __('common.confirm_delete') }}')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-soft text-red-600">{{ __('common.delete') }}</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="24" class="py-12 text-center text-ink-400">{{ __('admin_components.empty') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-5">
        {{ $components->links() }}
    </div>
@endsection