 <style type="text/css">
    md-dialog {
        opacity: 1 !important;
        z-index: 9999 !important;
    }
</style>
   <!-- START MAIN -->
<div data-ng-controller="ProfileSettingController">
    <!-- START WRAPPER -->
    <div class="wrapper">

        <!-- START CONTENT -->
        <section id="content">

            <!--start container-->
            <div class="container">

                <div class="col m12">
                    <h4>Profile Settings</h4>
                </div>

                <div class="row">
                    <!--<div class="col s12">
                        <ul class="tabs">
                            <li class="tab col s3"><a class="active" href="#Profile_tab">Profile</a></li>
                            <li class="tab col s3"><a href="#Notification_tab">Notification</a></li>
                            <li class="tab col s3"><a href="#Password_tab" ng-if="user.Password != null" hidden>Password</a></li>
                            <li class="tab col s3"><a href="#Referral_tab">Referral</a></li>
                        </ul>
                    </div>-->
                    <form name="myform1" ng-submit="UpdateUser(updateUser)">
                        <div id="Profile_tab" >
                            <div class="row">
                                <div class="col s12 m12 l12">
                                    <div class="card-panel">
                                        <div class="row">
                                            <div class="col s12">
                                                <div class="row">
                                                    <div class="input-field col s6">
                                                        <input placeholder="First Name" id="first_name" ng-model="updateUser.firstName" required class="validate" type="text">
                                                        <label for="first_name">First Name</label>
                                                    </div>
                                                    <div class="input-field col s6">
                                                        <input placeholder="Last Name" id="last_name" ng-model="updateUser.lastName" type="text" required class="validate">
                                                        <label for="last_name">Last Name</label>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <!--<div class="input-field col s6">
                                                        <input placeholder="User Name" id="userName" ng-model="updateUser.userName" type="text" required class="validate">
                                                        <label for="email">User Name</label>
                                                    </div>-->
                                                        <div class="input-field col s6">
                                                            <input placeholder="Phone Number"  type="text" title="Enter numbers only" required class="validate" pattern="[0-9+]+" ng-model="updateUser.phoneNumber">
                                                            <label for="PhoneNumber" data-error="PhoneNumber" data-success="right">Mobile</label>
                                                        </div>
                                                        <div class="input-field col s6">
                                                            <input type="date" ng-model="updateUser.dob" class="datepicker">
                                                            <label class="active" for="dob">DOB</label>
                                                        </div>
                                                    <!--<ng-form name="row">
                                                        <div class="input-field col s6">
                                                            <input placeholder="Phone Number" id="" type="tel" title="Please Enter 10 digit Phone Number" ng-pattern="phoneNumbr"  maxlength="10" name="phone" ng-model="updateUser.phoneNumber" required  oninvalid="setCustomValidity('Please Enter 10 digit Phone Number ')" pattern="[0-9]{10}">
                                                            <label for="password">Phone Number</label>
                                                            <span class="error" ng-show="myForm.phone.$error.required">Required!</span>
                                                            <span class="error" ng-show="myForm.phone.$error.minlength">Phone no not less that 10 char.</span>
                                                            <span class="error" ng-show="myForm.phone.$error.maxlength">Phone no not more than 10 char.</span>
                                                            <br><span class="error" ng-show="myForm.phone.$error.pattern">Please match pattern [9889509889 || 9912399123]</span>
                                                        </div>
                                                    </ng-form>-->
                                                </div>
                                                

                                                <!--<div class="row">
                                                    <div class="input-field col s12">
                                                        <div id="content" layout="column" flex>
                                                            <md-content flex layout="column" layout-align="center center" layout-padding>
                                                                <div ng-form="demoForm">
                                                                    <div>
                                                                        <div>
                                                                            <span>DOB</span>
                                                                            <mdp-date-picker mdp-open-on-click required name="dateFormat" mdp-placeholder="(dd/mm/yyyy)" mdp-format="DD/MM/YYYY" ng-model="updateUser.dob">
                                                                                <div ng-messages="demoForm.dateFormat.$error">
                                                                                    <div ng-message="required">This is required</div>
                                                                                    <div ng-message="format">Invalid format</div>
                                                                                </div>
                                                                            </mdp-date-picker>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </md-content>
                                                        </div>
                                                    </div>
                                                </div>-->
                                                <label class="grey-text">Upload your profile picture</label>
                                                <div class="row">
                                                    <div class="file-field input-field col s12 m6">
                                                        <input type="file" id="profileImage" onchange="angular.element(this).scope().checkfile(this)" class="dropify" data-default-file="" />
                                                    </div>
                                                    <div class="input-field col s12 m6">
                                                        <textarea placeholder="Type here..." id="message5" ng-model="updateUser.aboutMe" class="materialize-textarea" length="120"></textarea>
                                                        <label for="message">About Me</label>
                                                    </div>
                                                </div>
                                                    <div class="row">
                                                        <div class="input-field col s12 l6">
                                                            <a class="btn btn_style red btn_round waves-effect waves-light left modal-trigger" href="#deleteAccountModal">
                                                                Delete Account
                                                            </a>
                                                        </div>
                                                        <div class="input-field col s12 l6">                                                           
                                                            <button class="btn btn_style btn_round cyan waves-effect waves-light right" name="action" type="submit">
                                                                Submit
                                                                <i class="mdi-content-send right"></i>
                                                            </button>                                                           
                                                        </div>
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!--<a class="btn green waves-effect waves-light" name="action" href="#/upgradeplan">
                        Upgrade Plan
                        <i class="mdi-content-send right"></i>
                    </a>-->
                        <!--<form name="myform" ng-submit="UpdatePassword(updatePassword)">
                            <input id="sociofake" style="display:none" type="text" name="socioboardfake">
                            <div id="Password_tab" class="col s12" ng-if="user.Password != null" hidden>
                                <div class="row">
                                    <div class="col s12 m12 l12">
                                        <div class="card-panel">
                                            <div class="row">
                                                <div class="col s12">
                                                    <div class="row">
                                                        <div class="input-field col s12">
                                                            <i class="mdi-action-lock-outline prefix"></i>
                                                            <input ng-model="updatePassword.currentPassword" required class="validate" type="password" >
                                                            <label for="password">Current Password</label>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="input-field col s12">
                                                            <i class="mdi-action-lock-outline prefix"></i>
                                                            <input ng-model="updatePassword.newPassword" type="password" required class="validate" title="Password must contain at least 8 characters, including at least 1 number and includes both lower and uppercase letters and special characters" data-rule-minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[$&+,:;=?@@#|'<>.^*()%!-_]).{8,}">
                                                            <label for="password">New Password</label>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="input-field col s12">
                                                            <i class="mdi-action-lock-outline prefix"></i>
                                                            <input ng-model="updatePassword.conformPassword" type="password" required class="validate" title="Password must contain at least 8 characters, including at least 1 number and includes both lower and uppercase letters and special characters" data-rule-minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[$&+,:;=?@@#|'<>.^*()%!-_]).{8,}">
                                                            <label for="Confirmpassword">Confirm Password</label>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="input-field col s12">
                                                            <button id="submitButton" type="submit" class="btn cyan waves-effect waves-light right"> Change Password</button>
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>-->
                </div>
                    <!--<div id="Notification_tab" class="col s12">
                        <div class="row">
                            <div class="col s12 m12 l12">
                                <div class="card-panel">
                                    <div class="row">
                                        <form class="col s12">
                                            <h4>Newsletter Subscription Settings</h4>
                                            <p>Uncheck the lists you no longer wish to be on and then click the button below to complete your unsubscription.</p>
                                            <p>
                                                <input type="checkbox" id="checkbox1" ng-model="mailSettings.dailyGrpReportsSummery" />
                                                <label for="checkbox1">Daily Group Report Summary</label>
                                            </p>
                                            <p>
                                                <input type="checkbox" id="checkbox2" ng-model="mailSettings.weeklyGrpReportsSummery" />
                                                <label for="checkbox2">Weekly Group Report Summary</label>
                                            </p>
                                            <p>
                                                <input type="checkbox" id="checkbox3" ng-model="mailSettings.days15GrpReportsSummery" />
                                                <label for="checkbox3">15 Days Group Report Summary</label>
                                            </p>
                                            <p>
                                                <input type="checkbox" id="checkbox4" ng-model="mailSettings.monthlyGrpReportsSummery" />
                                                <label for="checkbox4">Monthly Group Report Summary</label>
                                            </p>
                                            <p>
                                                <input type="checkbox" id="checkbox5" ng-model="mailSettings.days60GrpReportsSummery" />
                                                <label for="checkbox5">60 Days Group Report Summary</label>
                                            </p>
                                            <p>
                                                <input type="checkbox" id="checkbox6" ng-model="mailSettings.days90GrpReportsSummery" />
                                                <label for="checkbox6">90 Days Group Report Summary</label>
                                            </p>
                                            <p>
                                                <input type="checkbox" id="checkbox7" ng-model="mailSettings.otherNewsLetters" />
                                                <label for="checkbox7">Other Newsletters</label>
                                            </p>
                                            
                                        </form>

                                        <form class="col s12">
                                            <h4>Schedule update settings</h4>
                                            <p>
                                                <input type="checkbox" id="checkbox8" ng-model="mailSettings.scheduleSuccessUpdates" />
                                                <label for="checkbox8">Updates for success of schedule messages</label>
                                            </p>
                                            <p>
                                                <input type="checkbox" id="checkbox9" ng-model="mailSettings.scheduleFailureUpdates" />
                                                <label for="checkbox9">Updates for failure of schedule messages</label>
                                            </p>
                                            
                                        </form>
                                    </div>
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <div class="btn cyan waves-effect waves-light right" ng-click="UpdateMailSettings(mailSettings)" name="action">
                                                Update my subscription
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>-->
                    <!--<div id="Referral_tab" class="col s12">
                        <div class="row">
                            <div class="col s12 m12 l12">
                                <div class="card-panel">
                                    <div class="center-align">
                                        <i></i>
                                        <h6>Do You and Your friends wants to earn a month free ? </h6>
                                        <p>Give your friends a free month of Membership. You'll get a free month when they sign up. *</p>
                                        <a class="waves-effect waves-light btn col s12">Invite Friends using Gmail</a>
                                        <hr>
                                        <p>Manual Enter Email Address </p>
                                        <div class="row">
                                          <form class="col s12">
                                            <div class="row">
                                              <div class="input-field col s12">
                                                <input id="input_text" type="text" length="10">
                                                <label for="input_text">Email addresses (separate emails by commas)</label>
                                              </div>
                                            </div>
                                            <div class="row">
                                              <div class="input-field col s12">
                                                <textarea id="textarea1" class="materialize-textarea" length="120" placeholder="Fashion Tuts has hundreds of amazing online classes. Use the link below to get a free month of Fashion Tuts Membership and unlimited access to these classes."></textarea>
                                                <label for="textarea1">Textarea</label>
                                              </div>
                                            </div>
                                            <a class="waves-effect waves-light btn col s12">Invite By Email</a>
                                            <hr>
                                            <a class="waves-effect waves-light btn blue darken-4">Share on Facebook</a>
                                            <a class="waves-effect waves-light btn blue">Share on Twitter</a>
                                            <a class="waves-effect waves-light btn">Http://link</a>
                                            <hr>
                                            <a class="waves-effect waves-light btn grey">Invite Sent </a>
                                            <a class="waves-effect waves-light btn grey">Month Earned </a>
                                            <a class="waves-effect waves-light btn grey">Month Remaining </a>
                                            <p class="center-align">* For every friend who signs up with a paid membership you will get a month free</p>

                                          </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>-->
            </div>
            </div>
            <!--end container-->
        </section>
        <!-- END CONTENT -->

    </div>
    <!-- END WRAPPER -->

</div>
<script>
    $('.datepicker').pickadate({
        selectMonths: true,
        selectYears: 200
    });
</script>
<!-- END MAIN -->
<div id="deleteAccountModal" class="modal">
    <div class="modal-content no-space">
        <div class="row no-space">
            <form class="col s12">
                <div class="row no-space">
                    <div class="col s12">
                        <h5>You're about to delete your SocioBoard account</h5>
                        <p>If you have a moment, please let us know why you're leaving (optional).</p>
                    </div>
                </div>
                <div class="row no-space">
                    <div class="input-field col s12">
                        <i class="icon-pencil prefix"></i>
                        <textarea id="feedback" type="text" class="materialize-textarea" placeholder="Add your brutally honest feedback here :)"></textarea>
                        <label for="feedback">Feedback</label>
                    </div>
                </div>
                <div class="row no-space">
                    <div class="col l12 s12">
                        <p class="grey-text">Please keep in mind that deleting your Socioboard account is permanent and will remove all of your stored tweets, posts, analytics and accounts forever.</p>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <button class="modal-close btn btn_style red waves-effect waves-light right" type="submit" ng-click="deleteAcc('Deleted!!')">
                            Leave SocioBoard
                            <i class="mdi-content-send right"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }

        .switch input {
            display: none;
        }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

    input:checked + .slider {
        background-color: #2196F3;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

        .slider.round:before {
            border-radius: 50%;
        }
</style>
