<?php
include($_SERVER['DOCUMENT_ROOT'] . "/COMPONENTS/root/path.php");
echo "<h5 class='userId' style='display:none;'>" . $_GET['userId'] . "</h5>";
?>
<style>
    .avatar-upload {
        position: relative;
        max-width: 210px;
        margin-left: 10px;
        margin: -5px auto;
    }

    .avatar-upload .avatar-edit {
        position: absolute;
        right: 12px;
        z-index: 1;
        top: 10px;
    }

    .avatar-upload .avatar-edit input {
        display: none;
    }

    .avatar-upload .avatar-edit input+label {
        display: inline-block;
        width: 34px;
        height: 34px;
        margin-bottom: 0;

        background: #FFFFFF;
        border: 1px solid transparent;
        -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        font-weight: normal;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    .avatar-upload .avatar-edit input+label:hover {
        background: #f1f1f1;
        border-color: #d6d6d6;
    }

    .avatar-upload .avatar-edit input+label:after {
        color: #757575;
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        text-align: center;
        margin: auto;
    }

    .avatar-upload .avatar-preview {
        width: 200px;
        height: 210px;
        position: relative;
        border: 6px solid #F8F8F8;
        -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    }

    .avatar-upload .avatar-preview>div {
        width: 100%;
        height: 100%;

        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    @media (max-width: 1024px) {
        .mobilePad {
            padding-left: 10px !important;
        }
    }

    #tableProfile {
        border: 1px solid #ccc;
        border-collapse: collapse;
        table-layout: fixed;
        width: 100%;
    }



    #tableProfile tr {
        border: 1px solid #ddd;
        padding: .15em;
    }

    #tableProfile tr:nth-child(even) {
        /* background: #f8f8f8; */
    }

    #tableProfile th,
    #tableProfile td {
        padding: .455em;
        text-align: left;
    }

    #tableProfile th {
        /* background: #999; */
        color: #fff;
        font-size: .85em;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    #tableProfile td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px !important;
    }

    #tableProfile td:nth-child(2) {
        color: rgb(102, 102, 102) !important;
        font-weight: 200 !important;
    }

    h1 {
        position: relative;
        padding: 0;
        margin: 0;
        font-family: "Raleway", sans-serif;
        font-weight: 300;
        font-size: 18px;
        color: #080808;
        -webkit-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

    h1 span {
        display: block;
        font-size: 0.5em;
        line-height: 0.2;
    }

    h1 em {
        font-style: normal;
        font-weight: 600;
    }

    /* === HEADING STYLE #1 === */

    .one h1 {
        text-align: center;
        text-transform: uppercase;
        padding-bottom: 2px;
        font-size: 12px;
        font-weight: 400;
    }

    .one h1:before {
        width: 28px;
        height: 5px;
        display: block;
        content: "";
        position: absolute;
        bottom: 2px;
        left: 50%;
        margin-left: -14px;
        background-color: #f15a2b;
    }

    .one h1:after {
        width: 100px;
        height: 1px;
        display: block;
        content: "";
        position: relative;
        margin-top: 10px;
        left: 50%;
        margin-left: -50px;
        background-color: #f15a2b;
    }
</style>


<div class="row">

    <div class='col-md-4' style='padding-top:20px;'>

        <div class="avatar-upload">
            <div class="avatar-preview ">
                <div class="imagePreview"></div>
            </div>
        </div>
        <div style='text-align:center; margin-top:10px;'>
            <h1 class="fullname" style='color:black;'>fullname</h1>
        </div>


        <div style='text-align:center; margin-top:10px;  '>
            <p style='font-size:18px; margin-top:-10px; font-size:13px;'><span class="status" style='color:black; font-weight:400; color:green;'>country</span></p>
            <p style="margin-top:-10px; display:none;" class="rejectReason"><span style="color:black; font-weight:500;">Reject Reason:</span> <span style="color:red" class="rejectReason"></span></p>
        </div>


        <div>
            <div class="one">
                <h1>Basic Info</h1>
            </div>

            <table id="tableProfile">
                <tr>
                    <td style='color:black;'>Unique User ID:</td>
                    <td class="staff_id" style='color:black;'>N/A</td>
                </tr>

                <tr>
                    <td style='color:black;'>Date Of Birth:</td>
                    <td class='dob' style='color:black;'>N/A</td>
                </tr>
                <tr>
                    <td style='color:black;'>Gender:</td>
                    <td class='gender' style='color:black;'>N/A</td>
                </tr>
                <tr class="contact">
                    <td style='color:black;'>Email:</td>
                    <td class='email' style='color:black;'>N/A</td>
                </tr>
                <tr class="contact">
                    <td style='color:black;'>Mobile Number:</td>
                    <td class='phone' style='color:black;'>N/A</td>
                </tr>
                <tr class="contact">
                    <td style='color:black;'>Whatsapp Number:</td>
                    <td class='whatsapp_no' style='color:black;'>N/A</td>
                </tr>
                <tr>
                    <td style='color:black;'>Country:</td>
                    <td class='country' style='color:black;'>N/A</td>
                </tr>
                <tr class="contact">
                    <td style='color:black;'>Address:</td>
                    <td class='address' style='color:black;'>N/A</td>
                </tr>
            </table>
        </div>

        <div style='margin-top:20px;'>
            <div class="one">
                <h1>Job Details</h1>
            </div>

            <table id="tableProfile">
                <tr>
                    <td style='color:black;'>Job Title / Position:</td>
                    <td class='role' style='color:black;'>N/A</td>
                </tr>

                <tr>
                    <td style='color:black;'>Department:</td>
                    <td class='department' style='color:black;'>N/A</td>
                </tr>
                <tr>
                    <td style='color:black;'>Employment Status:</td>
                    <td class='employment_status' style='color:black;'>N/A</td>
                </tr>

            </table>
        </div>

    </div>

    <div class='col-md-4'>


        <div>
            <div class="one">
                <h1>Education Info</h1>
            </div>

            <table id="tableProfile">
                <tr>
                    <td style='color:black;'>Highest Education:</td>
                    <td class='qualification' style='color:black;'>N/A</td>
                </tr>
                <tr>
                    <td style='color:black;'>Start Date:</td>
                    <td class='education_start_date' style='color:black;'>N/A</td>
                </tr>
                <tr>
                    <td style='color:black;'>End Date:</td>
                    <td class='education_end_date' style='color:black;'>N/A</td>
                </tr>
            </table>
        </div>

        <div style='margin-top:20px;'>
            <div class="one">
                <h1>Experience</h1>
            </div>
            <table id="tableProfile">
                <tr>
                    <th style="color:black"> Skill / Experience</th>
                </tr>
            </table>
            <table id="tableProfile">

                <tbody class='experience_area'>

                </tbody>
            </table>
        </div>

        <div style='margin-top:20px;'>
            <div class="one">
                <h1>Payroll & Compensation</h1>
            </div>
            <table id="tableProfile">
                <tr>
                    <th style="color:black"> Payroll & Compensation</th>
                </tr>
            </table>
            <table id="tableProfile">
                <tbody>
                    <tr>
                        <td style='color:black;'>Salary / Wage Information:</td>
                        <td class="salary_wage_information" style='color:black;'>N/A</td>
                    </tr>

                    <tr>
                        <td style='color:black;'>Bank Account Details:</td>
                        <td class="bank_account_details" style='color:black;'>N/A</td>
                    </tr>

                    <tr>
                        <td style='color:black;'>SSNIT Number:</td>
                        <td class="ssnit_number" style='color:black;'>N/A</td>
                    </tr>

                </tbody>
            </table>
        </div>

        <div style='margin-top:20px;'>
            <div class="one">
                <h1>Health & Safety</h1>
            </div>
            <table id="tableProfile">
                <tr>
                    <th style="color:black">Health & Safety</th>
                </tr>
            </table>
            <table id="tableProfile">
                <tbody>
                    <tr>
                        <td style='color:black;'>Medical Conditions / Allergies:</td>
                        <td class="medical_conditions_allergies" style='color:black;'>N/A</td>
                    </tr>

                    <tr>
                        <td style='color:black;'>Safety Training Completion:</td>
                        <td class="safety_training_completion" style='color:black;'>N/A</td>
                    </tr>

                    <tr>
                        <td style='color:black;'>Emergency Contact:</td>
                        <td class="emergency_phone" style='color:black;'>N/A</td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>


    <div class='col-md-4'>

        <div>
            <div class="one">
                <h1>Work History / Previous Employment Details</h1>
            </div>

            <table id="tableProfile">
                <tbody class="work_experience">

                </tbody>
            </table>
        </div>


        <div style='margin-top:20px;'>
            <div class="one">
                <h1>Other Documents</h1>
            </div>
            <table id="tableProfile">
                <tr>
                    <th style="color:black"> Documents</th>
                </tr>
            </table>
            <table id="tableProfile">
                <tbody class="documents">

                </tbody>
            </table>
        </div>

    </div>

    <div class='col-md-12' style='text-align:center; margin-top:20px;'>
        <button type="button" class="btn btn-dark printProfile" data-url="/COMPONENTS/reports/print-staff-profile.php"><span class='submitLoader'><i class="fa fa-print"></i> Print</span></button>
    </div>

</div>


<script>
    var userId = $('.userId').html();
    if (role == "Employer") {
        $(".contact").hide();
    }
    $.getJSON(domain_api + "/staff/staff.php?userId=" + encodeURIComponent(userId), function(data) {
        sessionStorage.setItem("role", data.staff_information[0].role);
        sessionStorage.setItem("department", data.staff_information[0].department);
        sessionStorage.setItem("employment_status", data.staff_information[0].employment_status);
        sessionStorage.setItem("profile_photo", data.staff_information[0].profile_photo);
        sessionStorage.setItem("unique_user_id", data.staff_information[0].unique_user_id);
        sessionStorage.setItem("email", data.staff_information[0].email);
        sessionStorage.setItem("phone", data.staff_information[0].phone);
        sessionStorage.setItem("whatsapp_no", data.staff_information[0].whatsapp_no);
        sessionStorage.setItem("title", data.staff_information[0].title);
        sessionStorage.setItem("first_name", data.staff_information[0].first_name);
        sessionStorage.setItem("middle_name", data.staff_information[0].middle_name);
        sessionStorage.setItem("last_name", data.staff_information[0].last_name);
        sessionStorage.setItem("gender", data.staff_information[0].gender);
        sessionStorage.setItem("nationality", data.staff_information[0].nationality);
        sessionStorage.setItem("address", data.staff_information[0].address);
        sessionStorage.setItem("dob", data.staff_information[0].dob);
        sessionStorage.setItem("status_id", data.staff_information[0].status_id);
        sessionStorage.setItem("status", data.staff_information[0].status);
        sessionStorage.setItem("date_of_application", data.staff_information[0].date_of_application);
        sessionStorage.setItem("date_edited", data.staff_information[0].date_edited);
        sessionStorage.setItem("qualification", data.staff_information[0].qualification);
        sessionStorage.setItem("salary_wage_information", data.staff_information[0].salary_wage_information);
        sessionStorage.setItem("bank_account_details", data.staff_information[0].bank_account_details);
        sessionStorage.setItem("ssnit_number", data.staff_information[0].ssnit_number);
        sessionStorage.setItem("medical_conditions_allergies", data.staff_information[0].medical_conditions_allergies);
        sessionStorage.setItem("safety_training_completion", data.staff_information[0].safety_training_completion);
        sessionStorage.setItem("emergency_phone", data.staff_information[0].emergency_phone);


        var role = sessionStorage.getItem("role");
        var department = sessionStorage.getItem("department");
        var employment_status = sessionStorage.getItem("employment_status");
        var profile_photo = sessionStorage.getItem("profile_photo");
        var unique_user_id = sessionStorage.getItem("unique_user_id");
        var email = sessionStorage.getItem("email");
        var phone = sessionStorage.getItem("phone");
        var whatsapp_no = sessionStorage.getItem("whatsapp_no");
        var title = sessionStorage.getItem("title");
        var first_name = sessionStorage.getItem("first_name");
        var middle_name = sessionStorage.getItem("middle_name");
        var last_name = sessionStorage.getItem("last_name");
        var gender = sessionStorage.getItem("gender");
        var nationality = sessionStorage.getItem("nationality");
        var address = sessionStorage.getItem("address");
        var dob = sessionStorage.getItem("dob");
        var status_id = sessionStorage.getItem("status_id");
        var status = sessionStorage.getItem("status");
        var date_of_application = sessionStorage.getItem("date_of_application");
        var date_edited = sessionStorage.getItem("date_edited");
        var qualification = sessionStorage.getItem("qualification");
        var salary_wage_information = sessionStorage.getItem("salary_wage_information");
        var bank_account_details = sessionStorage.getItem("bank_account_details");
        var ssnit_number = sessionStorage.getItem("ssnit_number");
        var medical_conditions_allergies = sessionStorage.getItem("medical_conditions_allergies");
        var safety_training_completion = sessionStorage.getItem("safety_training_completion");
        var emergency_phone = sessionStorage.getItem("emergency_phone");


        $('.imagePreview').css('background-image', "url(" + domain_api + "/uploads/profile-photos/" + encodeURIComponent(profile_photo) + ")");
        $('.imagePreview').hide();
        $('.imagePreview').fadeIn(650);
        $(".fullname").html(title + " " + first_name + " " + middle_name + " " + last_name + "");
        $(".staff_id").html(unique_user_id);
        $(".country").html(nationality);
        $(".role").html(role);
        $(".department").html(department);
        $(".employment_status").html(employment_status);
        $(".gender").html(gender);
        $(".email").html(email);
        $(".phone").html(phone);
        $(".address").html(address);
        $(".whatsapp_no").html(whatsapp_no);
        $(".qualification").html(qualification);
        $(".experience_area").empty();
        $.each(data.experience, function(key, value) {
            $(".experience_area").append("<tr>" +
                "<td style='color:black;'>Skill / Experience 1:</td>" +
                "<td style='color:black;'>" + value.experience_area + "</td>" +
                +"</tr>")
        });
        $(".dob").html(dob);
        $(".status").html(status);
        $(".salary_wage_information").html("GH&#8373; " + salary_wage_information);
        $(".bank_account_details").html(bank_account_details);
        $(".ssnit_number").html(ssnit_number);
        $(".medical_conditions_allergies").html(medical_conditions_allergies);
        $(".safety_training_completion").html(safety_training_completion);
        $(".emergency_phone").html(emergency_phone);

        $(".work_experience").empty();
        $.each(data.work_experience, function(key, value) {
            $(".work_experience").append("<tr>" +
                "<td style='color:black; width:60px;'>Job 1:</td>" +
                "<td style='color:black;'>" + value.work_history + " (" + value.date_from + " - " + value.date_to + ")</td>" +
                +"</tr>")
        });


    });




    $.getJSON(domain_api + "/staff/documents.php?userId=" + encodeURIComponent(userId), function(results) {
        $(".documents").empty();
        $.each(results.documents, function(key, value) {
            $(".documents").append("<tr>" +
                "<td style='color:black; width:180px;'>" + value.document_type + " Copy</td>" +
                "<td style='color:black; width:200px;'>(" + value.start_date + " - " + value.end_date + ")</td>" +
                "<td style='color:black;'><a href=" + domain_api + "/uploads/other-documents/" + encodeURIComponent(value.attachment) + " target='_blank' >View</a></td>" +
                +"</tr>");
        });

    });



    $(document).on('click', '.printProfile', function() {
        $("#myModal_profile").modal('hide');
        var url = $(this).attr('data-url');
        var url = domain + url;
        sessionStorage.setItem('url-print-profile', url + "?userId=" + encodeURIComponent(userId) + "");
        $("#profile").load(domain + "/COMPONENTS/sub-pages/print-profile-in-iframe.php", function() {
            $("#myModal_printProfile").modal('show');
        });

    });
</script>