<div>
    <div style="display: flex; justify-content: start; align-items: center; gap: 40px;">

        <div style="display: flex; flex: 0 0 auto; align-items: center; flex-direction: column;">
            <img src="{{ asset('images/coat-of-arms.png') }}"
                alt="IPRS Logo" class="brand-image" style=" width: 8em;">
            <h3 style="margin-top: 20px;">IPRS</h3>
        </div>

        <div style="flex: 1;">
            <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">Maisha Number</label>
                            <input type="text" wire:model="idnumber" class="form-control adv-form-input capitalize"  id="idnumber" name="idnumber" placeholder="Enter Maisha Number" title="Enter Maisha 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-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" title="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>
    </div>
</div>
