@extends('layouts.layout')

@section('title', 'User Profile')

@section('content')

<section class="content">
    <div class="container-fluid">
        <div class="block-header">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <ul class="breadcrumb breadcrumb-style ">
                        <li class="breadcrumb-item bcrumb-1">
                            <a href="{{url('/')}}/home">
                                <i class="fas fa-home"></i> Home</a>
                        </li>
                        <li class="breadcrumb-item active">Profile</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Your content goes here  -->
        <div class="row clearfix">

             @if(Session::has('message'))
             <div class="col-lg-12 col-md-12">
                <div class="alert bg-{{Session::get('status')}} alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    {{ Session::get('message') }}
                </div>
            </div>
             @endif   

            <div class="col-lg-4 col-md-12">
                <div class="card">
                    <div class="m-b-20">
                        <div class="contact-grid">
                            <div class="profile-header bg-dark">
                                <div class="user-name">{{$user->name}}</div>
                                <div class="name-center">{{$user->email}}</div>
                            </div>
                            <img src="{{url('/')}}/assets/images/usrbig.jpg" class="user-img" alt="">
                            <p> </p>
                            <p>
                                <i class="fa fa-map-marker-alt col-blue"></i> {{$user->address}},{{$user->address1}},
                                <br> {{isset($states)?$states[0]->name:''}}, {{isset($cities)?$cities[0]->name:''}},
                                <br /> {{isset($country)?$country[0]->name:''}}
                            </p>
                            <div>
                                <span class="phone">
                                    <i class="material-icons col-blue">phone</i>{{$user->phone_no}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 col-md-12">
                <div class="card">
                    <div class="profile-tab-box">
                        <div class="p-l-20">

                            <ul class="nav ">
                                <li class="nav-item tab-all">
                                    <a class="nav-link active show" href="#project" data-toggle="tab">Basic Info</a>
                                </li>
                                <li class="nav-item tab-all p-l-20">
                                    <a class="nav-link" href="#usersettings" data-toggle="tab">Settings</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="project" aria-expanded="true">
                        <div class="row clearfix">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <div class="card project_widget">
                                    <div class="body">
                                        <div class="row">
                                            <div class="col-md-3 col-6 b-r">
                                                <i class="fa fa-user col-blue"></i><strong> Name</strong>
                                                <br>
                                                <p class="text-muted">{{$user->name}}</p>
                                            </div>
                                            <div class="col-md-3 col-6 b-r">
                                                <strong><i class="fa fa-phone col-blue"></i> Mobile</strong>
                                                <br>
                                                <p class="text-muted">{{$user->phone_no}}</p>
                                            </div>
                                            <div class="col-md-3 col-6 b-r">
                                                <i class="fa fa-envelope col-blue"></i> <strong>Email</strong>
                                                <br>
                                                <p class="text-muted">{{$user->email}}</p>
                                            </div>
                                            <div class="col-md-3 col-6">
                                                <i class="fa fa-map-marker-alt col-blue"></i> <strong>Country</strong>
                                                <br>
                                                <p class="text-muted">{{isset($country)?$country[0]->name:''}}</p>
                                            </div>
                                        </div>
                                        <p>{{$user->remark}}</p>
                                        <hr>
                                        <div class="text-center"><button type="button" onclick="redirectToEdit()" style="margin:0% 40%" class="btn btn-info btn-round"><i class="fa fa-edit"></i> Edit Profile</button></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="timeline" aria-expanded="false">
                    </div>
                    <div role="tabpanel" class="tab-pane" id="usersettings" aria-expanded="false">
                        <div class="card">
                            <div class="header">
                                <h2><strong>Security</strong> Settings</h2>
                            </div>
                            <div class="body">

                                <div class="alert bg-pink alert-dismissible" role="alert" id="pwderroralert" style="display: none">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    <span id="pwdmsg"></span>
                                </div>

                                <div class="alert bg-green alert-dismissible" role="alert" id="pwdsalert" style="display: none">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    <span id="pwdsmsg"></span>
                                </div>

                                <form method="post" id="pwdfrm" action="">
                                    @csrf
                                <div class="form-group">
                                    <input type="password" class="form-control" name="currect_pwd" id="currect_pwd" placeholder="Current Password *">
                                    <span id="currect_showpwd" style="display: none;" class="fa fa-fw fa-eye field-icon" onclick="showpwd('pwd','currect')"></span>
                                    <span id="currect_hidepwd" class="fa fa-fw fa-eye-slash field-icon" onclick="showpwd('text','currect')"></span>
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control" name="new_pwd" id="new_pwd" placeholder="New Password *">
                                    <span id="new_showpwd" style="display: none;" class="fa fa-fw fa-eye field-icon" onclick="showpwd('pwd','new')"></span>
                                    <span id="new_hidepwd" class="fa fa-fw fa-eye-slash field-icon" onclick="showpwd('text','new')"></span>
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control" name="confirm_pwd" id="confirm_pwd" placeholder="Confirm Password *">
                                    <span id="confirm_showpwd" style="display: none;" class="fa fa-fw fa-eye field-icon" onclick="showpwd('pwd','confirm')"></span>
                                    <span id="confirm_hidepwd" class="fa fa-fw fa-eye-slash field-icon" onclick="showpwd('text','confirm')"></span>
                                </div>
                                <div class="text-center"><button type="button" onclick="changepwd()" class="btn btn-info btn-round">Save Changes</button></div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</section>

<style type="text/css">
    .field-icon {
      float: right;
      margin-left: -25px;
      margin-top: -25px;
      position: relative;
      z-index: 2;
    }

    .container{
      padding-top:50px;
      margin: auto;
    }
</style>
<script type="text/javascript">
    function redirectToEdit() {
        window.location = "{{url('/')}}/profile/edit"
    }

    function showpwd(val,id) {
        if(val=='text') { 
            $('#'+id+'_pwd').attr('type', 'text'); 
            $('#'+id+'_hidepwd').hide(); 
            $('#'+id+'_showpwd').show(); 
        }
        if(val=='pwd') {
            $('#'+id+'_pwd').attr('type', 'password'); 
            $('#'+id+'_hidepwd').show(); 
            $('#'+id+'_showpwd').hide(); 
        }
    }

    function changepwd() {
        var txtCount = $("#new_pwd").val().length;
        if($("#currect_pwd").val()!='' && $("#new_pwd").val()!='' && $("#confirm_pwd").val()!='') {
            if(txtCount>6) {
                if($("#new_pwd").val()==$("#confirm_pwd").val()) {
                    //$("#pwdfrm").submit();
                    $.ajax({
                       type: "POST",
                       url: "{{url('/')}}/changepwd",
                       data: $("#pwdfrm").serialize(), 
                       success: function(data)
                       {
                           if(data.status=='success') {
                                $("#pwderroralert").hide();
                                $("#pwdsalert").show();
                                $("#pwdsmsg").html('Password has been changed successfully!');
                                $("#pwdfrm")[0].reset()
                           } else {
                                $("#pwderroralert").show();
                                $("#pwdsalert").hide();
                                $("#pwdmsg").html(data.msg);
                           }
                       }
                     });
                } else {
                    $("#pwderroralert").show();
                    $("#pwdsalert").hide();
                    $("#pwdmsg").html('Password and connfirm password did not match!');
                }
            } else {
                $("#pwderroralert").show();
                $("#pwdsalert").hide();
                $("#pwdmsg").html('Please enter atlease 6 characters or more!');
            }
        } else {
            $("#pwderroralert").show();
            $("#pwdsalert").hide();
            $("#pwdmsg").html('Please enter all values!');
        }
    }
</script>

@endsection