@php
    $user_id = isset($user) ? $user->id : '';
    $competency_note =
        isset($employee_competency) && !empty($employee_competency->competency_note)
            ? $employee_competency->competency_note
            : '';
@endphp
<form id="form_create_employee_competency">
    <input type="hidden" name="user_id" value="{{ $user_id }}" id="user_id_competency">
    <input type="hidden" name="employee_competency" value="true">
    <div class="demo-card">
        <div class="card-inner">
            <div class="columns is-multiline">
                @foreach ($form as $item)
                    <div class="column is-12">
                        <div class="control">
                            @if (isset($user) && $item->file_name != null)
                                <label class="fs-12 fw-400 text-grey" for="={{ $item->name }}">
                                    {{ ucwords(str_replace('_', ' ', $item->name)) }} (File type:pdf | Max
                                    2MB)
                                    @if ($item->is_required)
                                        <sup class="text-danger">*</sup>
                                    @endif
                                </label>
                                @include('components.form.form-upload-file', [
                                    'id' => $item->name,
                                    'file' => $item->file_name,
                                ])
                            @else
                                @php
                                    $id = $item->name;
                                @endphp
                                <label class="fs-12 fw-400 text-grey" for="={{ $id }}">
                                    {{ ucwords(str_replace('_', ' ', $id)) }} (File type:pdf | Max 2MB)
                                    @if ($item->is_required)
                                        <sup class="text-danger">*</sup>
                                    @endif
                                </label>
                                @if (isset($item->file_name))
                                    @include('components.form.form-upload-file', [
                                        'id' => $item->name,
                                        'file' => $item->file_name,
                                    ])
                                @else
                                    @include('components.form.form-upload-file', [
                                        'id' => $id,
                                    ])
                                @endif
                            @endif
                        </div>
                    </div>
                @endforeach
                <div class="column is-12">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="competency_note">
                            @lang('app.note')
                        </label>
                        <textarea name="competency_note" id="competency_note" class="textarea" rows="4"
                            placeholder="Add a Note (Optional)">{{ $user->competency_note }}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('components.button.card-button-next-prev', [
        'prev' => true,
        'save' => true,
        'id' => 'employee_competency',
    ])
</form>

@include('components.modal.modal-alert-save', [
    'id' => 'modal-alert-save',
    'title' => __('app.alert_save_title'),
    'subtitle' => __('app.alert_save_subtitle'),
    'btn_submit' => 'btn_submit_employee',
])

<script>
    function submitEmployeeCompetency() {
        $('#btn_save_employee_competency').removeClass('is-loading')

        $.validator.addMethod(
            "fileSize",
            function(value, element, param) {
                if (element.files.length === 0) {
                    return this.optional(element) || false;
                }

                const fileSize = element.files[0].size;
                return fileSize <= param;
            },
            "File size must not exceed 2MB."
        );

        $.validator.addMethod(
            "fileExtension",
            function(value, element, param) {
                if (element.files.length === 0) {
                    return this.optional(element) || false;
                }

                const validExtensions = param.split(",");
                const fileName = element.files[0].name.toLowerCase();
                const fileExtension = fileName.split(".").pop();
                return validExtensions.includes(fileExtension);
            },
            "Please upload a valid image file (jpg, jpeg, png, pdf)."
        );

        $.validator.addMethod("maxsize", function(value, element, param) {
            if (this.optional(element)) {
                return true;
            }
            if (element.files && element.files[0]) {
                var fileSize = element.files[0].size;
                return fileSize <= param;
            }
            return true;
        }, "The file size must be less than 2MB.");

        $("#form_create_employee_competency").validate({
            rules: {
                @foreach ($form as $item)
                    {{ strtolower(str_replace(' ', '_', $item->name)) }}: {
                        required: {{ isset($user) || isset($item->file_name) ? 'false' : ($item->is_required ? 'true' : 'false') }},
                        fileExtension: "pdf",
                        maxsize: 2097152
                    },
                @endforeach
            },
            messages: {
                @foreach ($form as $item)
                    {{ strtolower(str_replace(' ', '_', $item->name)) }}: {
                        required: "The field is required.",
                        fileExtension: "Only PDF files are allowed.",
                        maxsize: "The file must be less than 2MB."
                    },
                @endforeach
            },
            errorClass: 'invalid-feedback',
            errorElement: 'div',
            errorPlacement: function(error, element) {
                if (element.is("input[type='file']")) {
                    error.insertAfter(element.closest('.file.is-boxed'));
                } 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 {
                    $(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 {
                    $(element).removeClass('is-danger');
                }
            },
            submitHandler: function(form) {
                if ($(form).valid()) {
                    $('#modal-alert-save').addClass('is-active');

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

                        let formData = new FormData(form);

                        @foreach ($form as $item)

                            const {{ str_replace(' ', '', $item->name) }} = $(
                                    '#{{ strtolower(str_replace(' ', '_', $item->name)) }}')[0]
                                .files[0];

                            if ({{ str_replace(' ', '', $item->name) }}) formData
                                .append("{{ strtolower(str_replace(' ', '_', $item->name)) }}",
                                    {{ strtolower(str_replace(' ', '_', $item->name)) }});
                        @endforeach

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

                                    setTimeout(() => {
                                        window.location.href = res.redirect_url
                                    }, 1000);
                                } else {
                                    $('#modal-alert-save').removeClass('is-active');
                                    $("#btn_save_employee_competency").prop('disabled',
                                        false);
                                    $('#btn_save_employee_competency').removeClass(
                                        'is-loading')

                                    $('#btn_cancel_modal-alert-save').prop('disabled',
                                        false)
                                    $('#btn_submit_employee').removeClass('is-loading')
                                    $('#btn_submit_employee').prop('disabled', false)

                                    showNotification('danger', 'Failed', res.message)
                                }
                            },
                            error: function(xhr, status, error) {
                                $('#modal-alert-save').removeClass('is-active');
                                $("#btn_save_employee_competency").prop('disabled',
                                    false);
                                $('#btn_save_employee_competency').removeClass(
                                    'is-loading')

                                $('#btn_cancel_modal-alert-save').prop('disabled',
                                    false)
                                $('#btn_submit_employee').removeClass('is-loading')
                                $('#btn_submit_employee').prop('disabled', false)
                                // 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 {
                                    showNotification('danger', 'Failed',
                                        'An unexpected error occurred. Please try again.'
                                    )
                                }
                            }
                        });
                    })
                }
            }
        });
    }

    $(document).ready(function() {
        submitEmployeeCompetency()
    })
</script>