@extends('layouts.school')

@section('title', 'Result Template')
@section('header', 'Default Result Template')

@section('content')
    @php
        $flag = fn (string $k) => \App\Services\Academic\ResultTemplateService::flag($settings, $k);
        $val  = fn (string $k, $d = null) => $settings[$k] ?? $d;
        $order = json_decode((string) $val('section_order'), true);
        $order = is_array($order) && $order ? $order : $sections;
        $labels = \App\Services\Academic\ResultTemplateService::sectionLabels();
    @endphp

    <form method="POST" action="{{ route('school.results.template.save', request()->route('schoolId')) }}" enctype="multipart/form-data" class="space-y-6">
        @csrf

        {{-- ===================== A. GENERAL / BRANDING ===================== --}}
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="font-display font-semibold text-gray-900">A. School Header &amp; Branding</h3>
                <p class="text-sm text-gray-500">Logo, national emblem, school name/address/motto and colour scheme.</p>
            </div>
            <div class="px-6 py-2 divide-y divide-gray-50">
                <div class="py-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Result Report Title</label>
                    <input type="text" name="result_title" value="{{ old('result_title', $val('result_title')) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                </div>
                @include('school.results._toggle', ['key' => 'show_logo', 'label' => 'Show School Logo', 'desc' => 'Uses the logo configured in your school / website settings.', 'checked' => $flag('show_logo')])
                <div class="grid gap-4 py-4 sm:grid-cols-3">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Logo Position</label>
                        <select name="logo_position" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            @foreach(['left'=>'Left','center'=>'Center','right'=>'Right'] as $k=>$v)
                                <option value="{{ $k }}" {{ $val('logo_position') === $k ? 'selected' : '' }}>{{ $v }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Logo Size (px height)</label>
                        <input type="number" name="logo_size" value="{{ old('logo_size', $val('logo_size')) }}" min="30" max="200" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                </div>
                @include('school.results._toggle', ['key' => 'show_address', 'label' => 'Show Address / Contact', 'desc' => 'Display the school address, phone and email under the school name.', 'checked' => $flag('show_address')])
                @include('school.results._toggle', ['key' => 'show_motto', 'label' => 'Show School Motto', 'desc' => 'Display the motto below the school name.', 'checked' => $flag('show_motto')])
                <div class="py-4">
                    <label class="block text-sm font-medium text-gray-700">School Motto</label>
                    <input type="text" name="motto" value="{{ old('motto', $val('motto')) }}" placeholder="e.g. Discipline and Excellence" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                </div>
            </div>

            <div class="border-t border-gray-200 bg-gray-50/60 px-6 py-4">
                <p class="text-sm font-semibold text-gray-900 mb-3">National / Country Emblem</p>
                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        @include('school.results._toggle', ['key' => 'show_national_emblem', 'label' => 'Show National Emblem', 'desc' => 'Optional coat of arms / country emblem.', 'checked' => $flag('show_national_emblem')])
                        <label class="block text-sm font-medium text-gray-700">Emblem Position</label>
                        <select name="emblem_position" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            @foreach(['right'=>'Right','left'=>'Left'] as $k=>$v)
                                <option value="{{ $k }}" {{ $val('emblem_position') === $k ? 'selected' : '' }}>{{ $v }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Emblem Image</label>
                        @if($img = \App\Services\Academic\ResultRendererService::imageUrl($val('emblem_image')))
                            <img src="{{ $img }}" alt="Emblem" class="mt-1 mb-2 h-20 object-contain border border-gray-200 rounded-lg p-1 bg-white">
                        @endif
                        <input type="file" name="emblem_file" accept=".png,.jpg,.jpeg,.webp,.svg" class="mt-1 block w-full text-sm text-gray-500 file:mr-3 file:rounded-lg file:border-0 file:bg-primary-50 file:px-3 file:py-2 file:text-sm file:font-medium file:text-primary-700 hover:file:bg-primary-100">
                    </div>
                </div>
            </div>

            <div class="border-t border-gray-200 px-6 py-4">
                <p class="text-sm font-semibold text-gray-900 mb-3">Colour Scheme (used for bars, titles &amp; accents)</p>
                <div class="grid gap-5 sm:grid-cols-3">
                    @foreach(['primary_color'=>'Primary','secondary_color'=>'Secondary','accent_color'=>'Accent'] as $key=>$label)
                        <div>
                            <label class="block text-sm font-medium text-gray-700">{{ $label }} Colour</label>
                            <div class="mt-1 flex items-center gap-2">
                                <input type="color" name="{{ $key }}" value="{{ $val($key) }}" class="h-10 w-12 rounded-lg border border-gray-300 bg-white">
                                <input type="text" name="{{ $key }}_hex" value="{{ $val($key) }}" class="block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- ===================== B. STUDENT INFORMATION ===================== --}}
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="font-display font-semibold text-gray-900">B. Student Information</h3>
                <p class="text-sm text-gray-500">Choose which student fields appear on the report.</p>
            </div>
            <div class="px-6 py-2 divide-y divide-gray-50">
                @include('school.results._toggle', ['key' => 'show_photo', 'label' => 'Show Student Photo', 'desc' => 'Uses the passport photo from the student profile.', 'checked' => $flag('show_photo')])
                @include('school.results._toggle', ['key' => 'show_admission_no', 'label' => 'Show Admission Number', 'checked' => $flag('show_admission_no')])
                @include('school.results._toggle', ['key' => 'show_registration_no', 'label' => 'Show Registration Number', 'checked' => $flag('show_registration_no')])
                @include('school.results._toggle', ['key' => 'show_student_id', 'label' => 'Show Student ID', 'checked' => $flag('show_student_id')])
                @include('school.results._toggle', ['key' => 'show_class_name', 'label' => 'Show Class', 'checked' => $flag('show_class_name')])
                @include('school.results._toggle', ['key' => 'show_arm', 'label' => 'Show Arm / Section', 'checked' => $flag('show_arm')])
                @include('school.results._toggle', ['key' => 'show_session', 'label' => 'Show Academic Session', 'checked' => $flag('show_session')])
                @include('school.results._toggle', ['key' => 'show_term', 'label' => 'Show Term', 'checked' => $flag('show_term')])
                @include('school.results._toggle', ['key' => 'show_gender', 'label' => 'Show Gender', 'checked' => $flag('show_gender')])
                @include('school.results._toggle', ['key' => 'show_dob', 'label' => 'Show Date of Birth', 'checked' => $flag('show_dob')])
                @include('school.results._toggle', ['key' => 'show_age', 'label' => 'Show Age', 'checked' => $flag('show_age')])
                @include('school.results._toggle', ['key' => 'show_house', 'label' => 'Show House', 'checked' => $flag('show_house')])
                @include('school.results._toggle', ['key' => 'show_roll_no', 'label' => 'Show Roll Number', 'checked' => $flag('show_roll_no')])
                <div class="grid gap-4 py-4 sm:grid-cols-2 lg:grid-cols-3">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Photo Position</label>
                        <select name="photo_position" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            @foreach(['right'=>'Right','left'=>'Left'] as $k=>$v)
                                <option value="{{ $k }}" {{ $val('photo_position') === $k ? 'selected' : '' }}>{{ $v }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Photo Shape</label>
                        <select name="photo_shape" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            @foreach(['square'=>'Square','rounded'=>'Rounded','circle'=>'Circle'] as $k=>$v)
                                <option value="{{ $k }}" {{ $val('photo_shape') === $k ? 'selected' : '' }}>{{ $v }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Photo Width (px)</label>
                        <input type="number" name="photo_size" value="{{ old('photo_size', $val('photo_size')) }}" min="50" max="260" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                </div>
            </div>
        </div>

        {{-- ===================== C. ACADEMIC TABLE ===================== --}}
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="font-display font-semibold text-gray-900">C. Academic Performance Table</h3>
                <p class="text-sm text-gray-500">Toggle the columns shown in the main results table.</p>
            </div>
            <div class="px-6 py-2 divide-y divide-gray-50">
                @include('school.results._toggle', ['key' => 'show_assessment_columns', 'label' => 'Assessment Component Columns', 'desc' => 'One column per assessment component (CA 1, CA 2, Exam, ...).', 'checked' => $flag('show_assessment_columns')])
                @include('school.results._toggle', ['key' => 'show_max_score', 'label' => 'Max Score Column', 'checked' => $flag('show_max_score')])
                @include('school.results._toggle', ['key' => 'show_subject_total', 'label' => 'Total Score Column', 'checked' => $flag('show_subject_total')])
                @include('school.results._toggle', ['key' => 'show_subject_percentage', 'label' => 'Percentage (%) Column', 'checked' => $flag('show_subject_percentage')])
                @include('school.results._toggle', ['key' => 'show_subject_grade', 'label' => 'Grade Column', 'checked' => $flag('show_subject_grade')])
                @include('school.results._toggle', ['key' => 'show_subject_remark', 'label' => 'Remark Column', 'checked' => $flag('show_subject_remark')])
                @include('school.results._toggle', ['key' => 'show_subject_position', 'label' => 'Position in Subject Column', 'checked' => $flag('show_subject_position')])
                @include('school.results._toggle', ['key' => 'show_class_average', 'label' => 'Class Average Column', 'checked' => $flag('show_class_average')])
                @include('school.results._toggle', ['key' => 'show_highest_lowest', 'label' => 'Highest / Lowest Columns', 'checked' => $flag('show_highest_lowest')])
            </div>
        </div>

        {{-- ===================== D. SUMMARY ===================== --}}
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="font-display font-semibold text-gray-900">D. Result Summary</h3>
            </div>
            <div class="px-6 py-2 divide-y divide-gray-50">
                @include('school.results._toggle', ['key' => 'show_summary', 'label' => 'Show Result Summary Block', 'checked' => $flag('show_summary')])
                @include('school.results._toggle', ['key' => 'show_overall_percentage', 'label' => 'Show Overall Percentage / Average', 'checked' => $flag('show_overall_percentage')])
                @include('school.results._toggle', ['key' => 'show_overall_grade', 'label' => 'Show Overall Grade', 'checked' => $flag('show_overall_grade')])
                @include('school.results._toggle', ['key' => 'show_students_in_class', 'label' => 'Show Number in Class', 'checked' => $flag('show_students_in_class')])
                @include('school.results._toggle', ['key' => 'show_gpa', 'label' => 'Show GPA', 'checked' => $flag('show_gpa')])
            </div>
        </div>

        {{-- ===================== E. CONDUCT / ATTENDANCE ===================== --}}
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="font-display font-semibold text-gray-900">E. Psychomotor / Affective &amp; Attendance</h3>
            </div>
            <div class="px-6 py-2 divide-y divide-gray-50">
                @include('school.results._toggle', ['key' => 'show_psychomotor', 'label' => 'Show Psychomotor Skills', 'checked' => $flag('show_psychomotor')])
                @include('school.results._toggle', ['key' => 'show_affective', 'label' => 'Show Affective Domain', 'checked' => $flag('show_affective')])
                @include('school.results._toggle', ['key' => 'show_attendance', 'label' => 'Show Attendance Summary', 'checked' => $flag('show_attendance')])
                <div class="py-4">
                    <label class="block text-sm font-medium text-gray-700">Attendance Section Title</label>
                    <input type="text" name="attendance_title" value="{{ old('attendance_title', $val('attendance_title')) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                </div>
            </div>
        </div>

        {{-- ===================== F. GRADING ===================== --}}
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="font-display font-semibold text-gray-900">F. Grading Key</h3>
            </div>
            <div class="px-6 py-2 divide-y divide-gray-50">
                @include('school.results._toggle', ['key' => 'show_grading_key', 'label' => 'Show Grading Key', 'desc' => 'Displays your school grading scale (configured under Grading Scale).', 'checked' => $flag('show_grading_key')])
            </div>
        </div>

        {{-- ===================== G. REMARKS ===================== --}}
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="font-display font-semibold text-gray-900">G. Remarks &amp; Titles</h3>
            </div>
            <div class="px-6 py-2 divide-y divide-gray-50">
                @include('school.results._toggle', ['key' => 'show_teacher_remark', 'label' => 'Show Class Teacher Remark', 'checked' => $flag('show_teacher_remark')])
                @include('school.results._toggle', ['key' => 'show_principal_remark', 'label' => 'Show Principal/Head Remark', 'checked' => $flag('show_principal_remark')])
                @include('school.results._toggle', ['key' => 'show_proprietor_remark', 'label' => 'Show Proprietor Section', 'checked' => $flag('show_proprietor_remark')])
                <div class="grid gap-5 py-4 sm:grid-cols-3">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Teacher Remark Title</label>
                        <input type="text" name="class_teacher_comment_title" value="{{ old('class_teacher_comment_title', $val('class_teacher_comment_title')) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Principal Remark Title</label>
                        <input type="text" name="comment_title" value="{{ old('comment_title', $val('comment_title')) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Proprietor Remark Title</label>
                        <input type="text" name="proprietor_comment_title" value="{{ old('proprietor_comment_title', $val('proprietor_comment_title')) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                </div>
                <div class="py-4">
                    <label class="block text-sm font-medium text-gray-700">Proprietor Remark Text (replaces blank lines)</label>
                    <textarea name="proprietor_remark" rows="2" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('proprietor_remark', $val('proprietor_remark')) }}</textarea>
                </div>
            </div>
        </div>

        {{-- ===================== H. SIGNATURES ===================== --}}
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="font-display font-semibold text-gray-900">H. Signatures</h3>
                <p class="text-sm text-gray-500">Official signatories. Leave name/title blank to hide that line; upload image for a wet signature.</p>
            </div>
            <div class="px-6 py-2 divide-y divide-gray-50">
                @include('school.results._toggle', ['key' => 'show_teacher_signature', 'label' => 'Show Class Teacher Signature', 'checked' => $flag('show_teacher_signature')])
                @include('school.results._toggle', ['key' => 'show_principal_signature', 'label' => 'Show Principal / Head Signature', 'checked' => $flag('show_principal_signature')])
                @include('school.results._toggle', ['key' => 'show_proprietor_signature', 'label' => 'Show Proprietor Signature', 'checked' => $flag('show_proprietor_signature')])
                @include('school.results._toggle', ['key' => 'show_signature_date', 'label' => 'Show Date Under Signature', 'checked' => $flag('show_signature_date')])

                @foreach([
                    ['teacher', 'Class Teacher', 'teacher_name', 'teacher_title', 'teacher_signature'],
                    ['principal', 'Principal / Head', 'principal_name', 'principal_title', 'principal_signature'],
                    ['proprietor', 'Proprietor', 'proprietor_name', 'proprietor_title', 'proprietor_signature'],
                ] as [$block, $blockLabel, $nameKey, $titleKey, $sigKey])
                    <div class="grid gap-4 py-4 sm:grid-cols-3">
                        <div class="sm:col-span-1">
                            <p class="text-sm font-semibold text-gray-800">{{ $blockLabel }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Official Name</label>
                            <input type="text" name="{{ $nameKey }}" value="{{ old($nameKey, $val($nameKey)) }}" placeholder="e.g. Dr. A. K. Okon" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Official Title</label>
                            <input type="text" name="{{ $titleKey }}" value="{{ old($titleKey, $val($titleKey)) }}" placeholder="e.g. Principal" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                        <div class="sm:col-span-3">
                            <label class="block text-sm font-medium text-gray-700">Signature Image</label>
                            @if($img = \App\Services\Academic\ResultRendererService::imageUrl($val($sigKey)))
                                <img src="{{ $img }}" alt="Signature" class="mt-1 mb-2 h-14 object-contain border border-gray-200 rounded-lg p-1 bg-white">
                            @endif
                            <input type="file" name="{{ $sigKey }}_file" accept=".png,.jpg,.jpeg,.webp" class="mt-1 block w-full text-sm text-gray-500 file:mr-3 file:rounded-lg file:border-0 file:bg-primary-50 file:px-3 file:py-2 file:text-sm file:font-medium file:text-primary-700 hover:file:bg-primary-100">
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- ===================== I. WATERMARK ===================== --}}
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="font-display font-semibold text-gray-900">I. Watermark</h3>
                <p class="text-sm text-gray-500">Default: subtle school-logo watermark behind the content.</p>
            </div>
            <div class="px-6 py-2 divide-y divide-gray-50">
                @include('school.results._toggle', ['key' => 'enable_watermark', 'label' => 'Enable Watermark', 'checked' => $flag('enable_watermark')])
                <div class="grid gap-4 py-4 sm:grid-cols-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Watermark Type</label>
                        <select name="watermark_type" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            @foreach(['logo'=>'School Logo','name'=>'School Name','none'=>'None'] as $k=>$v)
                                <option value="{{ $k }}" {{ $val('watermark_type') === $k ? 'selected' : '' }}>{{ $v }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Opacity (0.00–1.00)</label>
                        <input type="number" name="watermark_opacity" value="{{ old('watermark_opacity', $val('watermark_opacity')) }}" min="0" max="1" step="0.01" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Size (px)</label>
                        <input type="number" name="watermark_size" value="{{ old('watermark_size', $val('watermark_size')) }}" min="20" max="600" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Position</label>
                        <select name="watermark_position" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            @foreach(['center'=>'Center','top-left'=>'Top Left','top-right'=>'Top Right','bottom-left'=>'Bottom Left','bottom-right'=>'Bottom Right'] as $k=>$v)
                                <option value="{{ $k }}" {{ $val('watermark_position') === $k ? 'selected' : '' }}>{{ $v }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===================== J. PERFORMANCE CHART ===================== --}}
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="font-display font-semibold text-gray-900">J. Performance Chart</h3>
            </div>
            <div class="px-6 py-2 divide-y divide-gray-50">
                @include('school.results._toggle', ['key' => 'show_performance_chart', 'label' => 'Show Performance Chart', 'desc' => 'Renders a bar chart from the student\'s real subject scores.', 'checked' => $flag('show_performance_chart')])
            </div>
        </div>

        {{-- ===================== K. SECURITY & FOOTER ===================== --}}
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="font-display font-semibold text-gray-900">K. Security &amp; Footer</h3>
            </div>
            <div class="px-6 py-2 divide-y divide-gray-50">
                @include('school.results._toggle', ['key' => 'show_result_serial', 'label' => 'Show Result Serial Number', 'checked' => $flag('show_result_serial')])
                @include('school.results._toggle', ['key' => 'show_qr', 'label' => 'Show QR Verification Code', 'desc' => 'Scannable link to the online verification page.', 'checked' => $flag('show_qr')])
                @include('school.results._toggle', ['key' => 'show_security_footer', 'label' => 'Show Security Footer', 'checked' => $flag('show_security_footer')])
                @include('school.results._toggle', ['key' => 'show_edusmart_footer', 'label' => 'Show Platform Footer', 'checked' => $flag('show_edusmart_footer')])
                <div class="grid gap-5 py-4 sm:grid-cols-2">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Security Footer Text</label>
                        <textarea name="security_footer_text" rows="2" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('security_footer_text', $val('security_footer_text')) }}</textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Platform Name (footer)</label>
                        <input type="text" name="platform_name" value="{{ old('platform_name', $val('platform_name')) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                </div>
            </div>
        </div>

        {{-- ===================== L. SECTION ORDER ===================== --}}
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="font-display font-semibold text-gray-900">L. Section Order</h3>
                <p class="text-sm text-gray-500">Numeric order controls the layout. Lower numbers appear first. Hidden sections are simply ignored.</p>
            </div>
            <input type="hidden" name="section_order" id="section_order_value" value="{{ json_encode($order) }}">
            <div class="px-6 py-4">
                <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach($order as $idx => $sid)
                        <div class="flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3">
                            <span class="flex-1 text-sm font-medium text-gray-800">{{ $labels[$sid] ?? ucwords(str_replace('_',' ',$sid)) }}</span>
                            <input type="number" min="1" value="{{ $idx + 1 }}" class="w-16 rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-center focus:border-primary-500 focus:outline-none" data-section="{{ $sid }}" data-order-input>
                        </div>
                    @endforeach
                </div>
                <p class="mt-3 text-xs text-gray-400">Enter a number per section. Click Save to persist the order.</p>
            </div>
        </div>

        <div class="flex items-center justify-end gap-3">
            <a href="{{ route('school.results.settings', request()->route('schoolId')) }}" class="text-sm font-medium text-primary-600 hover:text-primary-700">Legacy Display Settings &rarr;</a>
            <button type="submit" class="rounded-lg bg-primary-600 px-8 py-3 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Save Template</button>
        </div>
    </form>

    <script>
        (function () {
            const orderInputs = document.querySelectorAll('[data-order-input]');
            const orderValue = document.getElementById('section_order_value');
            function sync() {
                const items = Array.from(orderInputs).map(el => ({ sid: el.dataset.section, n: parseInt(el.value, 10) || 0 }));
                items.sort((a, b) => a.n - b.n);
                orderValue.value = JSON.stringify(items.map(i => i.sid));
            }
            orderInputs.forEach(el => el.addEventListener('input', sync));
        })();
    </script>
@endsection