@{
    ViewData["Title"] = "User Form";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="registerSupplier">
    <form v-on:submit.prevent="addSupplier" data-aos="fade-right">
        <div class="container register" data-aos="fade-right">
            <div class="row">
                @*Right Side*@
                <div class="col-md-9 register-rights" data-aos="fade-right">
                    <div class="tab-content" id="myTabContent" data-aos="fade-right">
                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" data-aos="fade-right">
                            <h3 class="register-heading">REGISTRATION SUPPLIER</h3>
                            <div class="row register-form">
                                <div class="col-md-61">

                                    @* Supplier Name *@
                                    <div class="form-group row">
                                        <label for="supplierName" class="col-sm-3">Supplier Name:</label>
                                        <div class="col-sm-9">
                                            <input type="text" id="supplierName" name="supplierName" class="form-control" required v-model="supplierName">
                                        </div>
                                    </div>

                                    @* Supplier Gender *@
                                    <div class="form-group row">
                                        <label class="col-sm-3">Supplier Gender:</label>
                                        <div class="col-sm-9">
                                            <div class="dropdown">
                                                <button class="btn btn-primary dropdown-toggle w-100" type="button" data-toggle="dropdown" aria-expanded="false">
                                                    <span id="updateGender">{{ supplierGender || 'Select Gender' }}</span>
                                                </button>
                                                <div class="dropdown-menu w-100 p-3">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="supplierGender" id="Male" value="Male" v-on:click="updateGender('Male')" v-model="supplierGender">
                                                        <label class="form-check-label" for="Male">Male</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="supplierGender" id="Female" value="Female" v-on:click="updateGender('Female')" v-model="supplierGender">
                                                        <label class="form-check-label" for="Female">Female</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    @* Supplier Email *@
                                    <div class="form-group row">
                                        <label class="col-sm-3">Supplier Email:</label>
                                        <div class="col-sm-9">
                                            <input type="email" id="supplierName" name="supplierEmail" class="form-control" required v-model="supplierEmail">
                                        </div>
                                    </div>

                                    @* Supplier Number Phone *@
                                    <div class="form-group row">
                                        <label class="col-sm-3">Supplier Phone Number:</label>
                                        <div class="col-sm-9">
                                            <input type="tel" id="supplierPhoneNo" name="supplierPhoneNo" class="form-control" required v-model="supplierPhoneNo">
                                        </div>
                                    </div>

                                </div>
                                <div class="form-group row">
                                    <div class="col-sm-9 offset-sm-3">
                                        <button type="button" v-on:click="resetForm" class="btn btn-secondary">Reset</button>
                                        <input type="submit" class="btn btn-primary">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el: '#registerSupplier',
        data: {
            supplierName : null,
            supplierEmail : null,
            supplierGender : null,
            supplierPhoneNo : null
        },
        methods: {
            async addSupplier() {
                // Create the payload
                const formData = {
                    supplierName: this.supplierName,
                    supplierEmail: this.supplierEmail,
                    supplierGender: this.supplierGender,
                    supplierPhoneNo: this.supplierPhoneNo
                };

                try {
                    // List of required fields
                    const requiredFields = ['supplierName', 'supplierEmail', 'supplierGender', 'supplierPhoneNo'];

                    // Loop through required fields and check if any are null or empty
                    for (let field of requiredFields) {
                        if (this[field] === null || this[field] === '') {
                            swal('Product Error', `Please fill in required fields: ${field}.`, 'warning');
                            return; // Exit early if validation fails
                        }
                    }

                    // Proceed to send the data as raw JSON string
                    const response = await fetch('/api/Supplier', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(formData) // Convert the formData to a JSON string
                    });

                    if (!response.ok) {
                        const errorData = await response.json();
                        console.error('Error response:', errorData);
                        this.errorMessage = 'Error: ' + (errorData.message || 'Unknown error');

                    } else {
                        swal('Success!', 'Supplier form has been successfully submitted.', 'success');
                        this.resetForm();
                    }

                } catch (error) {
                    console.error('Error:', error);
                    swal('Product Error', `An error occurred: ${error.message}`, 'error');
                }
            }
            ,
            resetForm() {
                this.supplierName = null;
                this.supplierEmail = null;
                this.supplierGender = null;
                this.supplierPhoneNo = null;
            },
            updateGender(supplierGender){
                this.supplierGender = supplierGender;
            }
        }
    });
</script>