
<style>
    .success {background:#4c0870 !important}
    .datepicker thead tr .dow{color:#4c0870 !important}
    .datepicker thead tr .datepicker-switch {color:#4c0870 !important}
    .datepicker thead tr .next:before, .datepicker thead tr .prev:before {color:#4c0870 !important}
    .datepicker table tr td.active.active{background:#4c0870 !important}
    .datepicker table tr td.day:hover {background:#4c0870 !important ;color:#fff}
    .profile-pic {
        text-align: center;
        border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        width: 210px;
        height: 210px;
        border: 5px solid #4c0870;
        overflow: hidden;
        margin: 0 auto;
        background: #fafafa;
    }
    .profile-pic img {
        width: 188px;
        height: 188px;
        margin-top: 6px;
        border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        overflow: hidden;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    #UploadCVButton{
        width:25%;
        overflow:hidden;
        position:relative;
    }
    #EditUploadProfileButton{
        margin-left:128px;
        margin-top:10px;
        background-color:#4c0870 !important;
        color:#fff;
    }
    #EditUploadProfileButton > input,#UploadCVButton > input{
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        opacity:0.01;
        cursor:pointer;
    }
    .labelText{
        font-size: 12px !important;
        margin-bottom: 0px !important;
    }
</style>

<div class="modal fade stick-up DontReset" id="Edit_Volunteer" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
            <?php echo Forms::ModalLoader('VolunteerIsBusy') ?>
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" id="CloseEditVolunteerModal" aria-hidden="true"><i class="pg-close fs-14"></i></button>
                <h5 class="bold"><?php print CommonLanguage::getMessage('edit_volunteer'); ?></h5>
            </div>
            <div class="modal-body">
                <div id="VolunteerValidationAlert"></div>
                <form id="Edit_Volunteer_Form" method="POST" onsubmit="return false">
                    <div class="col-md-12">
                        <div class="panel panel-transparent ">
                            <ul class="nav nav-tabs nav-tabs-fillup">
                                <li class="active">
                                    <a data-toggle="tab" href="#slide1"><span><?php print CommonLanguage::getMessage('general_info'); ?></span></a>
                                </li>
                                <li>
                                    <a data-toggle="tab" href="#slide2"><span><?php print CommonLanguage::getMessage('contact_info'); ?></span></a>
                                </li>
                                <li>
                                    <a data-toggle="tab" href="#slide4"><span><?php print CommonLanguage::getMessage('hr_info'); ?></span></a>
                                </li>

                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane slide-left active" id="slide1" style="height:470px;">
                                    <div class="row ">
                                        <div class="col-md-4 profile-col">
                                            <div class="profile-pic">
                                                <div class="profile-border">
                                                    <img id="EditProfilePhoto" src="<?php echo SITE_LINK; ?>img/profiles/avatar.jpg" alt="">
                                                </div>
                                            </div>
                                            <label class="btn btn-default" id="EditUploadProfileButton"><?php print CommonLanguage::getMessage('Upload'); ?><input type="file" data-target="#EditProfilePhoto" onchange="window.EditVolunteerCurrentFileUploadadd = event.target.files;ValidateForNewVolunteerPhoto(this, 'Picture')" name="image_volunteer_File" value="Upload"></label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="col-md-12" style="margin:10px; margin-left:17px">
                                                <div class="col-md-4 form-group">
                                                    <label><?php print CommonLanguage::getMessage('first_name'); ?></label><span class="red-star">*</span>
                                                    <div class="input-group  ">
                                                        <span class="input-group-addon success ">
                                                            <i class="fa fa-user-md"></i>
                                                        </span>
                                                        <input type="hidden"  id="Volunteer_ID" value="<?= ($Content[0]['volunteer_id']) ?>" name="Volunteer_ID" class="form-control " >
                                                        <input type="text" placeholder="<?php print CommonLanguage::getMessage('first_name'); ?>" id="Volunteer_FirstName" name="Volunteer_FirstName" class="form-control " required >
                                                    </div>
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label><?php print CommonLanguage::getMessage('middle_name'); ?></label>
                                                    <div class="input-group ">
                                                        <span class="input-group-addon success ">
                                                            <i class="fa fa-user-md"></i>
                                                        </span>
                                                        <input type="text" placeholder="<?php print CommonLanguage::getMessage('middle_name'); ?>" id="Volunteer_MiddleName" name="Volunteer_MiddleName" class="form-control " >
                                                    </div>
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label><?php print CommonLanguage::getMessage('last_name'); ?></label><span class="red-star">*</span>
                                                    <div class="input-group ">
                                                        <span class="input-group-addon success ">
                                                            <i class="fa fa-user-md"></i>
                                                        </span>
                                                        <input type="text" placeholder="<?php print CommonLanguage::getMessage('last_name'); ?>" id="Volunteer_LastName" name="Volunteer_LastName" class="form-control " required>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12 " style="margin:10px;">
                                                <div class="col-md-4 form-group">
                                                    <label><?php print CommonLanguage::getMessage('dob'); ?></label><span class="red-star">*</span>
                                                    <div class="input-group ">
                                                        <span class="input-group-addon success ">
                                                            <i class="fa fa-calendar"></i>
                                                        </span>
                                                        <input  id="Volunteer_DOB" name="Volunteer_DOB" Placeholder="<?php print CommonLanguage::getMessage('dob'); ?>" class="form-control " required/>
                                                    </div> 
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label><?php print CommonLanguage::getMessage('record_number'); ?></label><span class="red-star">*</span>
                                                    <div class="input-group ">
                                                        <span class="input-group-addon success ">
                                                            <i class="fa fa-file"></i>
                                                        </span>
                                                        <input  id="Volunteer_RecordNumber" name="Volunteer_RecordNumber" Placeholder="<?php print CommonLanguage::getMessage('record_number'); ?>" class="form-control " required />
                                                    </div>
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <label><?php print CommonLanguage::getMessage('blood_group'); ?></label>  
                                                    <div class="input-group m-b "><span class="input-group-btn">
                                                            <button type="button" class="btn btn-success" style="width:0 " ><i class="fa fa-medkit"style="color:#fff;margin-left:-7px"></i> </button> </span> 
                                                        <select  id="Volunteer_BloodGroup" name="Volunteer_BloodGroup" class="full-width BloodGroup" data-init-plugin="select2">
                                                            <option value=""><?php print CommonLanguage::getMessage('select_blood_group'); ?></option>
                                                            <optgroup label="<?php print CommonLanguage::getMessage('positive'); ?>">
                                                                <option value="2">A+</option>
                                                                <option value="4">B+</option>
                                                                <option value="5">AB+</option>
                                                                <option value="7">O+</option>
                                                            </optgroup>
                                                            <optgroup label="<?php print CommonLanguage::getMessage('negative'); ?>">
                                                                <option value="1">A-</option>
                                                                <option value="3">B-</option>
                                                                <option value="6">AB-</option>
                                                                <option value="8">O-</option>
                                                            </optgroup>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12" style="margin:10px;">

                                                <div class="col-md-4 form-group">
                                                    <label><?php print CommonLanguage::getMessage('nationality'); ?></label><span class="red-star">*</span>
                                                    <div class="input-group ">
                                                        <span class="input-group-addon success ">
                                                            <i class="fa fa-flag"></i>
                                                        </span>

                                                        <select  id="Volunteer_Nationality" name="Volunteer_Nationality" class="full-width Volunteer_Nationality" data-init-plugin="select2">
                                                            <option value=""><?php print CommonLanguage::getMessage('select'); ?></option>
                                                            <?php foreach ($employee_nationality as $nationality) { ?>
                                                                <option value="<?php echo $nationality['Nationality_ID'] ?>"><?php echo $nationality['Nationality_Name'] ?></option>
                                                            <?php } ?>
                                                            <option value='more'><?php echo CommonLanguage::getMessage('More') ?></option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="radio radio-success " id="Gender">
                                                        <input type="radio" value="1"  name="Volunteer_Gender"  id="Male">
                                                        <label for="Male"><?php print CommonLanguage::getMessage('male'); ?></label>
                                                        <input type="radio" checked="checked" value="2" name="Volunteer_Gender"  id="Female">
                                                        <label for="Female"><?php print CommonLanguage::getMessage('female'); ?></label>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="radio radio-success " id="Merital_Status_ID">
                                                        <input type="radio" checked="checked" value="1" name="Merital_Status_ID"  id="Single">
                                                        <label for="Single"><?php print CommonLanguage::getMessage('single'); ?> </label>
                                                        <input type="radio"  value="2" name="Merital_Status_ID"  id="Married">
                                                        <label for="Married"><?php print CommonLanguage::getMessage('married'); ?></label>
                                                        <input type="radio" value="3" name="Merital_Status_ID"  id="Divorced">
                                                        <label for="Divorced"><?php print CommonLanguage::getMessage('divorced'); ?> </label>
                                                        <input type="radio"  value="4" name="Merital_Status_ID"  id="Widow">
                                                        <label for="Widow"><?php print CommonLanguage::getMessage('widow'); ?></label>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane slide-left" id="slide2">
                                    <div class="row">
                                        <div class="col-md-12" style="margin:10px;margin-left:17px">
                                            <div class="col-md-6 form-group">
                                                <div ><label class="labelText "><?php print CommonLanguage::getMessage('Email'); ?></label></div>
                                                <div class="input-group ">
                                                    <span class="input-group-addon success">
                                                        <i class="fa fa-envelope"></i>
                                                    </span>
                                                    <input type="email" placeholder="<?php print CommonLanguage::getMessage('Email'); ?>" id="Volunteer_Email" name="Volunteer_Email" class="form-control " >
                                                </div>
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <div ><label class="labelText"><?php print CommonLanguage::getMessage('street_address'); ?> </label><span class="red-star">*</span></div>
                                                <div class="input-group ">
                                                    <span class="input-group-addon success">
                                                        <i class="fa fa-street-view"></i>
                                                    </span>
                                                    <input type="text" placeholder="<?php print CommonLanguage::getMessage('street_address'); ?>" id="Volunteer_StreetAddress1" name="Volunteer_StreetAddress1" class="form-control " required>
                                                </div>
                                            </div>
                                        </div> 
                                        <div class="col-md-12" style="margin:10px;">
                                            <div class="col-md-6 form-group">
                                                <div ><label class="labelText"><?php print CommonLanguage::getMessage('country'); ?></label></div>
                                                <div class="input-group "><span class="input-group-btn">
                                                        <button type="button" class="btn btn-success"style=" width:0;"><i class="fa fa-globe" style="color:#fff;margin-left:-4px"></i> </button> </span>  
                                                    <select id="Volunteer_Country" connect-with-city="#Volunteer_City" value="<?php echo $Content[0]['Volunteer_Country'] ?>" name="Volunteer_Country" class="full-width " data-init-plugin="select2">
                                                        <option value="<?php echo $Content[0]['Volunteer_Country']; ?>"> <?php echo $Content[0]["Country_Name"]; ?></option>
                                                        <?php foreach ($employee_country as $country): ?>
                                                            <option value="<?php echo $country['Country_ID']; ?>"><?php echo $country['Country_Name']; ?></option>
                                                        <?php endforeach; ?> 
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <div ><label class="labelText"><?php print CommonLanguage::getMessage('city'); ?></label></div>
                                                <div class="input-group "><span class="input-group-btn">
                                                        <button type="button" class="btn btn-success"style=" width:0;"><i class="fa fa-map-marker" style="color:#fff;margin-left:-4px"></i> </button> </span>  
                                                    <select id="Volunteer_City" name="Volunteer_City" class="full-width City" data-init-plugin="select2" >
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12" style="margin:10px;">
                                            <div class="col-md-6 form-group">                  
                                                <div ><label class="labelText"><?php print CommonLanguage::getMessage('home_phone'); ?></label></div>
                                                <div class="input-group ">
                                                    <span class="input-group-addon success ">
                                                        <i class="fa fa-phone"></i>
                                                    </span>
                                                    <input type="text" placeholder="<?php print CommonLanguage::getMessage('home_phone'); ?>" id="Volunteer_HomePhone" name="Volunteer_HomePhone" class="form-control " >
                                                </div>
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <div ><label class="labelText"><?php print CommonLanguage::getMessage('mobile_phone'); ?></label></div>
                                                <div class="input-group ">
                                                    <span class="input-group-addon success">
                                                        <i class="fa fa-mobile fa-lg"></i>
                                                    </span>
                                                    <input type="text" placeholder="<?php print CommonLanguage::getMessage('mobile_phone'); ?>" id="Volunteer_MobilePhone" name="Volunteer_MobilePhone" class="form-control " >
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane slide-left" id="slide4" style="height:470px;">
                                    <div class="row">
                                        <div class="col-md-12" style="margin:10px;">
                                            <div class="col-md-4 form-group">
                                                <label><?php print CommonLanguage::getMessage('start_date'); ?></label><span class="red-star">*</span>
                                                <div class="input-group ">
                                                    <span class="input-group-addon success ">
                                                        <i class="fa fa-calendar-o"></i>
                                                    </span>
                                                    <input id="Volunteer_StartDate" name="Volunteer_StartDate" Placeholder="<?php print CommonLanguage::getMessage('start_date'); ?>" class="form-control StartDate" required/>
                                                </div> 
                                            </div>

                                            <div class="col-md-4 form-group">
                                                <label><?php print CommonLanguage::getMessage('emp_major'); ?></label>
                                                <div class="input-group ">
                                                    <span class="input-group-addon success ">
                                                        <i class="fa fa-briefcase"></i>
                                                    </span>
                                                    <input id="Volunteer_Major" name="Volunteer_Major" Placeholder="<?php print CommonLanguage::getMessage('emp_major'); ?>" class="form-control" />
                                                </div>
                                            </div>



                                            <div class="col-md-4 form-group">
                                                <label><?php print CommonLanguage::getMessage('emp_edu'); ?></label>
                                                <div class="input-group ">
                                                    <span class="input-group-addon success ">
                                                        <i class="fa fa-graduation-cap"></i>
                                                    </span>
                                                    <input id="Volunteer_Education" name="Volunteer_Education" Placeholder="<?php print CommonLanguage::getMessage('emp_edu'); ?>" class="form-control" />
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-md-12" style="margin:10px;">

                                            <div class="col-md-4 form-group">
                                                <label><?php print CommonLanguage::getMessage('volunteer_skills'); ?></label><span class="red-star">*</span>
                                                <div class="input-group ">
                                                    <span class="input-group-addon success ">
                                                        <i class="fa fa-info-circle"></i>
                                                    </span>
                                                    <input type="hidden" name="skills_id" class="full-width skills_id" id="skills_id" required=""/>
                                                </div>
                                            </div>
                                            <div class="col-md-4 form-group">
                                                <label><?php print CommonLanguage::getMessage('volunteer_notice'); ?></label><span class="red-star">*</span>
                                                <div class="input-group ">
                                                    <span class="input-group-addon success ">
                                                        <i class="fa fa-info-circle"></i>
                                                    </span>
                                                    <input type="hidden" name="volunteer_notice_id" class="full-width volunteer_notice_id" id="volunteer_notice_id" required=""/>
                                                </div>
                                            </div>
                                            <div class="col-md-4 form-group">
                                                <label><?php print CommonLanguage::getMessage('volunteer_team'); ?></label><span class="red-star">*</span>
                                                <div class="input-group ">
                                                    <span class="input-group-addon success ">
                                                        <i class="fa fa-info-circle"></i>
                                                    </span>

                                                    <input type="hidden" name="volunteer_team_id" class="full-width volunteer_team_id" id="volunteer_team_id" required="" />

                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-12" style="margin-left:5px">


                                            <div class="col-md-4 form-group">
                                                <label><?php print CommonLanguage::getMessage('work_id'); ?></label> 
                                                <div class="input-group ">
                                                    <span class="input-group-addon success">
                                                        <i class="fa fa-sort-numeric-asc"></i>
                                                    </span>
                                                    <input type="text"  placeholder="<?php print CommonLanguage::getMessage('work_id'); ?>" id="Volunteer_Work_ID" name="Volunteer_Work_ID" class="form-control " >
                                                </div>
                                            </div>
                                            <div class="col-md-4 form-group">
                                                <label><?php print CommonLanguage::getMessage('working_hours'); ?></label><span class="red-star">*</span>
                                                <div class="input-group ">
                                                    <span class="input-group-addon success ">
                                                        <i class="fa fa-clock-o"></i>
                                                    </span>
                                                    <input type="text" name="working_hours" class="form-control working_hours" id="working_hours" required="" />
                                                </div>
                                            </div>
                                            <div class="col-md-4 form-group">
                                                <label><?php print CommonLanguage::getMessage('days_left'); ?></label>
                                                <div class="input-group ">
                                                    <span class="input-group-addon success ">
                                                        <i class="fa fa-calendar"></i>
                                                    </span>
                                                    <input type="text" name="vlounteer_day_left" class="form-control vlounteer_day_left" id="vlounteer_day_left"/>
                                                </div>
                                            </div>



                                            <div class="col-md-4 form-group">
                                                <label><?php print CommonLanguage::getMessage('problems'); ?></label>
                                                <div class="input-group ">
                                                    <span class="input-group-addon success ">
                                                        <i class="fa fa-heart"></i>
                                                    </span>
                                                    <textarea placeholder="<?php print CommonLanguage::getMessage('problems'); ?>" id="Volunteer_Problem" name="Volunteer_Problem" class="form-control " ></textarea>

                                                </div>
                                            </div>

                                        </div>


                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <div class="pull-right">
                    <button class="btn btn-default" id="EditCloseVolunteer" ><?php print CommonLanguage::getMessage('Close'); ?></button>
                    <button class="btn btn-success" id="EditSubmitVolunteer"><?php print CommonLanguage::getMessage('Save'); ?></button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>;
    var Volunteer_id,
            EmployeCityID = <?php echo json_encode($Content[0]["Volunteer_City"]); ?>,
            EmployeCityName = <?php echo json_encode($Content[0]["Name"]); ?>,
            EmployeCountryID = <?php echo json_encode($Content[0]["Volunteer_Country"]); ?>,
            EmployeCountryName = <?php echo json_encode($Content[0]["Country_Name"]); ?>;
    var link = <?php echo json_encode(SITE_LINK) ?>;



    $(document).ready(function () {
        build_select2($("#skills_id"), "xhr/CommonSearch?col_id=skills_id&col_name=skills_name&table=tbl_hrm_skills", 1);
        build_select2($("#volunteer_team_id"), "xhr/CommonSearch?col_id=volunteer_team_id&col_name=volunteer_team_name&table=tbl_volunteer", 1);
        build_select2($("#volunteer_notice_id"), "xhr/CommonSearch?col_id=notice_id&col_name=notice_name&table=tbl_volunteer_notice", 1);

        $("#Volunteer_Nationality").on("change", function () {
            var val = $(this).val();
            if (val === "more") {
                $("#Volunteer_Nationality").removeAttr('selected').find('option:first').attr('selected', 'selected');
                $("#add_Volunteer_Nationality").modal('show')
            }
        })


        Volunteer_id = $("#Volunteer_ID").val();
        $("#Edit_Volunteer").on("show.bs.modal", function (e) {
            $("#VolunteerIsBusy").removeClass('hidden')
            $('#Volunteer_City').val(EmployeCityID);
            $("#s2id_Volunteer_City a span.select2-chosen").text(EmployeCityName)
            $("#Volunteer_Country").val(EmployeCountryID)
            $("#s2id_Volunteer_Country a span.select2-chosen").text(EmployeCountryName)
            $.ajax({
                url: "HRMAjax/EditVolunteers",
                data: {GetVolunteerID: Volunteer_id},
                dataType: "json",
                complete: function (v, vv) {
                    if (vv == "success") {
                        if (v.responseJSON.length > 0) {
                            var Content = v.responseJSON[0];
                            $("#EditProfilePhoto").error(function () {

                                $(this).attr('src', "<?php echo SITE_LINK; ?>img/profiles/avatar.jpg");
                            });
                            $("#EditProfilePhoto").attr("src", link + "uploads/volunteer/" + Volunteer_id + ".jpg")
                            $("#Volunteer_ID").val(Content.Volunteer_ID)
                            $("#Volunteer_FirstName").val(Content.Volunteer_FirstName)
                            $("#Volunteer_MiddleName").val(Content.Volunteer_MiddleName)
                            $("#Volunteer_LastName").val(Content.Volunteer_LastName)
                            $("#Volunteer_DOB").val(Content.Volunteer_DOB)
                            $("#Volunteer_RecordNumber").val(Content.Volunteer_RecordNumber)
                            $("#Volunteer_BloodGroup").val(Content.Volunteer_BloodGroup).select2()
                            $("#Volunteer_Nationality").val(Content.Volunteer_Nationality).select2()

                            $("#Gender > [name='Volunteer_Gender'][value='" + (Content.Volunteer_Gender) + "']").prop("checked", true)
                            $("#Merital_Status_ID > [name='Merital_Status_ID'][value='" + (Content.Merital_Status_ID) + "']").prop("checked", true)

                            $("#Volunteer_Email").val(Content.Volunteer_Email)
                            $("#Volunteer_StreetAddress1").val(Content.Volunteer_StreetAddress1)
                            $("#Volunteer_HomePhone").val(Content.Volunteer_HomePhone)
                            $("#Volunteer_MobilePhone").val(Content.Volunteer_MobilePhone)
                            $("#Volunteer_Work_ID").val(Content.Volunteer_Work_ID)
                            $("#Volunteer_StartDate").val(Content.Volunteer_StartDate).trigger("keyup")
                            $("#skills_id").val(Content.skills_id);
                            $("#skills_id").attr('data-select-name', JSON.stringify(Content.skills_name_arr));
                            $("#volunteer_team_id").val(Content.volunteer_team_id);
                            $("#volunteer_team_id").attr('data-select-name', JSON.stringify(Content.volunteer_team_arr));
                            $("#volunteer_notice_id").val(Content.volunteer_notice_id)
                            $("#volunteer_notice_id").attr('data-select-name', JSON.stringify(Content.volunteer_notice_arr));
                            $("#Volunteer_Major").val(Content.Volunteer_Major)
                            $("#Volunteer_Education").val(Content.Volunteer_Education)
                            $("#Volunteer_Problem").val(Content.Volunteer_Problem)
                            $("#working_hours").val(Content.working_hours)
                            $("#vlounteer_day_left").val(Content.vlounteer_day_left)

                            build_select2($("#skills_id"), "xhr/CommonSearch?col_id=skills_id&col_name=skills_name&table=tbl_hrm_skills", 1);
                            build_select2($("#volunteer_team_id"), "xhr/CommonSearch?col_id=volunteer_team_id&col_name=volunteer_team_name&table=tbl_volunteer", 1);
                            build_select2($("#volunteer_notice_id"), "xhr/CommonSearch?col_id=notice_id&col_name=notice_name&table=tbl_volunteer_notice", 1);

                        }
                    }
                    $("#VolunteerIsBusy").addClass('hidden')
                }
            })
        })



        $('#Volunteer_DOB,#Volunteer_StartDate,#vlounteer_day_left').datetimepicker({format: 'YYYY-MM-DD', useCurrent: false, extraFormats: ['DD-MM-YYYY']});
        $("#EditSubmitVolunteer").on("click", function () {

            $("#Edit_Volunteer_Form").validate()
            if (!$("#Edit_Volunteer_Form").find("input").blur().end().valid()) {
                $("#VolunteerValidationAlert").attr("class", "alert alert-danger").show().html(Required_Fields)
                return
            }
            $("#VolunteerIsBusy").removeClass('hidden');
            var Data = new FormData(document.getElementById("Edit_Volunteer_Form"));
            Data.append('Volunteer_ID', Volunteer_id);
            $.ajax({
                url: "HRMAjax/EditVolunteers",
                type: "POST",
                data: Data,
                processData: false,
                contentType: false,
                complete: function (v, vv) {
                    if (vv = "succees" && v.responseText == 'ok') {


                        $("#VolunteerValidationAlert").attr("class", "alert alert-success").empty().html(Submitted_Successfully);
                        setTimeout(function () {
                            $("#Edit_Volunteer").modal('hide')
                            $("#VolunteerValidationAlert").addClass('hidden')
                        }, 1500);
                        location.reload();
                    } else
                    {
                        $("#VolunteerValidationAlert").attr("class", "alert alert-danger").empty().html(Failed_Submit);
                    }
                    $("#VolunteerIsBusy").addClass('hidden');
                }
            });
        });
        $("#EditCloseVolunteer,#CloseEditVolunteerModal").on("click", function () {
            $("#Edit_Volunteer input").val("")
            $("#Edit_Volunteer").modal("hide")
            $("#NewVolunteerUploadImagePreview").hide().attr("src", "");
        });
    });
    function ValidateForNewVolunteerPhoto(input) {
        var IsFileOK = false;
        if (input.files && input.files[0]) {
            var FileName = $.trim(input.files[0].name)
            var FileType = FileName.substring(FileName.lastIndexOf("."));
            if (FileType) {
                FileType = FileType.toLowerCase();
                if (FileType == ".png" || FileType == ".jpg" || FileType == ".jpeg") {
                    IsFileOK = true;
                }
            }
            $("#EditProfilePhoto,#EditVolunteerNoPreview").hide()
            $("#EditVolunteerFilewarning2").remove()
            if (IsFileOK == false) {
                $("#EditVolunteerNoPreview").show()
                $("<span id='EditVolunteerFilewarning2' style='color:#f00;display: block;text-align: center;'> [File not Supported]</span>").insertAfter($(input))
                return false;
            } else {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("#EditProfilePhoto").attr('src', e.target.result).show();
                }
                reader.readAsDataURL(input.files[0]);
                return true;
            }
        }
        return false;
    }
</script>