<div class="page-header">
    <h3 class="page-title">Add Recipient</h3>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="/recipients" class="text-decoration-none">Recipients</a></li>
            <li class="breadcrumb-item active" aria-current="page">Add Recipient</li>
        </ol>
    </nav>
</div>
<div class="card">
    <div class="card-body">
        <p class="card-description">Please provide the required information. * indicates required field.</p>
        <form class="forms-sample" id="myForm" method="post" action="/recipients">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="firstName">First Name *</label>
                        <input type="text" class="form-control" id="firstName" name="firstName"
                            placeholder="Please enter first name here">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="lastName">Last Name</label>
                        <input type="text" class="form-control" id="lastName" name="lastName"
                            placeholder="Please enter last name here">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="email">Email *</label>
                        <input type="email" class="form-control" id="email" name="email"
                            placeholder="Please enter email here">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="phoneNumber">Phone Number</label>
                        <input type="text" class="form-control" id="phoneNumber" name="phoneNumber"
                            placeholder="Please enter phone number here">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="gender">Gender *</label>
                        <select class="form-select rounded-0" id="gender" name="gender"
                            aria-label="Default select example">
                            <option selected value="">Select</option>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="dateOfBirth">DOB</label>
                        <input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth"
                            placeholder="Please enter phone number here">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="status">Status</label>
                        <select class="form-select rounded-0" id="status" aria-label="Default select example"
                            name="status">
                            <option selected value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-gradient-primary me-2">Submit</button>
            <a href="/recipients" class="btn btn-light">Cancel</a>
        </form>
    </div>
</div>

<script>
    $(document).ready(function () {
        $("#myForm").validate({
            errorElement: 'span',
            errorClass: 'is-invalid',
            validClass: 'is-valid',
            rules: {
                firstName: {
                    required: true,
                    minlength: 2,
                    maxlength: 100
                },
                email: {
                    required: true,
                    email: true,
                    maxlength: 100
                },
                gender: {
                    required: true
                },
                phoneNumber: {
                    phoneRegex: true
                }
            },
            messages: {
                name: {
                    required: "Please enter your name.",
                    minlength: "Name must be at least 2 characters."
                },
                email: {
                    required: "Please enter your email.",
                    email: "Please enter a valid email address."
                },
                password: {
                    required: "Please provide a password.",
                    minlength: "Password must be at least 6 characters."
                }
            },
            success: function (label, element) {
                const $el = $(element);
                const value = $el.val().trim();

                if (value === '') {
                    $el.removeClass('is-valid');
                }
            },

            highlight: function (element) {
                $(element).removeClass('is-valid').addClass('is-invalid');
            },

            unhighlight: function (element) {
                const $el = $(element);
                const value = $el.val().trim();

                if (value !== '') {
                    $el.removeClass('is-invalid').addClass('is-valid');
                } else {
                    $el.removeClass('is-valid is-invalid');
                }
            },
            submitHandler: function (form) {
                form.submit();
            }
        });
    });
</script>