@extends('admin.layout.master')
@section('content')

<style>
    .image_view {
        width: 80px;
        height: 60px;
        object-fit: cover;
        margin-bottom: 10px;
    }
</style>

@include('flash-message')
<div class="card sina-card">
    <div class="card-header d-flex justify-content-between align-items-center ">
        <h5 class="font-weight-bold mb-0">{{__('obs.employee')}} {{__('obs.registration')}} {{__('obs.form')}}</h5>
    </div>
    <link rel="stylesheet" href="{{asset('payroll_assets/emp_management/css/style.css')}}">
    <!-- End -->

        <div class="card-body">
            <div class="alert alert-danger div_error m-4" style="display: none" >

            </div>
        <form action="{{route('payroll.hrm.employee.save')}}" method="POST" id="employee_create_form" enctype="multipart/form-data">
                @csrf
            <input type="hidden" name="update_emp_id" id="update_emp_id" value="@if(!empty($emp_basic_info)) {{$emp_basic_info->id}} @else 0 @endif">
            <input type="hidden" name="offer_letter_id" id="offer_letter_id" value="" />

            @include('payroll.emp_management.basic_info.forms.basic_info')
            @include('payroll.emp_management.basic_info.forms.recruitment_info')
            @include('payroll.emp_management.basic_info.forms.attendance')
            @include('payroll.emp_management.basic_info.forms.salary')

            @include('payroll.emp_management.basic_info.forms.admin_info')
            @include('payroll.emp_management.basic_info.forms.account_info')

            @include('payroll.emp_management.basic_info.forms.personal_info')
            @include('payroll.emp_management.basic_info.forms.address')
            @include('payroll.emp_management.basic_info.forms.emergency_contact')
            @include('payroll.emp_management.basic_info.forms.job_description')

            {{-- @include('payroll.emp_management.basic_info.forms.facilities') --}}

            @include('payroll.emp_management.basic_info.forms.education')
            @include('payroll.emp_management.basic_info.forms.experience')

            @include('payroll.emp_management.basic_info.forms.skill')
            @include('payroll.emp_management.basic_info.forms.reference')
            @include('payroll.emp_management.basic_info.modal.show_file')

            <div class="text-center mt-3 mb-3">
                <button type="button" class="text-center btn btn-sm btn-success" onclick="save_employee('employee_create_form')">
                    {{ !$emp_basic_info ? __('obs.submit') : __('obs.update')}}
                </button>
            </div>
         </form>
            @if(empty($emp_basic_info))
                {{-- <div class="text-center mt-3 mb-3">
                    <button type="submit" class="btn btn-primary btn-md" onclick="insertBasicInfo()">{{__('obs.submit')}}
                    </button>
                </div> --}}

                {{-- <button type="submit" class="text-center btn btn-warning btn-md" onclick="saveBasicInfo()">{{__('obs.update')}}</button>
                <button type="submit" class="text-center btn btn-warning btn-md" onclick="addRecruitmentInfo()"> {{__('obs.update')}} </button>
                <button type="submit" class="text-center btn btn-warning btn-md" onclick="addAttendanceInfo()">{{__('obs.update')}} </button>
                <button type="submit" class="text-center btn btn-warning btn-md" onclick="addSalaryInfo()"> {{__('obs.update')}}  </button>
                <button type="submit" class="text-center btn btn-warning btn-md" onclick="addAdminRoleInfo()">  {{__('obs.update')}} </button>
                <button type="submit" class="text-center btn btn-warning btn-md" onclick="addAccountInfo()">{{__('obs.update')}} </button>
                <button type="submit" class="text-center btn btn-warning btn-md" onclick="addPersonalInfo()"> {{__('obs.update')}} </button>
                <button type="submit" class="text-center btn btn-warning btn-md" onclick="addBasicAddress()">{{__('obs.update')}}</button>
                <button type="submit" class="text-center btn btn-warning btn-md" onclick="addEmergencyInfo()"> {{__('obs.update')}}  </button>
                <button type="submit" class="text-center btn btn-warning btn-md" onclick="addReference()">{{__('obs.update')}} </button>
                <button type="submit" class="text-center btn btn-warning btn-md" onclick="addFacilities()">{{__('obs.update')}}  </button>
                <button type="submit" class="text-center btn btn-warning btn-md" onclick="addEducation()"> {{__('obs.update')}} </button>
                <button type="submit" class="text-center btn btn-warning btn-md" onclick="addExperience()"> {{__('obs.update')}} </button>
                <button type="submit" class="text-center btn btn-warning btn-md" onclick="addEmployeeSkill()"> {{__('obs.update')}} </button> --}}

            @endif
        </div>
    </div>
