@page
@{
    ViewData["Title"] = "Lead Contact List";
}

<div id="app" v-cloak>
    <div class="row">
        <div class="col-12">
            <div class="grid-container">
                <div ref="mainGridRef"></div>
            </div>
        </div>
    </div>

    <div class="modal fade" ref="mainModalRef" id="MainModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" v-text="state.mainTitle"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body bg-body-tertiary">
                    <input type="hidden" v-model="state.id" id="Id" name="Id" />
                    <form id="MainForm">
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5>Main Info</h5>
                            </div>
                            <div class="card-body bg-body-tertiary">
                                <div class="row mb-2">
                                    <div class="col-md-6">
                                        <label for="LeadId">Lead</label>
                                        <div ref="leadIdRef"></div>
                                        <label class="text-danger" v-text="state.errors.leadId"></label>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="Number">Number</label>
                                        <input ref="numberRef" v-model="state.number" class="form-control" placeholder="" readonly />
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-6">
                                        <label for="FullName">Full Name</label>
                                        <input ref="fullNameRef" v-model="state.fullName" class="form-control" placeholder="" required />
                                        <label class="text-danger" v-text="state.errors.fullName"></label>
                                    </div>
                                    <div class="col-md-6">
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-12">
                                        <label for="Description">Description</label>
                                        <textarea v-model="state.description" class="form-control" rows="3" placeholder=""></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5>Address</h5>
                            </div>
                            <div class="card-body bg-body-tertiary">
                                <div class="row mb-2">
                                    <div class="col-md-6">
                                        <label for="AddressStreet">Street</label>
                                        <input ref="addressStreetRef" v-model="state.addressStreet" class="form-control" placeholder="" required />
                                        <label class="text-danger" v-text="state.errors.addressStreet"></label>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="AddressCity">City</label>
                                        <input ref="addressCityRef" v-model="state.addressCity" class="form-control" placeholder="" required />
                                        <label class="text-danger" v-text="state.errors.addressCity"></label>
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-6">
                                        <label for="AddressState">State</label>
                                        <input ref="addressStateRef" v-model="state.addressState" class="form-control" placeholder="" required />
                                        <label class="text-danger" v-text="state.errors.addressState"></label>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="AddressZipCode">Zip Code</label>
                                        <input ref="addressZipCodeRef" v-model="state.addressZipCode" class="form-control" placeholder="" />
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-6">
                                        <label for="AddressCountry">Country</label>
                                        <input ref="addressCountryRef" v-model="state.addressCountry" class="form-control" placeholder="" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5>Communication</h5>
                            </div>
                            <div class="card-body bg-body-tertiary">
                                <div class="row mb-2">
                                    <div class="col-md-6">
                                        <label for="MobileNumber">Mobile Number</label>
                                        <input ref="mobileNumberRef" v-model="state.mobileNumber" class="form-control" placeholder="" required />
                                        <label class="text-danger" v-text="state.errors.mobileNumber"></label>
                                    </div>
                                    <div class="col-md-6">
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-6">
                                        <label for="PhoneNumber">Phone Number</label>
                                        <input ref="phoneNumberRef" v-model="state.phoneNumber" class="form-control" placeholder="" />
                                    </div>
                                    <div class="col-md-6">
                                        <label for="FaxNumber">Fax Number</label>
                                        <input ref="faxNumberRef" v-model="state.faxNumber" class="form-control" placeholder="" />
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-6">
                                        <label for="Email">Email</label>
                                        <input ref="emailRef" v-model="state.email" class="form-control" placeholder="" required />
                                        <label class="text-danger" v-text="state.errors.email"></label>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="Website">Website</label>
                                        <input ref="websiteRef" v-model="state.website" class="form-control" placeholder="" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5>Social Media</h5>
                            </div>
                            <div class="card-body bg-body-tertiary">
                                <div class="row mb-2">
                                    <div class="col-md-6">
                                        <label for="WhatsApp">WhatsApp</label>
                                        <input ref="whatsAppRef" v-model="state.whatsApp" class="form-control" placeholder="" />
                                    </div>
                                    <div class="col-md-6">
                                        <label for="LinkedIn">LinkedIn</label>
                                        <input ref="linkedInRef" v-model="state.linkedIn" class="form-control" placeholder="" />
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-6">
                                        <label for="Facebook">Facebook</label>
                                        <input ref="facebookRef" v-model="state.facebook" class="form-control" placeholder="" />
                                    </div>
                                    <div class="col-md-6">
                                        <label for="Twitter">Twitter</label>
                                        <input ref="twitterRef" v-model="state.twitter" class="form-control" placeholder="" />
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-6">
                                        <label for="Instagram">Instagram</label>
                                        <input ref="instagramRef" v-model="state.instagram" class="form-control" placeholder="" />
                                    </div>
                                    <div class="col-md-6">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button"
                            id="MainSaveButton"
                            class="btn"
                            v-bind:class="state.deleteMode ? 'btn-danger' : 'btn-primary'"
                            v-on:click="handler.handleSubmit"
                            v-bind:disabled="state.isSubmitting">
                        <span class="spinner-border spinner-border-sm me-2" v-if="state.isSubmitting" role="status" aria-hidden="true"></span>
                        <span v-if="!state.isSubmitting">{{ state.deleteMode ? 'Delete' : 'Save' }}</span>
                        <span v-else>{{ state.deleteMode ? 'Deleting...' : 'Saving...' }}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts {
    <script src="~/FrontEnd/Pages/LeadContacts/LeadContactList.cshtml.js"></script>
}