@php
    $user_id = isset($user) ? $user->id : '';
    $competency_note =
        isset($employee_competency) && !empty($employee_competency->competency_note)
            ? $employee_competency->competency_note
            : '';
    $isNotNullWHC = isset($employee_competency) && !empty($employee_competency->working_at_high_certificate);
    $isNotNullSIC = isset($employee_competency) && !empty($employee_competency->scaffolding_inspector_certificate);
    $isNotNullSC = isset($employee_competency) && !empty($employee_competency->scaffolder_certificate);
@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="demo-title">
            <h3 class="title is-thin is-5">@lang('app.working_high_required_certificate')</h3>
        </div>
        <div class="card-inner">
            <div class="columns is-multiline">
                <div class="column is-12">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="=working_at_high_certificate">
                            @lang('app.working_high_certificate') (Max 2MB)
                            <sup class="text-danger">*</sup>
                        </label>
                        @if ($isNotNullWHC)
                            @include('components.form.form-upload-file', [
                                'id' => 'working_at_high_certificate',
                                'file' => $employee_competency->working_at_high_certificate,
                                'folder' => 'working_at_high',
                            ])
                        @else
                            @include('components.form.form-upload-file', [
                                'id' => 'working_at_high_certificate',
                            ])
                        @endif
                    </div>
                </div>
                <div class="column is-12">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="=scaffolding_inspector_certificate">
                            @lang('app.scaffolding_inspector_certificate') (Max 2MB)
                            <sup class="text-danger">*</sup>
                        </label>
                        @if ($isNotNullSIC)
                            @include('components.form.form-upload-file', [
                                'id' => 'scaffolding_inspector_certificate',
                                'file' => $employee_competency->scaffolding_inspector_certificate,
                                'folder' => 'working_at_high',
                            ])
                        @else
                            @include('components.form.form-upload-file', [
                                'id' => 'scaffolding_inspector_certificate',
                            ])
                        @endif
                    </div>
                </div>
                <div class="column is-12">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="=scaffolder_certificate">
                            @lang('app.scaffolder_certificate') (Max 2MB)
                            <sup class="text-danger">*</sup>
                        </label>
                        @if ($isNotNullSC)
                            @include('components.form.form-upload-file', [
                                'id' => 'scaffolder_certificate',
                                'file' => $employee_competency->scaffolder_certificate,
                                'folder' => 'working_at_high',
                            ])
                        @else
                            @include('components.form.form-upload-file', [
                                'id' => 'scaffolder_certificate',
                            ])
                        @endif
                    </div>
                </div>
                <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)">{{ $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: {
                working_at_high_certificate: {
                    required: {{ $isNotNullWHC ? 'false' : 'true' }},
                    fileExtension: "jpg,jpeg,png,pdf",
                    maxsize: 2097152
                },
                scaffolding_inspector_certificate: {
                    required: {{ $isNotNullSIC ? 'false' : 'true' }},
                    fileExtension: "jpg,jpeg,png,pdf",
                    maxsize: 2097152
                },
                scaffolder_certificate: {
                    required: {{ $isNotNullSC ? 'false' : 'true' }},
                    fileExtension: "jpg,jpeg,png,pdf",
                    maxsize: 2097152
                },
            },
            messages: {
                working_at_high_certificate: {
                    required: "The field is required.",
                    fileExtension: "Only JPG, JPEG, PNG and PDF files are allowed.",
                    maxsize: "The file must be less than 2MB."
                },
                scaffolding_inspector_certificate: {
                    required: "The field is required.",
                    fileExtension: "Only JPG, JPEG, PNG and PDF files are allowed.",
                    maxsize: "The file must be less than 2MB."
                },
                scaffolder_certificate: {
                    required: "The field is required.",
                    fileExtension: "Only JPG, JPEG, PNG and PDF files are allowed.",
                    maxsize: "The file must be less than 2MB."
                },
            },
            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');
                        $(this).prop('disabled', true)
                        $('#btn_cancel_modal-alert-save').prop('disabled', true)

                        let formData = new FormData(form);

                        var whc = $('#working_at_high_certificate')[0].files[0];
                        var sic = $('#scaffolding_inspector_certificate')[0].files[0];
                        var sc = $('#scaffolder_certificate')[0].files[0];

                        if (whc) formData.append('working_at_high_certificate', whc);
                        if (sic) formData.append('scaffolding_inspector_certificate', sic);
                        if (sc) formData.append('scaffolder_certificate', sc);

                        $.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)
                                }
                            },
                            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 {
                                    console.log(
                                        'An unexpected error occurred. Please try again.'
                                    );
                                }
                            }
                        });
                    })
                }
            }
        });
    }

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