<?php include 'controller/pageCode.php' ?>
<!DOCTYPE html>
<html lang="en">
 <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
    <meta charset="utf-8">
    <title>Profile</title>
    <?php include 'inc/meta_inc.php'; ?>
    <!-- base css -->
    <?php include 'inc/styles_inc.php'; ?>
    <link rel="stylesheet" media="screen, print" href="assets/css/markdown.css">
    <link rel="stylesheet" media="screen, print" href="assets/css/datagrid/datatables/datatables.bundle.css">
    <style>
        .container {
            position: relative;
            width: 50%;
            max-width: 300px;
        }
        .image {
            display: block;
        }

        .overlay {
            position: absolute; 
            bottom: 0; 
            background: rgb(0, 0, 0);
            background: rgba(0, 0, 0, 0.5); /* Black see-through */
            color: #f1f1f1; 
            width: 80%;
            height:20px;
            transition: .5s ease;
            opacity:0.6;
            border-bottom-left-radius:10px;
            border-bottom-right-radius:10px;
            color: white;
            font-size: 8px;
            padding: 5px;
            text-align: center;
        }

        #picture_holder{
            cursor:pointer;
        }

        .container:hover .overlay {
            opacity: 1;
        }
    </style>
</head>
    <body class="mod-bg-1 ">
        <!-- DOC: script to save and load page settings -->
        <?php include 'inc/theme_script_inc.php'; ?>
        <!-- BEGIN Page Wrapper -->
        <div class="page-wrapper" id="app">
            <div class="page-inner">
                <!-- BEGIN Left Aside -->
        <?php include 'inc/aside_inc.php'; ?>
<!-- END Left Aside -->
                <div class="page-content-wrapper">
                    <!-- BEGIN Page Header -->
        <?php include 'inc/header_inc.php'; ?>
