{{-- Custom CSS --}}
<form method="POST" action="{{ route('ch-admin.appearance.advanced.update') }}">
    @csrf

    <h5 class="c-grey-900 mB-15"><i class="ti-brush mR-5"></i> Custom CSS</h5>
    <p class="c-grey-600 mB-10">CSS injected after compiled styles on every frontend page. Avoid <code>&lt;/style&gt;</code> tags — they are stripped on output.</p>

    <div class="mB-15">
        <textarea
            class="form-control font-monospace"
            id="custom_css"
            name="custom_css"
            rows="16"
            placeholder="/* e.g. body { background: #fafafa; } */"
            style="font-size:13px;resize:vertical;"
        >{{ old('custom_css', $custom_css ?? '') }}</textarea>
    </div>

    <button type="submit" class="btn btn-primary">Save Custom CSS</button>
</form>

<hr class="mT-30 mB-30">

{{-- Import preview (shown after a file is uploaded for review) --}}
@if (!empty($import_preview))
<div class="bgc-white bd bdrs-3 p-20 mB-20" style="border-left:4px solid #f0ad4e !important;">
    <h5 class="c-grey-900 mB-5"><i class="ti-import mR-5"></i> Import Preview — {{ count($import_preview['changes']) }} change(s)</h5>
    <p class="c-grey-600 mB-15">Review the changes below. Nothing has been applied yet.</p>

    <table class="table table-sm table-bordered mB-15">
        <thead class="table-light">
            <tr>
                <th>Setting</th>
                <th>Current value</th>
                <th>Imported value</th>
            </tr>
        </thead>
        <tbody>
            @foreach($import_preview['changes'] as $change)
            <tr>
                <td><code>{{ $change['key'] }}</code><br><small class="c-grey-600">{{ $change['label'] }}</small></td>
                <td>
                    @if($change['current'] !== null)
                        <span class="badge bg-secondary" style="font-family:monospace;word-break:break-all;">{{ Str::limit((string)$change['current'], 80) }}</span>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </td>
                <td>
                    @if($change['new'] !== null)
                        <span class="badge bg-success" style="font-family:monospace;word-break:break-all;">{{ Str::limit((string)$change['new'], 80) }}</span>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    <div class="peers">
        <div class="peer mR-10">
            <form method="POST" action="{{ route('ch-admin.appearance.import.apply') }}">
                @csrf
                <button type="submit" class="btn btn-success btn-sm">
                    <i class="ti-check mR-5"></i> Apply {{ count($import_preview['changes']) }} Change(s)
                </button>
            </form>
        </div>
        <div class="peer">
            <form method="POST" action="{{ route('ch-admin.appearance.import.cancel') }}">
                @csrf
                <button type="submit" class="btn btn-secondary btn-sm">
                    <i class="ti-close mR-5"></i> Cancel
                </button>
            </form>
        </div>
    </div>
</div>
@endif

<h5 class="c-grey-900 mB-15"><i class="ti-export mR-5"></i> Export &amp; Import Settings</h5>
<p class="c-grey-600 mB-20">Export all appearance settings and homepage section state to a JSON file, then restore them on another installation.</p>

<div class="peers ai-c mB-30">
    <div class="peer mR-20">
        <a href="{{ route('ch-admin.appearance.export') }}" class="btn btn-info btn-sm">
            <i class="ti-download mR-5"></i> Export Settings (JSON)
        </a>
    </div>
</div>

<form method="POST" action="{{ route('ch-admin.appearance.import') }}" enctype="multipart/form-data">
    @csrf
    <div class="mB-10">
        <label class="form-label fw-bold" for="import_file">Import from JSON file</label>
        <div class="peers ai-c">
            <div class="peer mR-10">
                <input type="file" class="form-control" id="import_file" name="import_file" accept=".json" style="max-width:320px;">
            </div>
            <div class="peer">
                <button type="submit" class="btn btn-warning btn-sm">
                    <i class="ti-upload mR-5"></i> Preview Import
                </button>
            </div>
        </div>
        <small class="c-grey-600">Only keys recognised by the registry are imported. Unknown keys are ignored.</small>
    </div>
</form>