@php
    $age = '';
    if (isset($visitor)) {
        $get_age = Util::age($visitor->birth_date);
        $year = $get_age['year'];
        $month = $get_age['month'];
        $day = $get_age['day'];

        $age = $year . ' Year, ' . $month . ' Month, ' . $day . ' Day';
    }

    $visitor_id = isset($visitor) ? $visitor->id : '';

    // Comment: MCU note from visitor MCU record instead of employee
    // $mcu_note = isset($visitor_mcu) ? $visitor_mcu->note : '';
    $redirect_url = route('gate-in.visitor.detail', ['id' => encrypt($visitor_id)]);

    // Comment: Generate MCU number for visitor - need controller support
    // $mcu_number = isset($visitor_mcu) && $visitor_mcu->mcu_number != null ? $visitor_mcu->mcu_number : $generate_code_mcu;

    // Comment: Grid column logic - need visitor MCU data structure
    // $grid_column = !empty($visitor_mcu->mcu_result) && $visitor_mcu->mcu_result == 'Fit' ? 'is-12' : 'is-6';

    // hitung umur visitor
    $dob  = new DateTime($visitor->birth_date);
    $now  = new DateTime();
    $umur = $now->diff($dob)->y; // ambil selisih tahun

    // Comment: Query visitor MCU data - need visitor_mcu table structure
    // $sqlMcu = DB::table('visitor_mcu')
    //     ->where('visitor_id', '=', $visitor->id)
    //     ->first();

    // Check if visitor is approved (MCU FIT and Status Approved)
    $isApproved = isset($isApproved) ? $isApproved : false;

@endphp
@push("styles")
    <style>
        input::placeholder {
            color: #363636 !important;
        }
    </style>
