@extends('layouts.admin', ['title' => 'Edit Language', 'pageTitle' => 'Edit Language', 'active' => 'settings'])

@php($activeTab = $activeTab ?? 'languages')

@section('content')
    <div class="space-y-5">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
            <p class="text-sm font-medium leading-6 text-booklio-muted">Edit language metadata, text direction, status, and default fallback behavior.</p>
            <x-ui.button variant="secondary" href="{{ route('admin.settings.languages.index') }}">Back to Languages</x-ui.button>
        </div>

        <section class="grid gap-5 xl:grid-cols-[300px_minmax(0,1fr)]">
            @include('admin.settings.partials.nav', ['activeTab' => $activeTab])

            <div class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_340px]">
                <x-ui.card title="Edit {{ $language->name }}" description="Changing the code updates route binding for this language. Existing translation rows are preserved.">
                    @include('admin.settings.languages.partials.form')
                </x-ui.card>

                <x-ui.card title="Direction Impact" description="The selected direction is applied by middleware to dashboard, auth, and public booking layouts.">
                    <div dir="{{ $language->direction ?? 'ltr' }}" @class([
                        'rounded-lg border border-booklio-border bg-white p-4 shadow-soft',
                        'text-right' => ($language->direction ?? 'ltr') === 'rtl',
                    ])>
                        <p class="text-sm font-extrabold text-booklio-dark">
                            {{ ($language->direction ?? 'ltr') === 'rtl' ? 'لوحة التحكم' : 'Dashboard' }}
                        </p>
                        <p class="mt-1 text-xs text-booklio-muted">
                            {{ ($language->direction ?? 'ltr') === 'rtl' ? 'المواعيد والفواتير والعملاء' : 'Appointments, invoices, and customers' }}
                        </p>
                        <div class="mt-4 rounded-lg border border-booklio-border">
                            <div class="flex justify-between border-b border-booklio-border p-3 text-xs font-bold">
                                <span>{{ ($language->direction ?? 'ltr') === 'rtl' ? 'الحالة' : 'Status' }}</span>
                                <span>{{ ($language->direction ?? 'ltr') === 'rtl' ? 'الخدمة' : 'Service' }}</span>
                            </div>
                            <div class="flex justify-between p-3 text-xs">
                                <x-ui.badge variant="success">{{ ($language->direction ?? 'ltr') === 'rtl' ? 'مؤكد' : 'Confirmed' }}</x-ui.badge>
                                <span>{{ ($language->direction ?? 'ltr') === 'rtl' ? 'قص الشعر' : 'Hair Cut' }}</span>
                            </div>
                        </div>
                    </div>
                    <p class="mt-4 text-xs leading-5 text-booklio-muted">Sidebar, dropdowns, tables, forms, public booking pages, and auth pages inherit this direction.</p>
                </x-ui.card>
            </div>
        </section>
    </div>
@endsection