@extends('shaun_core::admin.layouts.master')

@section('content')
<div class="admin-card has-table">
    <div class="admin-card-top">
        <h5 class="admin-card-top-title">{{__('Edit phrase')}}</h5>
        <div class="admin-card-top-action">
            <a id="phrase-download" class="btn-filled-blue dark" href="{{ route('admin.language.download_phrase', $language->id) }}?source={{ $selectedSource }}" data-base-url="{{ route('admin.language.download_phrase', $language->id) }}">{{__('Download translate')}}</a>
            <a id="phrase-upload" class="btn-filled-blue dark admin_modal_ajax" data-url="{{ route('admin.language.upload_phrase', $language->id) }}?source={{ $selectedSource }}" data-base-url="{{ route('admin.language.upload_phrase', $language->id) }}" href="javascript:void(0);">{{__('Upload translate')}}</a>
        </div>
    </div>
    <div class="admin-card-bar">
        <div class="admin-card-search-bar-wrap">
            <span class="material-symbols-outlined notranslate admin-card-search-bar-icon"> search </span>
            <input type="text" id="name" class="admin-card-search-bar-input form-control" placeholder="{{__('Search')}}"/>
        </div>
        @if(count($sources) > 1)
        <select id="source-filter" class="form-select">
            @foreach($sources as $sourceKey => $sourceLabel)
            <option value="{{ $sourceKey }}" @if($sourceKey === $selectedSource) selected @endif>{{ $sourceLabel }}</option>
            @endforeach
        </select>
        @endif
    </div>
    <div class="admin-card-body table-responsive">
        <table class="admin-table table table-hover">
            <thead>
                <th>{{__('Phrase')}}</th>
                <th>{{__('Value')}}</th>
                <th width="120">{{__('Action')}}</th>
            </thead>
            <tbody>
                @foreach ($rows as $row)
                <tr class="phrases" data-source="{{ $row['source'] }}" data-key="{{ $row['key'] }}" @if($row['source'] !== $selectedSource) style="display:none" @endif>
                    <td class="phrases_key">{!! $row['display_key'] !!}</td>
                    <td class="phrases_value">{!! $row['value'] !!}</td>
                    <td class="actions-cell">
                        <a class="edit_phrases" href="javascript:void(0)">{{__('Edit')}}</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@stop

@push('scripts-body')
<div id="modal-edit-phrase" class="modal">
    <div class="modal-background modal-close"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">{{__('Edit phrase')}}</p>
        </header>
        <section class="modal-card-body">
            <div class="card-content">
                <div class="form-group">
                    <textarea class="form-control" id="value" value=""></textarea>
                </div>
            </div>
        </section>
        <footer class="modal-card-foot">
            <button class="button btn-filled-blue modal-action-edit-phrase-save">{{__('Save')}}</button>
            <button class="button btn-filled-white modal-close">{{__('Cancel')}}</button>
        </footer>
    </div>
</div>
<script src="{{ asset('admin/js/language.js') }}"></script>
<script>
    adminLanguage.initEditPhrase('{{ route('admin.language.store_phrase', $language->id)}}');
    // Keep the Download href + Upload modal URL in sync with the source
    // dropdown, AND persist the current source in the page URL so a
    // reload — including the manual F5 after an Upload submit — restores
    // the admin's filter instead of resetting to `core`. The controller
    // re-reads `?source=` on edit_phrase, pre-selecting the matching
    // option and inline-showing only the matching rows; this script keeps
    // the URL in sync on every change so the round-trip works.
    (function () {
        var $sourceFilter = document.getElementById('source-filter');
        if (! $sourceFilter) return;
        var $download = document.getElementById('phrase-download');
        var $upload = document.getElementById('phrase-upload');
        var sync = function () {
            var raw = $sourceFilter.value || 'core';
            var source = encodeURIComponent(raw);
            if ($download) {
                $download.href = $download.getAttribute('data-base-url') + '?source=' + source;
            }
            if ($upload) {
                $upload.setAttribute('data-url', $upload.getAttribute('data-base-url') + '?source=' + source);
            }
            try {
                var url = new URL(window.location.href);
                url.searchParams.set('source', raw);
                window.history.replaceState(null, '', url.toString());
            } catch (e) {
                // Older browsers without URL ctor — accept the soft fail; the
                // controller still ?source=-aware via the next manual reload
                // if any other path produces a ?source= URL.
            }
        };
        $sourceFilter.addEventListener('change', sync);
        sync();
    })();
</script>
@endpush