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

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

    $user_id = isset($user) ? $user->id : '';

    $mcu_note = isset($employee_mcu) ? $employee_mcu->note : '';
    $redirect_url = $update_profile == 1 ? route('employee.detail', ['id' => encrypt($user->id)]) : null;

    $mcu_number =
        isset($employee_mcu) && $employee_mcu->mcu_number != null ? $employee_mcu->mcu_number : $generate_code_mcu;

    $grid_column = !empty($employee_mcu->mcu_result) && $employee_mcu->mcu_result == 'Fit' ? 'is-12' : 'is-6';

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

   $sqlMcu = $user->employeeMcu ?? null;

@endphp

@push("styles")
    <style>
        .color-note * {
           color: #283252;
        }
        input::placeholder {
            color: #363636 !important;
        }
    </style>
@endpush

<div class="columns is-multiline">
    <div class="column is-7"> 
        <form id="form_create_medical_checkup">
            <input type="hidden" name="user_id" value="{{ $user_id ?? '' }}" id="user_id_mcu">
            <input type="hidden" name="gender_mcu" value="{{ $user->gender ?? '' }}" id="gender_mcu">
            <input type="hidden" name="employee_mcu_id" value="{{ $sqlMcu->id ?? 0 }}" id="employee_mcu_id">
            <input type="hidden" name="mcu_dokter" value="true">
            <div class="demo-card">
                <div class="demo-title">
                    <h3 class="title is-thin is-5">@lang('app.medical_checkup')</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>
                                <input type="text" name="mcu_number" readonly value="{{$sqlMcu->mcu_number ?? $mcu_number}}" class="input is-warning-focus"
                                    placeholder="Verification Number" id="mcu_number">
                            </div>
                        </div>
                        <div class="column is-12">
                            @php 
                                $nomor = 1; 
                                $mcuFiles = collect(optional($user->employeeMcu)->fileMcu ?? [])
                                    ->sortByDesc('created_at')
                                    ->unique('document_name')
                                    ->values();
                            @endphp
                            @foreach ($mcuFiles as $item)
                                @include('components.util.show-file', [
                                    'file' => $item->document_hash_name,
                                    'file_name' => $item->document_name,
                                    'employee_name' => $user->name,
                                    'note_mcu' => $item->note_mcu,
                                    'valid_until' => $item->valid_until,
                                    'approved' => $item->approved,
                                    'nomor' => $nomor,
                                    "file_id" => $item->id ?? null,
                                    'sub_folder' => 'mcu-document',
                                    'size' => 'small',
                                    'statusMcu' => $statusMcu ?? null,
                                    'created_at' => date('d F Y', strtotime($item->created_at))
                                ])
                                @break
                            @php $nomor++; @endphp
                            @endforeach
                        </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)</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="{{ $user->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 = $sqlMcu->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

                                <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 = $sqlMcu->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

                                <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 = $sqlMcu->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
                                    <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"
                                                @if (optional($sqlMcu)->hypertensive == 'Yes') checked @endif value="Yes">
                                            <span></span>
                                            @lang('app.yes')
                                        </label>

                                        <label class="radio is-outlined is-warning">
                                            <input type="radio" name="hypertensive"
                                                @if (optional($sqlMcu)->hypertensive == 'No') checked @endif value="No">
                                            <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"
                                            @if (optional($sqlMcu)->smoking_habit == 'Yes') checked @endif value="Yes">
                                        <span></span>
                                        @lang('app.yes')
                                    </label>

                                    <label class="radio is-outlined is-warning">
                                        <input type="radio" name="smoking_habit"
                                            @if (optional($sqlMcu)->smoking_habit == 'No') checked @endif value="No">
                                        <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"
                                            @if (optional($sqlMcu)->diabetes == 'Yes') checked @endif value="Yes">
                                        <span></span>
                                        @lang('app.yes')
                                    </label>

                                    <label class="radio is-outlined is-warning">
                                        <input type="radio" name="diabetes"
                                            @if (optional($sqlMcu)->diabetes == 'No') checked @endif value="No">
                                        <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="{{ $sqlMcu->mcu_result ?? '' }}">{{ optional($sqlMcu)->mcu_result ?? __('app.select_mcu_result') }} </option>
                                        @foreach ($valueMcuResult as $value)
                                            @php
                                                $selected =
                                                    isset($employee_mcu) && $employee_mcu->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($sqlMcu)->mcu_date ? date('d/m/Y', strtotime(optional($sqlMcu)->mcu_date)) : '' }}" />
                                    <div class="form-icon">
                                        <i class="lnil lnil-calendar"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="column is-3" id="column_mcu_validation"
                            style="display: @if ($grid_column == 'is-3') block  @else none @endif">
                            <div class="control">
                                <label class="fs-12 fw-400 text-grey" for="mcu_validation">
                                    MCU Result Valid Until<sup class="text-danger">*</sup>
                                </label>
                                <div class="control has-icon">
                                    <input id="mcu_validation" name="mcu_validation" class="input is-warning-focus"
                                        value="{{ optional($sqlMcu)->mcu_validation ? date('d/m/Y', strtotime(optional($sqlMcu)->mcu_validation)) : '' }}" />
                                    <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">{!! optional($sqlMcu)->note !!}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('components.button.card-button-next-prev', [
                'prev' => $update_profile === 1 ? false : true,
                'next' => $update_profile === 1 ? false : true,
                'save' => $update_profile === 1 ? true : false,
                'id' => 'medical_checkup',
            ])
        </form>
    </div>
    <div class="column is-5">
        <div class="demo-card" style="width: 100%">
            <div class="demo-title">
                <h3 class="title is-thin is-5">Medical History</h3>
            </div>
            <div class="card-inner">
                @php 
                    $nomorTwo = 1; 
                    $mcuFiles = collect(optional($user->employeeMcu)->fileMcu ?? [])
                        ->sortByDesc('created_at')
                        ->unique('document_name')
                        ->values();
                @endphp
                
                <div class="collapse has-chevron">
                    <div class="collapse-header">
                        <h3>Document Mcu</h3>
                        <div class="collapse-icon">
                            <i data-feather="chevron-down"></i>
                        </div>
                    </div>
                    <div class="collapse-content">
                        @foreach ($mcuFiles as $item)
                            @if($nomorTwo != 1)
                                @include('components.util.show-file-three', [
                                    'file' => $item->document_hash_name,
                                    'file_name' => $item->document_name,
                                    'employee_name' => $user->name,
                                    'note_mcu' => $item->note_mcu,
                                    'valid_until' => $item->valid_until,
                                    'approved' => $item->approved,
                                    'nomor' => $nomorTwo,
                                    "file_id" => $item->id ?? null,
                                    'sub_folder' => 'mcu-document',
                                    'size' => 'small',
                                    'created_at' => date('d F Y', strtotime($item->created_at))
                                ])
                            @endif
                        @php $nomorTwo++; @endphp
                        @endforeach
                    </div>
                </div>
                @forelse($mcu_history ?? collect() as $mcuData)
                <div class="collapse has-chevron">
                    <div class="collapse-header">
                        <h3>{{ $mcuData->mcu_number }}</h3>
                        <div class="collapse-icon">
                            <i data-feather="chevron-down"></i>
                        </div>
                    </div>
                    <div class="collapse-content">
                        <div>
                            <span class="tag is-rounded is-light is-warning">
                                {{ $mcuData->mcu_date ? \Carbon\Carbon::parse($mcuData->mcu_date)->format('d M Y') : '—' }}
                            </span>
                            @php
                                $cls = "is-info";
                                $res = $mcuData->mcu_result;
                                switch($res){
                                    case "Fit":
                                    case "Fit With Note":
                                    case  "Fit With Recommendation":
                                    default:
                                        $cls= "is-info";
                                        break;
                                    case "Currently Unfit":
                                    case "Unfit":
                                        $cls = "is-danger";
                                        break;
                                }
                            @endphp
                             <span class="tag is-rounded is-light {{ $cls }}">
                                {{ $mcuData->mcu_result }}
                            </span>
                        </div>
                        <div class="is-divider" data-content="FRAMINGHAM RISK SCORE"></div>
                        <div class="columns is-multiline" style="font-size: 11px; margin-bottom: 0;">
                            <div class="column is-6" style="padding: 0.5rem;">
                                <span style="font-weight: 500;">Total Cholesterol:</span>
                                <span style="font-weight: 400;">{{ $mcuData->cholesterol_value ?? '-' }} mg/dL</span>
                            </div>
                            <div class="column is-6" style="padding: 0.5rem;">
                                <span style="font-weight: 500;">HDL Cholesterol:</span>
                                <span style="font-weight: 400;">{{ $mcuData->hdl_value ?? '-' }} mg/dL</span>
                            </div>
                            <div class="column is-6" style="padding: 0.5rem;">
                                <span style="font-weight: 500;">Systolic BP:</span>
                                <span style="font-weight: 400;">{{ $mcuData->systolic_value ?? '-' }} mmHg</span>
                            </div>
                            <div class="column is-6" style="padding: 0.5rem;">
                                <span style="font-weight: 500;">Hypertensive:</span>
                                <span style="font-weight: 400;">{{ $mcuData->hypertensive ?? '-' }}</span>
                            </div>
                            <div class="column is-6" style="padding: 0.5rem;">
                                <span style="font-weight: 500;">Smoking Habit:</span>
                                <span style="font-weight: 400;">{{ $mcuData->smoking_habit ?? '-' }}</span>
                            </div>
                            <div class="column is-6" style="padding: 0.5rem;">
                                <span style="font-weight: 500;">Diabetes:</span>
                                <span style="font-weight: 400;">{{ $mcuData->diabetes ?? '-' }}</span>
                            </div>
                            <div class="column is-12" style="padding: 0.5rem;">
                                <span style="font-weight: 500;">FRS:</span>
                                <span class="tag is-info is-small" style="margin-left: 5px;">{{ $mcuData->framingham_risk_score ?? '-' }}</span>
                            </div>
                        </div>
                        <div class="is-divider" data-content="NOTES"></div>
                        <div class="color-note">
                            {!! $mcuData->note !!}
                        </div>
                    </div>
                </div>
                @empty
                    @if($nomorTwo == 1)
                        <div>
                            <p class="has-text-grey">No MCU history available.</p>
                        </div>
                    @endif
                @endforelse
            </div>
        </div>
    </div>
