<link href="<?php echo base_url() ?>front_end_resource/profile/edit_profile_image.css" rel="stylesheet" type="text/css"/>
<link href="<?php echo base_url() ?>resource_library/crop_image/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
<link href="<?php echo base_url() ?>resource_library/crop_image/jcrop_demos.css" rel="stylesheet" type="text/css" />
<script src="<?php echo base_url() ?>resource_library/crop_image/jquery.Jcrop.min.js"></script>
<script src="<?php echo base_url() ?>resource_library/crop_image/jcrop_demos.js"></script>

<div id="ImageModel" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content gray_ttc" >
            <div class="modal-header" style="padding: 20px 20px 0 20px">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel" style="font-size: 20px">Select profile photo</h4>
            </div>
            <div class="modal-body padding-top-zero">
                <div class="row">
                    <div style="margin-top: 20px">
                        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                            <li class="active" id="uploadPhotoViewTab" style="margin-left: 10px !important">
                                <a href="#uploadPhotoView" data-toggle="tab">Upload Photos</a>
                            </li>
                            <li class="" id="myPhotosTab">
                                <a href="#myPhotos" data-toggle="tab" >Your Photos</a>
                            </li>
                            <div id="viewBackButton" style="display: none">
                                <a class="pull-right" style="padding-right: 40px;" href="javascript:void(0)" onclick="backImageView()"><i class="glyphicon glyphicon-chevron-left"></i></a>
                                <input type="hidden" id="backImageValue" value="">
                                <input type="hidden" id="backImageType" value="">
                                <input type="hidden" id="profileImageContentType" value="">
                                <input type="hidden" id="personID" value="<?php echo $person_info->person_id ?>">
                            </div>
                        </ul>
                        <div id="my-tab-content" class="tab-content">
                            <div class="tab-pane active" id="uploadPhotoView" style="height: 400px;">

                                <!--view Error Message --->
                                <div class="col-sm-8 col-sm-offset-2" id="errorMessageView" style="display: none;">
                                    <div class="alert alert-warning alert-dismissible alert-view" role="alert">
                                        <button type="button" class="close" 
                                                onclick="closeErrorModal()"
                                                aria-label="Close">
                                            <span aria-hidden="true">&times;</span></button>
                                        <strong>Error!</strong> <span id="errorMessage"></span>
                                    </div>
                                </div>
                                <!--view Error Message --->


                                <!--view Crop Box --->

                                <!--view Crop Box --->

                                <!-- <div class="tab-content panel-body" id="uploadPhotos" style="height: 100%; cursor: pointer;" onclick="documentID('uploadFile').click();"> -->
                                <div class="tab-content panel-body" id="uploadPhotos" style="height: 100%; cursor: pointer;">



                                    <!--view progress BAR --->
                                    <div class="col-sm-8 col-sm-offset-2" id="progressBarView" style="margin-top: 200px; display: none">
                                        <div class="progress">
                                            <div id="progressBar" class="progress-bar progress-bar-success active" role="progressbar"
                                                 aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="">

                                            </div>
                                        </div>
                                    </div>
                                    <!--view progress BAR --->



                                    <div class="col-sm-8 col-sm-offset-2" id="view_image" style="height: 100%; display: block;">
                                        <!--view image --->
                                        <div class="col-sm-12" id="imageView" style="display: none; margin-top: -7px;">
                                            <span style="width: 100%; height: 100%;">
                                                <!--<div id="imageParentDiv">-->
                                                <!--<div id="imageSourceDiv">-->
                                                <img id="imageSource"
                                                     src="">

                                                <!--</div>-->
                                                <div id="cropBox" class="crop-box" style="display: none;"></div>
                                                <!--</div>-->
                                            </span>
                                        </div>
                                        <input type="hidden" id="imageSourceValue" value="">
                                        <input type="hidden" id="imageHeight" value="">
                                        <input type="hidden" id="imageWidth" value="">
                                        <!--view image --->



                                        <!--view image upload from --->
                                        <div class="col-sm-12" id="uploadImageFrom" style="margin-top: 100px; display: block; ">
                                            <div class="col-sm-12"><i class="fa fa-camera fa-5x"></i></div>
                                            <div class="col-sm-12">
                                                <h3 style="text-align: center !important">Drag a profile photo here</h3>
                                            </div>
                                            <div class="col-sm-12">
                                                <h3 style="text-align: center !important;margin-top: 0px">-or-</h3>
                                            </div>
                                            <div class="col-sm-12">
<!--                                                <script>
                                                    $(":file").filestyle({icon: false});
                                                </script>-->
                                                <center>
                                                    <input 
                                                        class="filestyle" 
                                                        data-icon="false" 
                                                        data-input="false" 
                                                        id="uploadFile" 
                                                        data-badge="false" 
                                                        onchange="getProfileImage(this)" 
                                                        data-buttontext="Select a photo from your computer" 
                                                        style="position: absolute; clip: rect(0px, 0px, 0px, 0px);" tabindex="-1" type="file">
                                                    <!--
                                                    <div class="bootstrap-filestyle input-group">
                                                        <span class="group-span-filestyle " tabindex="0">
                                                            <label for="uploadFile" class="btn btn-default ">
                                                                <span class="buttonText">
                                                                    Select a photo from your computer
                                                                </span>
                                                            </label>                                                                
                                                        </span>
                                                    </div>-->

                                                </center>
                                            </div>
                                        </div>
                                        <!-- view image upload from --->


                                    </div>

                                    <div class="col-sm-2 text-left" id="actionIcon" style="font-size: 14px; display: none">
                                        <input type="hidden" id="rotate_degree" value="0">
                                        <span class="col-sm-12">
                                            <a href="javascript:void(0)" id="left_rotate">
                                                <i class="fa fa-undo" aria-hidden="true"></i></i> Left</a>
                                        </span><br>
                                        <span class="col-sm-12">
                                            <a href="javascript:void(0)" id="right_rotate">
                                                <i class="fa fa-repeat" aria-hidden="true"></i> Right</a>
                                        </span><br>
                                        <span class="col-sm-12">
                                            <a href="javascript:void(0)" id="viewCropBox"><i class="fa fa-crop" aria-hidden="true"></i> Crop</a>
                                        </span><br>
                                        <span class="col-sm-12">
                                            <a href="javascript:void(0)" id="startCropping" style="display: none"
                                               onclick="resizeImage('<?php  echo base_url() . 'profile/crop_profile_image'                                                     ?>')"><i class="fa fa-check" aria-hidden="true"></i> Ok</a>
                                        </span><br>