@endpush
<form id="form_create_visitor_medical_checkup">
    <input type="hidden" name="visitor_id" value="{{ $visitor_id ?? '' }}" id="visitor_id_mcu">
    <input type="hidden" name="gender_mcu" value="{{ $visitor->gender ?? '' }}" id="gender_mcu">
    {{-- Comment: Need visitor_mcu_id field when visitor_mcu table is ready --}}
    {{-- <input type="hidden" name="visitor_mcu_id" value="{{ $sqlMcu->id ?? 0 }}" id="visitor_mcu_id"> --}}
    <input type="hidden" name="mcu_dokter_visitor" value="true">

    <div class="demo-card">
        <div class="demo-title">
            <h3 class="title is-thin is-5">@lang('app.medical_checkup') - Visitor</h3>
        </div>
        <div class="card-inner">
            <div class="columns is-multiline">
                <div class="column is-12" id="column_verification_number">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="mcu_number">
                            @lang('app.mcu_verification_number')<sup class="text-danger">*</sup>
                        </label>
                        {{-- Auto-generated MCU number for testing --}}
                        <input type="text" name="mcu_number" readonly value="{{ $visitor->mcu_number ?? $codeMcu }}" class="input is-warning-focus"
                            placeholder="Verification Number" id="mcu_number">
                        {{-- <input type="text" name="mcu_number" readonly value="MCU-VST-{{ date('Ymd') }}-{{ str_pad(rand(1,999), 3, '0', STR_PAD_LEFT) }}" class="input is-warning-focus"
                            placeholder="Verification Number" id="mcu_number"> --}}
                    </div>
                </div>

                {{-- Comment: Visitor MCU files section - need visitor_mcu_files table --}}

                <div class="column is-12">
                    @include('components.util.show-file', [
                        'file' => $visitor->health_certificate,
                        'file_name' => 'Health Certificate',
                        'employee_name' => $visitor->name,
                        'employee_id' => $visitor->id,
                        'note_mcu' => '',
                        'valid_until' => null,
                        'approved' => null,
                        'nomor' => '',
                        "file_id" => null,
                        'sub_folder' => 'health-certificate',
                        'size' => 'small',
                        'created_at' => null,
                        'statusMcu' => null,
                    ])
                </div>

            </div>

            <div class="columns is-multiline" style="border: 1px solid green; padding: 10px; border-radius: 4px; margin: 0px; margin-bottom: 20px;">
                <div class="column is-12">
                    <b>Framingham Risk Score (FRS) - Visitor Assessment</b>
                </div>
                <div class="column is-8">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="age">@lang('app.age')</label>
                        <input type="hidden" name="age" id="age" value="{{ $age }}">
                        <input type="text" value="{{ $age }}" class="input" readonly>
                    </div>
                </div>
                <div class="column is-4">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="gender">
                            Gender
                        </label>
                        <input type="text" class="input" readonly value="{{ $visitor->gender ?? '' }}">
                    </div>
                </div>
                <div class="column is-6">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="cholesterol_value">
                            @lang('app.total_cholesterol_value')<sup class="text-danger">*</sup>
                        </label>
                        @php

                            $total_cholesterol = $visitor->cholesterol_value ?? '';

                            // ganti koma jadi titik
                            $total_cholesterol = str_replace(',', '.', $total_cholesterol);

                            // ubah ke float
                            $kadar_cholesterol = (float) $total_cholesterol;

                            // buang .00 kalau desimalnya nol
                            if (fmod($kadar_cholesterol, 1) == 0) {
                                $cholesterol =  (int) $kadar_cholesterol; // 534
                            } else {
                                $cholesterol = $kadar_cholesterol; // 534.25
                            }

                        @endphp
                        {{-- Comment: Default cholesterol value - need visitor MCU data --}}
                        <input type="number" step="0.01" min="0" max="400" name="cholesterol_value"
                            value="{{ $cholesterol == 0 ? '' : $cholesterol }}"
                            class="input is-warning-focus" placeholder="{{ $cholesterol }}" id="cholesterol_value">
                    </div>
                </div>
                <div class="column is-6">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="hdl_value">
                            @lang('app.hdl_cholesterol_value')<sup class="text-danger">*</sup>
                        </label>
                        @php

                            $total_hdl = $visitor->hdl_value ?? '';

                            // ganti koma jadi titik
                            $total_hdl = str_replace(',', '.', $total_hdl);

                            // ubah ke float
                            $kadar_hdl = (float) $total_hdl;

                            // buang .00 kalau desimalnya nol
                            if (fmod($kadar_hdl, 1) == 0) {
                                $hdl =  (int) $kadar_hdl; // 534
                            } else {
                                $hdl = $kadar_hdl; // 534.25
                            }

                        @endphp
                        {{-- Comment: Default HDL value - need visitor MCU data --}}
                        <input type="number" name="hdl_value" max="100"
                            value="{{ $hdl == 0 ? '' : $hdl }}"
                            class="input" placeholder="{{ $hdl }}" id="hdl_value">
                    </div>
                </div>
                <div class="column is-6">
                    <div class="input-adds">
                        <div class="control">
                            <label class="fs-12 fw-400 text-grey" for="systolic_value">
                                @lang('app.systolic_blood_pressure')
                                <sup class="text-danger">*</sup>
                            </label>
                            @php

                                $total_systolic = $visitor->systolic_value ?? '';

                                // ganti koma jadi titik
                                $total_systolic = str_replace(',', '.', $total_systolic);

                                // ubah ke float
                                $kadar_systolic = (float) $total_systolic;

                                // buang .00 kalau desimalnya nol
                                if (fmod($kadar_systolic, 1) == 0) {
                                    $systolic =  (int) $kadar_systolic; // 534
                                } else {
                                    $systolic = $kadar_systolic; // 534.25
                                }

                            @endphp
                            {{-- Comment: Default systolic value - need visitor MCU data --}}
                            <input type="number" min="0" name="systolic_value" max="220"
                                value="{{ $systolic == 0 ? '' : $systolic }}"
                                class="input is-warning-focus" placeholder="{{ $systolic }}" id="systolic_value">
                        </div>
                        <br>
                        <div style="padding-bottom:10px;">
                            <label class="fs-12 fw-400 text-grey" for="hypertensive">
                                @lang('app.question_antihypertensive_medication')
                                <sup class="text-danger">*</sup>
                            </label>
                            <div class="control">
                                <label class="radio radio is-outlined is-warning">
                                    <input type="radio" name="hypertensive" value="Yes" @if (optional($visitor)->hypertensive == 'Yes') checked @endif>
                                    <span></span>
                                    @lang('app.yes')
                                </label>

                                <label class="radio is-outlined is-warning">
                                    <input type="radio" name="hypertensive" value="No" @if (optional($visitor)->hypertensive == 'No') checked @endif>
                                    <span></span>
                                    @lang('app.no')
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="" style="margin-top: 7px;">
                        <label class="fs-12 fw-400 text-grey" for="smoking_habit">
                            @lang('app.question_habit_of_smoking')
                            <sup class="text-danger">*</sup>
                        </label>
                        <div class="control">
                            <label class="radio radio is-outlined is-warning">
                                <input type="radio" name="smoking_habit" value="Yes" @if (optional($visitor)->smoking_habit == 'Yes') checked @endif>
                                <span></span>
                                @lang('app.yes')
                            </label>

                            <label class="radio is-outlined is-warning">
                                <input type="radio" name="smoking_habit" value="No" @if (optional($visitor)->smoking_habit == 'No') checked @endif>
                                <span></span>
                                @lang('app.no')
                            </label>
                        </div>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="" style="margin-top: 7px;">
                        <label class="fs-12 fw-400 text-grey" for="diabetes">
                            @lang('app.question_diabetes_mellitus')
                            <sup class="text-danger">*</sup>
                        </label>
                        <div class="control">
                            <label class="radio radio is-outlined is-warning">
                                <input type="radio" name="diabetes" value="Yes" @if (optional($visitor)->diabetes == 'Yes') checked @endif>
                                <span></span>
                                @lang('app.yes')
                            </label>

                            <label class="radio is-outlined is-warning">
                                <input type="radio" name="diabetes" value="No" @if (optional($visitor)->diabetes == 'No') checked @endif>
                                <span></span>
                                @lang('app.no')
                            </label>
                        </div>
                    </div>
                </div>
                <div class="column is-6">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="framingham_score">
                            @lang('app.framingham_score')
                        </label>
                        <input type="text" class="input" name="framingham_risk_score"
                            value="" id="framingham_risk_score" readonly>
                    </div>
                </div>
                <div class="column is-6">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="persentase_framingham_risk_score">
                            Persentase Framingham Risk Score(%)
                        </label>
                        <input type="text" class="input" readonly name="persentase_framingham_risk_score"
                            value="" id="persentase_framingham_risk_score">
                    </div>
                </div>
            </div>

            <div class="columns is-multiline" style="border: 1px solid #ddd;padding: 10px;border-radius: 4px;margin: 0px;background-color: #fafafa;">
                <div class="column is-6" id="column_mcu_result">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="blood_type">
                            @lang('app.mcu_result')<sup class="text-danger">*</sup>
                        </label>
                        <div class="select is-fullwidth">
                            @php
                                $valueMcuResult = [
                                    'Fit',
                                    'Fit With Note',
                                    'Fit With Recommendation',
                                    'Currently Unfit',
                                    'Unfit',
                                ];
                            @endphp
                            <select name="mcu_result" id="mcu_result" class="input">
                                <option value="">{{ __('app.select_mcu_result') }}</option>
                                @foreach ($valueMcuResult as $value)
                                    @php
                                        $selected =
                                            isset($visitor) && $visitor->mcu_result == $value
                                                ? 'selected'
                                                : '';
                                    @endphp
                                    <option value="{{ $value }}" {{ $selected }}>{{ $value }}</option>
                                @endforeach
                            </select>
                            <div id="statusMcuApprove" class="txtStatusMcu"></div>
                        </div>
                    </div>
                </div>
                <div class="column is-6" id="column_mcu_date">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="mcu_date">
                            @lang('app.mcu_date')<sup class="text-danger">*</sup>
                        </label>
                        <div class="control has-icon">
                            <input id="mcu_date" name="mcu_date" class="input is-warning-focus" value="{{ optional($visitor)->mcu_date ? date('d/m/Y', strtotime(optional($visitor)->mcu_date)) : '' }}" />
                            <div class="form-icon">
                                <i class="lnil lnil-calendar"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-3" id="column_mcu_date_valid_until" style="display: none">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="mcu_date_valid_until">
                            MCU Result Valid Until<sup class="text-danger">*</sup>
                        </label>
                        <div class="control has-icon">
                            <input id="mcu_date_valid_until" name="mcu_date_valid_until" class="input is-warning-focus" value="{{ optional($visitor)->mcu_date_valid_until ? date('d/m/Y', strtotime(optional($visitor)->mcu_date_valid_until)) : '' }}" />
                            <div class="form-icon">
                                <i class="lnil lnil-calendar"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-12">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey">
                            @lang('app.mcu_note')
                        </label>
                        <textarea name="mcu_note" id="mcu_note" class="textarea is-warning-focus sun-editor">
                            {!! $visitor->note ?? '' !!}
                        </textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('components.button.card-button-next-prev', [
        'prev' => false,
        'next' => false,
        'save' => true,
        'id' => 'visitor_medical_checkup',
    ])