@endsection


@section('script')
<script src="{{ asset('payroll_assets/payroll_common.js') }}"></script>
<script>
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    let offerLetter = urlParams.get('offer_letter');
    let IsOfferLetter = urlParams.get('is_offer_letter');

    $(document).ready(function () {

        $('#profilePicture').change(function() {
            let reader = new FileReader();
            reader.onload = function(e) {
                $('#preview').attr('src', e.target.result).show();
            }
            reader.readAsDataURL(this.files[0]);
        });


        $('.select_2').select2();
        if(offerLetter) {
            offerLetter = JSON.parse(offerLetter);
            $('#emp_name').val(offerLetter.employee_name);
            $('#emp_title').val(offerLetter.title);
            $('#personal_email').val(offerLetter.email);
            $('#emp_department').val(offerLetter.department_id).trigger('change');
            $('#emp_designation').val(offerLetter.designation_id).trigger('change');
            $('#gross_salary').val(offerLetter.monthly_salary);
            $('#offer_letter_id').val(offerLetter.id);
            $('#emp_probation_period').val(Number(offerLetter.probation_period) * 30);
        }
    });



 function calculate_age(data) {
    let dob = $(data).val();
    let today = new Date();

    let first_date = moment(dob, 'DD-MM-YYYY');
    let last_date =moment(today, 'DD-MM-YYYY');
    let age = last_date.diff(first_date, 'years');

    $("#emp_age").val(age);
}



$("#emp_probation_period").keyup(function() {
    let provision = $(this).val();
    let emp_joining_date = $("#emp_joining_date").val();
    let emp_confirm_date = moment(emp_joining_date, 'DD-MM-YYYY').add(provision, 'days').format("DD-MM-YYYY");

    $("#emp_confirm_date").val(emp_confirm_date);
});


$("#emp_joining_date").on('change',function () {
    let provision = $("#emp_probation_period").val();
    let emp_joining_date = $(this).val();
    let emp_confirm_date = moment(emp_joining_date, 'DD-MM-YYYY').add(provision, 'days').format("DD-MM-YYYY");

    $("#emp_confirm_date").val(emp_confirm_date);
});

function viewFile(file){
    const baseUrl = window.location.origin;
    const fileUrl = `${baseUrl}/storage/employee/education/${file}`;
    let html = "File Not Found";
    if(fileUrl){
        html =`<iframe src="${fileUrl}" width="100%" height="100%"></iframe>`;
    }
    $('#file').html(html)
    $('#FileModal').modal('show');
}







const salary_calculate_by = @json(company_settings()?->salary_calculate_by);
const basic_calculation = @json(company_settings()?->basic_calculation);



 $(document).on('change',"#schedule_id",function () {
        var schedule_id = $("#schedule_id").val();
        var gross_salary = $("#gross_salary").val();
        $.ajax({
            method: "get",
            url: "/payroll/get_schedule_allowance",
            data: {schedule_id: schedule_id},
            dataType: "json",
            success: function (data) {
                console.log(data);
                $("#gross_allowance").html(data[0]);
                $("#other_allowance").html(data[1]);
            },
            error: function (err) {
                console.log(err);
            }
        });
        $("#basic_salary").val(0);
        $("#gross_salary").val(gross_salary);
        calculate_gross();
        calculate_basic();
    });


    function calculate_basic() {
        var schedule_id = $("#schedule_id").val();

        if (schedule_id === null || schedule_id === "") {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Schedule',
                text: 'Must select employe schedule.',
                confirmButtonText: 'OK'
            });
        }else{
            const basic_calculation_method = basic_calculation / 100;
            var gross_salary = parseFloat($("#gross_salary").val()) || 0;
            $("#basic_salary").val(gross_salary * basic_calculation_method);
            calculate_allowance();
        }
    }



    function calculate_gross() {
        var schedule_id = $("#schedule_id").val();

        if (schedule_id === null || schedule_id === "") {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Schedule',
                text: 'Must select employe schedule.',
                confirmButtonText: 'OK'
            });
        }else{
            calculate_allowance();
        }
    }

    function calculate_allowance() {
        var schedule_id = $("#schedule_id").val();
        var basic_salary = $("#basic_salary").val();
        var gross_salary = $("#gross_salary").val();
        $.ajax({
            method:"get",
            url:"/payroll/get_allowance_calculation",
            data:{schedule_id:schedule_id,basic_salary:basic_salary,gross_salary:gross_salary},
            dataType: "json",
            success:function (data) {
                console.log(data);

                if(data.length >0){
                    $.each(data, function( index, value ) {
                        $.each(value, function( key, val ) {
                            $("#allowance_"+key).val(val);
                        });
                    });
                }else{
                    $(".allowance").val(0);
                }
                if(salary_calculate_by == 1){
                    calculate_total_gross();
                }
            },
            error:function (err) {
                console.log(err);
            }
        });
    }

    function calculate_total_gross() {
        var total_allowance = 0;
        var basic_salary = $("#basic_salary").val();
        $('.allowance').each(function () {
            var allowance_amount = $(this).val();
            total_allowance += parseFloat(allowance_amount);
        });
        var total_gross_amount = Number(basic_salary) + Number(total_allowance);
        $("#gross_salary").val(total_gross_amount);

    };


