<%- include('../includes/header') %>

    <!-- Appointment -->
    <section class="section-area account-wraper1">
        <div class="container-fluid">
            <div class="appointment-inner section-sp2 pt-3">
                <div class="container">
                    <%- include('../includes/tabs') %>
                </div>
                <!-- Address Tab -->
                <div class="tabcontent">
                    <div class="container mt-5">
                        <div class="row align-items-center">
                            <div class="col-lg-12">
                                <div class="appointment-form form-wraper">
                                    <div class="address-flex">
                                        <h1 class="mb-4">My Address</h1>
                                        <button type="button"
                                            class="btn btn-sm btn-outline-primary shadow addAddressBtn"
                                            data-toggle="modal" data-target="#staticBackdrop">
                                            Add Address<i class="btn-icon-bx fas fa-chevron-right"></i>
                                        </button>
                                    </div>
                                    <% if(hasAddress){ address.forEach(function(add) { %>
                                        <div class="address-button-flex align-items-center text-left addressbg"
                                            id="row-<%= add.id %>">
                                            <div>
                                                <p>Name:
                                                    <span>
                                                        <%= add.name %>
                                                    </span>
                                                </p>
                                                <p>Address:
                                                    <span>
                                                        <%= add.address %>
                                                    </span>
                                                </p>
                                                <p>City:
                                                    <span>
                                                        <%= add.city %>
                                                    </span>
                                                </p>
                                                <p>Pincode:
                                                    <span>
                                                        <%= add.pincode %>
                                                    </span>
                                                </p>
                                            </div>
                                            <div>
                                                <p>Mobile:
                                                    <span>
                                                        <%= add.mobile %>
                                                    </span>
                                                </p>
                                                <p>Address Type:
                                                    <span>
                                                        <%= add.type=='1' ? 'Work' : add.type=='0' ? 'Home' : 'Other' %>
                                                    </span>
                                                </p>
                                                <p>State:
                                                    <span>
                                                        <%= add.state %>
                                                    </span>
                                                </p>
                                            </div>
                                            <div>
                                                <button class="btn btn-outline-success btn-sm"
                                                    onclick="editAddress('<%= JSON.stringify(add) %>')">Edit <i
                                                        class="btn-icon-bx fas fa-edit"></i></button>
                                                <button class="btn btn-sm btn-outline-danger"
                                                    onclick="deleteAddress('<%= add.id %>')">Delete <i
                                                        class="btn-icon-bx fas fa-trash"></i></button>
                                            </div>
                                        </div>
                                        <% }) }else { %>
                                            <div class="text-center">
                                                <h6>No Address Found</h6>
                                            </div>
                                            <% } %>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    </div>
    <button onclick='window.scrollTo({top: 0, behavior: "smooth"});' class="back-to-top fa fa-chevron-up"></button>
    </div>
    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form id="addressForm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Add Address</h5>
                        <button type="button" class="close closeModal" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body p-5">
                        <div class="row">
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <div class="form-group">
                                    <input type="hidden" name="id" id="addressID">
                                    <label for="name">Name</label>
                                    <input id="name" name="name" type="text" class="form-control"
                                        placeholder="Enter Name">
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="mobile">Mobile</label>
                                    <input id="mobile" name="mobile" type="text" maxlength="10"
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\.*)/g, '');"
                                        required="" class="form-control phone" placeholder="Enter Mobile">
                                </div>
                            </div>
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="form-group">
                                    <label for="address">Address</label>
                                    <textarea id="address" name="address" class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="city">City</label>
                                    <input id="city" name="city" type="text" class="form-control"
                                        placeholder="Enter City">
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="state">State</label>
                                    <input id="state" name="state" type="text" class="form-control"
                                        placeholder="Enter State">
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="pincode">Pincode</label>
                                    <input id="pincode" name="pincode" type="number" class="form-control"
                                        placeholder="Enter Pincode">
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="type">Address Type</label>
                                    <select id="type" name="type" class="form-control">
                                        <option value="">Select Address Type</option>
                                        <option value=0>Home</option>
                                        <option value=1>Work</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary closeModal" data-dismiss="modal">Close</button>
                        <button type="submit" data-type="add" id="addressSubmitBtn" class="btn btn-primary">Add</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Footer ==== -->

    <!-- footer bottom -->
    <div class="back-color">
        <div class="container">
            <div class="footer-bottom">
                <div class="row">
                    <div class="col-12 text-center">
                        <p class="copyright-text">© Copyright 2022 Darwin Platform Pharmaceutical Limited <a href="#"
                                target="_blank" class="text-secondary"></a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- JAVASCRIPT FILES ========================================= -->
    <script src="/js/jquery.min.js"></script>
    <script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/admin/modules/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="/js/functions.js"></script>
    <script src="/js/custom.js"></script>
    <script src="/vendor/toastify/toastify-js.js"></script>
    


    </body>

    </html>