</div>

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

@include('components.modal.modal-alert-mcu-approval',[
    'id' => 'modal-alert-save-mcu',
    'btn_submit' => 'btn_submit_mcu_approval',
    'UrluserSegment' => $UrluserSegment ?? 'javascript:history.back()'
])

<div id="modal_alert_mcu_number"></div>

@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], // daftar pilihan size
           defaultStyle: 'font-size:16px;' // default style isi editor
        });
        editors.push({ el: el, instance: instance });
      });

        function submitMcuDokter() {
            $('#btn_next_medical_checkup').removeClass('is-loading')

            $("#form_create_medical_checkup").validate({
                rules: {
                    mcu_number: {
                        required: true
                    },
                    mcu_validation: {
                        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_validation: {
                        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) {
                    @if ($update_profile === 1)
                        $('#modal-alert-save-mcu').addClass('is-active');

                        // // Hapus event handler lama untuk mencegah duplikasi
                        // $('#btn_submit_mcu, #btn_submit_mcu_approval').off('click');

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

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

                        // // Event untuk button di modal kedua (modal-mcu-approval)
                        // $('#btn_submit_mcu_approval').on('click', function() {
                        //     console.log('Approval button clicked');
                        //     $(this).addClass('is-loading');
                        //     $(this).prop('disabled', true);
                        //     $('#modal-mcu-approval').removeClass('is-active'); // Tutup modal approval
                        //     submitForm('{{ $redirect_url }}');
                        // });
                    @else
                        submitForm(form);
                    @endif

                }
            });
        }

        function submitForm(form, redirect) {
            editors.forEach(e => {
                e.el.value = e.instance.getContents();
                // atau e.instance.save(); kalau mau sync otomatis
            });

            $('#btn_next_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;
            // });

            // formData2 = JSON.stringify(obj, null, 2);

            //alert(formData2);
            $.ajax({
                url: urlStoreDataEmployee,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $("#btn_next_medical_checkup").prop('disabled', true);
                },
                success: function(res) {

                    if (redirect) {
                        window.location.href = redirect
                        return
                    }

                    if (res.status) {
                        $("#btn_next_medical_checkup").prop('disabled', false);
                        $('#btn_next_medical_checkup').removeClass('is-loading')

                        const currentTab = $('.tabs ul li.is-active');
                        const nextTab = currentTab.next('li');

                        if (nextTab.length) {
                            currentTab.removeClass('is-active');
                            nextTab.addClass('is-active');

                            const currentContentId = currentTab.data('tab');
                            const nextContentId = nextTab.data('tab');

                            $(`#${currentContentId}`).removeClass('is-active');
                            $(`#${nextContentId}`).addClass('is-active');
                            $('#user_id_bpjs').val(res.user_id)

                            setTimeout(function() {
                                document.getElementById('center-loading').style.display = 'none';
                            }, 1500);
                        
                        }else{
                            document.getElementById('center-loading').style.display = 'none';
                        }
                    }

                },
                error: function(xhr, status, error) {
                    $("#btn_next_medical_checkup").prop('disabled', false);
                    $('#btn_next_medical_checkup').removeClass('is-loading')
                    // Handle validation errors (status 422)
                    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. Please try again.');
                    }
                }
            });
        }

        let typingTimerMcu;
        const typingDelayMcu = 2000;

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

            clearTimeout(typingTimerMcu);
            const mcuNumer = $(this).val();

            const params = {
                mcu_number: mcuNumer,
                user_id: userID,
            }

            typingTimerMcu = setTimeout(() => {
                $.ajax({
                    url: urlCheckMcuNumber,
                    data: params,
                    success: (res) => {
                        if (res.status) {
                            $('#mcu_number').after(
                                '<span id="mcu_number-error" class="help text-danger">MCU Number is already registered</span>'
                            )
                            $('#modal_alert_mcu_number').html(res.html)
                            $("#btn_next_medical_checkup").removeClass('is-loading');
                            $("#btn_next_medical_checkup").prop('disabled', true);
                        } else {
                            $('#username-error').remove();
                            $("#btn_next_medical_checkup").prop('disabled', false);
                        }
                    },
                    error: (xhr) => {
                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            Object.keys(errors).forEach((field) => {
                                const errorMessage = errors[field][0];

                                $('#mcu_number-error').text(errorMessage)
                            });
                        } else {
                            console.error("Unexpected error:", xhr.statusText);
                        }
                        $("#btn_next_medical_checkup").removeClass('is-loading');
                        $("#btn_next_medical_checkup").prop('disabled', false);
                    }
                })
            }, typingDelayMcu);
        });

        $(document).ready(function() {

            valueMcu = '{{$sqlMcu->mcu_result ?? '' }}';

            if(valueMcu == 'Fit' || valueMcu == 'Fit With Note' || valueMcu == 'Fit With Recommendation'){
                document.getElementById('statusMcuApprove').innerText = 'Status MCU: Approved';
                document.getElementById('statusMcuApprove').style.color = 'green';
                $('#column_mcu_validation').toggle(valueMcu);
            }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', valueMcu)
                .toggleClass('is-6', !valueMcu);

        });

        $('#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_validation').toggle(isFit);
        });

        // function initDate(selector) {
        //     $(`#${selector}`).daterangepicker({
        //         singleDatePicker: true,
        //         showDropdowns: true,
        //         maxDate: selector == 'mcu_validation' ? false : moment(),
        //         locale: {
        //             format: 'DD/MM/YYYY'
        //         },
        //         startDate: $(`#${selector}`).val() ? moment($(`#${selector}`).val(), 'DD/MM/YYYY') : moment()
        //     });
        // }

        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 params = {
            age: $('#age').val(),
            gender: $('#gender_mcu').val(),
            hdl_cholesterol: 0,
            cholesterol_total: 0,
            systolic: 0
        }

        $(document).ready(function() {

            res = '{{$sqlMcu->framingham_risk_score ?? 0 }}';

            $('#framingham_risk_score').val(res);

            gender = '{{ $user->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)

        });


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

                    gender = '{{ $user->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() {
            const age = $('#age').val()
            const hdl = $('#hdl_value').val() || 0
            const cholesterolTotal = $('#cholesterol_value').val() || 0
            const systolic = $('#systolic_value').val() || 0

            params.age = parseInt(age.match(/^(\d+)/)[0]);
            params.hdl_cholesterol = parseFloat(hdl)
            params.cholesterol_total = parseFloat(cholesterolTotal)
            params.systolic = parseFloat(systolic)

            framingHamRiskScore()
        })

        $("input[type='radio']").on("click", function() {
            var selectedValues = {};

            $("input[type='radio']:checked").each(function() {
                var name = $(this).attr("name");
                var value = $(this).val();
                selectedValues[name] = value;
            });

            Object.assign(params, selectedValues);

            framingHamRiskScore()

        });

        $(document).ready(function() {
            submitMcuDokter();
            initDate('mcu_date')
            initDate('mcu_validation')

            @if ($update_profile === 1)
                $('#btn_submit_mcu').on('click', function() {
                    $(this).addClass('is-loading');
                    $(this).prop('disabled', true);
                    
                    const form = document.getElementById('form_create_medical_checkup');
                    submitForm(form, '{{ $redirect_url }}');
                });

                $('#btn_submit_mcu_approval').on('click', function() {
                    console.log('Approval button clicked');
                    $(this).addClass('is-loading');
                    $(this).prop('disabled', true);
                    $('#modal-mcu-approval').removeClass('is-active');
                    
                    const form = document.getElementById('form_create_medical_checkup');
                    submitForm(form, '{{ $redirect_url }}');
                });
            @endif
        });

        $('.huro-hamburger').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            $('#modal-mcu-approval').addClass('is-active');

        });

        // Handler untuk close modal
        $('#modal-mcu-approval .h-modal-close').on('click', function(e) {
            e.preventDefault();
            $('#modal-mcu-approval').removeClass('is-active');
        });

        // Close modal saat click background
        $('#modal-mcu-approval .modal-background').on('click', function() {
            $('#modal-mcu-approval').removeClass('is-active');
        });
    </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], // daftar ukuran font
                defaultStyle: 'font-size:16px;', // default font size
                placeholder: el.getAttribute('placeholder') || 'Add a Note (Optional)'
            });
        });
    </script>
@endpush