{{-- Policy page form (create + edit). Params: $policy, $action, $method. --}}
@php
    // Open the language tab that holds the first server-side error.
    $errorLocale = collect($errors->keys())->map(fn ($key) => preg_match('/^(title|description)\.(ar|en)$/', $key, $m) ? $m[2] : null)->filter()->first();
    $activeLocale = $errorLocale ?? 'ar';
@endphp
<form action="{{ $action }}" method="POST" id="policyForm">
    @csrf
    @if ($method !== 'POST')
        @method($method)
    @endif

    <div class="card card-flush py-4 mb-7">
        <div class="card-body">
            <div class="row g-7 align-items-end">
                <div class="col-md-6">
                    <label class="required form-label">{{ trans('dash_site.policy_type') }}</label>
                    <select name="type" id="type" class="form-select @error('type') is-invalid @enderror">
                        <option value="">—</option>
                        @foreach (array_keys(\App\Models\Site\SitePolices::types()) as $type)
                            <option value="{{ $type }}" @selected(old('type', $policy->type) === $type)>{{ \App\Models\Site\SitePolices::typeLabel($type) }}</option>
                        @endforeach
                    </select>
                    @error('type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <input type="hidden" name="is_active" value="0">
                    <label class="form-check form-switch form-check-custom form-check-solid form-check-success mb-3">
                        <input class="form-check-input h-25px w-45px" type="checkbox" name="is_active" value="1" @checked(old('is_active', $policy->is_active))>
                        <span class="form-check-label fw-semibold text-gray-700">{{ trans('dash_site.policy_show_on_site') }}</span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-flush py-4">
        <div class="card-header card-header-stretch">
            <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-6 fw-bold">
                <li class="nav-item"><a class="nav-link {{ $activeLocale === 'ar' ? 'active' : '' }}" data-bs-toggle="tab" href="#policy_tab_ar">العربية</a></li>
                <li class="nav-item"><a class="nav-link {{ $activeLocale === 'en' ? 'active' : '' }}" data-bs-toggle="tab" href="#policy_tab_en">English</a></li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                @foreach (['ar' => 'rtl', 'en' => 'ltr'] as $locale => $dir)
                    <div class="tab-pane fade {{ $activeLocale === $locale ? 'show active' : '' }}" id="policy_tab_{{ $locale }}" dir="{{ $dir }}">
                        <div class="mb-7">
                            <label class="required form-label">{{ trans('dash_site.title') }} ({{ strtoupper($locale) }})</label>
                            <input type="text" name="title[{{ $locale }}]" class="form-control @error('title.' . $locale) is-invalid @enderror" value="{{ old('title.' . $locale, $policy->getTranslation('title', $locale, false)) }}">
                            @error('title.' . $locale)<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <label class="required form-label">{{ trans('dash_site.policy_text') }} ({{ strtoupper($locale) }})</label>
                        <textarea name="description[{{ $locale }}]" id="policy_description_{{ $locale }}" data-policy-editor="{{ $locale }}" class="form-control @error('description.' . $locale) is-invalid @enderror" rows="10">{{ old('description.' . $locale, $policy->getTranslation('description', $locale, false)) }}</textarea>
                        @error('description.' . $locale)<div class="text-danger fs-7 mt-2">{{ $message }}</div>@enderror
                    </div>
                @endforeach
            </div>
        </div>
        <div class="card-footer d-flex justify-content-end gap-3">
            <a href="{{ route('admin.polices.index') }}" class="btn btn-light">{{ trans('dash_site.Cancel') }}</a>
            <button type="submit" class="btn btn-primary"><i class="bi bi-check2 fs-4"></i>{{ trans('dash_site.Save') }}</button>
        </div>
    </div>
</form>

@push('policy-form-scripts')
    <link rel="stylesheet" href="{{ asset('assets/plugins/custom/ckeditor/ckeditor-classic.bundle.css') }}">
    <style>#policyForm .ck-editor__editable { min-height: 280px; }</style>
    <script src="{{ asset('assets/plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
    <script>
        $(function () {
            var $form = $('#policyForm');

            // One rich-text editor per language. The editor keeps its textarea in sync, so
            // JsValidator (told not to skip these hidden textareas) can check them.
            document.querySelectorAll('[data-policy-editor]').forEach(function (textarea) {
                ClassicEditor.create(textarea, {
                    language: {content: textarea.dataset.policyEditor},
                    toolbar: ['undo', 'redo', '|', 'heading', '|', 'bold', 'italic', 'link', '|', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable']
                }).then(function (editor) {
                    editor.model.document.on('change:data', function () {
                        editor.updateSourceElement();
                        $(textarea).valid && $(textarea).valid();
                    });
                });
            });

            // Show the language tab that holds the first client-side error.
            $form.on('invalid-form.validate', function (event, validator) {
                var first = validator.errorList.length ? validator.errorList[0].element : null;
                var pane = first ? $(first).closest('.tab-pane') : $();
                if (pane.length && !pane.hasClass('active')) {
                    bootstrap.Tab.getOrCreateInstance(document.querySelector('a[href="#' + pane.attr('id') + '"]')).show();
                }
            });
        });
    </script>
@endpush