<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('../partials/head'); %>
</head>
<body class="container-fluid">

<header>
    <%- include('../partials/header'); %>
</header>

<main class="container-fluid px-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/app">Customers</a></li>
            <li class="breadcrumb-item"><a href="/app/view/<%= customer._id %>"><%= customer.name %></a></li>
            <li class="breadcrumb-item active" aria-current="page">Profile</li>
        </ol>
    </nav> 
    <div class="row pt-3">
        <div class="col-12">
            <div id="alertSuccess"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h3>Customer Profile</h3>
            <hr>
        </div>
    </div>
    <div id="customerProfile" class="bg-dark">        
        <div class="row pt-3">
            <div class="col-3 text-right">
                <span class="large-text"><strong>Name : </strong></span>
            </div>
            <div class="col-9">
                <span class="large-text"><%= customer.name %></span>
            </div>
        </div>
        <div class="row pt-3">
            <div class="col-3 text-right">
                <span class="large-text"><strong>Gender : </strong></span>
            </div>
            <div class="col-9">
                <%                
                    if(customer.gender == "F") {
                %>
                <span>Female</span>
                <%
                    } 
                    if(customer.gender == "M") {
                %>
                <span>Male</span>
                <%
                    }
                %>                    
            </div>
        </div>
        <div class="row pt-3">
            <div class="col-3 text-right">
                <span class="large-text"><strong>Phone Number : </strong></span>
            </div>
            <div class="col-9">
                <span class="large-text"><%= customer.phonenumber %></span>
            </div>
        </div>        
    </div>
    <div class="row pt-3">
        <div class="col-12">
            <h4>Addresses</h4>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <a href="/app/address/<%= customer._id %>/new" class="btn btn-success">
                <i class="fa fa-plus"></i>&nbsp;Add New Address
            </a>                        
        </div>
    </div>
    <br>    
    <div class="row">
        <% for(var i=0; i < customer.addresses.length; i++) { %>     
            <div class="col-md-4">
                <div class="card rounded-border mx-3 my-3 p-3 " style="height: 300px; box-shadow: 1px 2px 5px;">
                    <span><%= customer.addresses[i].line1 %></span>
                    <%
                        if(customer.addresses[i].line2) {
                    %>
                            <span><%= customer.addresses[i].line2 %></span>
                    <%
                         }
                    %>            
                    <span><%= customer.addresses[i].city %>, <%= customer.addresses[i].state %></span>
                    <span><%= customer.addresses[i].postalcode %></span>
                    <%
                        if(customer.addresses[i].main) {
                    %>
                            <span class="text-success"><strong>Default Address</strong></span>
                    <%
                         }
                    %>
                    <div id="addressOptions" class="pt-4 text-center">
                        <a href="/app/address/<%= customer._id %>/edit/<%= customer.addresses[i]._id %>" class="btn-link text-primary"><i class="fa fa-pencil"></i> Edit</a> |
                        <button type='button' name="<%= i %>" onclick='confirmDeleteAdress("<%= customer.addresses[i]._id %>","<%= customer._id %>")' class="btn btn-link text-danger"><i class="fa fa-trash"></i> Delete</button>
                    </div>              
                </div>
            </div>        
        <% } %>             
    </div>
</main>
<!-- Modal -->
<div class="modal fade" id="modalDelete" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Delete Address <span id="customername"></span></h5>
                <input type="hidden" id="addressId">
                <input type="hidden" id="customerId">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal-body">
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" id="deleteAddress">Delete</button>
            </div>
        </div>
    </div>
</div>
<footer>
    <%- include('../partials/footer'); %>
</footer>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="successToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="/assets/img/logo.png" width="25" class="rounded me-2" alt="logo"/>
            <strong class="me-auto">Address Deleted</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            <span class="text-success" id="message"></span>
        </div>
    </div>
    <div id="errorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="/assets/img/logo.png" width="25" class="rounded me-2" alt="logo"/>
            <strong class="me-auto">Error Deleting Address</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            <span class="text-danger" id="message"></span>
        </div>
    </div>    
</div>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script type="text/javascript">
    function confirmDeleteAdress(address, customer) {
        console.log(address);
        console.log(customer);
        $("#addressId").val(address);
        $("#customerId").val(customer);
        $('#modal-body').html('Are you sure you want to delete this adddress <strong></strong>?');
        $('#modalDelete').modal('show');
    };    

    $('#deleteAddress').on('click', function() {
        const addressId = $("#addressId").val();
        const customerId = $("#customerId").val();
        fetch('/api/v1/addresses/' + customerId + "/" + addressId, {
            method: 'delete',
        })
        .then(response => {
            if (response.ok) {
                $('#modalDelete').modal('hide');
                $('#successToast .toast-body #message').html(response.message);
                var toast = new bootstrap.Toast($('#successToast'));
                toast.show();
                setTimeout(function() {
                    window.location.href = "/app/view/<%= customer._id %>";
                }, 3000);            
            }
        })
        .catch(err => {
            $('#errorToast .toast-body #message').html(err.message);
            var toast = new bootstrap.Toast($('#errorToast'));
            toast.show();
        })            
    })
</script>

</body>
</html>