@php
    /**
     * Render satu borang penuh (seksyen + field + butang hantar).
     *
     * @var \App\Models\Backend\ContentForm $form
     */
    $site = $siteSlug ?? request()->segment(1);
    $sections = $form->sections;
    $unsectioned = $form->fields->whereNull('field_section_fk');
@endphp

@once
<style>
.cf-wrap{max-width:900px;margin-left:auto;margin-right:auto}
.cf-title{font-weight:700;color:var(--green);font-size:1.35rem;margin-bottom:.35rem}
.cf-desc{font-size:.86rem;color:var(--bs-secondary-color);margin-bottom:1.25rem}
.cf-section{border:0;padding:0;margin:0 0 1.75rem}
.cf-legend{font-weight:700;color:var(--teal);font-size:.95rem;padding:.4rem .75rem;background:var(--fade);border-left:4px solid var(--teal);border-radius:6px;margin-bottom:.35rem;width:100%}
.cf-section-desc{font-size:.78rem;color:var(--bs-secondary-color);margin:.35rem 0 .9rem}
.cf-field{margin-bottom:1.15rem}
.cf-label{display:block;font-weight:600;font-size:.86rem;margin-bottom:.4rem;color:var(--ink)}
.cf-req{color:#dc2626}
.cf-help{font-size:.75rem;color:var(--bs-secondary-color);margin-bottom:.45rem}
.cf-input{font-size:.86rem;border-color:var(--line)}
.cf-input:focus{border-color:var(--teal);box-shadow:0 0 0 .18rem rgba(17,128,143,.15)}
.cf-field-error .cf-input{border-color:#dc2626}
.cf-error{font-size:.75rem;color:#dc2626;margin-top:.35rem}
.cf-options{display:flex;flex-direction:column;gap:.45rem}
.cf-opt{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;font-size:.84rem;cursor:pointer;transition:.15s;background:var(--bs-body-bg)}
.cf-opt:hover{border-color:var(--teal);background:var(--fade)}
.cf-opt input{margin-top:.15rem;flex:none;accent-color:var(--teal)}
.cf-opt:has(input:checked){border-color:var(--teal);background:var(--fade);font-weight:600}
.cf-scale{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem}
.cf-scale-opt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem;padding:.6rem .4rem;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:.15s;background:var(--bs-body-bg)}
.cf-scale-opt:hover{border-color:var(--teal);background:var(--fade)}
.cf-scale-opt input{position:absolute;opacity:0;width:0;height:0}
.cf-scale-num{font-weight:700;font-size:1rem;color:var(--teal)}
.cf-scale-lbl{font-size:.68rem;line-height:1.2;color:var(--bs-secondary-color)}
.cf-scale-opt:has(input:checked){border-color:var(--teal);background:var(--teal)}
.cf-scale-opt:has(input:checked) .cf-scale-num,.cf-scale-opt:has(input:checked) .cf-scale-lbl{color:#fff}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-note{font-size:.75rem;color:var(--bs-secondary-color);margin:.9rem 0 0}
[data-bs-theme=dark] .cf-legend{background:#0f2226}
[data-bs-theme=dark] .cf-opt:has(input:checked),{background:#0f2226}
</style>
@endonce

<div class="cf-wrap">
    <div class="card-soft p-3 p-lg-4">
        <h2 class="cf-title">{{ $form->title() }}</h2>

        @if (filled($form->translation()?->form_translation_desc ?? $form->form_desc))
            <p class="cf-desc">{{ $form->translation()?->form_translation_desc ?? $form->form_desc }}</p>
        @endif

        <form method="POST" enctype="multipart/form-data" class="cf-form"
            action="{{ route('frontend-form.store', ['site' => $site, 'formSlug' => $form->form_slug]) }}">
            @csrf

            {{-- Honeypot: manusia tidak nampak, bot akan isi --}}
            <div class="cf-hp" aria-hidden="true">
                <label for="cf-website">Website</label>
                <input type="text" id="cf-website" name="website" tabindex="-1" autocomplete="off">
            </div>

            @foreach ($sections as $section)
                <fieldset class="cf-section">
                    <legend class="cf-legend">{{ $section->section_title }}</legend>

                    @if (filled($section->section_desc))
                        <p class="cf-section-desc">{{ $section->section_desc }}</p>
                    @endif

                    @foreach ($form->fields->where('field_section_fk', $section->section_id) as $field)
                        @include('frontend.form._field', ['field' => $field])
                    @endforeach
                </fieldset>
            @endforeach

            @foreach ($unsectioned as $field)
                @include('frontend.form._field', ['field' => $field])
            @endforeach

            <div class="d-flex flex-wrap gap-2 mt-4">
                <button type="submit" class="btn btn-teal px-4">Hantar</button>
                <button type="reset" class="btn btn-outline-secondary">Set Semula</button>
            </div>

            <p class="cf-note">* Ruangan wajib diisi.</p>
        </form>
    </div>
</div>