<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('../partials/head'); %>
</head>
<body>
<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 active" aria-current="page">New Customer</li>
        </ol>
    </nav>
    <div class="row">
        <div class="col-12">
           <h3>New Customer</h3>
           <hr>
        </div>
    </div>
    <form action="/api/v1/customers" method="POST" id="customerForm">
        <div class="row">
            <div class="col-md-4 col-12 pt-2">
                <div class="form-group">
                    <label for="name">Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="Customers name" required>
                </div>                          
            </div>
            <div class="col-md-4 col-12 pt-2">
                <div class="form-group">
                    <label for="phonenumber">Phone number <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="phonenumber" name="phonenumber" placeholder="(999) 999-9999" required>
                </div>                          
            </div>
            <div class="col-md-4 col-12 pt-2">
                <div class="form-group">
                    <label for="name">Gender <span class="text-danger">*</span></label>
                    <select class="form-select" id="gender" name="gender" required>
                        <option value="">--</option>
                        <option value="M">Male</option>
                        <option value="F">Female</option>
                    </select>
                </div>                          
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col">
                <h3>Main Address</h3>
                <span class="text-muted">Enter the details of your main address</span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-12 pt-2">
                <div class="form-group">
                    <label for="line1">Address Line 1 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="line1" name="line1" placeholder="Address Line 1" required>
                </div>                          
            </div>
            <div class="col-md-6 col-12 pt-2">
                <div class="form-group">
                    <label for="line2">Address Line 2 </label>
                    <input type="text" class="form-control" id="line2" name="line2" placeholder="Address Line 2">
                </div>                          
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-12 pt-2">
                <div class="form-group">
                    <label for="city">City <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="city" name="city" placeholder="City" required>
                </div>                          
            </div>  
            <div class="col-md-4 col-12 pt-2">
                <div class="form-group">
                    <label for="state">State <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="state" name="state" placeholder="State" required>
                </div>                          
            </div>  
            <div class="col-md-4 col-12 pt-2">
                <div class="form-group">
                    <label for="postalcode">Postal Code </label>
                    <input type="text" class="form-control" id="postalcode" name="postalcode" placeholder="Postal Code">
                </div>                          
            </div>
        </div>
        <hr>
        <div class="row justify-content-center pt-3">
            <div class="col-md-3 col-12 pt-2">
                <div class="form-group">
                    <button class="form-control btn btn-lg btn-success" type="submit">Create</button>
                </div>
            </div>
            <div class="col-md-3 col-12 pt-2">
                <div class="form-group">
                    <a href="/app" class="form-control btn btn-lg btn-danger">Cancel</a>
                </div>
            </div>
        </div>
        <input type="hidden" value="true" id="main" name="main">
    </form>
</main>

<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">Customer Created</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 Creating Customer</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>
    $("#customerForm").submit(function(e) {
        e.preventDefault();
        var form = $(this);
        var url = form.attr('action'); 
        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(),
            success: function(response){
                $('#successToast .toast-body #message').html(response.message);
                var toast = new bootstrap.Toast($('#successToast'));
                toast.show();
                setTimeout(function() {
                    window.location.href = "/app";
                }, 3000);
            },
            error: function(error) {
                $('#errorToast .toast-body #message').html(error.responseJSON.message);
                var toast = new bootstrap.Toast($('#errorToast'));
                toast.show();
            }
        });
    });  
</script>
</body>
</html>