{{-- Trigger button (stays in the navbar) --}}
<button type="button" class="btn btn-link text-decoration-none nav-search-toggle me-3" id="navSearch"
    data-bs-toggle="modal" data-bs-target="#globalSearchModal" aria-label="Search" style="font-size: 1.15rem;">
    <i class="fa-solid fa-magnifying-glass"></i>
</button>

{{-- Fullscreen search modal (mirrors the grin reference template) --}}
<div class="modal fade fade-scale searchmodal nav-search-modal" id="globalSearchModal" tabindex="-1" aria-label="Search" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <div class="modal-body">
                {{-- No <form>: other pages bind $('form').on('submit', preventDefault) which would swallow our submit.
                     We navigate directly via inline JS — bypasses any page-level submit handlers. --}}
                <div class="modal-search-form">
                    <input
                        class="search-field"
                        type="search"
                        value="{{ request('q') }}"
                        placeholder='Try "section 32 ipc", "AIR 2024 SC 891", or "specific performance"'
                        autocomplete="off"
                        aria-label="Search"
                        data-search-url="{{ route('user.search') }}"
                        onkeydown="if(event.key==='Enter'){event.preventDefault();var v=this.value.trim();if(v){window.location.href=this.dataset.searchUrl+'?q='+encodeURIComponent(v);}return false;}">
                    <button type="button" aria-label="Search"
                        onclick="var i=this.parentNode.querySelector('.search-field');var v=i.value.trim();if(v){window.location.href=i.dataset.searchUrl+'?q='+encodeURIComponent(v);}else{i.focus();}">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@once
<style>
    .nav-search-toggle.btn-link {
        color: var(--bs-body-color) !important;
        text-decoration: none;
        line-height: 1;
        padding: .25rem .5rem;
        transition: color .2s ease, transform .15s ease;
    }
    .nav-search-toggle.btn-link:hover,
    .nav-search-toggle.btn-link:focus {
        color: var(--legal-gold) !important;
        text-decoration: none;
    }
    .nav-search-toggle.btn-link:active { transform: scale(.92); }

    /* ---------- Search Modal (mirrors reference template, with opacity overlay) ---------- */
    .searchmodal .modal-dialog {
        width: 100%;
        height: 100%;
        max-width: 100%;
        margin: 0;
        display: table;
    }
    .searchmodal .modal-content {
        height: 100%;
        border-radius: 0;
        border: none;
        display: table-cell;
        vertical-align: middle;
        background-color: #222222;
        opacity: 0.77;
    }
    .searchmodal .modal-body {
        max-width: 700px;
        margin: auto;
        padding: 0;
    }
    .searchmodal .modal-header { border: none; }
    .searchmodal .modal-header button { position: relative; }
    .searchmodal .modal-header button.close {
        position: absolute;
        right: 25px;
        top: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        width: 50px;
        background-color: #eeeeee;
        border-radius: 50px;
        color: #000000;
        border: none;
        font-size: 30px;
        cursor: pointer;
        transition: 0.6s;
    }
    .searchmodal .modal-header button.close:hover,
    .searchmodal .modal-header button.close:focus {
        background-color: var(--legal-gold);
        color: #ffffff;
        outline: none;
    }
    /* Cross color follows the theme: black in light, gold in dark */
    [data-bs-theme="dark"] .searchmodal .modal-header button.close {
        color: var(--legal-gold);
    }
    [data-bs-theme="dark"] .searchmodal .modal-header button.close:hover,
    [data-bs-theme="dark"] .searchmodal .modal-header button.close:focus {
        color: #ffffff;
    }

    /* Search form */
    .modal-search-form { position: relative; }
    .modal-search-form .search-field {
        background-color: transparent;
        height: 60px;
        padding: 8px 15px;
        border: 1px solid #eeeeee;
        width: 100%;
        display: block;
        outline: 0;
        transition: 0.6s;
        border-radius: 10px;
        color: #ffffff;
        font-family: 'Inter', sans-serif;
    }
    .modal-search-form .search-field::placeholder { color: #ffffff; transition: 0.6s; }
    .modal-search-form .search-field:focus { border-color: var(--legal-gold); }
    .modal-search-form .search-field:focus::placeholder { color: transparent; }
    .modal-search-form button {
        border: none;
        background-color: #eeeeee;
        color: var(--legal-gold);
        height: 40px;
        width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 10px;
        padding: 0;
        transition: 0.6s;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        border-radius: 5px;
        cursor: pointer;
    }
    .modal-search-form button:hover,
    .modal-search-form button:focus {
        background-color: var(--legal-gold);
        color: #ffffff;
        outline: none;
    }

    /* Scale-in entrance */
    .fade-scale .modal-dialog { transform: scale(.92); transition: transform .3s ease, opacity .3s ease; }
    .fade-scale.show .modal-dialog { transform: scale(1); }

    @media (max-width: 575.98px) {
        .searchmodal .modal-header button.close { right: 15px; top: 15px; }
        .searchmodal .modal-body { padding: 0 15px; }
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var modal = document.getElementById('globalSearchModal');
        if (modal) {
            // The modal is rendered inside the sticky header (z-index:1050 stacking context),
            // which lets Bootstrap's backdrop paint over it and swallow the close click.
            // Moving it to <body> escapes that context so the close button works.
            if (modal.parentNode !== document.body) {
                document.body.appendChild(modal);
            }
            modal.addEventListener('shown.bs.modal', function () {
                var input = modal.querySelector('.search-field');
                if (input) { input.focus(); }
            });
        }
    });
</script>
@endonce