<!-- END Page Header -->
                    <!-- BEGIN Page Content -->
                    <!-- the #js-page-content id is needed for some plugins to initialize -->
                    <main id="js-page-content" role="main" class="page-content">
                        <ol class="breadcrumb page-breadcrumb">
                            <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
                        </ol>
                        <div class="row">
                            <div class="col-md-6">
                                <div id="panel-1" class="panel">
                                    <div class="panel-hdr">
                                        <h2>
                                            Profile <span class="fw-300"><i></i></span>
                                        </h2>
                                        <div class="panel-toolbar"></div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <!-- profile summary -->
                                            <div class="card mb-g rounded-top">
                                                <div class="row no-gutters row-grid">
                                                    <div class="col-12">
                                                        <div class="d-flex flex-column align-items-center justify-content-center p-4">
                                                            <img src="pictures/<?php echo $_SESSION['employee_picture'] ?>" style="width:150px;height:auto;" class="dp rounded-circle shadow-2 img-thumbnail" alt="">
                                                            <h5 class="mb-0 fw-700 text-center mt-3">
                                                                <span class="employee-name"><?php echo $_SESSION['employee_name'] ?></span> | <span class="employee-role"><?php echo $_SESSION['role_name'] ?></span>
                                                                <small class="text-muted mb-0"> <span class="employee-phone"><?php echo $_SESSION['employee_phone'] ?></span> 
                                                                <span style="font-size:20px;font-weight:bolder;"> | 
                                                            </span><span class="employee-email"><?php echo $_SESSION['employee_email'] ?></span></small>
                                                            </h5>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="text-center py-3">
                                                            <h5 class="mb-0 fw-700">
                                                                0
                                                                <small class="text-muted mb-0">Total Request</small>
                                                            </h5>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="text-center py-3">
                                                            <h5 class="mb-0 fw-700">
                                                                0
                                                                <small class="text-muted mb-0">Completed</small>
                                                            </h5>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="p-3 text-center">
                                                        <a href="login/change_password.php" class="btn btn-primary">Change Password</a>  
                                                        <button class="btn btn-info" data-toggle="modal" data-target="#default-example-modal-sm-center">Update Profile</button>
                                                        <a href="pay_slip.php?user_id=<?php echo $_SESSION['employee_id'] ?>" class="btn btn-dark">Pay Slip</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="col-md-6">
                                <div id="panel-1" class="panel">
                                    <div class="panel-hdr">
                                        <h2>
                                            Achievement/Reward <span class="fw-300"><i></i></span>
                                        </h2>
                                        <div class="panel-toolbar"></div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                        <?php if($employee_achievements):?>
                                        <?php $total = 0; ?>
                                            <?php foreach($employee_achievements as $reward):?>
                                            <?php
                                            $color = "";
                                            $total += floatval($reward['achievement_reward']);
                                                if($reward['achievement_level']>="Silver"){
                                                    $color = "primary";
                                                }elseif($reward['achievement_level']>="Gold"){
                                                    $color = "warning";
                                                }elseif($reward['achievement_level']>="Diamond"){
                                                    $color = "info";
                                                }
                                            ?>
                                            <div class="alert bg-<?php echo $color ?>-500 alert-dismissible fade show">
                                                <div class="d-flex align-items-center">
                                                    <div class="alert-icon">
                                                        <span class="icon-stack icon-stack-sm">
                                                            <i class="base-7 icon-stack-3x color-fusion-200"></i>
                                                            <i class="base-7 icon-stack-2x color-fusion-500"></i>
                                                            <i class="ni ni-graph icon-stack-1x text-white"></i>
                                                        </span>
                                                    </div>
                                                    <div class="flex-1">
                                                        <span class="h5"><?php echo $reward['achievement_level'] ?></span>
                                                        <br>
                                                        You have earned <strong>₵<?php echo $reward['achievement_reward']?></strong> as commission.
                                                    </div>
                                                </div>
                                            </div>
                                            <?php endforeach ?>
                                            <div class="alert bg-success-500 alert-dismissible fade show">
                                                <div class="d-flex align-items-center">
                                                    <div class="alert-icon">
                                                        <span class="icon-stack icon-stack-sm">
                                                            <i class="base-7 icon-stack-3x color-fusion-200"></i>
                                                            <i class="base-7 icon-stack-2x color-fusion-500"></i>
                                                            <i class="ni ni-graph icon-stack-1x text-white"></i>
                                                        </span>
                                                    </div>
                                                    <div class="flex-1">
                                                        <span class="h5">Total Points Earned</span>
                                                        <br>
                                                        You have earned <strong>₵<?php echo $total ?></strong> as commission.
                                                    </div>
                                                </div>
                                            </div>
                                        <?php else: ?>
                                            <div class="alert bg-danger-500 alert-dismissible fade show">
                                                <div class="d-flex align-items-center">
                                                    <div class="alert-icon">
                                                        <span class="icon-stack icon-stack-sm">
                                                            <i class="base-7 icon-stack-3x color-fusion-200"></i>
                                                            <i class="base-7 icon-stack-2x color-fusion-500"></i>
                                                            <i class="ni ni-graph icon-stack-1x text-white"></i>
                                                        </span>
                                                    </div>
                                                    <div class="flex-1">
                                                        <span class="h5">Sorry</span>
                                                        <br>
                                                        You have not earned any rewards
                                                    </div>
                                                </div>
                                            </div>
                                        <?php endif ?>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                        </div>
                    </main>
                    <!-- END Page Content -->
                    <!-- this overlay is activated only when mobile menu is triggered -->
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
<!-- BEGIN Page Footer -->
<?php include 'inc/footer_inc.php' ?>
<!-- END Page Footer -->
<!-- BEGIN Shortcuts -->
<!-- modal shortcut -->
<?php //include 'inc/header_menu.php'; ?>
 <!-- END Shortcuts -->
                </div>
            </div>
        </div>
        <!-- END Page Wrapper -->
        <!-- BEGIN Quick Menu -->