<!--                                        <span class="col-sm-12"><a href="#" id="cancel_crop"><i class="fa fa-close" aria-hidden="true"></i> Cancel</a></span><br>-->
                                    </div>
                                    <input type="hidden" id="ajax_url" value="<?php echo base_url() . 'profile/upload_profile_image/'. $profile_url?>">
                                    <input type="hidden" id="rotate_image_url" value="<?php echo base_url() . 'profile/rotate_profile_image' ?>">
                                    
                                    <input type="hidden" id="x" name="x" />
                                    <input type="hidden" id="y" name="y" />
                                    <input type="hidden" id="w" name="w" />
                                    <input type="hidden" id="h" name="h" />
                                    <input type="hidden" id="person_url" value="<?php echo $person_info->url?>">
                                </div>   
                            </div>

                            <!--view all photo-->
                            <div class="tab-pane" id="myPhotos">
                                <div class="tab-content panel-body" style="overflow-y: scroll;height: 400px;">

                                    <div id="viewSingleImage" style="display: none; height: 300px; width: 350px; margin-left: 280px;">
                                        <img id="viewSingleImageSrc" src="" style="height: 100%; width: 100%;">
                                    </div>
                                    <div class="col-sm-12" id="viewImage" style="display: block;">                                        
                                        <?php
                                        foreach ($content_result as $content_value) {
                                            ?>
                                            <div class="col-sm-3 col-sm-3 col-xs-12" >
                                                <div class="thumbnail">
                                                    <img onclick="viewAlbumImage('<?php echo $content_value->content_library_type_id ?>', '<?php echo $content_value->content_library_type ?>')"
                                                         src="<?php echo base_url() . 'content-library/' . $person_info->url . '/' . $person_info->person_image ?>" alt="Image" style="height: 150px; width: 80%; cursor: pointer;">
                                                    <div class="caption" style="padding: 0px">
                                                        <h3 style="text-align: center !important;margin: 5px">
                                                            <strong>
                                                                <?php
                                                                if ($content_value->content_library_type == 1) {
                                                                    echo 'Profile photo';
                                                                }
                                                                if ($content_value->content_library_type == 2) {
                                                                    echo 'Course Image';
                                                                }
                                                                ?>
                                                            </strong></h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <?php
                                        }
                                        ?>
                                        <?php
                                        foreach ($post_result as $post_value) {
                                            ?>
                                            <div class="col-sm-3 col-sm-3 col-xs-12" >
                                                <div class="thumbnail">
                                                    <img onclick="viewPostImage()"
                                                         src="<?php echo base_url() . 'content-library/' . $person_info->url . '/' . $post_value->post_details ?>" alt="Image" style="height: 150px; width: 80%; cursor: pointer;">
                                                    <div class="caption" style="padding: 0px">
                                                        <h3 style="text-align: center !important;margin: 5px">
                                                            <strong>
                                                                Post Image
                                                            </strong></h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <?php
                                        }
                                        ?>
                                    </div>
                                    <input type="hidden" id="contentLibraryId" value="">
                                    <input type="hidden" id="contentLibraryType" value="">
                                    <input type="hidden" id="viewImageUrl" value="<?php echo base_url() . 'content-library/' . $person_info->url ?>">
                                    <input type="hidden" id="deleteProfileImageUrl" value="<?php echo base_url() . 'profile/update_profile_image_status' ?>">
                                    <input type="hidden" id="viewAlbumImageUrl" value="<?php echo base_url() . 'profile/view_album_image' ?>">
                                    <input type="hidden" id="viewImageDeshboardUrl" value="<?php echo base_url() . 'profile/view_image_deshboard' ?>">
                                    <input type="hidden" id="profileImagePath" value="<?php echo $person_info->person_image ?>">

                                </div>   
                            </div>
                            <!--view all photo-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="saveButton" type="button" style="display: block"
                        onclick="saveProfilePhoto('<?php echo base_url() . 'profile/update_profile_image/'. $profile_url; ?>')"
                        class="btn btn-success disabled col-sm-3" style="">Set as profile photo</button>

                <button id="updateButton" type="button" style="display: none"
                        onclick="updateProfilePhoto('<?php echo base_url() . 'profile/set_profile_image'; ?>')"
                        class="btn btn-success col-sm-3 disabled" style="">Set as profile photo</button>

                <button type="button" id="cancelButton" class="btn btn-danger col-sm-1 disabled" style="float: left">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div>

</div>
<script src="<?php echo base_url()?>front_end_resource/profile/edit_profile_image.js" type="text/javascript"></script>