function save_employee(formId) {
    const message = "Do you want to save employee?";
    const confirmButtonText = "Yes, save it!";
    const actionUrl = $('#' + formId).attr('action');
    const method = "POST";

    const requiredFields = {
        emp_code: 'Code',
        emp_name: 'Name',
        emp_types: 'Type',
        emp_designation: 'Designation',
        emp_department: 'Department',
        emp_cost_center: 'Employee Costcenter',
        schedule_id: 'Employee Schedule',
        emp_basic_salary: 'Basic Salary',
        emp_gross_salary: 'Gross Salary',
    };

    const missingFields = checkRequiredFields(formId, requiredFields);

    if (missingFields.length > 0) {
        Swal.fire({
            title: 'Missing Fields',
            html: '<div style="color: #ff0000;">Please fill all required fields:<br>' + missingFields.join('<br>') + '</div>',
            icon: 'error',
            confirmButtonText: 'OK'
        });
        return;
    }

    Swal.fire({
        title: 'Are you sure?',
        text: message,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: confirmButtonText
    }).then((result) => {
        if (result.isConfirmed) {
            $('#loader').show();
            const form = document.getElementById(formId);
            const formData = new FormData(form); // includes picture
            submitFormAjax(actionUrl, method, formData);
        }
    });
}


function checkRequiredFields(formId, requiredFields) {
    const missingFields = [];
    for (const field in requiredFields) {
        const input = document.getElementById(field);
        if (input && input.value.trim() === '') {
            missingFields.push(requiredFields[field]);
        }
    }
    return missingFields;
}


function submitFormAjax(actionUrl, method, formData) {
    $.ajax({
        url: actionUrl,
        type: method,
        data: formData,
        processData: false,   // ✅ required for FormData (files)
        contentType: false,   // ✅ required for FormData (files)
        success: function (response) {
            $('#loader').hide();

            if (response.status === '0' && response.errors) {
                let errorMessages = '';
                $.each(response.errors, function (key, value) {
                    errorMessages += '<span style="color: red;">' + value[0] + '</span><br>';
                });
                Swal.fire({
                    title: 'Validation Error!',
                    html: errorMessages,
                    icon: 'error'
                });
            } else {
                const successMessage = response.message || 'Form submitted successfully!';
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: successMessage,
                }).then(() => {
                    if(IsOfferLetter){
                        window.location.href = "{{ route('offer_letter.index') }}";
                        return;
                    }
                    window.location.reload();
                });
            }
        },
        error: function (xhr) {
            $('#loader').hide();
            console.error(xhr.responseText);
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'Error occurred: ' + xhr.status + ' - ' + xhr.statusText
            });
        }
    });
}

function supervisorDesignation() {
    let designationId = $('#emp_supervisor option:selected').data('desig');
    let designations = @json(@$designation_lists);
    let supervisorDesignation = designations.find(designation => designation.id == designationId);
    if(typeof supervisorDesignation !== 'undefined') $('#emp_supervisor_designation').val(supervisorDesignation.name)

}









</script>
<script src="{{asset('payroll_assets/emp_management/js/basic_info_append.js')}}"></script>
<script src="{{asset('payroll_assets/emp_management/js/insert_basic_info.js')}}"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
@endsection