<!-- to add more items, please make sure to change the variable '$menu-items: number;' in your _page-components-shortcut.scss -->
<nav class="shortcut-menu d-none d-sm-block">
    <input type="checkbox" class="menu-open" name="menu-open" id="menu_open" />
    <label for="menu_open" class="menu-open-button ">
        <span class="app-shortcut-icon d-block"></span>
    </label>
    <a href="#" class="menu-item btn" data-toggle="tooltip" data-placement="left" title="Scroll Top">
        <i class="fal fa-arrow-up"></i>
    </a>
    <a href="login/logout.php" class="menu-item btn" data-toggle="tooltip" data-placement="left" title="Logout">
        <i class="fal fa-sign-out"></i>
    </a>
    <a href="#" class="menu-item btn" data-action="app-fullscreen" data-toggle="tooltip" data-placement="left" title="Full Screen">
        <i class="fal fa-expand"></i>
    </a>
    <a href="#" class="menu-item btn" data-action="app-print" data-toggle="tooltip" data-placement="left" title="Print page">
        <i class="fal fa-print"></i>
    </a>
</nav>
<!-- END Quick Menu -->
<!-- BEGIN Page Settings -->
 <!-- END Page Settings -->
 <?php $employee_id = $_SESSION['employee_id'] ?>
