@extends('layouts.dashboard')
@section('title', __('Languages'))
@section('page_title', __('Languages'))

@section('content')
    @include('partials.how-it-works', ['key' => 'admin.languages'])

    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
        <h5 class="mb-0">{{ __('Languages') }}</h5>
        <a href="{{ route('admin.translations.index') }}" class="btn btn-outline-secondary"><i class="bi bi-translate me-1"></i> {{ __('Translations') }}</a>
    </div>

    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead class="table-light"><tr><th>{{ __('Name') }}</th><th>{{ __('Code') }}</th><th>{{ __('Direction') }}</th><th>{{ __('Active') }}</th><th>{{ __('Default') }}</th><th class="text-end">{{ __('Actions') }}</th></tr></thead>
                        <tbody>
                        @foreach($languages as $l)
                            <tr>
                                <form action="{{ route('admin.languages.update', $l) }}" method="POST" id="lang-{{ $l->id }}">@csrf @method('PUT')</form>
                                <td><input type="text" name="name" value="{{ $l->name }}" class="form-control form-control-sm" form="lang-{{ $l->id }}" required></td>
                                <td class="font-monospace">{{ $l->code }}</td>
                                <td><select name="direction" class="form-select form-select-sm" form="lang-{{ $l->id }}"><option value="ltr" @selected($l->direction === 'ltr')>{{ __('LTR') }}</option><option value="rtl" @selected($l->direction === 'rtl')>{{ __('RTL') }}</option></select></td>
                                <td><input type="hidden" name="status" value="0" form="lang-{{ $l->id }}"><input type="checkbox" name="status" value="1" class="form-check-input" form="lang-{{ $l->id }}" @checked($l->status)></td>
                                <td>@if($l->code === $default)<span class="badge bg-primary">{{ __('Default') }}</span>@else<div class="form-check"><input type="checkbox" name="make_default" value="1" class="form-check-input" form="lang-{{ $l->id }}" id="def-{{ $l->id }}"><label class="form-check-label small" for="def-{{ $l->id }}">{{ __('Make default') }}</label></div>@endif</td>
                                <td class="text-end text-nowrap">
                                    <button class="btn btn-sm btn-outline-primary" form="lang-{{ $l->id }}"><i class="bi bi-check-lg"></i></button>
                                    <a href="{{ route('admin.translations.index', ['lang' => $l->code]) }}" class="btn btn-sm btn-outline-secondary" title="{{ __('Translate') }}"><i class="bi bi-translate"></i></a>
                                    @if($l->code !== $default)
                                        <form action="{{ route('admin.languages.destroy', $l) }}" method="POST" class="d-inline" data-confirm="{{ __('Remove :name and its translations?', ['name' => $l->name]) }}">@csrf @method('DELETE')<button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button></form>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card shadow-sm">
                <div class="card-header bg-white fw-semibold">{{ __('Add language') }}</div>
                <div class="card-body">
                    <form action="{{ route('admin.languages.store') }}" method="POST">
                        @csrf
                        <div class="mb-3"><label class="form-label">{{ __('Name') }}</label><input type="text" name="name" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror" placeholder="Español" required>@error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
                        <div class="mb-3"><label class="form-label">{{ __('Code') }}</label><input type="text" name="code" value="{{ old('code') }}" class="form-control font-monospace @error('code') is-invalid @enderror" placeholder="es" required>@error('code')<div class="invalid-feedback">{{ $message }}</div>@enderror<div class="form-text">{{ __('ISO 639-1, e.g.') }} <code>es</code>, <code>ar</code>, <code>pt-BR</code></div></div>
                        <div class="mb-3"><label class="form-label">{{ __('Direction') }}</label><select name="direction" class="form-select"><option value="ltr">{{ __('Left to right') }}</option><option value="rtl">{{ __('Right to left') }}</option></select></div>
                        <button class="btn btn-primary w-100"><i class="bi bi-plus-lg me-1"></i>{{ __('Add') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection