<div>

    <div id="overlaySpinner" wire:loading>
        <div class="cv-spinner">
            <span class="spinner"></span>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 offset-3">
            <div style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
                <img src="{{ asset('images/coat-of-arms.webp') }}"
                    alt="IPRS Logo" class="brand-image" style=" width: 10em;">
                <h1 style="margin-top: 20px;">IPRS</h1>
            </div>

            @if (session()->has('error'))
                <div class="col-12 alert alert-danger text-center">
                    {{ session('error') }}
                </div>
            @endif

            <div class="card-body">
                <form class="d-flex justify-content-center align-items-center" wire:submit="save" method="POST">
                    @csrf
                    @method('POST')

                    @if($role->hasAnyPermission(["Basic Search ID with Serial number","Basic Search ID with ID number", "Basic Search Passport with Passport number", "Basic Search Passport with ID number", "Basic Search Birth with Certificate number", "Basic Search Birth with ID number"]))
                        <div id="searchContainer" class="d-flex align-items-center search-container">
                            <select wire:model="searchcategory" name="searchcategory"
                                    class="form-control search-element text-center fw-bold custom-select" title="Select document type"
                                    id="category" required>
                                <option value="">Choose Document</option>
                                @foreach($searchGroups as $searchGroup)
                                    <option value={{ $searchGroup }} >{{ $searchGroup }}</option>
                                @endforeach
                            </select>

                            <div id="fieldsContainerID" class="{{ $showFields !== 'ID' ? 'd-none' : '' }} d-flex">
                                @if($role->hasPermissionTo('Basic Search ID with ID number'))
                                    <input type="text" class="form-control search-element no-radius" id="searchInputID" name="docNumber" placeholder="Enter Maisha Number" title="Enter Maisha Number" wire:model="docNumber">
                                @endif
                                @if($role->hasPermissionTo('Basic Search ID with Serial number'))
                                    <input type="text" class="form-control search-element no-radius" id="searchInputSerial" name="SerialNumber" placeholder="Enter Serial Number" title="Enter Serial Number" wire:model="serialNumber">
                                @endif
                            </div>

                            <div id="fieldsContainerPassport" class="{{ $showFields !== 'Passport' ? 'd-none' : '' }} d-flex">
                                @if($role->hasPermissionTo("Basic Search Passport with Passport number"))
                                    <input type="text" class="form-control search-element no-radius" id="searchInputPassportNo" name="pno" placeholder="Enter Passport Number" title="Enter Passport Number" wire:model="passportNum">
                                @endif
                                @if($role->hasPermissionTo("Basic Search Passport with ID number"))
                                    <input type="text" class="form-control search-element no-radius" id="searchInputPassportId" name="pino" placeholder="Enter Maisha Number" title="Enter ID Number" wire:model="passportIdNum">
                                @endif
                            </div>

                            <div id="fieldsContainerBirth" class="{{ $showFields !== 'Birth' ? 'd-none' : '' }} d-flex">
                                <input type="text" class="form-control search-element no-radius" id="searchBirthEntry" name="searchBirthEntryNum" placeholder="Enter Birth Entry Number" title="Enter Birth Entry Number" wire:model="searchBirthEntryNum">
                            </div>

                            <button type="submit" id="submitSearch" class="btn search-element search-btn" title="search">
                                <img src="{{ asset('images/search-white.png') }}" alt="Search" style="width: 24px; height: 24px;">
                            </button>
                        </div>
                    @else
                        <div class="alert alert-dark w-100">
                            <i class="fas fa-fw fa-info-circle"></i>
                            You don't have enough privileges to search.
                        </div>
                    @endif
                </form>

                <script>
                    document.getElementById('category').addEventListener('change', function() {
                        var fieldsContainerID = document.getElementById('fieldsContainerID');
                        var fieldsContainerBirth = document.getElementById('fieldsContainerBirth');
                        var fieldsContainerPassport = document.getElementById('fieldsContainerPassport');
                        var searchContainer = document.getElementById('searchContainer');

                        fieldsContainerID.classList.add('d-none');
                        fieldsContainerBirth.classList.add('d-none');
                        fieldsContainerPassport.classList.add('d-none');
                        searchContainer.classList.remove('search-expanded');

                        if (this.value === 'ID') {
                            fieldsContainerID.classList.remove('d-none');
                            searchContainer.classList.add('search-expanded');
                        } else if (this.value === 'Passport') {
                            fieldsContainerPassport.classList.remove('d-none');
                            searchContainer.classList.add('search-expanded');
                        } else if (this.value === 'Birth') {
                            fieldsContainerBirth.classList.remove('d-none');
                            searchContainer.classList.add('search-expanded');
                        }
                    });
                </script>
            </div>
        </div>
    </div>

    <style>
        .row {
            margin-top: 20px;
        }
        .search-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
            width: fit-content;
            margin: auto;
        }
        .search-element {
            height: 50px;
            flex: 1;
            border: 1px solid #ced4da;
        }
        .no-radius {
            border-radius: 0 !important;
        }
        select.search-element {
            max-width: 180px;
            min-width: 150px;
            border-radius: 20px 0 0 20px;
        }
        .search-btn {
            max-width: 90px;
            min-width: 70px;
            border-radius: 0 20px 20px 0;
            background-color: #28a745;
            color: white;
        }
        .search-expanded .search-element:first-child {
            border-radius: 15px 0 0 15px;
        }
        .search-expanded .search-element:last-child {
            border-radius: 0 15px 15px 0;
        }
        .d-none {
            display: none !important;
        }
        .custom-select:focus {
            border-color: #14b04c !important;
            box-shadow: 0 0 1px #14b04c !important;
        }
    </style>
</div>


