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

    $redirect_url = $update_profile == 1 ? route('employee.detail', ['id' => encrypt($user->id)]) : null;
@endphp
<style>
        table {
            border-spacing: 0 20px;
            border-collapse: separate;
        }
    </style>
<form id="form_create_competency_approval">
    <input type="hidden" name="user_id" value="{{ $user_id ?? '' }}" id="user_id_mcu">
    <input type="hidden" name="competency_approval_contract_user" value="true">
    <div class="page-content-inner">
        <div class="columns">
            <div class="column is-12">
                <div class="columns is-multiline">
                    <div class="column is-5 is-flex is-flex-direction-column">
                        <div class="card-profile-1 is-flex-grow-1">
                            <img src="{{ Util::linkFile('pas-photo', $user->pas_photo) }}" class="img-profile">
                            <div class="txtprofile1 mbts">{{ ucwords($user->name ?? '') }}</div>
                            <div class="txtprofile2">Role: {{ $user->roleEmployee->name ?? '-' }}</div>
                            <hr>
                            <table width="100%">
                                <tbody>
                                <tr>
                                    <td width="25%">
                                        <div class="profil-txt1">@lang('app.gender')</div>
                                    </td>
                                    <td>
                                        <div class="profil-txt2">
                                            @if ($user->gender == 'Male')
                                                <div style="display: flex; align-items: center;width:80px"
                                                    class="tag is-rounded is-info">
                                                    <img src="{{ url('assets/img/icons/male.svg') }}" class="mr-2">
                                                    @lang('app.male')
                                                </div>
                                            @else
                                                <div style="background-color: #E62864 !important;display: flex; align-items: center;width:80px"
                                                    class="tag is-rounded fs-12 fw-500 text-white">
                                                    <img src="{{ url('assets/img/icons/female.svg') }}" class="mr-2">
                                                    @lang('app.female')
                                                </div>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%">
                                        <div class="profil-txt1">@lang('app.age')</div>
                                    </td>
                                    <td>
                                        @php
                                        $birthDate = \Carbon\Carbon::parse($user->birth_date);
                                        $now = \Carbon\Carbon::now();
                                        $diff = $birthDate->diff($now);
                                    @endphp
                                    <div class="profil-txt2">
                                        {{ $diff->y }} {{ Str::plural('year', $diff->y) }}
                                        {{ $diff->m }} {{ Str::plural('month', $diff->m) }}
                                        {{ $diff->d }} {{ Str::plural('day', $diff->d) }}
                                    </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%">
                                        <div class="profil-txt1">@lang('app.birth_place')</div>
                                    </td>
                                    <td>
                                        <div class="profil-txt2">
                                            {{ ucwords($user->birth_place) }}
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%">
                                        <div class="profil-txt1">@lang('app.birth_date')</div>
                                    </td>
                                    <td>
                                        <div class="profil-txt2">
                                            {{ \Carbon\Carbon::parse($user->birth_date)->translatedFormat('d F Y') }}
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="column is-7 is-flex is-flex-direction-column">
                        <div class="card-profile-1 is-flex-grow-1">
                        <div class="txtmdc1" style="text-align: left;">KTP</div>
                            @if($user->ktp)
                                @include('components.util.show-file', [
                                    'file_url' => Util::linkFile('ktp', $user->ktp),
                                    'file_name' => $user->name . '_ktp',
                                    'employee_id' => $user->id,
                                    'sub_folder' => 'ktp',
                                    'file' => $user->ktp,
                                    'employee_name' => $user->name,
                                    'note_mcu' => '',
                                    'valid_until' => '',
                                    'approved' => '',
                                    'nomor' => '',
                                    'size' => 'small',
                                    'created_at' => date('d F Y', strtotime($user->created_at)),
                                ])
                            @endif
                            <br>
                        <div class="txtmdc1" style="text-align: left;">SKCK</div>
                            @if($user->skck)
                                @include('components.util.show-file', [
                                    'file_url' => Util::linkFile('skck', $user->skck),
                                    'file_name' => $user->name . '_skck',
                                    'employee_id' => $user->id,
                                    'sub_folder' => 'skck',
                                    'file' => $user->skck,
                                    'employee_name' => $user->name,
                                    'note_mcu' => '',
                                    'valid_until' => '',
                                    'approved' => '',
                                    'nomor' => '',
                                    'size' => 'small',
                                    'created_at' => date('d F Y', strtotime($user->created_at)),
                                ])
                            @endif
                            <br>
                            <div class="txtmdc1" style="text-align: left;">BPJS Tenaga Kerja</div>
                            @include('components.util.show-file', [
                                'file_url' => Util::linkFile(
                                    'bpjs-tenaga-kerja',
                                    $user->bpjs_tenaga_kerja),
                                'file_name' => Util::shortName(
                                    $user->name . '_bpjs_tenaga_kerja',
                                    20),
                                'employee_id' => $user->id,
                                'sub_folder' => 'bpjs-tenaga-kerja',
                                'file' => $user->bpjs_tenaga_kerja,
                                'employee_name' => $user->name,
                                'note_mcu' => '',
                                'valid_until' => '',
                                'approved' => '',
                                'nomor' => '',
                                'size' => 'small',
                                'created_at' => date('d F Y', strtotime($user->created_at)),
                            ])
                            <br>
                            <div class="txtmdc1" style="text-align: left;">BPJS Kesehatan</div>
                            @include('components.util.show-file', [
                                'file_url' => Util::linkFile(
                                    'bpjs-kesehatan',
                                    $user->bpjs_kesehatan),
                                'file_name' => Util::shortName(
                                    $user->name . '_bpjs_kesehatan',
                                    20),
                                'employee_id' => $user->id,
                                'sub_folder' => 'bpjs-kesehatan',
                                'file' => $user->bpjs_kesehatan,
                                'employee_name' => $user->name,
                                'note_mcu' => '',
                                'valid_until' => '',
                                'approved' => '',
                                'nomor' => '',
                                'size' => 'small',
                                'created_at' => date('d F Y', strtotime($user->created_at)),
                            ])
                            <br>
                            <div class="message">
                                <div class="message-body">
                                    <div class="txtmdc1 m-b-10">BPJS Notes</div>
                                    {!! $user->bpjs_note ?? '-' !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- <div class="demo-card">
        <div class="demo-title">
            <h3 class="title is-thin is-5">Employee Info</h3>
        </div>
        <div class="card-inner">
            <div class="columns is-multiline">
                <div class="column is-6">
                    <table width="100%">
                        <tr>
                            <td width="50%">
                                <div class="profil-txt1">@lang('app.name')</div>
                            </td>
                            <td>
                                <div class="profil-txt2">{{ ucwords($user->name ?? '') }}</div>
                            </td>
                        </tr>
                        <tr>
                            <td width="50%">
                                <div class="profil-txt1">@lang('app.role')</div>
                            </td>
                            <td>
                                <div class="profil-txt2">{{ ucwords($user->roleEmployee->name ?? '') }}</div>
                            </td>
                        </tr>
                        <tr>
                            <td width="50%">
                                <div class="profil-txt1"> @lang('app.email')</div>
                            </td>
                            <td>
                                <div class="profil-txt2">{{ $user->email ?? '-' }}</div>
                            </td>
                        </tr>
                        <tr>
                            <td width="50%">
                                <div class="profil-txt1">@lang('app.phone_number')</div>
                            </td>
                            <td>
                                <div class="profil-txt2">{{ $user->phone }}</div>
                            </td>
                        </tr>
                        <tr>
                            <td width="50%">
                                <div class="profil-txt1">@lang('app.address')</div>
                            </td>
                            <td>
                                <div class="profil-txt2">
                                    {{ ucfirst($user->address) }}
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td width="50%">
                                <div class="profil-txt1">@lang('app.nationality')</div>
                            </td>
                            <td>
                                <div class="profil-txt2">{{ $user->nationality }}</div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="column is-6">
                    <table width="100%">
                        <tr>
                            <td width="50%">
                                <div class="profil-txt1">@lang('app.gender')</div>
                            </td>
                            <td>
                                <div class="profil-txt2">
                                    @if ($user->gender == 'Male')
                                        <div style="display: flex; align-items: center;width:80px"
                                            class="tag is-rounded is-info">
                                            <img src="{{ url('assets/img/icons/male.svg') }}" class="mr-2">
                                            @lang('app.male')
                                        </div>
                                    @else
                                        <div style="background-color: #E62864 !important;display: flex; align-items: center;width:80px"
                                            class="tag is-rounded fs-12 fw-500 text-white">
                                            <img src="{{ url('assets/img/icons/female.svg') }}" class="mr-2">
                                            @lang('app.female')
                                        </div>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td width="50%">
                                <div class="profil-txt1">@lang('app.blood_type')</div>
                            </td>
                            <td>
                                <div class="profil-txt2">
                                    <div class="txt-blood">{{ $user->blood_type }}</div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td width="50%">
                                <div class="profil-txt1">@lang('app.birth_place')</div>
                            </td>
                            <td>
                                <div class="profil-txt2">{{ ucwords($user->birth_place) }}</div>
                            </td>
                        </tr>
                        <tr>
                            <td width="50%">
                                <div class="profil-txt1">@lang('app.birth_date')</div>
                            </td>
                            <td>
                                <div class="profil-txt2">{{ \Carbon\Carbon::parse($user->birth_date)->translatedFormat('d F Y') }}</div>
                            </td>
                        </tr>
                        <tr>
                            <td width="50%">
                                <div class="profil-txt1">@lang('app.age')</div>
                            </td>
                            <td>
                                @php
                                    $birthDate = \Carbon\Carbon::parse($user->birth_date);
                                    $now = \Carbon\Carbon::now();
                                    $diff = $birthDate->diff($now);
                                @endphp
                                <div class="profil-txt2">
                                    {{ $diff->y }} {{ Str::plural('year', $diff->y) }}
                                    {{ $diff->m }} {{ Str::plural('month', $diff->m) }}
                                    {{ $diff->d }} {{ Str::plural('day', $diff->d) }}
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="card-inner">
            @if(!empty($user->criticalActivities ?? []))
            <div class="card-profile-1">
                <div class="txtprofile1">Critical Activities</div>
                <div class="txtprofile2">Role: {{ $user->roleEmployee->name ?? '-' }}</div>
                <div class="m-t-20">
                    @foreach($user->criticalActivities as $act)
                        <span class="tag is-rounded is-warning text-white fs-10 m-l-5 m-r-5"> {{ $act->name ?? ''}}</span>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div> --}}
    <div class="demo-card">
        <div class="demo-title">
            <h3 class="title is-thin is-5">Personnel Competencies</h3>
        </div>
        <div class="card-inner">
            <div class="columns is-multiline">
                <div class="column is-12">
                    @php $nomor = 1; @endphp
                    @foreach($user->employeeCompetency ?? [] as $item)
                        @php
                            $extension = Util::checkExtension($item->file_name);
                            $file_url = Util::linkFile("document-competency", $item->file_name);

                            $urlGets = url()->full();
                            $path = parse_url($urlGets, PHP_URL_PATH);
                            $segments = explode('/', trim($path, '/'));
                        @endphp

                        @if ($extension == 'image')
                            <img style="height: 150px" src="{{ $file_url }}">
                        @else
                            <div class="flex-table flex-two">
                                <div class="flex-list-inner" style="text-align: left;">
                                    <div style="margin-bottom: 10px;"><b>{{$nomor }}. {{ $item->competency->name ?? '' }}</b></div>
                                    <div class="flex-table-item">
                                        <div class="flex-table-cell is-media is-grow">
                                            <div class="is-medium">
                                                <img style="height: 50px" src="{{ url('assets/img/icons/icon-pdf.svg') }}">
                                            </div>
                                            <div>
                                                <span class="profil-txt1">
                                                    <span data-filter-match="">{{ $item->original_name }}</span>
                                                    @if($segments[1]=='detail') <small style="margin-left:10px;">Upload date: {{ $item->created_at ?? '' }}</small> @endif
                                                </span>
                                            </div>
                                        </div>
                                        <div class="flex-table-cell cell-end">
                                            <span class="control">
                                                <label class="form-switch is-success">
                                                    <input type="hidden" name="approved_{{$item->id ?? $nomor ?? ''}}" id="approved_{{$item->id ?? $nomor ?? ''}}" value="0">
                                                    <input type="checkbox" class="is-switch" name="approved_{{$item->id ?? $nomor ?? ''}}" id="approved_{{$item->id ?? $nomor ?? ''}}" @if($item->status == "Approved") checked @endif value="1" @if($segments[1]=='detail') disabled @endif>
                                                    <i></i>
                                                </label>
                                            </span>

                                            &nbsp;&nbsp;
                                            <span class="profil-txt2"> Approved </span>
                                            &nbsp;&nbsp;
                                            @include('components.button.button-download-file', [
                                                "file" => $item->file_name,
                                                'file_url' => $file_url,
                                                'file_name' => $user->name . '_' . $item->file_name,
                                                'employee_id' => $user->id,
                                                "sub_folder" => "document-competency",
                                                "employee_name" => $user->name,
                                            ])
                                        </div>
                                    </div>

                                    <div class="field" style="max-width: 100%;">
                                        <div class="control">
                                            <textarea name="competency_notes_{{ $item->id ?? $nomor ?? ''}}" id="competency_notes_{{$item->id ?? $nomor ?? ''}}" class="textarea is-warning-focus sun-editor" rows="3">{!! $item->competency_note ?? '' !!}</textarea>
                                        </div>
                                    </div>

                                    <div class="control">
                                        <label class="fs-12 fw-400 text-grey" for="mcu_date">
                                            Valid Until <span class="has-text-warning">(Please ensure the valid until/expiration date matches the document)</span>
                                        </label>
                                        <div class="control">
                                            <input
                                                type="date"
                                                id="valid_until_{{ $item->id ?? $nomor ?? ''}}"
                                                name="valid_until_{{ $item->id ?? $nomor ?? ''}}"
                                                class="input is-warning-focus"
                                                value="{{ $item->valid_until ? date('Y-m-d', strtotime($item->valid_until)) : null }}"
                                                required
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @php $nomor++; @endphp
                    @endforeach
                </div>
            </div>
            @if($user->role_employee == \App\Models\User::EMPLOYEE_ROLE_OTHER)  {{-- lebih baik --}}
                <div class="columns is-multiline">
                    <div class="column is-12">

                        <div class="control ">
                            <label class="fs-12 fw-400 text-grey" for="blood_type">
                                Status Competency <sup class="text-danger">*</sup>
                            </label>
                            <div class="select is-fullwidth">
                                <select name="competency_status_other" id="competency_status_other">
                                    <option value="Need Review" {{ ($user->competency_status ?? '') === 'Need Review' ? 'selected' : '' }}>Need Review</option>
                                    <option value="Approved" {{ ($user->competency_status ?? '') === 'Approved' ? 'selected' : '' }}>Approved</option>
                                    <option value="Decline" {{ ($user->competency_status ?? '') === 'Decline' ? 'selected' : '' }}>Decline</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="columns is-multiline">
                <div class="column is-12">
                    <div class="control">
                        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
                            <label class="fs-12 fw-700 text-grey">Note</label>
                        </div>
                        <textarea name="notes" id="notes" class="textarea is-warning-focus sun-editor">{!! $user->competency_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' => 'competency_approval',
    ])
