<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">Passport Number</label>
                    <input type="text" wire:model="passportnumber" class="form-control adv-form-input capitalize"  id="searchInputPassportNo" name="pno" placeholder="Enter Passport Number" title="Enter Passport 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="Enter 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-4">
                    <label for="dateofissue">Date of Issue</label>
                    <input type="date" wire:model="dateofissue" class="form-control adv-form-input capitalize"  id="searchInputPassportNo" name="pno" title="Enter Passport Date of Issue">
                </div>
                <div class="col-4">
                  <label for="dateofexpiry">Date of Expiry</label>
                  <input type="date" wire:model="dateofexpiry" class="form-control adv-form-input" id="expirydate"  name="expirydate" title="Date of Expiry">
                </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>
