
<style>
    .Document_col {
        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;
    }
    #InputFile{
        margin-left:128px;
        margin-top:10px;
        background-color:#4c0870 !important;
        color:#fff;
    }
    #InputFile > input{
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        opacity:0.01;
        cursor:pointer;
    }
    .Document_col 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;
    }
    .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}
</style>

<?php 
 preg_match("/\/viewVolunteersDetails\b/i", $_SERVER['REQUEST_URI'], $match);
 $Is_Vlnt = count($match) == 1 ? true : false;
 


?>
<div class="modal fade in" id="document-modal" tabindex="-1" role="dialog" aria-hidden="false" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title"> <?php print CommonLanguage::getMessage('new_doc_for'); ?> <strong><?php echo $Is_Vlnt ? $Content[0]["Volunteer_Name"]:$Content[0]["Employee_Name"]; ?></strong></h4>
            </div>
            <form method="post" id="Upload_Document" onsubmit="return false">
                <input type="hidden" name="Employee_ID" value="<?php echo  $Is_Vlnt ? $Content[0]['volunteer_id'] :$Content[0]['Employee_ID'] ?>">
                <div class="modal-body">
                    <div class="col-md-4 profile-col">
                        <div class="profile-pic">
                            <div class="profile-border">
                                <img id="CurDocument" src="<?php echo SITE_LINK; ?>img/profiles/file.jpg"  alt=""  >
                            </div>
                        </div>
                        <span class="red-star">*</span>
                        <label class="btn btn-default" id="InputFile"><i class="fa fa-upload"></i> <?php print CommonLanguage::getMessage('Upload'); ?> <input type="file" data-target="#CurDocument" onchange="window.NewCurrentFileUploadadd = event.target.files;ValidateForNewFile(this, 'Picture')" name="Document_File_Name" value="Upload" required></label>
                        <p class="help-block" style="text-align:center;">JPG/PNG/GIF images, PDF, docx, excel, etc...</p>
                    </div>
                    <div class="col-md-8 ">
                        <div class="form-group col-md-12">
                            <label><?php print CommonLanguage::getMessage('doc_type'); ?></label><span class="red-star">*</span>
                            <select name="Document_Type" id="Document_Type_ID" class="full-width BloodGroup" required data-init-plugin="select2">
                                <option value='' ><?php print CommonLanguage::getMessage('select_doc_type'); ?></option>
                                <?php
                                foreach ($DocumentType as $type) {
                                    ?>
                                    <option value="<?php echo $type['Document_ID'] ?>"><?php echo $type['Document_Type_Name'] ?></option>
                                <?php } ?>
                                <option value='more' ><?php print CommonLanguage::getMessage('More'); ?>..</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label><?php print CommonLanguage::getMessage('doc_name'); ?></label>
                            <input type="text" id="Document_Name" class="form-control" name="Document_Name" >
                        </div>
                        <div class="form-group col-md-6">
                            <label><?php print CommonLanguage::getMessage('Date'); ?></label>
                            <div class="input-group">
                                <div class="input-group-addon bg-success">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <input type="text" id="Date" value="<?php echo $today ?>" name="Document_Date" required="" class="form-control" >
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <label><?php print CommonLanguage::getMessage('comments'); ?></label>
                            <textarea class="form-control" name="Document_Comments" placeholder="<?php print CommonLanguage::getMessage('comments'); ?>"></textarea>
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <div class="modal-footer clearfix">
                    <button type="button" class="btn btn-danger" id="CancelUpload" data-dismiss="modal"><i class="fa fa-times"></i> <?php print CommonLanguage::getMessage('Close'); ?></button>
                    <button type="button" class="btn btn-success" id="SubmitUploadDocument"><i class="fa fa-check"></i> <?php print CommonLanguage::getMessage('Save'); ?></button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    var Submitted_Successfully = <?php print json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
            title = <?php echo json_encode(CommonLanguage::getMessage('emp_doc_list')); ?>,
            Failed_Submit = <?php print json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>;
    var Is_Vlnt = <?php echo json_encode($Is_Vlnt)?>;
    $(function () {
        $("body").addClass("NoSearch")
        $("body .search-link[data-toggle='search']").html("<i class='pg-search'></i>Click here to <span class='bold'>search</span>")
        
        $("#Date").datetimepicker({format: 'YYYY-MM-DD', useCurrent: false, extraFormats: ['DD-MM-YYYY']});
        $("#Document_Type_ID").on("change", function () {
            var val = $(this).val();
            if (val === "more") {
                $("#Document_Type_ID").removeAttr('selected').find('option:first').attr('selected', 'selected');
                $("#add_Document_Type").modal('show')
            }
        })
        $("#SubmitUploadDocument").on("click", function () {
            $("#ValidationAlert").remove();
            var AlertBox = $('<div id="ValidationAlert" class="WizardValidationAlert alert"></div>');
            AlertBox.insertAfter($("#document-modal").find(".modal-dialog .modal-header").find("h4"))
            if ($("#Document_Type_ID").val() == '' || $("#Document_Type_ID").val() == "more" || $('input[name=Document_File_Name]').val() == "") {
                $("#ValidationAlert").addClass("alert-danger").empty().html(Required_Fields);
                return;
            }

            $("#ModalIsBusy").remove();
            $("#document-modal").append('<div id="ModalIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:0"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>');
            $("#ModalIsBusy").animate({opacity: 1});



            var Data = new FormData(document.getElementById("Upload_Document"));
            var x = $('input[name=Document_File_Name]').val().split("\\");
    
             Data.append('Is_Vlnt',Is_Vlnt)

            if ($('#Document_Name').val() == '') {
                
                
               Data.append('Document_Name',x[2])
              
            }
           
            $.ajax({
                url: 'HRMAjax/UploadDocument',
                data: Data,
                method: "POST",
                processData: false,
                contentType: false,
                complete: function (v1, v2) {
                    if (v2 == 'success' && v1.responseText == 'success') {
                        $("#ModalIsBusy").remove();
                        $("#ValidationAlert").addClass("alert-success").empty().html(Submitted_Successfully);
                        $(".document_title").empty();
                        setTimeout(function () {
                            $("#document-modal").modal('hide');
                            $("#ValidationAlert").hide()
                        }, 1500)
                        if($('#Document_Type_ID').val() == 0){
                            location.reload();
                        }
                        RebuildDataTable(title, [0, 1, 2, 3], 'HRMAjax/EmployeeDocumentList', {emp_id: emp_id,Is_Vlnt:Is_Vlnt}, '#empDoc');
                    } else {
                        $("#ValidationAlert").addClass("alert-danger").empty().html(Failed_Submit);
                    }
                    $("#ModalIsBusy").remove();
                }
            })
            $("#InputFile >.fa-times,#InputFile >.fa-check").hide()
            $("#InputFile >input").val('')
        })
        $("#CancelUpload").on("click", function () {
            $("#InputFile >.fa-times,#InputFile >.fa-check").hide()
            $("#InputFile >input").val('')
        })
    })
    function ValidateForNewFile(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 == ".txt" || FileType == ".pptx" || FileType == ".png" || FileType == ".jpg" || FileType == ".jpeg" || FileType == ".gif" || FileType == ".docx" || FileType == ".pdf" || FileType == ".xlsx") {
                    IsFileOK = true;
                }
            }
            $("#CurDocument").hide()
            $("#NewFilewarning2").remove()
            if (IsFileOK == false) {
                $("<span id='NewFilewarning2' style='color:#f00;display: block;text-align: center;'> [File not Supported]</span>").insertAfter($(input))
                $("#InputFile").css("margin-left", "85px")
                $("#CurDocument").css('display', '');
                $("#InputFile").append(" <span class='fa fa-times'></span>")
                $("#InputFile > .fa-check").hide()

                $("#document-modal").append('<div id="ModalIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:0"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>');
                $("#ModalIsBusy").animate({opacity: 1});
                setTimeout(function () {
                    $("#ModalIsBusy").remove()
                }, 800)

                return false;
            } else {
                var reader = new FileReader();
                reader.onload = function () {
                    $("#CurDocument").css('display', '');
                    $("#InputFile").css("margin-left", "")
                    $("#InputFile > .fa-times").hide()
                    $("#InputFile").append(" <span class='fa fa-check'></span>")
                    //                    $("#CurDocument").attr('src', e.target.result).show();

                    $("#document-modal").append('<div id="ModalIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:0"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>');
                    $("#ModalIsBusy").animate({opacity: 1});
                    setTimeout(function () {
                        $("#ModalIsBusy").remove()
                    }, 800)
                }
                reader.readAsDataURL(input.files[0]);
                return true;



            }
        }
        return false;
    }
</script>