</form>

@include('components.modal.modal-alert-save', [
    'id' => 'modal-alert-save-visitor-mcu',
    'title' => __('app.alert_save_title'),
    'subtitle' => 'Please ensure that the visitor MCU data you have entered is accurate and valid?',
    'btn_submit' => 'btn_submit_visitor_mcu_modal',
])

<div id="modal_alert_visitor_mcu_number"></div>

@push('styles')
<style>
    .frs_low {
        background-color: #B8E1BF !important;
        color: #0B4214 !important;
    }
    .frs_intermediate {
        background-color: #F7E4AB !important;
        color: #813C1D !important;
    }
    .frs_high {
        background-color: #FBCDCD !important;
        color: #7A2222 !important;
    }
</style>
@endpush

@push('scripts')
    <script>
        let editors = [];

        document.querySelectorAll('.sun-editor').forEach((el, i) => {
            let instance = SUNEDITOR.create(el, {
                height: 200,
                fontSize: [8, 10, 12, 14, 16, 18, 20, 24],
                defaultStyle: 'font-size:16px;'
            });
            editors.push({ el: el, instance: instance });
        });

        function submitVisitorMcuDokter() {
            $('#btn_save_visitor_medical_checkup').removeClass('is-loading')

            $("#form_create_visitor_medical_checkup").validate({
                rules: {
                    mcu_number: {
                        required: true
                    },
                    mcu_date_valid_until: {
                        required: true
                    },
                    cholesterol_value: {
                        required: true
                    },
                    hdl_value: {
                        required: true
                    },
                    systolic_value: {
                        required: true,
                    },
                    hypertensive: {
                        required: true
                    },
                    smoking_habit: {
                        required: true
                    },
                    diabetes: {
                        required: true
                    },
                    mcu_result: {
                        required: true
                    },
                    mcu_date: {
                        required: true
                    }
                },
                messages: {
                    mcu_number: {
                        required: "The MCU number field is required."
                    },
                    mcu_date_valid_until: {
                        required: "The MCU validation Date field is required."
                    },
                    cholesterol_value: {
                        required: "The Cholesterol value field is required."
                    },
                    hdl_value: {
                        required: "The HDL Cholesterol value field is required."
                    },
                    systolic_value: {
                        required: "The Systolic value field is required.",
                    },
                    hypertensive: {
                        required: "Please choice the question."
                    },
                    smoking_habit: {
                        required: "Please choice the question."
                    },
                    diabetes: {
                        required: "Please choice the question."
                    },
                    mcu_result: {
                        required: "The MCU result field is required."
                    },
                    mcu_date: {
                        required: "The MCU Date field is required."
                    }
                },
                errorClass: 'help invalid-feedback',
                errorElement: 'div',
                errorPlacement: function(error, element) {
                    if (element.is("input[type='radio']")) {
                        element.closest('.control').find('label:last').after(error);
                    } else if (element.is("input[type='file']")) {
                        error.insertAfter(element.closest('.file.is-boxed'));
                    } else if ($(element).is("select")) {
                        error.insertAfter(element).addClass('mb-3');
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function(element) {
                    if ($(element).is("input[type='file']")) {
                        $(element).closest('.file.is-boxed').find('.file-cta').addClass('is-invalid');
                    } else if ($(element).is("input[type='radio']")) {
                        $(element).closest('.field').addClass('is-invalid');
                        $(element).closest('.control').find('label:last').addClass('is-invalid');
                    } else {
                        $(element).addClass('is-danger');
                    }
                },
                unhighlight: function(element) {
                    if ($(element).is("input[type='file']")) {
                        $(element).closest('.file.is-boxed').find('.file-cta').removeClass('is-invalid');
                    } else if ($(element).is("select")) {
                        const originalFirstOption = $(element).data('originalFirstOption');
                        if (originalFirstOption) {
                            $(element).find('option:first').text(originalFirstOption);
                        }
                    } else if ($(element).is("input[type='radio']")) {
                        $(element).removeClass('is-invalid');
                    } else {
                        $(element).removeClass('is-danger');
                    }
                },
                submitHandler: function(form) {
                    $('#modal-alert-save-visitor-mcu').addClass('is-active');

                    $('#btn_submit_visitor_mcu_modal').on('click', function() {
                        $(this).addClass('is-loading');
                        $(this).prop('disabled', true)

                        submitForm('{{ $redirect_url }}')
                    })

                    editors.forEach(e => {
                        e.el.value = e.instance.getContents();
                    });

                    function submitForm(redirect) {
                        $('#btn_save_visitor_medical_checkup').addClass('is-loading')

                        document.getElementById('center-loading').style.display = 'flex';

                        let formData = new FormData(form);

                        let obj = {};
                        formData.forEach((value, key) => {
                            obj[key] = value;
                        });

                        // Using existing visitor update route for testing
                        const urlStoreVisitorMcu = '{{ route("gate-in.visitor.update-mcu") }}';

                        console.log('Visitor MCU Form Data:', JSON.stringify(obj, null, 2));

                        // AJAX call to store visitor MCU data - using existing route for testing
                        $.ajax({
                            url: urlStoreVisitorMcu,
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            beforeSend: function() {
                                $("#btn_save_visitor_medical_checkup").prop('disabled', true);
                            },
                            success: function(res) {
                                console.log('Success response:', res);

                                $("#btn_save_visitor_medical_checkup").prop('disabled', false);
                                $('#btn_save_visitor_medical_checkup').removeClass('is-loading')

                                // Success notification
                                //alert('Visitor MCU data submitted successfully!');

                                window.location.href = redirect
                            },
                            error: function(xhr, status, error) {
                                console.log('Error response:', xhr.responseJSON);

                                $("#btn_save_visitor_medical_checkup").prop('disabled', false);
                                $('#btn_save_visitor_medical_checkup').removeClass('is-loading')

                                if (xhr.status === 422) {
                                    $('.invalid-feedback').remove();

                                    let errors = xhr.responseJSON.errors;

                                    for (let field in errors) {
                                        if (errors.hasOwnProperty(field)) {
                                            let errorMessage = errors[field][0];
                                            let fieldElement = $(`[name="${field}"]`);
                                            if (fieldElement.length) {
                                                fieldElement.after(
                                                    `<span id="${field}-error" class="invalid-feedback text-danger">${errorMessage}</span>`
                                                );
                                            }
                                        }
                                    }
                                } else {
                                    console.log('An unexpected error occurred:', error);
                                    alert('Error occurred. Check console for details: ' + error);
                                }
                            }
                        });
                    }
                }
            });
        }

        // MCU number validation for visitor - using console log for testing
        let typingTimerVisitorMcu;
        const typingDelayVisitorMcu = 2000;

        $('#mcu_number').on('keyup change', function() {
            $('#mcu_number-error').remove();
            const visitorID = $('#visitor_id_mcu').val();

            clearTimeout(typingTimerVisitorMcu);
            const mcuNumber = $(this).val();

            const params = {
                mcu_number: mcuNumber,
                visitor_id: visitorID,
            }

            typingTimerVisitorMcu = setTimeout(() => {
                console.log('MCU Number validation params:', params);
                // For testing - just log the data
                if (mcuNumber.length > 0) {
                    console.log('MCU Number entered:', mcuNumber);
                    $("#btn_save_visitor_medical_checkup").prop('disabled', false);
                }

                /* Uncomment when route is ready:
                $.ajax({
                    url: urlCheckVisitorMcuNumber,
                    data: params,
                    success: (res) => {
                        if (res.status) {
                            $('#mcu_number').after(
                                '<span id="mcu_number-error" class="help text-danger">Visitor MCU Number is already registered</span>'
                            )
                            $('#modal_alert_visitor_mcu_number').html(res.html)
                            $("#btn_save_visitor_medical_checkup").removeClass('is-loading');
                            $("#btn_save_visitor_medical_checkup").prop('disabled', true);
                        } else {
                            $("#btn_save_visitor_medical_checkup").prop('disabled', false);
                        }
                    },
                    error: (xhr) => {
                        console.error("MCU number validation error:", xhr.statusText);
                        $("#btn_save_visitor_medical_checkup").removeClass('is-loading');
                        $("#btn_save_visitor_medical_checkup").prop('disabled', false);
                    }
                })
                */
            }, typingDelayVisitorMcu);
        });

        $(document).ready(function() {
            // MCU result status display
            $('#mcu_result').on('change', function() {
                const isFit = $(this).val() === 'Fit' || $(this).val() === 'Fit With Note' || $(this).val() === 'Fit With Recommendation';

                valueMcu = $(this).val();
                if(valueMcu == 'Fit' || valueMcu == 'Fit With Note' || valueMcu == 'Fit With Recommendation'){
                    document.getElementById('statusMcuApprove').innerText = 'Status MCU: Approved';
                    document.getElementById('statusMcuApprove').style.color = 'green';
                }else if(valueMcu == 'Currently Unfit'){
                    document.getElementById('statusMcuApprove').innerText = 'Status MCU: Need Review';
                    document.getElementById('statusMcuApprove').style.color = '#E89417';
                }else if(valueMcu == 'Unfit'){
                    document.getElementById('statusMcuApprove').innerText = 'Status MCU: Not Permitted';
                    document.getElementById('statusMcuApprove').style.color = '#900';
                }else{
                    document.getElementById('statusMcuApprove').innerText = '';
                }

                $('#column_verification_number, #column_mcu_result, #column_mcu_date')
                    .toggleClass('is-6', isFit)
                    .toggleClass('is-6', !isFit);

                $('#column_mcu_date_valid_until').toggle(isFit);
            });
        });

        function initDate(selector) {
            let config = {
                singleDatePicker: true,
                showDropdowns: true,
                autoUpdateInput: false, // biar input tetap kosong
                locale: {
                    format: 'DD/MM/YYYY',
                    cancelLabel: 'Clear'
                }
            };

            if (selector === 'mcu_date') config.maxDate = moment();

            $(`#${selector}`).daterangepicker(config);

            // biar pas pilih langsung isi
            $(`#${selector}`).on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY'));
            });

            // biar bisa dikosongkan lagi pas pencet cancel
            $(`#${selector}`).on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
        }

        const ageValue = $('#age').val();
        const genderValue = $('#gender_mcu').val();

        const params = {
            age: ageValue,
            gender: genderValue,
            hdl_cholesterol: 0,
            cholesterol_total: 0,
            systolic: 0
        }

        function framingHamRiskScore() {
            let persentase, statusPersentase, colorPersentase;
            $.ajax({
                url: framinghamScore,
                data: params,
                success: (res) => {
                    $('#framingham_risk_score').val(res)

                    gender = '{{ $visitor->gender ?? '' }}';

                    if(gender == 'Male'){
                        if(res <= -3){
                            persentase = '>1';
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == -2){
                            persentase = 1.1;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == -1){
                            persentase = 1.4;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 0){
                            persentase = 1.6;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 1){
                            persentase = 1.9;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 2){
                            persentase = 2.3;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 3){
                            persentase = 2.8;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 4){
                            persentase = 3.3;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 5){
                            persentase = 3.9;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 6){
                            persentase = 4.7;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 7){
                            persentase = 5.6;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 8){
                            persentase = 6.7;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 9){
                            persentase = 7.9;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 10){
                            persentase =  9.4;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 11){
                            persentase =  11.2;
                            statusPersentase = 'Intermediate';
                            colorPersentase = 'frs_intermediate';
                        }else if(res == 12){
                            persentase =  13.3;
                            statusPersentase = 'Intermediate';
                            colorPersentase = 'frs_intermediate';
                        }else if(res == 13){
                            persentase =  15.6;
                            statusPersentase = 'Intermediate';
                            colorPersentase = 'frs_intermediate';
                        }else if(res == 14){
                            persentase =  18.4;
                            statusPersentase = 'Intermediate';
                            colorPersentase = 'frs_intermediate';
                        }else if(res == 15){
                            persentase =  21.6;
                            statusPersentase = 'High';
                            colorPersentase = 'frs_high';
                        }else if(res == 16){
                            persentase =  25.3;
                            statusPersentase = 'High';
                            colorPersentase = 'frs_high';
                        }else if(res == 17){
                            persentase =  29.4;
                            statusPersentase = 'High';
                            colorPersentase = 'frs_high';
                        }else if(res >= 18){
                            persentase =  '>30';
                            statusPersentase = 'High';
                            colorPersentase = 'frs_high';
                        }
                    }else{
                        if(res <= -2){
                            persentase = '>1';
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == -1){
                            persentase = 1.0;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 0){
                            persentase = 1.2;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 1){
                            persentase = 1.5;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 2){
                            persentase = 1.7;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 3){
                            persentase = 2.0;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 4){
                            persentase = 2.4;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 5){
                            persentase = 2.8;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 6){
                            persentase = 3.3;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 7){
                            persentase = 3.9;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 8){
                            persentase = 4.5;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 9){
                            persentase = 5.3;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 10){
                            persentase =  6.3;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 11){
                            persentase =  7.3;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 12){
                            persentase =  8.6;
                            statusPersentase = 'Low';
                            colorPersentase = 'frs_low';
                        }else if(res == 13){
                            persentase =  10.0;
                            statusPersentase = 'Intermediate';
                            colorPersentase = 'frs_intermediate';
                        }else if(res == 14){
                            persentase =  11.7;
                            statusPersentase = 'Intermediate';
                            colorPersentase = 'frs_intermediate';
                        }else if(res == 15){
                            persentase =  13.7;
                            statusPersentase = 'Intermediate';
                            colorPersentase = 'frs_intermediate';
                        }else if(res == 16){
                            persentase =  15.9;
                            statusPersentase = 'Intermediate';
                            colorPersentase = 'frs_intermediate';
                        }else if(res == 17){
                            persentase =  18.51;
                            statusPersentase = 'Intermediate';
                            colorPersentase = 'frs_intermediate';
                        }else if(res == 18){
                            persentase =  21.5;
                            statusPersentase = 'High';
                            colorPersentase = 'frs_high';
                        }else if(res == 19){
                            persentase =  24.8;
                            statusPersentase = 'High';
                            colorPersentase = 'frs_high';
                        }else if(res == 20){
                            persentase =  27.5;
                            statusPersentase = 'High';
                            colorPersentase = 'frs_high';
                        }else if(res >= 21){
                            persentase =  '>30';
                            statusPersentase = 'High';
                            colorPersentase = 'frs_high';
                        }
                    }

                    $('#persentase_framingham_risk_score').val(persentase+' ('+statusPersentase+')').removeClass('frs_low frs_intermediate frs_high').addClass(colorPersentase)
                }
            })
        }

        $('#cholesterol_value,#hdl_value,#systolic_value').on('change', function() {
            console.log('=== INPUT FIELD CHANGED ===');
            console.log('Changed field:', $(this).attr('id'), 'New value:', $(this).val());

            const age = $('#age').val()
            const hdl = $('#hdl_value').val() || 0
            const cholesterolTotal = $('#cholesterol_value').val() || 0
            const systolic = $('#systolic_value').val() || 0

            console.log('Raw values - Age:', age, 'HDL:', hdl, 'Cholesterol:', cholesterolTotal, 'Systolic:', systolic);

            // Parse age from string like "25 Year, 3 Month, 15 Day"
            const ageMatch = age.match(/^(\d+)/);
            const parsedAge = ageMatch ? parseInt(ageMatch[0]) : 0;
            console.log('Age parsing - Original:', age, 'Extracted:', parsedAge);

            params.age = parsedAge;
            params.hdl_cholesterol = parseFloat(hdl)
            params.cholesterol_total = parseFloat(cholesterolTotal)
            params.systolic = parseFloat(systolic)

            console.log('Updated params before FRS calc:', JSON.stringify(params, null, 2));

            framingHamRiskScore() // Now active for testing
            console.log('=== END INPUT FIELD CHANGE ===\n');
        })

        $("input[type='radio']").on("click", function() {
            console.log('=== RADIO BUTTON CLICKED ===');
            console.log('Clicked radio - Name:', $(this).attr('name'), 'Value:', $(this).val());

            var selectedValues = {};

            $("input[type='radio']:checked").each(function() {
                var name = $(this).attr("name");
                var value = $(this).val();
                selectedValues[name] = value;
                console.log('Radio selected - Name:', name, 'Value:', value);
            });

            console.log('All selected radio values:', JSON.stringify(selectedValues, null, 2));

            Object.assign(params, selectedValues);

            console.log('Updated params with radio values:', JSON.stringify(params, null, 2));

            framingHamRiskScore() // Now active for testing
            console.log('=== END RADIO BUTTON CLICK ===\n');
        });

        $(document).ready(function() {
            console.log('=== DOCUMENT READY ===');
            console.log('Initializing visitor MCU form...');

            // Check if elements exist
            console.log('Form elements check:');
            console.log('  #cholesterol_value exists:', $('#cholesterol_value').length > 0);
            console.log('  #hdl_value exists:', $('#hdl_value').length > 0);
            console.log('  #systolic_value exists:', $('#systolic_value').length > 0);
            console.log('  Radio buttons exist:', $("input[type='radio']").length);
            console.log('  #age element exists:', $('#age').length > 0);
            console.log('  #gender_mcu element exists:', $('#gender_mcu').length > 0);

            // Log initial values
            console.log('Initial values:');
            console.log('  Age value:', $('#age').val());
            console.log('  Gender value:', $('#gender_mcu').val());

            submitVisitorMcuDokter();
            initDate('mcu_date')
            initDate('mcu_date_valid_until')

            // Test event handlers are working
            console.log('Testing event handlers...');
            setTimeout(function() {
                console.log('=== EVENT HANDLER TEST ===');

                // Trigger change event to test
                $('#cholesterol_value').trigger('change');
                console.log('Triggered cholesterol_value change event');

                // Test radio button event
                const firstRadio = $("input[type='radio']").first();
                if (firstRadio.length > 0) {
                    console.log('First radio button found:', firstRadio.attr('name'));
                } else {
                    console.log('No radio buttons found!');
                }

                console.log('=== END EVENT HANDLER TEST ===\n');
            }, 1000);

            console.log('Form initialization complete');
            console.log('=== END DOCUMENT READY ===\n');

            @if($isApproved)
                
                // Disable all input fields
                $('#form_create_visitor_medical_checkup input').prop('disabled', true);
                
                // Disable all select fields
                $('#form_create_visitor_medical_checkup select').prop('disabled', true);
                
                // Disable all textarea fields
                $('#form_create_visitor_medical_checkup textarea').prop('disabled', true);
                
                // Disable all radio buttons
                $('#form_create_visitor_medical_checkup input[type="radio"]').prop('disabled', true);
                
                // Disable SunEditor instances
                editors.forEach(e => {
                    if (e.instance && typeof e.instance.disabled === 'function') {
                        e.instance.disabled();
                    }
                });
                
                // Hide save button
                $('#btn_save_visitor_medical_checkup').hide();
                
                // Add visual indicator that form is locked
                $('#form_create_visitor_medical_checkup').prepend(
                    '<div class="notification is-info is-light" style="margin-bottom: 20px;">' +
                        '<button class="delete" onclick="this.parentElement.remove()"></button>' +
                        '<strong>Form Locked:</strong> This visitor has been approved (MCU FIT and Status Approved). ' +
                        'No further edits are allowed.' +
                    '</div>'
                );
            @endif
        });
    </script>

    <script>
        document.querySelectorAll('.sun-editor').forEach(function(el) {
            SUNEDITOR.create(el, {
                width: '100%',
                height: 200,
                fontSize: [8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36],
                defaultStyle: 'font-size:16px;',
                placeholder: el.getAttribute('placeholder') || 'Add a Note (Optional)'
            });
        });
    </script>
@endpush