</form>

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

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

@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 submitCompetencyApproval() {
            $('#btn_next_competency_approval').removeClass('is-loading')
            $("#form_create_competency_approval").validate({
                rules: {
                },
                messages: {
                },
                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-competency').addClass('is-active');
                        $('#modal-alert-save-competency_approval').addClass('is-active');

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

                        //     submitForm('{{ $redirect_url }}')
                        // })
                    @else
                        submitForm(form)
                    @endif
                }
            });
        }

        function submitForm(form, redirect) {
            editors.forEach(e => {
                e.el.value = e.instance.getContents();
            });

            $('#btn_next_competency_approval').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_competency_approval").prop('disabled', true);
                },
                success: function(res) {
                    if (redirect) {
                        window.location.href = redirect
                        return
                    }

                    if (res.status) {
                        $("#btn_next_competency_approval").prop('disabled', false);
                        $('#btn_next_competency_approval').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');

                            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_competency_approval").prop('disabled', false);
                    $('#btn_next_competency_approval').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;

        function initDate(selector) {
            $(`#${selector}`).daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                autoUpdateInput: false, // biar input tetap kosong
                locale: {
                    format: 'DD/MM/YYYY',
                    cancelLabel: 'Clear'
                }
            });

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

        $(document).ready(function() {
            submitCompetencyApproval();

            @if ($update_profile === 1)
                // Handler untuk tombol Save di modal pertama
                $('#btn_submit_competency').on('click', function() {
                    $(this).addClass('is-loading');
                    $(this).prop('disabled', true);
                    
                    const form = document.getElementById('form_create_competency_approval');
                    submitForm(form, '{{ $redirect_url }}');
                });

                // Handler untuk tombol Save di modal konfirmasi (saat klik back)
                $('#btn_submit_competency_approval').on('click', function() {
                    $(this).addClass('is-loading');
                    $(this).prop('disabled', true);
                    $('#modal-alert-save-competency').removeClass('is-active');
                    
                    const form = document.getElementById('form_create_competency_approval');
                    submitForm(form, '{{ $redirect_url }}');
                });
            @endif
        });

        // Handler saat klik tombol BACK (hamburger)
        $('.huro-hamburger').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            $('#modal-alert-save-competency').addClass('is-active');
        });

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

        $('#modal-alert-save-competency .modal-background').on('click', function() {
            $('#modal-alert-save-competency').removeClass('is-active');
        });
    </script>
@endpush