@extends('layouts.app')

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

@section('content')
    @auth
        @php
            $workingOptions = [
                'yes' => 'လုပ်',
                'no' => 'မလုပ်',
            ];
            $serviceOptions = [
                'monthly_ration' => 'လစဉ် ရိက္ခာများ',
                'toothbrush' => '၃ လတစ်ကြိမ်ရသော သွားတိုက်တံ',
                'school_supplies' => 'ကျောင်းသုံးပစ္စည်းများ',
                'household_items' => 'အိမ်ထောင်စုသုံးပစ္စည်းများ',
                'vocational_training' => 'အသက်မွေးဝမ်းကျောင်းသင်တန်း',
                'small_business' => 'မိသားစု အသေးစားစီးပွားရေးလုပ်ငန်း',
                'emergency_support' => 'အရေးပေါ် ကူညီပံ့ပိုးမှု',
                'medical_cost' => 'ဆေးဝါးကုသစရိတ်',
                'day_trip' => 'ပျော်ရွှင်စရာ တစ်နေ့တာ ခရီးများ',
                'tuition_fee' => 'ကျူရှင်စရိတ်',
                'bicycle' => 'စက်ဘီး',
                'clothes' => 'အဝတ်အစား',
                'other' => 'အခြားသော အရာများ',
            ];
        @endphp

        <div class="container-fluid child-support-shell"
             data-child-support-release
             data-records-url="{{ route('child-support.releases.records.index') }}"
             data-store-url="{{ route('child-support.releases.records.store') }}"
             data-download-url="{{ route('child-support.releases.sync.download') }}"
             data-export-xlsx-url="{{ route('child-support.register.export.xlsx') }}"
             data-upload-url="{{ route('child-support.releases.sync.upload') }}"
             data-record-url-template="{{ route('child-support.releases.records.show', ['release' => '__RELEASE_ID__']) }}"
             data-crypto-key="{{ $cryptoKey ?? '' }}"
             data-sensitive-fields='@json($releaseSensitiveFields ?? [])'
             data-register-sensitive-fields='@json($registerSensitiveFields ?? [])'>
            <ul class="nav nav-pills child-support-nav gap-2 mb-3">
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('child-support.register.index') }}">Register</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>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('child-support.releases.manage') }}">Manage Release</a>
                </li>
            </ul>

            <section 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 Program Release Form</h1>
                        <div class="child-support-meta">Use this form when a child is released from the child support program.</div>
                    </div>
                    <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-2">
                        <div class="child-support-inline-note" id="childSupportReleaseStatus">Ready.</div>
                        <a href="{{ route('child-support.register.index') }}" class="btn btn-outline-primary btn-sm">Back to Register</a>
                    </div>
                </div>
            </section>

            <div class="child-support-card mb-3 child-support-tools-panel d-none" aria-hidden="true">
                <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">Release records are saved locally first. Sync uploads pending records to server.</div>
                    </div>
                    <button
                        type="button"
                        class="btn btn-outline-secondary btn-sm child-support-tools-toggle"
                        id="childSupportReleaseToolsToggle"
                        aria-controls="childSupportReleaseToolsBody"
                        aria-expanded="true"
                        aria-label="Hide release sync controls area">
                        <span id="childSupportReleaseToolsToggleIcon" aria-hidden="true">▾</span>
                    </button>
                </div>
                <div id="childSupportReleaseToolsBody" 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">
                                    <h3 class="h6 mb-0">Sync Controls</h3>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" id="childSupportReleaseOfflineToggle">Offline-only: Off</button>
                                </div>
                                <div class="child-support-inline-note mt-2" id="childSupportReleaseSyncStatus">Sync ready.</div>
                                <div class="child-support-actions mt-3">
                                    <button type="button" class="btn btn-outline-primary btn-sm" id="childSupportReleaseSyncDownload">Download</button>
                                    <button type="button" class="btn btn-outline-success btn-sm" id="childSupportReleaseSyncUpload">Sync (<span id="childSupportReleasePendingCount">0</span>)</button>
                                    <button type="button" class="btn btn-outline-dark btn-sm" id="childSupportReleaseExportBtn">Export</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">
                                    <h3 class="h6 mb-0">Pending Queue</h3>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-outline-secondary btn-sm" id="childSupportReleaseQueueToggle">Show</button>
                                        <button type="button" class="btn btn-outline-primary btn-sm" id="childSupportReleaseQueueRefresh">Refresh</button>
                                    </div>
                                </div>
                                <div class="child-support-queue-list mt-2 d-none" id="childSupportReleaseQueueList">Queue is empty.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <form method="post" id="childSupportReleaseForm" class="child-support-form">
                        @csrf
                        <input type="hidden" name="release_id" id="release_id">
                        <input type="hidden" name="uuid" id="release_uuid">
                        <input type="hidden" name="local_uuid" id="release_local_uuid">
                        <input type="hidden" name="child_support_register_id" id="release_child_support_register_id">
                        <input type="hidden" name="register_uuid" id="release_register_uuid">
                        <input type="hidden" name="record_status" id="record_status" value="draft">

                        <div class="child-support-section">
                            <h2 class="h5">Child Program Release Form</h2>

                            <div class="row g-3">
                                <div class="d-none">
                                    <select id="release_register_context">
                                        <option value="">Select register</option>
                                        @foreach ($registerRecords ?? [] as $register)
                                            <option value="{{ $register->id }}"
                                                    data-uuid="{{ $register->uuid }}"
                                                    data-general-id="{{ $register->general_id }}"
                                                    data-project-area="{{ $register->project_area }}"
                                                    data-child-name="{{ $register->child_name }}"
                                                    data-child-nickname="{{ $register->child_nickname }}"
                                                    data-child-age="{{ $register->age }}"
                                                    data-child-dob="{{ $register->dob }}">
                                                #{{ $register->id }} · {{ $register->child_name ?: 'Unnamed child' }} · {{ $register->general_id ?: 'No ID' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <label class="form-label">General ID</label>
                                    <input type="number" name="general_id" id="general_id" class="form-control" readonly>
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label">ID No. နှင့် စီမံကိန်းမြို့နယ်အမည်</label>
                                    <input type="text" name="id_no_project_area" id="id_no_project_area"
                                        class="form-control" readonly>
                                </div>
                                <div class="col-sm-2">
                                    <label class="form-label">ကောက်ယူခဲ့သည့် နေ့စွဲ</label>
                                    <div class="date-holder">
                                        <input type="text" name="collected_date" id="collected_date"
                                            class="form-control Gdate date-verify reception-dateformat"
                                            placeholder="dd-mm-yyyy">
                                        <img src="{{ asset('img/calendar3.svg') }}" class="dateimg" alt="date">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label">ကလေးအမည် (အိမ်ခေါ်အမည်)</label>
                                    <input type="text" name="child_name_nickname" id="child_name_nickname"
                                        class="form-control" readonly>
                                </div>
                                <div class="col-sm-2">
                                    <label class="form-label">အသက်</label>
                                    <input type="number" name="child_age" id="child_age" class="form-control" readonly>
                                </div>
                                <div class="col-sm-3">
                                    <label class="form-label">မွေးနေ့</label>
                                    <div class="date-holder">
                                        <input type="text" name="child_dob" id="child_dob"
                                            class="form-control Gdate date-verify reception-dateformat"
                                            placeholder="dd-mm-yyyy" readonly>
                                        <img src="{{ asset('img/calendar3.svg') }}" class="dateimg" alt="date">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label">ပညာအရည်အချင်း/ အတန်းပညာ</label>
                                    <input type="text" name="education_level" id="education_level"
                                        class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="child-support-section">
                            <h2 class="h5">Program Background</h2>

                            <div class="row g-3">
                                <div class="col-sm-3">
                                    <label class="form-label">Child Support Program ကိုစတင်ရောက်ရှိခဲ့သော အချိန်</label>
                                    <input type="text" name="program_started_year_note" id="program_started_year_note"
                                        class="form-control" placeholder="ဥပမာ - ၂ နှစ်ခန့်">
                                </div>
                                <div class="col-sm-3">
                                    <label class="form-label">Program စတင်ရက်စွဲ / ကြာချိန်</label>
                                    <div class="date-holder">
                                        <input type="text" name="program_started_date" id="program_started_date"
                                            class="form-control Gdate date-verify reception-dateformat"
                                            placeholder="dd-mm-yyyy">
                                        <img src="{{ asset('img/calendar3.svg') }}" class="dateimg" alt="date">
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <label class="form-label">ကလေးသည် ဆေးသောက်နေရသူဖြစ်လျှင်</label>
                                   
                                        <div class="date-holder">
                                        <input type="text" name="medication_started_at_date" id="medication_started_at_date"
                                            class="form-control Gdate date-verify reception-dateformat"
                                            placeholder="စတင်သောက်ရသောအချိန် (dd-mm-yyyy)">
                                        <img src="{{ asset('img/calendar3.svg') }}" class="dateimg" alt="date">
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <label class="form-label">ဆေးခန်း</label>
                                    <input type="text" name="medication_clinic" id="medication_clinic"
                                        class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="child-support-section">
                            <h2 class="h5">Work Information</h2>

                            <div class="row g-3">
                                <div class="col-sm-2">
                                    <label class="form-label">အလုပ်လုပ်နေပါသလား</label>
                                    <select name="is_working" id="is_working" class="form-select">
                                        <option value=""></option>
                                        @foreach ($workingOptions as $value => $label)
                                            <option value="{{ $value }}">{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label">အလုပ်အကိုင်/ ရာထူး/ တာဝန်</label>
                                    <input type="text" name="work_role" id="work_role" class="form-control">
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label">အလုပ်၏ လုပ်ဆောင်ရသည့် တာဝန်များ/ ဝတ္တရားများ</label>
                                    <input type="text" name="work_duties" id="work_duties" class="form-control">
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label">အလုပ်အမည်နှင့် နေရာ</label>
                                    <input type="text" name="work_name_location" id="work_name_location"
                                        class="form-control">
                                </div>
                                <div class="col-sm-2">
                                    <label class="form-label">တစ်နေ့ဝင်ငွေ</label>
                                    <input type="number" name="daily_income" id="daily_income" class="form-control">
                                </div>
                                <div class="col-sm-2">
                                    <label class="form-label">တစ်လဝင်ငွေ</label>
                                    <input type="number" name="monthly_income" id="monthly_income"
                                        class="form-control">
                                </div>
                                <div class="col-sm-2">
                                    <label class="form-label">နေ့စား - အလုပ်ဆင်းရက်</label>
                                    <input type="number" name="daily_work_days" id="daily_work_days"
                                        class="form-control">
                                </div>
                                <div class="col-sm-2">
                                    <label class="form-label">လခစား - အလုပ်ဆင်းရက်</label>
                                    <input type="number" name="salary_work_days" id="salary_work_days"
                                        class="form-control">
                                </div>
                                <div class="col-sm-2">
                                    <label class="form-label">ပိတ်ရက်</label>
                                    <input type="number" name="days_off" id="days_off" class="form-control">
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label">အလုပ်စတင်လုပ်ခဲ့သော အချိန်</label>
                                    <input type="text" name="work_started_at" id="work_started_at"
                                        class="form-control">
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label">ယခင်လုပ်ခဲ့သော အလုပ်ရှိလျှင် (ဖော်ပြပါ)</label>
                                    <input type="text" name="previous_work" id="previous_work"
                                        class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="child-support-section">
                            <h2 class="h5">Release Assessment</h2>

                            <div class="row g-3">
                                <div class="col-sm-6">
                                    <label class="form-label">ပံ့ပိုးမှုအစီအစဉ်တွင် မပါဝင်မီ အခြေအနေ</label>
                                    <textarea name="before_program_condition" id="before_program_condition" rows="4" class="form-control"></textarea>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label">ပံ့ပိုးမှုအစီအစဉ်တွင် ပါဝင်ပြီး အခြေအနေ</label>
                                    <textarea name="after_program_condition" id="after_program_condition" rows="4" class="form-control"></textarea>
                                </div>
                                <div class="col-sm-12">
                                    <label class="form-label">ပါဝင်ခဲ့သည့် ကာလတစ်လျှောက် ရရှိခဲ့သော ပံ့ပိုးမှုများအားလုံး</label>
                                    <textarea name="all_supports_received" id="all_supports_received" rows="5" class="form-control"></textarea>
                                </div>
                                <div class="col-sm-12">
                                    <label class="form-label">မရခဲ့လျှင်လည်း မည်သည့်အတွက်ကြောင့် မရခဲ့သနည်း</label>
                                    <textarea name="support_not_received_reason" id="support_not_received_reason" rows="3" class="form-control"></textarea>
                                </div>
                                <div class="col-sm-12">
                                    <label class="form-label">မိမိ၏ မွေးချင်းမောင်နှမထဲမှ ပံ့ပိုးမှုအစီအစဉ်တွင် ပါရှိလျှင် နာမည်နှင့် အမှတ်</label>
                                    <textarea name="siblings_program_info" id="siblings_program_info" rows="3" class="form-control"></textarea>
                                </div>
                                <div class="col-sm-12">
                                    <label class="form-label">အစီအစဉ်မှ ထွက်ခွာရသည့် အကြောင်းအရင်း</label>
                                    <textarea name="release_reason" id="release_reason" rows="3" class="form-control"></textarea>
                                </div>
                                <div class="col-sm-12">
                                    <label class="form-label">အလှူရှင်အတွက် အမှတ်တရစကား</label>
                                    <textarea name="donor_message" id="donor_message" rows="4" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="child-support-section">
                            <h2 class="h5">Household and Support</h2>

                            <div class="row g-3">
                                <div class="col-sm-3">
                                    <label class="form-label">အတူနေ မိသားစု အရေအတွက်</label>
                                    <input type="number" name="household_member_count" id="household_member_count"
                                        class="form-control">
                                </div>
                                <div class="col-sm-9">
                                    <label class="form-label">အတူနေမိသားစုဝင်များ၏ အလုပ်အကိုင်အခြေအနေ</label>
                                    <input type="text" name="household_job_status" id="household_job_status"
                                        class="form-control">
                                </div>

                                <div class="col-sm-12">
                                    <label class="form-label">Child Sponsoring/ ထွန်းဆေးခန်းမှ ထောက်ပံ့ပေးမှုတွေထဲက ရရှိတဲ့ ဝန်ဆောင်မှုများ</label>
                                    <div class="row g-2 mt-1">
                                        @foreach ($serviceOptions as $value => $label)
                                            <div class="col-sm-4">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="received_services[]" value="{{ $value }}"
                                                        id="received_service_{{ $value }}">
                                                    <label class="form-check-label"
                                                        for="received_service_{{ $value }}">
                                                        {{ $label }}
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <label class="form-label">အခြားသော အရာများ (ဖော်ပြပါ)</label>
                                    <input type="text" name="received_services_other" id="received_services_other"
                                        class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="child-support-section">
                            <h2 class="h5">Officer Summary</h2>

                            <div class="row g-3">
                                <div class="col-sm-12">
                                    <label class="form-label">ကလေးအကြောင်း (မေးမြန်းချက်နှင့် လေ့လာတွေ့ရှိချက်များအား) အကျဉ်းချုပ်ရေးပေးရန်</label>
                                    <textarea name="child_summary" id="child_summary" rows="8" class="form-control"></textarea>
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label">Child Program Officer’s name</label>
                                    <input type="text" name="child_program_officer_name"
                                        id="child_program_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">Release form actions</div>
                                <div class="child-support-actions">
                                    <button type="reset" class="btn btn-outline-secondary">Reset Form</button>
                                    <button type="button" class="btn btn-outline-danger" id="childSupportReleaseDeleteBtn" disabled>Delete</button>
                                    <button type="submit" class="btn btn-primary">Save Release Form</button>
                                </div>
                            </div>
                        </div>
            </form>
        </div>
    @endauth
@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/child-support-common.js') }}?v={{ filemtime(public_path('js/child-support-common.js')) }}"></script>
    <script src="{{ asset('js/TbSection/tbDatePicker.js') }}?v={{ filemtime(public_path('js/TbSection/tbDatePicker.js')) }}"></script>
    <script src="{{ asset('js/child-support-release.js') }}?v={{ filemtime(public_path('js/child-support-release.js')) }}"></script>
@endpush