<?php include 'inc/script_inc.php' ?>
        <script src="assets/js/datagrid/datatables/datatables.bundle.js"></script>
        <script>
            $(document).ready(function()
            {
                toastr.options = {
                    "closeButton": true,
                    "debug": false,
                    "newestOnTop": true,
                    "progressBar": true,
                    "positionClass": "toast-top-right",
                    "preventDuplicates": true,
                    "onclick": null,
                    "showDuration": 300,
                    "hideDuration": 5000,
                    "timeOut": 5000,
                    "extendedTimeOut": 1000,
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                }
                let btn_template = `
                                    <div class="process">
                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        <span class="sr-only"> ...</span>
                                    </div> `;
                $('#picture_holder').on('click',function(){
                    $('#employee_picture').trigger("click");
                });
                $('#employee_picture').on('click',function(){
                    $('#employee_picture').trigger("change");
                });
                $('#employee_picture').on('change',function(){
                    let picture_file = $('#employee_picture').val();
                    if(picture_file){
                        let reader = new FileReader();
                        reader.onload = function(){
                            let dataURL = reader.result;
                            $('#preview').attr("src",dataURL);
                        }
                        let file = $('#employee_picture').prop('files')[0];
                        reader.readAsDataURL(file);
                    }
                });
                $('#btn_update_profile').click(function(){
		            $('#btn_update_profile').html(btn_template);
                    let employee_name = $('#employee_name').val();
                    let employee_email = $('#employee_email').val();
                    let employee_phone = $('#employee_phone').val();
                    let employee_gender = $('#employee_gender').val();
                    let employee_id = "<?php echo $employee_id ?>";
                    let current_picture = $('#current_picture').val();
                    let picture_file = $('#employee_picture').prop('files')[0];
                    let picture = $('#employee_picture').val();
                    var employeeFormData = new FormData();
                    employeeFormData.append('employee_name',employee_name);
                    employeeFormData.append('employee_email',employee_email);
                    employeeFormData.append('employee_phone',employee_phone);
                    employeeFormData.append('employee_gender',employee_gender);
                    employeeFormData.append('employee_id',employee_id);
                    employeeFormData.append('current_picture',current_picture);
                    employeeFormData.append('picture_file',picture_file);
                    employeeFormData.append('update_employee_by_employee','');
                    $.ajax({
                        url: 'controller/employeeCode.php',
                        type: 'POST',
                        processData: false, // important
                        contentType: false, // important
                        dataType : 'json',
                        data: employeeFormData,
                        beforeSend:function(serverResponse){
                        },
                        complete:function(serverResponse){
                        },
                        success:function(serverResponse){
                            console.log(serverResponse)
                            if(serverResponse){
                                let response = serverResponse;
                                if(response.data=="success"){
                                    if(picture){
                                        let reader = new FileReader();
                                        reader.onload = function(){
                                            let dataURL = reader.result;
                                            $('.dp').attr("src",dataURL);
                                        }
                                        let file = $('#employee_picture').prop('files')[0];
                                        reader.readAsDataURL(file);
                                    }
                                    $('#btn_update_profile').html('Save');
                                    $('.employee-name').html(employee_name);
                                    $('.employee-phone').html(employee_phone);
                                    $('.employee-email').html(employee_email);
                                    toastr.success('Employee Updated.', 'Admin');
                                    toastr.clear()
                                }else if(response.data=="fail"){
                                    $('#btn_update_profile').html('Save');
                                    toastr.warning('Action Failed!', 'Admin');
                                    toastr.clear()
                                }else{
                                    $('#btn_update_profile').html('Save');
                                    toastr.error('Internal Error!', 'Admin');
                                    toastr.clear()
                                }
                            }
                        },
                        error:function(serverResponse){
                        console.log(serverResponse);
                        }
                    });
                });
                // Event Lot
                var events = $("#app-eventlog");

            });
            
        </script>
            <!-- Modal center Small -->
            <div class="modal fade" id="default-example-modal-sm-center" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <!-- <div class="modal-header">
                            <h5 class="modal-title">Update Profile</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true"><i class="fal fa-times"></i></span>
                            </button>
                        </div> -->
                        <div class="modal-body" style="margin-left:10% !important;margin-right:10% !important;">
                            <center><h5 class="modal-title">Update Profile</h5></center>
                            <hr>
                            <center>
                                <div class="container" id="picture_holder">
                                    <img id="preview" style="width:150px;height:auto;" src="pictures/<?php echo $_SESSION['employee_picture'] ?>" class="image dp rounded-circle shadow-2 img-thumbnail" alt="">
                                    <div class="overlay">Change Picture</div>
                                </div>
                            </center>                                   
                             <input type="file" id="employee_picture" style="cursor: pointer;  display: none"/>
                            <form action="">
                                <label for="employee_name">Name</label>
                                <input style="background-color:#EEE" value="<?php echo $_SESSION['employee_name'] ?>" name="employee_name" id="employee_name" type="text" placeholder="Name" class="form-control">
                            
                                <label for="employee_email">Email</label>
                                <input style="background-color:#EEE" value="<?php echo $_SESSION['employee_email'] ?>" name="email" id="employee_email" type="email" placeholder="Email" class="form-control">
                            
                                <label for="employee_phone">Phone</label>
                                <input style="background-color:#EEE" value="<?php echo $_SESSION['employee_phone'] ?>" name="employee_phone" id="employee_phone" type="number" placeholder="Email" class="form-control">
                                <input type="hidden" id="current_picture" value="<?php echo $_SESSION['employee_picture'] ?>">
                                <label for="employee_gender">Gender</label>
                                <select style="background-color:#EEE" name="employee_gender" id="employee_gender" class="form-control">
                                <?php if($_SESSION['employee_gender']=="Male"): ?>
                                    <option selected value="Male">Male</option>
                                    <option value="Female">Female</option>
                                <?php elseif($_SESSION['employee_gender']=="Female"):?>
                                    <option selected value="Female">Female</option>
                                    <option value="Male">Male</option>
                                <?php endif ?>
                                </select>
                                <br>
                                <div style="margin-left:45px;">
                                    <button type="button" class="btn btn-xs btn-secondary" data-dismiss="modal">Cancel</button>
                                    <button type="button" id="btn_update_profile" class="btn btn-xs btn-primary">
                                        Save
                                        <div class="process d-none">
                                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                            <span class="sr-only"> ...</span>
                                        </div>
                                    </button>
                                    
                                </div>
                            </form>
                        </div>
                        <!-- <div class="modal-footer">
                            
                        </div> -->
                    </div>
                </div>
            </div>
    </body>

</html>
