@extends('layouts.app')
@section('title', __('ui.languages'))
@section('page-label', __('ui.languages'))
@section('content')
<x-ui.page-toolbar
    :title="__('ui.languages')"
    :description="__('ui.configure_languages')"
    :breadcrumbs="[['label'=>__('ui.dashboard'),'url'=>route('dashboard')],['label'=>__('ui.administration')],['label'=>__('ui.languages')]]"
/>

<div class="space-y-4">
    <section class="mf-card p-4">
        <div class="mb-4">
            <h2 class="text-sm font-semibold">{{ __('ui.add_language') }}</h2>
            <p class="mt-1 text-xs text-muted-foreground">Add any language using its locale code. Translations can be entered immediately after creation.</p>
        </div>

        <form method="POST" action="{{ route('admin.languages.store') }}" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-12 xl:items-end">
            @csrf

            <div class="xl:col-span-2">
                <label class="mf-field-label" for="language_name">{{ __('ui.language_name') }}</label>
                <input id="language_name" class="mf-input" name="name" value="{{ old('name') }}" placeholder="Swahili" required>
            </div>

            <div class="xl:col-span-2">
                <label class="mf-field-label" for="native_name">{{ __('ui.native_name') }}</label>
                <input id="native_name" class="mf-input" name="native_name" value="{{ old('native_name') }}" placeholder="Kiswahili">
            </div>

            <div class="xl:col-span-1">
                <label class="mf-field-label" for="language_code">{{ __('ui.language_code') }}</label>
                <input id="language_code" class="mf-input" name="code" value="{{ old('code') }}" placeholder="sw" maxlength="15" required>
            </div>

            <div class="xl:col-span-2">
                <label class="mf-field-label" for="direction">{{ __('ui.text_direction') }}</label>
                <select id="direction" class="mf-input" name="direction" required>
                    <option value="ltr" @selected(old('direction', 'ltr') === 'ltr')>{{ __('ui.left_to_right') }}</option>
                    <option value="rtl" @selected(old('direction') === 'rtl')>{{ __('ui.right_to_left') }}</option>
                </select>
            </div>

            <label class="mf-option h-[38px] xl:col-span-1 xl:mb-0">
                <input type="checkbox" name="is_active" value="1" @checked(old('is_active', true))>
                <span class="font-medium">{{ __('ui.active') }}</span>
            </label>

            <label class="mf-option h-[38px] xl:col-span-2 xl:mb-0">
                <input type="checkbox" name="is_default" value="1" @checked(old('is_default'))>
                <span class="font-medium">{{ __('ui.make_default') }}</span>
            </label>

            <button class="mf-btn mf-btn-primary h-[38px] w-full xl:col-span-2" type="submit">{{ __('ui.add_language') }}</button>
        </form>

        <p class="mt-2 text-xs text-muted-foreground">Use a standard locale code such as sw, en, fr or ar. New sessions use the default language when no preference has been selected.</p>
    </section>

    <section class="min-w-0">
        <div class="mb-2">
            <h2 class="text-sm font-semibold">{{ __('ui.language_settings') }}</h2>
            <p class="mt-0.5 text-xs text-muted-foreground">Manage language availability, translations and the system default from one place.</p>
        </div>

        <div class="mf-table-frame">
            <table id="languages-table" class="mf-table" data-standard-table>
                <thead>
                    <tr>
                        <th>{{ __('ui.language') }}</th>
                        <th>{{ __('ui.language_code') }}</th>
                        <th>{{ __('ui.text_direction') }}</th>
                        <th>{{ __('ui.translations') }}</th>
                        <th>Status</th>
                        <th class="text-right">{{ __('ui.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                @forelse($languages as $language)
                    <tr>
                        <td>
                            <div class="font-medium">{{ $language->name }}</div>
                            <div class="text-xs text-muted-foreground">{{ $language->native_name ?: $language->name }}</div>
                        </td>
                        <td><span class="font-mono text-xs">{{ $language->code }}</span></td>
                        <td>{{ strtoupper($language->direction) }}</td>
                        <td>{{ number_format($language->translations_count) }}</td>
                        <td>
                            <div class="flex flex-wrap gap-1">
                                <span class="mf-badge {{ $language->is_active ? 'mf-badge-success' : 'mf-badge-muted' }}">{{ $language->is_active ? __('ui.active') : __('ui.inactive') }}</span>
                                @if($language->is_default)<span class="mf-badge">{{ __('ui.default') }}</span>@endif
                            </div>
                        </td>
                        <td class="text-right">
                            <div class="flex flex-wrap justify-end gap-2">
                                <a class="mf-btn mf-btn-sm" href="{{ route('admin.languages.translations', $language) }}">{{ __('ui.manage_translations') }}</a>
                                <a class="mf-btn mf-btn-sm" href="{{ route('admin.languages.edit', $language) }}">{{ __('ui.edit') }}</a>
                                @unless($language->is_default)
                                    <form method="POST" action="{{ route('admin.languages.default', $language) }}">
                                        @csrf
                                        <button class="mf-btn mf-btn-sm mf-btn-primary" type="submit">{{ __('ui.make_default') }}</button>
                                    </form>
                                @else
                                    <span class="mf-badge self-center">{{ __('ui.default') }}</span>
                                @endunless
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="text-center text-muted-foreground">No languages configured.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>
@endsection
