@extends('layouts.app')

@section('content')
<div class="container">
    <h1>Language Manager</h1>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex flex-wrap justify-content-between gap-2 mb-3">
                <div>
                    <h5 class="mb-1">Create or Update Language</h5>
                    <p class="text-muted mb-0">Upload a JSON file. Blade extraction ignores PHP, CSS, JS variables, comments, and keeps HTML unchanged.</p>
                </div>
                <a class="btn btn-outline-secondary" href="{{ route('admin.languages.extract-download') }}">
                    Download Extracted JSON
                </a>
            </div>
            <div id="uploadResult"></div>
            <div class="mb-3">
                <label class="form-label">JSON File</label>
                <input type="file" id="fileInput" accept="application/json" required class="form-control" />
            </div>
            <div class="mb-3">
                <label class="form-label">Locale (optional)</label>
                <input type="text" id="localeInput" placeholder="en" class="form-control" />
            </div>
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Language Name</label>
                    <input type="text" id="nameInput" placeholder="English" class="form-control" />
                </div>
                <div class="col-md-4">
                    <label class="form-label">Native Name</label>
                    <input type="text" id="nativeInput" placeholder="English" class="form-control" />
                </div>
                <div class="col-md-4">
                    <label class="form-label">Flag Code</label>
                    <input type="text" id="flagInput" placeholder="IN" maxlength="8" class="form-control" />
                </div>
            </div>
            <div class="form-check mb-2">
                <input type="checkbox" id="activateInput" class="form-check-input">
                <label class="form-check-label" for="activateInput">Make default language after upload</label>
            </div>
            <div class="form-check mb-2">
                <input type="checkbox" id="rtlInput" class="form-check-input">
                <label class="form-check-label" for="rtlInput">Right-to-left (RTL)</label>
            </div>
            <button id="uploadBtn" class="btn btn-primary">Upload (AJAX)</button>
        </div>
    </div>

    <script>
        (function(){
            const uploadBtn = document.getElementById('uploadBtn');
            const fileInput = document.getElementById('fileInput');
            const localeInput = document.getElementById('localeInput');
            const nameInput = document.getElementById('nameInput');
            const nativeInput = document.getElementById('nativeInput');
            const flagInput = document.getElementById('flagInput');
            const activateInput = document.getElementById('activateInput');
            const rtlInput = document.getElementById('rtlInput');
            const resultEl = document.getElementById('uploadResult');

            uploadBtn.addEventListener('click', function(e){
                e.preventDefault();
                resultEl.innerHTML = '';
                if (!fileInput.files.length) {
                    resultEl.innerHTML = '<div class="alert alert-danger">Please select a JSON file.</div>';
                    return;
                }
                const file = fileInput.files[0];
                const form = new FormData();
                form.append('file', file);
                if (localeInput.value) form.append('locale', localeInput.value);
                if (nameInput.value) form.append('name', nameInput.value);
                if (nativeInput.value) form.append('native', nativeInput.value);
                if (flagInput.value) form.append('flag', flagInput.value);
                if (activateInput.checked) form.append('activate', 1);
                if (rtlInput.checked) form.append('rtl', 1);

                fetch('{{ route('admin.languages.upload') }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    },
                    body: form
                }).then(r => r.json().catch(() => (r.text())) ).then(data => {
                    if (data && data.success === false) {
                        resultEl.innerHTML = '<div class="alert alert-danger">'+(data.message||'Upload failed')+'</div>';
                    } else if (data && data.error) {
                        resultEl.innerHTML = '<div class="alert alert-danger">'+data.error+'</div>';
                    } else {
                        resultEl.innerHTML = '<div class="alert alert-success">Upload successful. Reloading...</div>';
                        setTimeout(()=> location.reload(), 800);
                    }
                }).catch(err => {
                    resultEl.innerHTML = '<div class="alert alert-danger">Upload failed.</div>';
                    console.error(err);
                });
            });
        })();
    </script>

    <div class="card">
        <div class="card-body">
            <h5>Available languages</h5>
            <table class="table">
                <thead><tr><th>Locale</th><th>RTL</th><th>Active</th><th>Actions</th></tr></thead>
                <tbody>
                @foreach($files as $locale)
                    @php
                        $entry = collect($registry)->firstWhere('locale', $locale) ?: ['rtl' => false, 'active' => false];
                    @endphp
                    <tr>
                        <td>{{ $locale }}</td>
                        <td>{{ $entry['rtl'] ? 'Yes' : 'No' }}</td>
                        <td>{{ $entry['active'] ? 'Yes' : 'No' }}</td>
                        <td>
                            <a class="btn btn-sm btn-outline-primary" href="{{ route('admin.languages.download', $locale) }}">Download</a>
                            @if($locale !== 'en')
                                <form method="POST" action="{{ route('admin.languages.destroy', $locale) }}" class="d-inline" 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
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection