<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">Refugee Number</label>
                    <input type="text" wire:model="refugeenumber" class="form-control adv-form-input capitalize"  id="refugeenumber" name="refugeenumber" placeholder="Enter Refugee Number" title="Enter Refugee 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="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" >
                        <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-2">
                    <input type="number" class="form-control adv-form-input" id="yob" name="yob" placeholder="Year of Birth">
                </div>
                <div class="col-2">
                    <div class="form-group" id="month">
                        <select class="form-control adv-form-input" name="month" wire:model="month" >
                            <option>Month of Birth</option>
                            <option value=1>January</option>
                            <option value=2>February</option>
                            <option value=3>March</option>
                            <option value=4>April</option>
                            <option value=5>May</option>
                            <option value=6>June</option>
                            <option value=7>July</option>
                            <option value=8>August</option>
                            <option value=9>September</option>
                            <option value=10>October</option>
                            <option value=11>November</option>
                            <option value=12>December</option>
                        </select>
                    </div>
                </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>
