{{-- Step 05: සාක්ෂිකරුවා සහ නිලධාරී අනුමැතිය --}}
<div class="form-section {{ $currentStep === 3 ? 'active' : '' }}" id="sec3" data-step="3">

    <x-form.section-header number="05" title="සාක්ෂිකරුවා සහ නිලධාරී අනුමැතිය" />

    {{-- Q08 --}}
    <x-form.card title="08. විස්තරය">
        <x-form.field
            label="ඉල්ලුම්කරු විස්තරය"
            name="description"
            type="textarea"
            placeholder="ඔබ ගැන සම්පූර්ණ විස්තරය ලියන්න..."
            rows="4"
        />
    </x-form.card>

    {{-- සහන නිලධාරියාගේ සහතිකය --}}
    <x-form.card title="සහන නිලධාරියාගේ සහතිකය">
        <div class="info-note">
            ඉහත සදහන් අයදුම්කරු විසින් සපයන ලද තොරතුරු හා ලේඛන අනුව පොත් ලභාදීම නිර්දේශ
            <label class="radio-option" style="display:inline-flex;margin:0 4px">
                <input type="radio" name="recommend" value="recommend" {{ old('recommend') === 'recommend' ? 'checked' : '' }}>
                <span class="radio-dot"></span> කරමි
            </label>
            /
            <label class="radio-option" style="display:inline-flex;margin:0 4px">
                <input type="radio" name="recommend" value="unrecommend" {{ old('recommend') === 'unrecommend' ? 'checked' : '' }}>
                <span class="radio-dot"></span> නොකරමි
            </label>.
        </div>
    </x-form.card>

    {{-- Signatures --}}
    <div class="signature-row">
        <div class="sig-box">
            <div class="field sig-field">
                <label class="sig-label">අත්සන</label>
                <div class="sig-pad-wrap @error('witness_signature') is-invalid @enderror">
                    <canvas id="witnessSignaturePad" class="sig-canvas" width="500" height="120" aria-label="අත්සන"></canvas>
                    <input type="hidden" name="witness_signature" id="witnessSignatureData" value="{{ old('witness_signature') }}">
                    <button type="button" class="btn-clear-sig" id="clearWitnessSignature">මකන්න</button>
                </div>
                <label class="sig-upload-btn">
                    <input type="file" accept="image/png,image/jpeg,image/webp" id="uploadWitnessSignature" hidden>
                    📁 අත්සන උඩුගත කරන්න
                </label>
                @error('witness_signature')
                    <span class="field-error">{{ $message }}</span>
                @enderror
            </div>
            <x-form.field label="දිනය" name="signed_date" type="date" style="width:100%;margin-top:8px" />
        </div>
        <div class="sig-box">
            <div class="field sig-field">
                <label class="sig-label">නිල මුද්‍රාව</label>
                <div class="sig-pad-wrap @error('official_seal') is-invalid @enderror">
                    <canvas id="officialSealPad" class="sig-canvas" width="500" height="120" aria-label="නිල මුද්‍රාව"></canvas>
                    <input type="hidden" name="official_seal" id="officialSealData" value="{{ old('official_seal') }}">
                    <button type="button" class="btn-clear-sig" id="clearOfficialSeal">මකන්න</button>
                </div>
                <label class="sig-upload-btn">
                    <input type="file" accept="image/png,image/jpeg,image/webp" id="uploadOfficialSeal" hidden>
                    📁 මුද්‍රාව උඩුගත කරන්න
                </label>
                @error('official_seal')
                    <span class="field-error">{{ $message }}</span>
                @enderror
            </div>
            <x-form.field label="නිලධාරී නාමය" name="officer_name" placeholder="නිලධාරී නාමය" style="width:100%;margin-top:8px" />
        </div>
    </div>

    {{-- Office-use box --}}
    <div class="office-box">
        <div class="office-box-title">🔒 විශේෂ සටහන් — කාර්යාල භාවිතය පමණි</div>
        <div class="grid-2">
            <x-form.field label="ෆෝරම් අංකය" name="office_form_no"   placeholder="CMC/2026/—" />
            <x-form.field label="ලැබුණු දිනය" name="office_received" type="date" />
            <div class="col-full">
                <x-form.field label="විශේෂ සටහන" name="office_notes" type="textarea" rows="2" placeholder="කාර්යාල සටහන..." />
            </div>
        </div>
    </div>

</div>