@extends('layouts.master', [
    'title' => optional($user)->name ? 'Edit: '.$user->name : '',
    'icon_back' => true,
    'url' => route('user.index'),
])


@push('meta')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush
@push('styles')
<style type="text/css">
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
            color: #000;
            background-color: #e4e4e4;
          }

          .select2-container--default .select2-results__option {
            color: #000;
          }

          .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
            color: #000;
          }

          .select2-container--default .select2-selection--single .select2-selection__arrow {
            display: none;
          }

          a.jstree-anchor.jstree-clicked {
        background: #ebebeb;
    }
</style>
@endpush

@section('content')
    <form id="form_update_profile">
        <input type="hidden" name="user_id" id="user_id" value="{{ $user->id ?? '' }}">
        <div class="demo-card">
            <div class="demo-title">
                <h3 class="title is-thin is-5">@lang('app.personal_information')</h3>
            </div>
            <div class="card-inner">
                <input type="hidden" name="role" id="role" value="{{ $user->roles[0]->id }}">
                <div class="columns is-multiline">
                    <div class="column is-6">
                        @include('components.input.form-input', [
                            'name' => 'name',
                            'mandatory' => true,
                            'label' => __('app.name'),
                            'placeholder' => 'Full Name',
                            'value' => $user->name ?? '',
                        ])
                    </div>
                    <div class="column is-6">
                        @include('components.input.form-input', [
                            'name' => 'email',
                            'mandatory' => true,
                            'label' => __('app.email'),
                            'placeholder' => 'Email',
                            'value' => $user->email ?? '',
                        ])
                    </div>
                    <div class="column is-6" id="column_gender">
                        <div class="control">
                            <label class="fs-12 fw-400 text-grey" for="gender">@lang('app.gender')<sup
                                    class="text-danger">*</sup> </label>
                            <div class="select is-fullwidth">
                                <select id="gender" class="select2me" style="height: 38px !important" name="gender">
                                    <option value="">@lang('app.select_gender')</option>
                                    <option value="Male"
                                        @isset($user)
                                    @if ($user->gender == 'Male')
                                        selected
                                    @endif
                                @endisset>
                                        @lang('app.male')</option>
                                    <option value="Female"
                                        @isset($user)
                                    @if ($user->gender == 'Female')
                                        selected
                                    @endif
                                @endisset>
                                        @lang('app.female')</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="column is-6" id="column_company">
                        @include('components.input.form-input', [
                            'name' => 'company',
                            'mandatory' => true,
                            'label' => __('app.company'),
                            'placeholder' => 'My Company',
                            'value' => $user->company ?? '',
                        ])
                    </div>
                    <div class="column is-6" id="column_department">
                        <div class="control">
                            <label class="fs-12 fw-400 text-grey" for="role">@lang('app.department')<sup
                                    class="text-danger">*</sup> </label>
                            <div class="select is-fullwidth">
                                <select id="department" class="select2me" name="department" style="height: 38px !important">
                                    @foreach ($departments as $department)
                                        <option @if ($department->id === optional($user)->department_id) selected @endif
                                            value="{{ $department->id }}">
                                            {{ $department->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="column is-6" id="column_country">
                        <div class="control">
                            <label class="fs-12 fw-400 text-grey" for="nationality">@lang('app.select_nationality')<sup
                                    class="text-danger">*</sup> </label>
                            <div class="select is-fullwidth">
                                <select id="nationality" class="select2me" name="nationality" style="height: 38px !important">
                                    <option value="">@lang('app.select_nationality')</option>
                                    @foreach ($countries as $country)
                                        <option value="{{ $country->name }}"
                                            @isset($user)
                                        @if ($country->name == $user->nationality)
                                            selected
                                        @endif
                                    @endisset>
                                            {{ $country->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="column is-12" id="column_address">
                        <div class="control">
                            <label class="fs-12 fw-400 text-grey" for="address">@lang('app.address')</label>
                            <textarea name="address" class="textarea" id="address" rows="7" placeholder="Full Address">{{ $user->address ?? '' }}</textarea>
                        </div>
                    </div>
                    <div class="column is-12" id="column_pas_photo">
                        <div class="control">
                            <label class="fs-12 fw-400 text-grey" for="pas_photo">@lang('app.profile_picture')</label>
                            @if (optional($user)->pas_photo)
                                @include('components.form.form-upload-file', [
                                    'id' => 'pas_photo',
                                    'file' => $user->pas_photo,
                                    'folder' => 'pas-photo',
                                ])
                            @else
                                @include('components.form.form-upload-file', ['id' => 'pas_photo'])
                            @endif
                        </div>
                    </div>
                    <!-- for contracts -->
                    @role(['user_admin', 'super_admin', 'admin_contractor', 'contract_user'])
                        <div class="column is-12" id="column_contracts"></div>
                    @endrole

                    <div class="column is-12">
                        <div class="demo-card" style="height: 70px">
                            <div class="columns is-centered">
                                <div class="column is-12 has-text-centered">
                                    <div class="buttons is-centered">
                                        @if ($user)
                                            <a href="{{ route('user.detail', ['id' => encrypt($user->id)]) }}"
                                                class="button h-button">
                                                <span>@lang('app.cancel')</span>
                                            </a>
                                        @endif
                                        <button type="submit" form="form_update_profile" id="btn_update_profile"
                                            class="button h-button is-warning">
                                            <span>@lang('app.save')</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div id="modal_alert_username"></div>
    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        <link rel="stylesheet" href="{{ auto_asset('assets/css/select2/select2.min.css') }}">
        <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
        <script src="{{ asset('assets/js/upload-file.js') }}"></script>

        <script>
            const urlFormContractUserContract = '{{ route('user.form-contract-user-contract') }}'
            const urlCheckContractNumber = '{{ route('user.check-contract-number') }}'
            const urlFormAdminContractorContract = '{{ route('user.form-admin-contractor-contract') }}'
            const urlCheckDuplicateAdminContractor = '{{ route('user.check-duplicate-admin-contractor') }}'

            $(document).ready(function() {
                const roleId = parseInt($("#role").val(), 10);
                checkInputFieldBasedOnRole(roleId);

                $("#company").on("blur", function() {
                    const roleId = parseInt($("#role").val(), 10);

                    const companyName = $(this).val().trim();
                    const exceptCompany = "{{ $user->company }}";

                    // Only check for duplicates if role is 3 and the input is not empty
                    if (roleId === 3 && companyName !== "") {
                        checkDuplicateCompany(companyName, exceptCompany);
                    }
                });
            });

            function appendFieldContractUser() {
                if ($('#contract_user_contract_container').length === 0) {
                    $.ajax({
                        url: urlFormContractUserContract,
                        data : {
                            user_id: '{{ $user->id }}'
                        },
                        success: function(res) {
                            $("#column_contracts").append(res);
                        }
                    });
                }
            }


            function appendFieldAdminContractor() {
                if ($('#admin_contractor_contract_container').length === 0) {
                    $.ajax({
                        url: urlFormAdminContractorContract,
                        method: 'GET',
                        data : {
                            user_id: '{{ $user->id }}'
                        },
                        success: function(res) {
                            $("#column_contracts").append(res);
                        }
                    });
                }
            }


            function checkInputFieldBasedOnRole(roleId){
                switch(roleId) {
                    case 1: // superadmin
                    case 2: // user admin
                        $("#company").val("PetroChina International Jabung Ltd");
                        $("#company").attr("readonly", true);
                        $("#column_gender").hide();
                        $("#column_department").show();
                        $("#column_address").show();
                        $("#column_pas_photo").hide();
                        $("#column_contracts").empty();
                        break;
                    case 3: // admin_contractor
                        $("#company").val("{{ $user->company ?? '' }}");
                        $("#company").removeAttr("readonly");
                        $("#column_gender").hide();
                        $("#column_department").hide();
                        $("#column_address").show();
                        $("#column_pas_photo").hide();
                        $("#column_contracts").empty();
                        appendFieldAdminContractor();
                        break;
                    case 4: // contract_user
                        $("#company").val("PetroChina International Jabung Ltd");
                        $("#company").attr("readonly", true);
                        $("#column_gender").hide();
                        $("#column_department").show();
                        $("#column_address").hide();
                        $("#column_pas_photo").hide();
                        $("#column_contracts").empty();
                        appendFieldContractUser();
                        break;
                    case 5: // office admin
                    case 6: // dokter
                    case 7: // security
                        $("#company").val("PetroChina International Jabung Ltd");
                        $("#company").attr("readonly", true);
                        $("#column_gender").show();
                        $("#column_department").show();
                        $("#column_address").show();
                        $("#column_pas_photo").show();
                        $("#column_contracts").empty();
                        break;
                    default:
                        $("#company").val("{{ $user->company ?? '' }}");
                        $("#company").removeAttr("readonly");
                        $("#column_gender").show();
                        $("#column_department").show();
                        $("#column_address").show();
                        $("#column_pas_photo").show();
                        $("#column_contracts").empty();
                        break;
                }
            }

            function checkDuplicateCompany(companyName, exceptCompanyName) {
                $('#company-error').remove();
                $.ajax({
                    url: urlCheckDuplicateAdminContractor,
                    method: "GET",
                    data: {
                        company: companyName,
                        except_company: exceptCompanyName,
                    },
                    success: function (response) {
                        const exists = response?.data?.exists === 1;

                        if (exists) {
                            $('#company').after(
                                '<span id="company-error" class="help text-danger">Company is already registered</span>'
                            )
                            $('#btn_update_profile').removeClass('is-loading').prop("disabled", true);

                        } else {
                            $('#company-error').remove();
                            $('#btn_update_profile').prop("disabled", false);
                        }
                    },
                    error: function (err) {
                        console.error("Failed to check company", err);
                    }
                });
            }


            const urlCheckIdentity = '{{ route('employee.check-identity') }}'
            const urlUpdateProfile = '{{ route('user.update') }}'

            $(document).ready(function() {
                const typingDelay = 500;
                let typingTimer;

                $('#email').on('keyup', function() {
                    $('#email-error').remove(); // hapus error lama

                    const email = $(this).val().trim();
                    const userID = $('#user_id').val() || null;

                    // jangan kirim kalau kosong
                    if (!email) return;

                    // debounce AJAX
                    clearTimeout(typingTimer);
                    typingTimer = setTimeout(() => {
                        $.ajax({
                            url: urlCheckIdentity, // pastikan ini URL valid
                            method: 'GET',
                            data: {
                                email: email,
                                user_id: userID
                            },
                            success: function(res) {
                                $('#email-error').remove(); // hapus error lama

                                if (res.status) {
                                    // muncul error
                                    $('#email').after('<span id="email-error" class="help text-danger">Email is already registered</span>');
                                    $('#modal_alert_email').html(res.html || '');
                                    $('#email').focus();
                                    $("#btn_update_profile").removeClass('is-loading').prop('disabled', true);
                                } else {
                                    // valid
                                    $("#btn_update_profile").prop('disabled', false);
                                }
                            },
                            error: function(err) {
                                console.error("Failed to check email:", err);
                            }
                        });
                    }, typingDelay);
                });
            });

            function submitEditProfile() {
                $('#btn_update_profile').removeClass('is-loading')

                $.validator.addMethod("validDateRange", function(value, element) {
                    const datePattern = /^\d{2}\/\d{2}\/\d{4} - \d{2}\/\d{2}\/\d{4}$/;

                    if (!datePattern.test(value)) {
                        return false;
                    }

                    const dates = value.split(" - ");
                    const startParts = dates[0].split("/");
                    const endParts = dates[1].split("/");

                    const startDate = new Date(startParts[2], startParts[1] - 1, startParts[0]);
                    const endDate = new Date(endParts[2], endParts[1] - 1, endParts[0]);

                    return startDate <= endDate;
                }, "Please enter a valid date range (DD/MM/YYYY - DD/MM/YYYY) with the start date before the end date.");

                $.validator.addMethod('regex', function(value, element, pattern) {
                    return this.optional(element) || pattern.test(value);
                }, 'Please enter a valid value.');

                $.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_update_profile").validate({
                    rules: {
                        name: {
                            required: true
                        },
                        gender: {
                            required: false
                        },
                        company: {
                            required: true
                        },
                        department: {
                            required: false
                        },
                        email: {
                            required: true
                        },
                        nationality: {
                            required: true
                        },
                        work_period: {
                            required: false,
                            validDateRange: true
                        },
                        pas_photo: {
                            fileExtension: "jpeg,jpg,png,pdf",
                            maxsize: 2097152
                        },
                    },
                    messages: {
                        name: {
                            required: "The field is required."
                        },
                        gender: {
                            required: "Please select the gender"
                        },
                        role: {
                            required: "Please select the Role"
                        },
                        company: {
                            required: "The field is required."
                        },
                        department: {
                            required: "Please select the Department."
                        },
                        nationality: {
                            required: "Please select the nationality"
                        },
                        email: {
                            email: "Please enter a valid email address."
                        },
                        work_period: {
                            required: "The work period field is required.",
                            validDateRange: "Invalid format or end date must be after start date."
                        },
                        pas_photo: {
                            fileExtension: "Only PDF files are allowed.",
                            maxsize: "The KTP file must be less than 2MB.",
                            maxsize: "The pas photo must be less than 2MB."
                        },
                    },

                    errorClass: 'invalid-feedback help text-danger',
                    errorElement: 'div',
                    errorPlacement: function(error, element) {
                        error.insertAfter(element);
                    },
                    highlight: function(element) {
                        $(element).addClass('is-danger');
                        if ($(element).is("input[type='file']")) {
                            $(element).closest('.file.is-boxed').find('.file-cta').addClass('is-invalid');
                        } else if ($(element).is("select")) {
                            const originalFirstOption = $(element).data('originalFirstOption');
                            if (originalFirstOption) {
                                $(element).find('option:first').text(originalFirstOption);
                                $(element).find('.is-fullwidth').addClass('mb-2');
                            }
                        }
                    },
                    unhighlight: function(element) {
                        $(element).removeClass('is-danger');
                        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);
                                $(element).find('.is-fullwidth').removeClass('mb-2');
                            }
                        }
                    },
                    submitHandler: function(form) {
                        // ✅ CEK FLAG SEBELUM SUBMIT
                        if (window.hasContractError === true) {
                            $('#btn_update_profile').removeClass('is-loading');
                            showNotification('error', 'error', 'Please fix contract number errors before submitting');
                            return false; // STOP SUBMIT
                        }
                        
                        $('#btn_update_profile').addClass('is-loading')

                        let formData = new FormData(form);

                        var pasPhoto = $('#pas_photo')[0].files[0];
                        if (pasPhoto) formData.append('pas_photo', pasPhoto);


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

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

                                    if (res.status) {
                                        showNotification('primary', 'success', res.message)
                                        setTimeout(() => {
                                            window.location.href = res.redirect_url
                                        }, 1000);
                                    } else {
                                        showNotification('error', 'error',
                                            'An error occurred while updating the status.')
                                        $("#btn_update_profile").prop('disabled', false);
                                        $('#btn_update_profile').removeClass('is-loading')
                                    }

                                } else {
                                    $("#btn_update_profile").prop('disabled', false);
                                    $('#btn_update_profile').removeClass('is-loading')
                                }

                            },
                            error: function(xhr, status, error) {
                                $("#btn_update_profile").prop('disabled', false).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.');
                                }
                            }
                        });
                    }
                });
            }

            var typingTimer;
            const typingDelay = 2000;

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

                clearTimeout(typingTimer);
                const username = $(this).val();

                const params = {
                    username: username,
                }

                if (userID !== null) {
                    params.user_id = userID
                }

                typingTimer = setTimeout(() => {
                    $.ajax({
                        url: urlCheckIdentity,
                        data: params,
                        success: (res) => {
                            if (res.status) {
                                $('#username').after(
                                    '<span id="username-error" class="help text-danger">Username is already registered</span>'
                                )
                                $('#modal_alert_username').html(res.html)
                                $("#btn_update_profile").removeClass('is-loading');
                                $("#btn_update_profile").prop('disabled', true);
                            } else {
                                $('#username-error').remove();
                                $("#btn_update_profile").prop('disabled', false);
                            }
                        }
                    })
                }, typingDelay);
            });

            $('#nationality').on('change', function() {
                const id = $(this).val()

                if (id === '' || id === 'Indonesia') {
                    $('#username').attr('placeholder', 'ID Number (NIK)')
                } else {
                    $('#username').attr('placeholder', 'ID Number (KITAS)')
                }
            })

            function daterangeWorkPeriod() {
                let start = moment();
                let end = moment().add(28, 'days');

                $('#work_period').val(start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'));

                $('#work_period').daterangepicker({
                    autoUpdateInput: false,
                    singleDatePicker: false,
                    showDropdowns: true,
                    // minDate: moment(),
                    startDate: start,
                    endDate: end,
                    locale: {
                        format: 'DD/MM/YYYY',
                        applyLabel: "Apply",
                        cancelLabel: "Clear"
                    }
                });

                $('#work_period').on('apply.daterangepicker', function(ev, picker) {
                    $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
                });

                $('#work_period').on('cancel.daterangepicker', function(ev, picker) {
                    $(this).val('');
                });
            }

            $(document).ready(function() {
                submitEditProfile();
                daterangeWorkPeriod()
            });
        </script>
    @endpush
@endsection