@extends('layouts.admin')

@section('title', 'Language Settings')
@section('header', 'Language Settings')

@section('content')
<div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1>Language & Localization</h1>
            <p>Configure the default language and localization settings for the platform.</p>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header bg-transparent">
                <h5 class="mb-0 fw-bold">Supported Languages</h5>
                <small class="text-muted">Languages available for the admin default setting</small>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    @forelse($supportedLanguages as $code => $language)
                        <div class="col-12">
                            <div class="d-flex align-items-center p-3 border rounded text-reset">
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-center">
                                        <span class="fs-4 me-3">{{ $language['flag'] ?? '🌐' }}</span>
                                        <div>
                                            <h6 class="mb-1">{{ $language['name'] ?? $code }}</h6>
                                            <small class="text-muted">{{ $language['native'] ?? $code }}</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-secondary">{{ strtoupper($code) }}</span>
                                    @if($code === $defaultLanguage)
                                        <i class="bi bi-check-circle-fill text-success ms-2"></i>
                                    @endif
                                    @if($code !== 'en')
                                        <form method="POST" action="{{ route('admin.languages.destroy', $code) }}" class="ms-2" onsubmit="return confirm('Delete this language and its JSON files?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                                        </form>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <p class="text-muted text-center">No languages configured</p>
                        </div>
                    @endforelse
                </div>

                <hr class="my-4">

                <div class="alert alert-info alert-sm">
                    <i class="bi bi-info-circle me-2"></i>
                    <strong>Admin Default Language:</strong>
                    <span class="badge bg-info">{{ strtoupper($defaultLanguage) }} - {{ language_name($defaultLanguage) }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header bg-transparent">
                <h5 class="mb-0 fw-bold">Language Information</h5>
                <small class="text-muted">Details about available languages and RTL support</small>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Language</th>
                                <th>Code</th>
                                <th>RTL</th>
                                <th>Script</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($supportedLanguages as $code => $language)
                                <tr>
                                    <td>
                                        <span class="me-2">{{ $language['flag'] ?? '🌐' }}</span>
                                        {{ $language['native'] ?? $code }}
                                    </td>
                                    <td>
                                        <code>{{ $code }}</code>
                                    </td>
                                    <td>
                                        @if($language['rtl'] ?? false)
                                            <span class="badge bg-success">Yes</span>
                                        @else
                                            <span class="badge bg-secondary">No</span>
                                        @endif
                                    </td>
                                    <td>
                                        <small class="text-muted">
                                            @switch($code)
                                                @case('en')
                                                    Latin
                                                    @break
                                                @case('hi')
                                                    Devanagari
                                                    @break
                                                @case('fr')
                                                    Latin
                                                    @break
                                                @case('es')
                                                    Latin
                                                    @break
                                                @case('ur')
                                                    Urdu/Arabic
                                                    @break
                                                @case('ar')
                                                    Arabic
                                                    @break
                                                @default
                                                    Unknown
                                            @endswitch
                                        </small>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted">No languages configured</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <hr class="my-4">

                <div class="alert alert-warning alert-sm">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    <strong>Note:</strong> Languages with RTL (Right-to-Left) support will automatically adjust the interface layout for proper text direction.
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mt-2">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-transparent">
                <h5 class="mb-0 fw-bold">Localization Settings</h5>
                <small class="text-muted">Configure the language used across the platform</small>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.settings.update') }}">
                    @csrf
                    <input type="hidden" name="redirect_to" value="admin.settings.language">

                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold" for="appLanguage">Default Language</label>
                                <select class="form-select @error('app_language') is-invalid @enderror" id="appLanguage" name="app_language">
                                    @foreach($supportedLanguages as $code => $language)
                                        <option value="{{ $code }}" @selected($code === old('app_language', $defaultLanguage))>
                                            {{ strtoupper($code) }} - {{ $language['native'] ?? $language['name'] ?? $code }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('app_language')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    This language is applied to the admin panel, storefront, and apps.
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="{{ route('admin.settings.index') }}" class="btn btn-light">Back to Settings</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save me-1"></i>
                            Save Language Settings
                        </button>
                    </div>
                </form>

                <div class="alert alert-info mt-4 mb-0">
                    Language selection is controlled here by admin only. Storefront visitors and app users no longer get a separate language selector.
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mt-2">
    <div class="col-lg-5">
        <div class="card h-100">
            <div class="card-header bg-transparent">
                <h5 class="mb-0 fw-bold">Extract Translation JSON</h5>
                <small class="text-muted">Scan Blade files for user-visible hardcoded text.</small>
            </div>
            <div class="card-body">
                <p class="text-muted">
                    The extractor ignores PHP code, CSS, JS variables, and comments. It reads Blade text nodes, keeps HTML unchanged, and generates stable translation keys.
                </p>
                <a href="{{ route('admin.languages.extract-download') }}" class="btn btn-outline-primary">
                    <i class="bi bi-download me-1"></i>
                    Download Extracted JSON
                </a>
            </div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="card h-100">
            <div class="card-header bg-transparent">
                <h5 class="mb-0 fw-bold">Create or Update Language</h5>
                <small class="text-muted">Upload translated JSON and optionally make it default.</small>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.languages.upload') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Locale</label>
                            <input type="text" name="locale" class="form-control" placeholder="en, ar, hi">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Name</label>
                            <input type="text" name="name" class="form-control" placeholder="English">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Native Name</label>
                            <input type="text" name="native" class="form-control" placeholder="English">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Flag Code</label>
                            <input type="text" name="flag" class="form-control" placeholder="GB">
                        </div>
                        <div class="col-md-8">
                            <label class="form-label fw-bold">JSON File</label>
                            <input type="file" name="file" class="form-control" accept="application/json" required>
                        </div>
                    </div>

                    <div class="d-flex flex-wrap gap-4 mt-3">
                        <div class="form-check">
                            <input type="checkbox" name="rtl" value="1" id="uploadRtl" class="form-check-input">
                            <label for="uploadRtl" class="form-check-label">RTL layout</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" name="activate" value="1" id="uploadActivate" class="form-check-input">
                            <label for="uploadActivate" class="form-check-label">Make default after upload</label>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-upload me-1"></i>
                            Upload Language
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
.alert-sm {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.alert-sm .bi {
    font-size: 1rem;
}
</style>
@endsection