{% include 'web/include_comman/header.html' %}

        <!-- Sidebar -->
        {% include 'web/include_comman/sidebar.html' %}
        <!-- End of Sidebar -->

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">

                <!-- Topbar -->
                {% include 'web/include_comman/right_top.html' %}
                <!-- End of Topbar -->

                <!-- Begin Page Content -->
                <div class="container-fluid">

                    <!-- Page Heading -->
                    {% comment %} <h1 class="h3 mb-2 text-gray-800">{{title}}</h1> {% endcomment %}
                   

                    <!-- DataTales Example -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <div class="row">
                                <div class="col-lg-6">
                                    <h6 class="m-0 font-weight-bold text-primary">Profile</h6>
                                </div>
                                <div class="col-lg-6">
                                    <a href="{% url 'web:user_dashboard' %}" class="btn btn-info btn-sm float-right" role="button">Back</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card-body">
                            {% include 'web/message.html' %}
                            <div class="table-responsive" style="overflow: hidden;">
                                                         
                        <form action="" method="POST" id="add_profile">
                            {% csrf_token %}
                            <input type="hidden" value="{{phoneid}}" name="phoneid" />
                            <div class="container">
                            <div class="row">    
                                
                            {% comment %} {{form.as_p}} {% endcomment %}
                            <div class="col">
                                <label >First Name <span style="color:red;"> *</span> </label>
                            {{forms.first_name|capfirst}}
                            </div>
                            <div class="col">
                                <label >Last Name <span style="color:red;"> *</span> </label>
                            {{forms.last_name|capfirst}} 
                            </div>
                            
                            {% comment %} <div class="form-group">
                                <label >Country </label>
                            {{forms.country.id}} 
                            </div>  {% endcomment %}
                            {% comment %} <div class="form-group">
                                <label >Address </label>
                            {{forms.address}} 
                            </div>  {% endcomment %}
                        </div><br>
                        
                        <div class="row">
                            <div class="col-6">
                                <label >Address line 1 <span style="color:red;"> *</span></label>
                                {{forms.address|capfirst}}
                            </div>   
                            <div class="col-6">
                            <label >Address line 2<span style="color:red;"> *</span></label>
                            {{forms.address_line_2|capfirst}} 
                            </div>
                        </div> <br>
                        <div class="row">
                            <div class="col-6">
                                <label >City<span style="color:red;"> *</span> </label>
                                {{forms.city|capfirst}} 
                            </div>   
                            <div class="col-6">
                            <label >State<span style="color:red;"> *</span> </label>
                            {{forms.state|capfirst}} 
                            </div>
                        </div>  <br>
                        <div class="row">
                            <div class="col-6">
                                <label >Zip code<span style="color:red;"> *</span> </label>
                                {{forms.zipcode}}
                            </div>   
                            <div class="col-1">
                                <label >CC <span style="color:red;"> *</span></label>
                                <br>
                                <div style="width: 69px;
                                border: 1px solid;
                                border-radius: 7px;
                                position: absolute;
                                left: 13px;
                                top: 33px;
                                outline: none;
                                padding-left: 10px;
                                padding-top: 6px;
                                height: 38px;
                                "><span>+</span>
                                <input id="cc_id" class="text-secondary" type="number" name="country_code" min="1" value="{{country_code}}" style="height: 34px;
                                width: 45px;
                                border: none;
                                border-radius: 7px;
                                position: absolute;
                                left: 21px;
                                top: 1px;
                                outline: none;
                                padding-left: 2px;"  oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                type = "number"
                                maxlength='4' required>
                                </div>
                                {% comment %} <div style="background-color: #DDDDDD;padding: 5px;border-radius: 7px;border: 1px solid; ">
                                    {{user_data.country_code}} 
                               </div> {% endcomment %}
                               
                            </div>     
                                {% comment %} <a href="{% url 'web:Verify_mobile_number' request.user.id %}" class="id_but" role="button">Send Otp</a> {% endcomment %}
                           
                            <div class="col-5">
                                <label >Phone Number <span style="color:red;"> *</span> </label>
                                {{forms.phone_number}} 
                                {% comment %} <a href="{% url 'web:Verify_mobile_number' request.user.id %}" class="id_but" role="button">Send Otp</a> {% endcomment %}
                            </div> 
                        </div>        
                               
                        <br>  
                        <div class="row"> 
                            <div class="col">
                                <label >Country</label>
                                <div style="background-color: #DDDDDD;padding: 8px;border-radius: 8px;border: 1px solid; ">
                                    {{user_data.country.name}}
                               </div>
                                {% comment %} <a href="{% url 'web:Verify_mobile_number' request.user.id %}" class="id_but" role="button">Send Otp</a> {% endcomment %}
                            </div> 
                            
                        </div>
                        <br>    
                            
                        <div class="row">
                            <div class="col">
                            <label style="margin-bottom:23px;" >Email Id </label>
                               
                                <div style="background-color: #DDDDDD;padding: 8px;margin-top:-16px;border-radius: 8px;border: 1px solid; ">
                                 {{user_data.email}}
                            </div>
                            </div>
                            <div class="col">
                                <label style="margin-bottom:23px;" >Role </label>
                                    <div  style="background-color: #DDDDDD;padding: 8px;margin-top:-16px;border-radius: 8px;border: 1px solid;"> 
                                        {{user_data.roles}}
                                    </div>
                                </div>
                        </div>
                        <br>
                        {% comment %} <div class="row">
                           
                        </div> {% endcomment %}
                         <br>
                         <input type="submit" class="btn btn-success m-2" value="Update">
                        </form>
                    </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /.container-fluid -->

            </div>
            <!-- End of Main Content -->
            <style>
                #id_edit{
                    background-color:white;
                    color:red;
                    border:none;
                }
                #id_edit:focus{
                    border-color: inherit;
                    -webkit-box-shadow: none;
                    border: none;
                    outline: none;
                }
                .id_but{
                    
                    background-color:white;
                    font-color:black;
                } 
                label{
                font-weight:bold;
                color:black;
                }
                #last_name
                {
                    width:100%;
                }
                #first_name
                {
                    width:100%;
                }
                #phone_number
                {
                    width:100%;
                }
                .error{
                    width: 100%;
                    padding: 10px;
                }
                P{
                    
                }
            </style>

            {% include 'web/include_comman/footer.html' %}
            <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
            <script type="text/javascript">
                $("#add_profile").validate({
                    rules:{
                        id_phone_number:{
                            required:true,
                        },
                        id_first_name:{
                            required:true,
                        },
                        id_last_name:{
                            required:true,
                        },
                        id_address:{
                            required:true,
                        },
                        id_address_line_2:{
                            required:true,
                        },
                        id_city:{
                            required:true,
                        },
                        id_state:{
                            required:true,
                        },
                        id_zipcode:{
                            required:true,
                        },
                        cc_id:{
                            required:true;
                        },
                    }
                });
            </script>
            

            
            <style>
                #add_profile .error{
                    font-size: 14px;
                    color: red;
                }
                
            </style>