@using ActionTireCo.Crm.Model.View
@model CustomerContact

@using (Html.BeginForm("Add", "Contact", FormMethod.Post))
{
    <div class="modal fade" id="modalContact" tabindex="-1" role="dialog" aria-labelledby="modalContactLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalContactLabel">Add Contact</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <ul class="nav nav-tabs" style="margin-bottom: 10px;">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#contact">Contact</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#phoneNumbers">Phone</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#emailAddresses">Email</a>
                                </li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div class="tab-pane container active" id="contact">
                                    <div class="container">
                                        <div class="row">
                                            <div class="form-group">
                                                <!-- <input type="text" class="form-control" id="inputFirstName" aria-describedby="firstNameHelp" placeholder="First Name"> -->
                                                @Html.TextBoxFor(m => m.Contact.FirstName, new { @type = "text", @class = "form-control", @placeholder = "First Name", @required = true })
                                            </div>

                                            <div class="form-group">
                                                <!-- <input type="text" class="form-control" id="inputMiddleName" aria-describedby="middleNameHelp" placeholder="Middle Name"> -->
                                                @Html.TextBoxFor(m => m.Contact.MiddleName, new { @type = "text", @class = "form-control", @placeholder = "Middle Name" })
                                            </div>

                                            <div class="form-group">
                                                <!-- <input type="text" class="form-control" id="inputLastName" aria-describedby="middleNameHelp" placeholder="Last Name"> -->
                                                @Html.TextBoxFor(m => m.Contact.LastName, new { @type = "text", @class = "form-control", @placeholder = "Last Name", @required = true })
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane container fade" id="phoneNumbers">
                                    <div class="container">
                                        <div class="row">
                                            <div class="form-group">
                                                <!-- <input type="text" class="form-control" placeholder="Phone Number"> -->
                                                @Html.TextBoxFor(m => m.PhoneNumber.Value, new { @type = "text", @class = "form-control", @placeholder = "Phone Number", @required = true })
                                            </div>
                                            <div class="form-group">
                                                <!-- <input type="text" class="form-control" placeholder="Ext"> -->
                                                @Html.TextBoxFor(m => m.PhoneNumber.Extension, new { @type = "text", @class = "form-control", @placeholder = "Extension Number" })
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane container fade" id="emailAddresses">
                                    <div class="container">
                                        <div class="row">
                                            @Html.TextBoxFor(m => m.EmailAddress.Value, new { @type = "text", @class = "form-control", @placeholder = "Email Address", @required = true })
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
        @Html.HiddenFor(m => m.CustomerId, new { @id = "contactCustomerId" })
    </div>
}