<div class="row">
    <div class="col-md-6">
        <h5>User System Details</h5><br/>
        <form class="form-horizontal" action="javascript:void(0)">
            <div class="form-group">
                <label for="user_name" class="col-sm-3 control-label">User Name/Initials <span class="compulsory">*</span></label>
                <div class="col-sm-9">
                    <input type="hidden" value="<?php echo($user_id); ?>" id="user_id"/>
                    <input type="text" class="form-control" id="user_name" placeholder="User Name/Initials" maxlength="5" value="<?php echo($user_initials) ?>"/>
                </div>
            </div>
            <div class="form-group">
                <label for="user_name" class="col-sm-3 control-label">User Color <span class="compulsory">*</span></label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="user_color" placeholder="User Color" value="<?php echo($user_color) ?>"/>
                </div>
            </div>
            <div class="form-group">
                <label for="user_level" class="col-sm-3 control-label">User Level</label>
                <div class="col-sm-9">
                    <select class="form-control" id="user_level">
                        <option value="A" <?php echo($admin_active); ?>>Administrator</option>
                        <option value="M" <?php echo($manager_active); ?>>Manager</option>
                        <option value="O" <?php echo($operator_active); ?>>Operator</option>
                        <option value="B" <?php echo($basic_user_active); ?>>Basic User</option>
                        <option value="G" <?php echo($guest_active); ?>>Guest</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="user_status" class="col-sm-3 control-label">User Status</label>
                <div class="col-sm-9">
                    <select class="form-control" id="user_status">
                        <option value="A" <?php echo($user_active); ?>>Active</option>
                        <option value="I" <?php echo($user_deactive); ?>>Inactive</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-9 col-sm-10">
                    <div class="processing_div" style="display: none;" id="user_add_processing">
                        <img class="img-responsive loading_img" src="<?php echo($base_url); ?>images/loading.gif" id="loading_img"> Processing...
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>
        </form>
        <button type="button" class="btn btn-primary" id="updateUserBtn">Update User Details</button>
    </div>
    <div class="col-md-6">
        <h5>Upload Images</h5><br/>
        <form class="form-horizontal" method="POST" action="<?php echo($base_url); ?>userImageUpload" enctype="multipart/form-data" id="user_image_upload_form">
            <div class="form-group">
                <label for="user_image_title" class="col-sm-3 control-label">Image Title <span class="compulsory">*</span></label>
                <div class="col-sm-9">
                    <input type="hidden" value="<?php echo($user_id); ?>" name="user_id"/>
                    <input type="text" class="form-control" id="user_image_title" name="user_image_title" placeholder="Image Title"/>
                </div>
            </div>
            <div class="form-group">
                <label for="job_image" class="col-sm-3 control-label">Image <span class="compulsory">*</span></label>
                <div class="col-sm-9">
                    <input type="file" name="user_image" class="form-control" accept="image/*,.pdf">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-9 col-sm-10">
                    <div class="processing_div" style="display: none;" id="user_image_upload_processing">
                        <img class="img-responsive loading_img" src="<?php echo($base_url); ?>images/loading.gif" id="loading_img"> Processing...
                    </div>
                </div>
                <div style="clear: both"></div>
                <div class="alert alert-danger" role="alert" style="margin-top: 10px; display: none;" id="user_image_upload_error_msg"></div>
                <div class="alert alert-success" role="alert" style="margin-top: 10px; display: none;" id="user_image_upload_success_msg">User Image Uploaded Successfully.</div>
            </div>
        </form>
        <button type="button" class="btn btn-primary" id="uploadUserImageBtn">Upload Image</button>
        <?php
                                        $user_image_id = NULL;
                                        $user_image_title = NULL;
                                        $user_image_path = NULL;
                                            foreach ($user_images as $value) {
                                                $user_image_id = $value->user_image_id;
        $user_image_title = $value->user_image_title;
        $user_image_path = $value->user_image_path;
        ?>
        <button data-toggle="modal" data-target="#viewUserImageModel" data-image_id="<?php echo($user_image_id); ?>" type="button" class="btn btn-primary view_image_btn" title="View <?php echo($user_image_title); ?>"><i class="fa fa-image"></i> <?php echo($user_image_title); ?></button>
        <?php } ?>
    </div>
</div>