<div>
    <form class="form-inline" wire:submit="search" method="POST">
        @csrf
        @method('POST')

        <div class="container">

            <div class="form-row">
                <div class="col-4">
                    <label for="idnumber">Birth Entry Number</label>
                    <input type="text" wire:model="birthnumber" class="form-control adv-form-input capitalize"  id="searchInputBirthNo" name="bno" placeholder="Enter Birth Entry Number" title="Enter Birth Entry Number">
                </div>
                <div class="col-4">
                  <label for="serialnumber">Serial Number</label>
                  <input type="text" wire:model="serialnum" class="form-control adv-form-input" id="serialumber"  name="serialnumber" placeholder="Enter Serial Number" title="Serial Number">
                </div>
                <div class="col-4">
                    <label for="pinumber">PIN</label>
                    <input type="text" wire:model="pin" class="form-control adv-form-input" id="pinumber" name="pinumber" placeholder="Enter PIN" title="Enter PIN">
                </div>
            </div>

            <div class="form-row">
                <div class="col-4">
                    <label for="dob">Date of Birth</label>
                    <input type="date" wire:model="dob" class="form-control adv-form-input capitalize"  id="Dob" name="dob" placeholder="Date of Birth" title="Enter Date of Birth">
                </div>
                <div class="col-4">
                  <label for="dateofregistration">Date of Registration</label>
                  <input type="date" wire:model="dateofregistration" class="form-control adv-form-input" id="serialumber"  name="serialnumber" title="Date of Registration">
                </div>
                <div class="col-4">
                    <label for="mothername">Mother's Name</label>
                    <input type="text" wire:model="mothername" class="form-control adv-form-input" id="mothername" name="mothername" placeholder="Enter Mother's Name" title="Mother's Name">
                </div>
            </div>

            <div class="form-row">
                <div class="col-4">
                    <label for="firstname">First Name</label>
                    <input type="text" wire:model="firstname" class="form-control adv-form-input" id="firstname" name="firstname" placeholder="Enter First Name" title="Firstname">
                </div>
                <div class="col-4">
                    <label for="surname">Surname</label>
                    <input type="text" wire:model="surname" class="form-control adv-form-input" id="surname" name="surname" placeholder="Enter Surname" title="Surname">
                </div>
                <div class="col-4">
                    <label for="othername">Other Name</label>
                    <input type="text" wire:model="othername" class="form-control adv-form-input" id="othername" name="othername" placeholder="Enter Othername" title="Othername">
                </div>
            </div>

            <div class="form-row">
                <div class="col-2">
                    <div class="form-group" id="gender" >
                        <label for="gender">Gender</label>
                        <select class="form-control adv-form-input" name="gender" wire:model="gender">
                            <option>Gender</option>
                            <option value="M">Male</option>
                            <option value="F">Female</option>
                        </select>
                    </div>
                </div>
                <div class="col-4">
                    <label for="placeofbirth">Place of Birth</label>
                    <input type="text" wire:model="placeofbirth" class="form-control adv-form-input capitalize"  id="placeofbirth" name="placeofbirth" placeholder="Place of Birth" title="Enter Place of Birth">
                </div>
            </div>

            <!-- button -->
            <div class="row" >
                <div class="form-group col-md-2 d-flex">
                    <button type="submit" id="submitSearch" class="btn btn-block bg-gradient-success">Search</button>
                </div>
                <div class="form-group col-md-2 d-flex">
                    <button type="submit" id="submitSearch" class="btn btn-block btn-outline-light">Reset</button>
                </div>
            </div>
        </div>

    </form>
</div>
