@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/child-support-register.css') }}">
@endpush

@php
    $projectAreas = ['HTY', 'SPT', 'TL', 'SDG', 'Other'];
    $yesNo = ['ရှိ' => 'ရှိ', 'မရှိ' => 'မရှိ'];
    $artOptions = ['သောက်နေသည်' => 'သောက်နေသည်', 'မသောက်နေပါ' => 'မသောက်နေပါ'];
    $locationOptions = ['MAM' => 'MAM', 'အစိုးရဆေးရုံ' => 'အစိုးရဆေးရုံ', 'အခြား' => 'အခြား'];
    $guardianSections = [
        ['prefix' => 'father', 'title' => "Father's Information", 'relation_field' => null],
        ['prefix' => 'mother', 'title' => "Mother's Information", 'relation_field' => null],
        ['prefix' => 'admin', 'title' => 'မိဘမဟုတ်သော အုပ်ထိန်းသူ Information', 'relation_field' => 'relationship'],
    ];
@endphp

@section('content')
    <div class="container-fluid child-support-shell" data-child-support-register
         data-records-url="{{ route('child-support.records.index') }}"
         data-store-url="{{ route('child-support.records.store') }}"
         data-download-url="{{ route('child-support.sync.download') }}"
         data-upload-url="{{ route('child-support.sync.upload') }}"
         data-record-url-template="{{ route('child-support.records.show', ['record' => '__RECORD_ID__']) }}"
         data-crypto-key="{{ $cryptoKey ?? '' }}"
         data-sensitive-fields='@json($registerSensitiveFields ?? [])'>
        <div class="mb-3">
            <ul class="nav nav-pills child-support-nav gap-2">
                <li class="nav-item">
                    <a class="nav-link active" href="{{ route('child-support.register.index') }}">Register</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('child-support.followups.index') }}">Follow-up</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('child-support.register.manage') }}">Manage Register</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('child-support.followups.manage') }}">Manage Follow-up</a>
                </li>
            </ul>
        </div>

        <div class="row g-4">
            <div class="col-12">
                <div class="child-support-card mb-3">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
                        <div>
                            <h1 class="h4 mb-1">Child Support Register</h1>
                            <div class="child-support-meta">Local CRUD is stored in this browser with IndexedDB. Server CRUD routes and table are prepared for later sync.</div>
                        </div>
                        <div class="child-support-meta">
                            Current record:
                            <strong id="currentRecordTitle">New local draft</strong>
                        </div>
                    </div>
                </div>

                <div class="child-support-card mb-3 child-support-tools-panel">
                    <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap child-support-tools-header">
                        <div>
                            <h2 class="h6 mb-0">Browser Entry Queue</h2>
                            <div class="child-support-meta">Records are saved in this browser when offline or when server sync fails. Use Sync to upload pending items.</div>
                        </div>
                        <button
                            type="button"
                            class="btn btn-outline-secondary btn-sm child-support-tools-toggle"
                            id="childSupportToolsToggle"
                            aria-controls="childSupportToolsBody"
                            aria-expanded="true"
                            aria-label="Hide sync controls area">
                            <span id="childSupportToolsToggleIcon" aria-hidden="true">▾</span>
                        </button>
                    </div>
                    <div id="childSupportToolsBody" class="mt-3">
                        <div class="row g-3 child-support-tools-row">
                            <div class="col-lg-6">
                                <div class="child-support-card h-100 mb-0 child-support-tools-card">
                                    <div class="d-flex justify-content-between align-items-center gap-2">
                                        <h2 class="h6 mb-0">Sync Controls</h2>
                                        <button type="button" class="btn btn-outline-secondary btn-sm" id="childSupportOfflineToggle">Offline-only: Off</button>
                                    </div>
                                    <div class="child-support-inline-note mt-2" id="childSupportSyncStatus">Sync ready.</div>
                                    <div class="child-support-actions mt-3">
                                        <button type="button" class="btn btn-outline-primary btn-sm" id="childSupportSyncDownload">Download</button>
                                        <button type="button" class="btn btn-outline-success btn-sm" id="childSupportSyncUpload">Sync (<span id="childSupportPendingCount">0</span>)</button>
                                        <button type="button" class="btn btn-outline-dark btn-sm" id="childSupportExportBtn">Export</button>
                                        <button type="button" class="btn btn-outline-danger btn-sm" id="childSupportClearOffline">Clear Offline Cache</button>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="child-support-card h-100 mb-0 child-support-tools-card">
                                    <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap">
                                        <h2 class="h6 mb-0">Pending Queue</h2>
                                        <div class="d-flex gap-2">
                                            <button type="button" class="btn btn-outline-secondary btn-sm" id="childSupportQueueToggle">Show</button>
                                            <button type="button" class="btn btn-outline-primary btn-sm" id="childSupportQueueRefresh">Refresh</button>
                                            <button type="button" class="btn btn-outline-danger btn-sm" id="childSupportQueueClear">Clear</button>
                                        </div>
                                    </div>
                                    <div class="child-support-queue-list mt-2 d-none" id="childSupportQueueList">Queue is empty.</div>
                                </div>
                            </div>

                            <div class="col-xl-3 col-lg-6 d-none">
                                <div class="child-support-card h-100 mb-0 child-support-tools-card">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <h2 class="h6 mb-0">Local browser records</h2>
                                        <span class="badge bg-secondary" id="localRecordCount">0</span>
                                    </div>
                                    <div id="localRegisterList" class="child-support-local-list"></div>
                                    <div id="localRegisterEmpty" class="child-support-local-empty mt-2">
                                        No local child support registers yet.
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-3 col-lg-6 d-none">
                                <div class="child-support-card h-100 mb-0 child-support-tools-card">
                                    <h2 class="h6">Latest server records</h2>
                                    @if ($serverRecords->isEmpty())
                                        <div class="child-support-inline-note">No server records saved yet.</div>
                                    @else
                                        <div class="list-group list-group-flush">
                                            @foreach ($serverRecords as $record)
                                                <div class="list-group-item px-0">
                                                    <div class="fw-semibold">{{ $record->child_name ?: 'Unnamed child' }}</div>
                                                    <div class="child-support-meta">
                                                        {{ $record->cs_code ?: 'No CS code' }}
                                                        @if ($record->general_id)
                                                            · ID {{ $record->general_id }}
                                                        @endif
                                                        @if ($record->register_date)
                                                            · {{ $record->register_date->format('d-m-Y') }}
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <form id="childSupportRegisterForm" class="child-support-form">
                    <input type="hidden" name="uuid" value="">
                    <input type="hidden" name="local_uuid" value="">
                    <input type="hidden" name="record_status" value="draft">

                    <div class="child-support-section">
                        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
                            <h2 class="h5 mb-0">Section 1: Child particulars</h2>
                            <div class="child-support-actions">
                                <a href="{{ route('child-support.followups.index') }}" class="btn btn-outline-primary btn-sm">To Follow Up</a>
                            </div>
                        </div>
                    </div>

                    <div class="child-support-section">
                        <h3 class="h6">Child General Data</h3>
                        <div class="row g-3">
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">Register Date</label>
                                <input type="text" name="register_date" class="form-control child-support-date-input" placeholder="dd-mm-yyyy" inputmode="numeric">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">General ID</label>
                                <input type="text" name="general_id" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">CS Code</label>
                                <input type="text" name="cs_code" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">Project Area</label>
                                <select name="project_area" class="form-select" data-toggle-source="project_area" data-toggle-match="Other|အခြား">
                                    <option value=""></option>
                                    @foreach ($projectAreas as $area)
                                        <option value="{{ $area }}">{{ $area }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-4">
                                <label class="form-label">Other specify</label>
                                <input type="text" name="project_area_other" class="form-control" data-toggle-target="project_area">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">ကလေး၏အမည်</label>
                                <input type="text" name="child_name" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အိမ်အမည်</label>
                                <input type="text" name="child_nickname" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">ကျား/မ</label>
                                <select name="sex" class="form-select">
                                    <option value=""></option>
                                    <option value="ကျား">ကျား</option>
                                    <option value="မ">မ</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အသက်</label>
                                <input type="number" min="0" name="age" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">မွေးနေ့</label>
                                <input type="text" name="dob" class="form-control child-support-date-input" placeholder="dd-mm-yyyy" inputmode="numeric">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">မွေးစာရင်း</label>
                                <select name="certificate_of_birth" class="form-select">
                                    <option value=""></option>
                                    @foreach ($yesNo as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">မှတ်ပုံတင်</label>
                                <select name="nrc_status" class="form-select">
                                    <option value=""></option>
                                    @foreach ($yesNo as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">ကိုယ်အလေးချိန် (kg)</label>
                                <input type="number" step="0.01" min="0" name="weight" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-1">
                                <label class="form-label">အရပ် (cm)</label>
                                <input type="number" step="0.01" min="0" name="height" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">Mode of Entry</label>
                                <select name="mode_of_entry" class="form-select" data-toggle-source="mode_of_entry" data-toggle-match="Other|အခြား">
                                    <option value=""></option>
                                    <option value="MAMဆေးခန်း">MAMဆေးခန်း</option>
                                    <option value="ရပ်ကွက်">ရပ်ကွက်</option>
                                    <option value="MAM child program">MAM child program</option>
                                    <option value="CBO">CBO</option>
                                    <option value="အခြား">အခြား</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-4">
                                <label class="form-label">Mode of Entry Detail</label>
                                <input type="text" name="mode_of_entry_detail" class="form-control" data-toggle-target="mode_of_entry">
                            </div>
                            <div class="col-12">
                                <label class="form-label">လက်ရှိနေရပ်လိပ်စာ</label>
                                <textarea name="current_address" rows="2" class="form-control"></textarea>
                            </div>
                            <div class="col-12 col-xl-6">
                                <label class="form-label">နေထိုင်သည့် ကာလ</label>
                                <div class="row g-2">
                                    <div class="col-4">
                                        <input type="number" min="0" name="stay_day" class="form-control" placeholder="ရက်">
                                    </div>
                                    <div class="col-4">
                                        <input type="number" min="0" name="stay_month" class="form-control" placeholder="လ">
                                    </div>
                                    <div class="col-4">
                                        <input type="number" min="0" name="stay_year" class="form-control" placeholder="နှစ်">
                                    </div>
                                </div>
                                <input type="hidden" name="duration_of_stay">
                                <div class="child-support-inline-note mt-2" id="durationPreview">No duration entered.</div>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">လက်ရှိဖုန်းနံပါတ်</label>
                                <input type="text" name="contact_phone" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">လက်ရှိ ကလေးသည် ကျောင်းတက်နေလျှင်</label>
                                <select name="school_status" class="form-select">
                                    <option value=""></option>
                                    <option value="ကျောင်းတက်သည်">ကျောင်းတက်သည်</option>
                                    <option value="မတက်ပါ">မတက်ပါ</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အတန်း</label>
                                <input type="text" name="grade" class="form-control" data-school-field>
                            </div>
                            <div class="col-sm-6 col-xl-4">
                                <label class="form-label">ကျောင်းအမည် နှင့်လိပ်စာ</label>
                                <input type="text" name="school_name_address" class="form-control" data-school-field>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">ကလေး အလုပ်လုပ်နေပါသလား</label>
                                <select name="child_job_status" class="form-select" data-no-school-field>
                                    <option value=""></option>
                                    <option value="အလုပ်လုပ်နေသည်">အလုပ်လုပ်နေသည်</option>
                                    <option value="အလုပ်မလုပ်နေပါ">အလုပ်မလုပ်နေပါ</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-6">
                                <label class="form-label">ကျောင်းမတက်နိုင်သော အကြောင်းရင်း</label>
                                <input type="text" name="reason_of_no_school" class="form-control" data-no-school-field>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">အလုပ်အမည်</label>
                                <input type="text" name="name_of_job" class="form-control" data-job-field>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">အလုပ်၏နေရာ</label>
                                <input type="text" name="job_location" class="form-control" data-job-field>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">စတင်လုပ်ကိုင်သောရက်</label>
                                <input type="text" name="date_of_started_job" class="form-control child-support-date-input" placeholder="dd-mm-yyyy" inputmode="numeric" data-job-field>
                            </div>
                            <div class="col-sm-6 col-xl-4">
                                <label class="form-label">လုပ်ဆောင်ရသည့် တာဝန်များ</label>
                                <input type="text" name="task_of_job" class="form-control" data-job-field>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အလုပ်ချိန် / day</label>
                                <input type="number" min="0" name="working_hr_perday" class="form-control" data-job-field>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">ဝင်ငွေ</label>
                                <input type="number" min="0" step="0.01" name="income" class="form-control" data-job-field>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">နေ့စား/လခ</label>
                                <select name="income_type" class="form-select" data-job-field>
                                    <option value=""></option>
                                    <option value="နေ့စား">နေ့စား</option>
                                    <option value="လခ">လခ</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">ကလေးသည် ဝင်ငွေ အဓိကရှာဖွေသူ</label>
                                <select name="is_main_income" class="form-select" data-job-field>
                                    <option value=""></option>
                                    <option value="ဟုတ်">ဟုတ်</option>
                                    <option value="မဟုတ်">မဟုတ်</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="child-support-section">
                        <h3 class="h6">Child Health Status</h3>
                        <div class="row g-3">
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">နာတာရှည်ရောဂါ</label>
                                <select name="chronic_disease_status" class="form-select" data-health-status="child">
                                    <option value=""></option>
                                    @foreach ($yesNo as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">ရှိပါက ရောဂါအမည်</label>
                                <input type="text" name="disease_name" class="form-control" data-health-field="child">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">ရောဂါစဖြစ်သည့် အချိန်</label>
                                <input type="text" name="time_of_disease_started" class="form-control" data-health-field="child">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">ကုသမှုခံယူသည့် အချိန်</label>
                                <input type="text" name="treatment_duration" class="form-control" data-health-field="child">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">ကုသမှုခံယူသောနေရာ</label>
                                <select name="treatment_location" class="form-select" data-health-field="child" data-toggle-source="treatment_location" data-toggle-match="အခြား">
                                    <option value=""></option>
                                    @foreach ($locationOptions as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">ကုသမှုခံယူသောနေရာ(Detail)</label>
                                <input type="text" name="treatment_location_detail" class="form-control" data-health-field="child" data-toggle-target="treatment_location">
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">Child program မှထောက်ပံ့မှု</label>
                                <select name="does_cp_support" class="form-select">
                                    <option value=""></option>
                                    @foreach ($yesNo as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">ART</label>
                                <select name="art_status" class="form-select" data-toggle-source="art_status" data-toggle-match="သောက်နေသည်">
                                    <option value=""></option>
                                    @foreach ($artOptions as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">ART ယူနေသောနေရာ</label>
                                <select name="location_of_art" class="form-select" data-toggle-target="art_status" data-toggle-source="location_of_art" data-toggle-match="အခြား">
                                    <option value=""></option>
                                    @foreach ($locationOptions as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">ART ယူနေသောနေရာ(Detail)</label>
                                <input type="text" name="location_of_art_detail" class="form-control" data-toggle-target="art_status location_of_art">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Remark</label>
                                <textarea name="remark" rows="3" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="child-support-section">
                        <h3 class="h6">Child Family Information</h3>
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">မိဘ</label>
                                <select name="parent_status" class="form-select">
                                    <option value=""></option>
                                    <option value="ရှိ">ရှိ</option>
                                    <option value="မိခင်သေဆုံး">မိခင်သေဆုံး</option>
                                    <option value="ဖခင်သေဆုံး">ဖခင်သေဆုံး</option>
                                    <option value="မိဘ၂ပါးလုံးသေဆုံး">မိဘ၂ပါးလုံးသေဆုံး</option>
                                </select>
                            </div>
                        </div>

                        <h4 class="h6">ကလေးကိုလက်ရှိစောင့်ရှောက်နေသူ</h4>
                        <div class="row g-3 mb-4">
                            @for ($i = 1; $i <= 3; $i++)
                                <div class="col-md-6 col-xl-4">
                                    <div class="border rounded-3 p-3 h-100">
                                        <div class="mb-2 fw-semibold">Caregiver {{ $i }}</div>
                                        <div class="mb-3">
                                            <label class="form-label">အမည်</label>
                                            <input type="text" name="caregiver_name_{{ $i }}" class="form-control">
                                        </div>
                                        <div>
                                            <label class="form-label">တော်စပ်ပုံ</label>
                                            <input type="text" name="caregiver_relationship_{{ $i }}" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            @endfor
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h4 class="h6 mb-0">ကလေးမိသားစု အရင်းအချာများ</h4>
                            <button type="button" class="btn btn-outline-secondary btn-sm" data-collection-add="core_family_members">Add row</button>
                        </div>
                        <div class="table-responsive mb-4" data-collection="core_family_members">
                            <table class="table table-bordered child-support-table">
                                <thead class="table-light">
                                    <tr>
                                        <th>အမည်</th>
                                        <th>အသက်</th>
                                        <th>တော်စပ်ပုံ</th>
                                        <th>အတန်းပညာ</th>
                                        <th>အလုပ်အကိုင်</th>
                                        <th>သက်ရှိ / သေဆုံး</th>
                                        <th>အတူနေ / မနေ</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h4 class="h6 mb-0">ကလေးနှင့်လက်ရှိ အတူနေမိသားစု</h4>
                            <button type="button" class="btn btn-outline-secondary btn-sm" data-collection-add="current_household_members">Add row</button>
                        </div>
                        <div class="table-responsive mb-4" data-collection="current_household_members">
                            <table class="table table-bordered child-support-table">
                                <thead class="table-light">
                                    <tr>
                                        <th>အမည်</th>
                                        <th>အသက်</th>
                                        <th>တော်စပ်ပုံ</th>
                                        <th>အတန်းပညာ</th>
                                        <th>အလုပ်အကိုင်</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>

                        <div class="row g-3">
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">Child Protection Program ပါဝင်မှု</label>
                                <select name="is_in_cp_program" class="form-select">
                                    <option value=""></option>
                                    <option value="ပါဝင်နေသည်/ပါဝင်ခဲ့ဖူးသည်">ပါဝင်နေသည်/ပါဝင်ခဲ့ဖူးသည်</option>
                                    <option value="မပါဝင်ပါ">မပါဝင်ပါ</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">အမှုအမျိုးအစား</label>
                                <input type="text" name="cp_program_name" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">CP registration date</label>
                                <input type="text" name="cp_reg_date" class="form-control child-support-date-input" placeholder="dd-mm-yyyy" inputmode="numeric">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">CP code</label>
                                <input type="text" name="cp_code" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">လက်ရှိအမှု အခြေနေ</label>
                                <select name="current_issue_status" class="form-select" data-toggle-source="current_issue_status" data-toggle-match="အမှုပိတ်သိမ်းပြီး">
                                    <option value=""></option>
                                    <option value="လက်ရှိအမှုဖွင့်ထားဆဲ">လက်ရှိအမှုဖွင့်ထားဆဲ</option>
                                    <option value="အမှုပိတ်သိမ်းပြီး">အမှုပိတ်သိမ်းပြီး</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">အမှုပိတ်သိမ်းပြီး နေ့စွဲ</label>
                                <input type="text" name="issue_closed_date" class="form-control child-support-date-input" placeholder="dd-mm-yyyy" inputmode="numeric" data-toggle-target="current_issue_status">
                            </div>
                        </div>
                    </div>

                    <div class="child-support-section">
                        <h2 class="h5">Section 2: Care giver particulars</h2>
                        <div class="row g-3 mb-4">
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">မိဘ၏ အိမ်ထောင်ရေး</label>
                                <select name="parent_marital_status" class="form-select" data-toggle-source="parent_marital_status" data-toggle-match="အခြား">
                                    <option value=""></option>
                                    <option value="လက်ရှိပေါင်းသင်းနေ">လက်ရှိပေါင်းသင်းနေ</option>
                                    <option value="အိမ်ထောင်ကွဲ">အိမ်ထောင်ကွဲ</option>
                                    <option value="အိမ်ထောင်ဘက်သေဆုံး">အိမ်ထောင်ဘက်သေဆုံး</option>
                                    <option value="အခြား">အခြား</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-9">
                                <label class="form-label">အခြား</label>
                                <input type="text" name="parent_other_info" class="form-control" data-toggle-target="parent_marital_status">
                            </div>
                        </div>

                        @foreach ($guardianSections as $section)
                            @php
                                $prefix = $section['prefix'];
                            @endphp
                            <div class="row g-3 {{ !$loop->last ? 'mb-4 pb-4 border-bottom' : '' }}">
                                <h3 class="h6">{{ $section['title'] }}</h3>
                                @if ($section['relation_field'])
                                    <div class="col-sm-6 col-xl-2">
                                        <label class="form-label">တော်စပ်ပုံ</label>
                                        <input type="text" name="{{ $prefix }}_{{ $section['relation_field'] }}" class="form-control">
                                    </div>
                                @endif
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">အမည်</label>
                                    <input type="text" name="{{ $prefix }}_name" class="form-control">
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">အသက်</label>
                                    <input type="text" name="{{ $prefix }}_age" class="form-control">
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">အတန်းပညာ</label>
                                    <select name="{{ $prefix }}_education" class="form-select">
                                        <option value=""></option>
                                        <option value="မူလတန်း">မူလတန်း</option>
                                        <option value="အလယ်တန်း">အလယ်တန်း</option>
                                        <option value="အထက်တန်း">အထက်တန်း</option>
                                        <option value="ဘွဲ့ရ">ဘွဲ့ရ</option>
                                        <option value="အခြား">အခြား</option>
                                    </select>
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">အလုပ်အကိုင်</label>
                                    <input type="text" name="{{ $prefix }}_job" class="form-control">
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">တစ်လ ဝင်ငွေ</label>
                                    <input type="text" name="{{ $prefix }}_income" class="form-control">
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">ဝင်ငွေအဓိက ရှာဖွေသူ</label>
                                    <select name="{{ $prefix }}_income_status" class="form-select">
                                        <option value=""></option>
                                        <option value="ဟုတ်">ဟုတ်</option>
                                        <option value="မဟုတ်">မဟုတ်</option>
                                    </select>
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">နာတာရှည် ရောဂါ</label>
                                    <select name="{{ $prefix }}_chronic_disease_status" class="form-select" data-health-status="{{ $prefix }}">
                                        <option value=""></option>
                                        @foreach ($yesNo as $value => $label)
                                            <option value="{{ $value }}">{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">ရှိပါက ရောဂါအမည်</label>
                                    <input type="text" name="{{ $prefix }}_disease_name" class="form-control" data-health-field="{{ $prefix }}">
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">ရောဂါစဖြစ်သည့် အချိန်</label>
                                    <input type="text" name="{{ $prefix }}_time_of_disease_started" class="form-control" data-health-field="{{ $prefix }}">
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">ကုသမှုခံယူသည့် အချိန်</label>
                                    <input type="text" name="{{ $prefix }}_treatment_duration" class="form-control" data-health-field="{{ $prefix }}">
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">ကုသမှုခံယူသောနေရာ</label>
                                    <select name="{{ $prefix }}_treatment_location" class="form-select" data-health-field="{{ $prefix }}" data-toggle-source="{{ $prefix }}_treatment_location" data-toggle-match="အခြား">
                                        <option value=""></option>
                                        @foreach ($locationOptions as $value => $label)
                                            <option value="{{ $value }}">{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">ကုသမှုခံယူသောနေရာ(Detail)</label>
                                    <input type="text" name="{{ $prefix }}_treatment_location_detail" class="form-control" data-health-field="{{ $prefix }}" data-toggle-target="{{ $prefix }}_treatment_location">
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">ART</label>
                                    <select name="{{ $prefix }}_art_status" class="form-select" data-toggle-source="{{ $prefix }}_art_status" data-toggle-match="သောက်နေသည်">
                                        <option value=""></option>
                                        @foreach ($artOptions as $value => $label)
                                            <option value="{{ $value }}">{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">ART ယူနေသောနေရာ</label>
                                    <select name="{{ $prefix }}_location_of_art" class="form-select" data-toggle-target="{{ $prefix }}_art_status" data-toggle-source="{{ $prefix }}_location_of_art" data-toggle-match="အခြား">
                                        <option value=""></option>
                                        @foreach ($locationOptions as $value => $label)
                                            <option value="{{ $value }}">{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">ART ယူနေသောနေရာ(Detail)</label>
                                    <input type="text" name="{{ $prefix }}_location_of_art_detail" class="form-control" data-toggle-target="{{ $prefix }}_art_status {{ $prefix }}_location_of_art">
                                </div>
                                <div class="col-sm-6 col-xl-2">
                                    <label class="form-label">Fuchia ID</label>
                                    <input type="text" name="{{ $prefix }}_fuchia_id" class="form-control">
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="child-support-section">
                        <h2 class="h5">Section 3: Siblings and other family members</h2>
                        <div class="row g-3 mb-4">
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">Child Support ရရှိမှု အခြေနေ</label>
                                <select name="siblings_cp_status" class="form-select">
                                    <option value=""></option>
                                    <option value="ရရှိထားသည်">ရရှိထားသည်</option>
                                    <option value="မရရှိနေပါ">မရရှိနေပါ</option>
                                </select>
                            </div>
                        </div>

                        <h4 class="h6">လက်ရှိ Child Support ရရှိနေပါက</h4>
                        <div class="row g-3 mb-4">
                            @for ($i = 1; $i <= 3; $i++)
                                <div class="col-md-6 col-xl-4">
                                    <div class="border rounded-3 p-3 h-100">
                                        <div class="mb-3">
                                            <label class="form-label">CS code {{ $i }}</label>
                                            <input type="text" name="sibling_current_{{ $i }}_cs_code" class="form-control">
                                        </div>
                                        <div>
                                            <label class="form-label">ရရှိသည့်ရက်</label>
                                            <input type="text" name="sibling_current_{{ $i }}_date" class="form-control child-support-date-input" placeholder="dd-mm-yyyy" inputmode="numeric">
                                        </div>
                                    </div>
                                </div>
                            @endfor
                        </div>

                        <h4 class="h6">ယခင်ကရရှိဖူးပါက</h4>
                        <div class="row g-3">
                            @for ($i = 1; $i <= 3; $i++)
                                <div class="col-md-6 col-xl-4">
                                    <div class="border rounded-3 p-3 h-100">
                                        <div class="mb-3">
                                            <label class="form-label">CS code {{ $i }}</label>
                                            <input type="text" name="sibling_old_{{ $i }}_cs_code" class="form-control">
                                        </div>
                                        <div>
                                            <label class="form-label">ထောက်ပံ့မှုပြီးဆုံးသည့်နေ့စွဲ</label>
                                            <input type="text" name="sibling_old_{{ $i }}_date" class="form-control child-support-date-input" placeholder="dd-mm-yyyy" inputmode="numeric">
                                        </div>
                                    </div>
                                </div>
                            @endfor
                        </div>
                    </div>

                    <div class="child-support-section">
                        <h2 class="h5">Section 4: Socioeconomic status</h2>
                        <div class="row g-3">
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">မိသားစု လစဉ်ဝင်ငွေ</label>
                                <input type="text" name="family_income" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အိမ် အခြေအနေ</label>
                                <select name="house_status" class="form-select" data-toggle-source="house_status" data-toggle-match="အခြား">
                                    <option value=""></option>
                                    <option value="အိမ်ပိုင် (မြေပိုင်)">အိမ်ပိုင် (မြေပိုင်)</option>
                                    <option value="အငှါး">အငှါး</option>
                                    <option value="အဆောင်">အဆောင်</option>
                                    <option value="ဂေဟာ">ဂေဟာ</option>
                                    <option value="ဘုန်းကြီးကျောင်း">ဘုန်းကြီးကျောင်း</option>
                                    <option value="ကျူးကျော်">ကျူးကျော်</option>
                                    <option value="အခြား">အခြား</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-4">
                                <label class="form-label">အိမ်အခြေအနေ (အခြား)</label>
                                <input type="text" name="house_status_other" class="form-control" data-toggle-target="house_status">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အိမ် လခ(တစ်လ)</label>
                                <input type="number" min="0" step="0.01" name="fees_of_house" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အိမ် အမျိုးအစား</label>
                                <input type="text" name="house_type" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အကာအရံလုံခြုံမှု</label>
                                <select name="house_condition" class="form-select">
                                    <option value=""></option>
                                    @foreach ($yesNo as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">မီး</label>
                                <select name="house_electric" class="form-select" data-toggle-source="house_electric" data-toggle-match="အခြား">
                                    <option value=""></option>
                                    <option value="မီတာ">မီတာ</option>
                                    <option value="battery">battery</option>
                                    <option value="အခြား">အခြား</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-4">
                                <label class="form-label">မီး (အခြား)</label>
                                <input type="text" name="house_electric_other" class="form-control" data-toggle-target="house_electric">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">ရေ</label>
                                <select name="house_water" class="form-select" data-toggle-source="house_water" data-toggle-match="အခြား">
                                    <option value=""></option>
                                    <option value="အဝီစိ">အဝီစိ</option>
                                    <option value="ဂျိူးဖြူ">ဂျိူးဖြူ</option>
                                    <option value="ကန်ရေ">ကန်ရေ</option>
                                    <option value="အခြား">အခြား</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">ရေ (အခြား)</label>
                                <input type="text" name="house_water_other" class="form-control" data-toggle-target="house_water">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အိမ်သာ</label>
                                <select name="house_toilet" class="form-select" data-toggle-source="house_toilet" data-toggle-match="အခြား">
                                    <option value=""></option>
                                    <option value="ရေလောင်းအိမ်သာ">ရေလောင်းအိမ်သာ</option>
                                    <option value="အခြား">အခြား</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-4">
                                <label class="form-label">အိမ်သာ (အခြား)</label>
                                <input type="text" name="house_toilet_other" class="form-control" data-toggle-target="house_toilet">
                            </div>
                        </div>
                    </div>

                    <div class="child-support-section">
                        <h2 class="h5">Section 5: Report purposes</h2>
                        <div class="row g-3">
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">ကလေးမိဘမွေးရပ်မြေ</label>
                                <input type="text" name="parents_birthplace" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">မိသားစုသည် ရန်ကုန်ဇာတိ</label>
                                <select name="parents_native_yangon" class="form-select" data-toggle-source="parents_native_yangon" data-toggle-match="မဟုတ်">
                                    <option value=""></option>
                                    <option value="ဟုတ်">ဟုတ်</option>
                                    <option value="မဟုတ်">မဟုတ်</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <label class="form-label">ရန်ကုန်ကို ဘယ်တုန်းကပြောင်းလာသလဲ</label>
                                <input type="text" name="parents_move_to_yangon_date" class="form-control child-support-date-input" placeholder="dd-mm-yyyy" inputmode="numeric" data-toggle-target="parents_native_yangon">
                            </div>
                            <div class="col-12">
                                <label class="form-label">အကြောင်းအရင်း</label>
                                <textarea name="parents_not_native_yangon_reason" rows="3" class="form-control" data-toggle-target="parents_native_yangon"></textarea>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">ဝါသနာ</label>
                                <input type="text" name="hobbies" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အကြိုက်ဆုံးဘာသာရပ်</label>
                                <input type="text" name="favourite_subject" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အနာဂါတ် အိမ်မက်</label>
                                <input type="text" name="future_dream" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အကြိုက်ဆုံး အစားအစာ</label>
                                <input type="text" name="favourite_food" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အကြိုက်ဆုံးပွဲတော်</label>
                                <input type="text" name="favourite_festival" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အကြိုက်ဆုံးရာသီ</label>
                                <input type="text" name="favourite_season" class="form-control">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">အိမ်မွေးတိရစ္ဆာန်</label>
                                <select name="pets" class="form-select" data-toggle-source="pets" data-toggle-match="ရှိ">
                                    <option value=""></option>
                                    <option value="ရှိ">ရှိ</option>
                                    <option value="မရှိ">မရှိ</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">ဘာမွေးထားလဲ</label>
                                <input type="text" name="pets_type" class="form-control" data-toggle-target="pets">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">တိရစ္ဆာန်လေးနာမည်</label>
                                <input type="text" name="pet_name" class="form-control" data-toggle-target="pets">
                            </div>
                            <div class="col-12">
                                <label class="form-label">ကလေးရဲ့တစ်နေ့တာ</label>
                                <textarea name="daily_routine" rows="3" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="child-support-section">
                        <h2 class="h5">Section 6: Child Program Officer’s feedback</h2>
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">ကလေးနှင့်မိသားစုအပေါ် Child Program Officer ၏အမြင်</label>
                                <textarea name="cpo_feedback" rows="4" class="form-control"></textarea>
                            </div>
                            <div class="col-sm-6 col-xl-4">
                                <label class="form-label">Child protection issue ရှိတယ်လို့ထင်ပါသလား?</label>
                                <select name="does_cp_issue" class="form-select" data-toggle-source="does_cp_issue" data-toggle-match="ရှိပါသည်|စောင့်ကြည့်ရန်လိုအပ်">
                                    <option value=""></option>
                                    <option value="ရှိပါသည်">ရှိပါသည်</option>
                                    <option value="မရှိပါ">မရှိပါ</option>
                                    <option value="စောင့်ကြည့်ရန်လိုအပ်">စောင့်ကြည့်ရန်လိုအပ်</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">CP case ဖွင့်သည့် date</label>
                                <input type="text" name="cp_case_open_date" class="form-control child-support-date-input" placeholder="dd-mm-yyyy" inputmode="numeric" data-toggle-target="does_cp_issue">
                            </div>
                            <div class="col-sm-6 col-xl-4">
                                <label class="form-label">လိုအပ်သည့်အကြောင်းရင်း</label>
                                <input type="text" name="cp_issue_reason" class="form-control" data-toggle-target="does_cp_issue">
                            </div>
                            <div class="col-sm-6 col-xl-2">
                                <label class="form-label">Officer name</label>
                                <input type="text" name="officer_name" class="form-control">
                            </div>
                        </div>
                    </div>

                    <div class="child-support-card mb-4">
                        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                            <div class="child-support-status" id="localStatus">Ready.</div>
                            <div class="child-support-actions">
                                <button type="button" class="btn btn-outline-secondary" id="newLocalDraftBtn">New draft</button>
                                <button type="button" class="btn btn-outline-danger" id="deleteLocalDraftBtn" disabled>Delete current</button>
                                <button type="submit" class="btn btn-primary">Save draft</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <template id="core_family_membersRowTemplate">
        <tr data-collection-row>
            <td><input type="text" class="form-control" data-field="name"></td>
            <td><input type="number" min="0" class="form-control" data-field="age"></td>
            <td><input type="text" class="form-control" data-field="relation"></td>
            <td>
                <select class="form-select" data-field="education">
                    <option value=""></option>
                    <option value="မူလတန်း">မူလတန်း</option>
                    <option value="အလယ်တန်း">အလယ်တန်း</option>
                    <option value="အထက်တန်း">အထက်တန်း</option>
                    <option value="ဘွဲ့ရ">ဘွဲ့ရ</option>
                    <option value="အခြား">အခြား</option>
                </select>
            </td>
            <td><input type="text" class="form-control" data-field="job"></td>
            <td>
                <select class="form-select" data-field="status">
                    <option value=""></option>
                    <option value="alive">သက်ရှိ</option>
                    <option value="dead">သေဆုံး</option>
                </select>
            </td>
            <td>
                <select class="form-select" data-field="live_together">
                    <option value=""></option>
                    <option value="yes">အတူနေ</option>
                    <option value="no">မနေ</option>
                </select>
            </td>
            <td>
                <button type="button" class="btn btn-outline-danger btn-sm" data-collection-remove>Remove</button>
            </td>
        </tr>
    </template>

    <template id="current_household_membersRowTemplate">
        <tr data-collection-row>
            <td><input type="text" class="form-control" data-field="name"></td>
            <td><input type="number" min="0" class="form-control" data-field="age"></td>
            <td><input type="text" class="form-control" data-field="relation"></td>
            <td>
                <select class="form-select" data-field="education">
                    <option value=""></option>
                    <option value="မူလတန်း">မူလတန်း</option>
                    <option value="အလယ်တန်း">အလယ်တန်း</option>
                    <option value="အထက်တန်း">အထက်တန်း</option>
                    <option value="ဘွဲ့ရ">ဘွဲ့ရ</option>
                    <option value="အခြား">အခြား</option>
                </select>
            </td>
            <td><input type="text" class="form-control" data-field="job"></td>
            <td>
                <button type="button" class="btn btn-outline-danger btn-sm" data-collection-remove>Remove</button>
            </td>
        </tr>
    </template>
@endsection

@push('scripts')
    <script src="{{ asset('js/child-support-crypto.js') }}?v={{ filemtime(public_path('js/child-support-crypto.js')) }}"></script>
    <script src="{{ asset('js/TbSection/tbDatePicker.js') }}?v={{ filemtime(public_path('js/TbSection/tbDatePicker.js')) }}"></script>
    <script src="{{ asset('js/child-support-register.js') }}?v={{ filemtime(public_path('js/child-support-register.js')) }}"></script>
@endpush