@extends('layouts.app')
@section('title', __('KPI block'))
@section('page-title', $feature->exists ? __('Edit KPI block') : __('New KPI block'))

@section('content')
@include('super-admin._nav')

<div x-data="{ tab: '{{ $locales[0] }}' }">
    <a href="{{ route('super-admin.kpi-features.index') }}" class="text-sm text-brand-600 hover:underline inline-flex items-center gap-1 mb-4">
        <x-icon name="arrow-right" class="w-4 h-4 rotate-180 rtl:rotate-0"/> {{ __('Back') }}
    </a>

    <form method="POST" action="{{ $feature->exists ? route('super-admin.kpi-features.update', $feature) : route('super-admin.kpi-features.store') }}" class="space-y-6">
        @csrf
        @if($feature->exists) @method('PATCH') @endif

        <div class="card card-pad grid sm:grid-cols-4 gap-4">
            <div>
                <label class="form-label">{{ __('Icon') }}</label>
                <select name="icon" class="form-select">
                    @foreach(['chart','trending-up','droplet','shield','cog','sparkles','alert','clock','globe','users','building','mail','star'] as $icon)
                        <option value="{{ $icon }}" @selected(old('icon', $feature->icon) === $icon)>{{ $icon }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="form-label">{{ __('Color') }}</label>
                <select name="color" class="form-select">
                    @foreach(['emerald','sky','indigo','violet','amber','rose','slate','brand','blue','red'] as $c)
                        <option value="{{ $c }}" @selected(old('color', $feature->color) === $c)>{{ $c }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="form-label">{{ __('Sort order') }}</label>
                <input type="number" name="sort" class="form-input" value="{{ old('sort', $feature->sort) }}">
            </div>
            <label class="flex items-center gap-2 mt-7">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" value="1" class="w-4 h-4 accent-brand-600" @checked(old('is_active', $feature->is_active ?? true))>
                <span class="text-sm">{{ __('Active') }}</span>
            </label>
        </div>

        <div class="card overflow-hidden">
            <div class="flex border-b border-slate-200/70 dark:border-slate-800 overflow-x-auto scrollbar-thin">
                @foreach($locales as $loc)
                    <button type="button" @click="tab='{{ $loc }}'"
                            :class="tab==='{{ $loc }}' ? 'text-brand-700 border-brand-500' : 'text-slate-500 border-transparent'"
                            class="px-5 py-3 text-sm font-semibold uppercase tracking-wider border-b-2 transition whitespace-nowrap">
                        {{ $loc }}
                    </button>
                @endforeach
            </div>
            @foreach($locales as $loc)
                <div x-show="tab==='{{ $loc }}'" x-cloak class="p-6 space-y-4" dir="{{ $loc==='ar' ? 'rtl' : 'ltr' }}">
                    <div>
                        <label class="form-label">{{ __('Title') }} ({{ strtoupper($loc) }})</label>
                        <input type="text" name="title_{{ $loc }}" class="form-input"
                               value="{{ old("title_$loc", ($feature->title ?? [])[$loc] ?? '') }}">
                    </div>
                    <div>
                        <label class="form-label">{{ __('Short summary') }} ({{ strtoupper($loc) }})</label>
                        <input type="text" name="summary_{{ $loc }}" class="form-input"
                               value="{{ old("summary_$loc", ($feature->summary ?? [])[$loc] ?? '') }}">
                    </div>
                    <div>
                        <label class="form-label">{{ __('Bullets — one per line') }} ({{ strtoupper($loc) }})</label>
                        <textarea name="items_{{ $loc }}" rows="6" class="form-input font-mono text-sm">{{ old("items_$loc", implode("\n", ($feature->items ?? [])[$loc] ?? [])) }}</textarea>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="flex justify-end">
            <button class="btn-primary"><x-icon name="check" class="w-4 h-4"/> {{ __('Save') }}</button>
        </div>
    </form>
</div>
@endsection