<!DOCTYPE html>
<html lang="en">
<head>
    {% include 'head.html' %}

</head>
<body>
    {% include 'nav.html' %}
    <div class="smooth-scroll">
        <div class="banner" id="banner">
            <div class="img-sec">
                <img src="/static/images/about_us.jpg" alt="" width="100%" id="farmhouse_img">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 col-lg-12">
                            <div class="banner-content" id="banner-content">
                                <h2>Profile</h2>
                            </div>
                        </div>
                    </div>
                </div>
                    <img src="/static/images/banner/smoke_1.png" alt="" width="100%" class="smoke">
                    <!-- <img src="/static/images/smoke.gif" alt="" width="100%" class="smoke_gif"> -->
                    <!-- <video><source src="/static/images/smoke_new.gif" type="video/mp4"></video> -->  
            </div>
        </div>

        <section class="my_account">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs new_tab" role="tablist">
                            <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#home">My Orders</a>
                            </li>
                            <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#menu1" id="profileInfo">Profile</a>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div id="home" class="container tab-pane order-history active"><br>
                                <div class="card mt-4">
                                    <div class="card-body p-0 table-responsive">
                                        <h4 class="p-3 mb-0">Product Description</h4>
                                        <table class="table mb-0">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Description</th>
                                                    <th scope="col"></th>
                                                    <th scope="col">Quantity</th>
                                                    <th scope="col">Amount</th>
                                                    <th scope="col">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <th> <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="product" class="" width="80"> </th>
                                                    <td>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem, facilis.</td>
                                                    <td>$100 X 2</td>
                                                    <td><strong>$200</strong></td>
                                                    <td><span class="badge badge-warning">PENDING</span></td>
                                                </tr>
                                                <tr>
                                                    <th colspan="2"> <span>Status:</span> <span class="badge badge-success">PAID</span> </th>
                                                    <td> <span class="text-muted">Total Price</span> <strong>$100</strong> </td>
                                                    <td> <span class="text-muted">Total Paid</span> <strong>$100</strong> </td>
                                                    <td> <span class="text-muted">Due</span> <strong>$100</strong> </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div id="menu1" class="tab-pane fade">
                                <div class="profile mt-3">
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <ul class="nav nav-tabs profile_tab" role="tablist">
                                                <li class="nav-item">
                                                    <a class="nav-link active" data-bs-toggle="tab" href="#personal_information">Personal Information</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-bs-toggle="tab" href="#address">Address</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-bs-toggle="tab" href="#change_password">Change Password</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="tab-content profile_tab_content">
                                                <div class="tab-pane active" id="personal_information">
                                                    <div class="address-info">
                                                        <div class="personal-info">
                                                            <div class="row">
                                                                <div class="col-lg-6 mb-3">
                                                                    <div class="profile-info">
                                                                        <label class="mb-1">Name<span></span></label>
                                                                        <input type="text" class="edit_profile" value="" disabled="">
                                                                        <input type="hidden" id="user_id" class="edit_profile" value="{{ request.user.id }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-6 mb-3">
                                                                    <div class="profile-info">
                                                                        <label class="mb-1">Display Name<span></span></label>
                                                                        <input type="text" id="edit_display" class="edit_profile" placeholder="Name" value="" disabled="">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-6 mb-3">
                                                                    <div class="profile-info">
                                                                        <label class="mb-1">Email Address<span></span></label>
                                                                        <input type="text" id="edit_email" class="edit_profile" placeholder="Email" value="" disabled="">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-6 mb-3">
                                                                    <div class="profile-info">
                                                                        <label class="mb-1">Mobile No<span></span></label>
                                                                        <input type="text" placeholder="Mobile No." value="" disabled="">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <!--<a href="https://eyesi.in/personal-info/100">Edit</a>-->
                                                                    <div class="book_now">
                                                                        <a href="javascript:void(0);">Edit</a>
                                                                        <!-- <a href="javascript:void(0)">Submit</a> -->
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> 
                                                <div class="tab-pane" id="address">
                                                    <div class="address-info">
                                                        <div class="row">
                                                            <div class="col-lg-12">
                                                                <div class="add-address">
                                                                    <div class="book_now">
                                                                        <a href="javascript:void(0);"  data-bs-toggle="modal" data-bs-target="#new_address">Add Address</a>
                                                                        <!-- <a href="javascript:void(0)">Submit</a> -->
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-lg-12">
                                                                <div class="addresses">
                                                                    <span>Home</span>
                                                                    <h4 class="mt-2">satyam</h4>
                                                                    <h6>satyam@gmail.com</h6>
                                                                    <p id="print_address">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore odit minima eius</p>
                                                                </div>
                                                                <div class="book_now d-flex gap-1 mt-3">
                                                                    <a href="javascript:void(0);">Edit</a>
                                                                    <a href="javascript:void(0);">Delete</a>
                                                                    <!-- <a href="javascript:void(0)">Submit</a> -->
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> 
                                                <div class="tab-pane" id="change_password">
                                                    
                                                    <div class="address-info">
                                                         <form id="formdata">
                                                               <span id="error_msg" class="text-danger"></span>
                                                            <div class="row">
                                                                <div class="col-lg-6 mb-3">
                                                                    <div class="profile-info">
                                                                        <label class="mb-1">Current password<span></span></label>
                                                                        <input type="text" placeholder="" name="currentpss" minlentgth="4" maxlength="10" required="">
                                                                        <span class="text-danger"></span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-6 mb-3">
                                                                    <div class="profile-info">
                                                                        <label class="mb-1">New password<span></span></label>
                                                                        <input type="password" placeholder="" name="pwd" minlentgth="4" maxlength="10" required="">
                                                                        <span class="text-danger"></span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-6 mb-3">
                                                                    <div class="profile-info">
                                                                        <label class="mb-1">Confirm New password<span></span></label>
                                                                        <input type="password" placeholder="" name="cpwd" id="cpwd" minlentgth="4" maxlength="10" required="">
                                                                      <input type="hidden" value="100"> 
                                                                        <span class="text-danger"></span>
                                                                    </div>
                                                                </div>
                                                                <div class="address-btns-submit">
                                                                    <input type="submit" class="submit-btn mt-3" value="Submit">
                                                                    <a href="javascript:void(0)" class="cancel-btn mt-3">Cancel</a>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>   
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>


        
        {% include 'footer.html' %}
    </div>
    <div class="modal fade new_address" id="new_address" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form>
                    <h3>Add Address</h3>
                    <div class="row">
                        <div class="col-lg-12">
                            <label>Address Type</label>
                            <select type="text">
                                <option value="Home">Home</option>
                                <option value="Office">Office</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <label>Address Line 1</label>
                            <textarea name="" id="" cols="30" rows="10" placeholder="Email or Phone"></textarea>
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <label>Address Line 2</label>
                            <textarea name="" id="" cols="30" rows="10" placeholder="Email or Phone"></textarea>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <label>State</label>
                            <input type="text" placeholder="State">
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <label>City</label>
                            <input type="text" placeholder="City">
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <label>Pincode</label>
                            <input type="text" placeholder="Pincode" onkeypress="return /[0-9\s]/i.test(event.key)" minlentgth="6" maxlength="6">
                        </div>
                        <button>Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div> 

    {% include 'script.html' %}
    <script src="/static/js/home.js"></script>
    <script src="/static/js/user_profile/get-personal-info.js"></script>
</body>
</html>