<style>
.filterButtons {
    display: none
}

.yellow {
    background-color: yellow
}

.asset-search-hero {
    overflow: hidden;
}

.asset-search-icon {
    width: 86px;
    height: 86px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 85, 166, .08);
}

.asset-search-box {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.asset-search-box .form-control {
    min-height: 48px;
}

.asset-search-box .btn {
    min-width: 130px;
}

.asset-search-detail {
    border-left: 4px solid #0055a6;
}

.asset-search-detail.asset-search-alert {
    border-left-color: #dc3545;
}

#assetSearchWorkspace.has-results .asset-search-intro {
    display: none;
}

#assetSearchWorkspace.has-results .asset-search-hero .card-body {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

#assetSearchWorkspace.has-results .asset-search-box {
    max-width: none;
    margin: 0;
}

@media (max-width: 576px) {
    .asset-search-box .input-group {
        display: block;
    }

    .asset-search-box .form-control,
    .asset-search-box .btn {
        width: 100%;
    }

    .asset-search-box .btn {
        min-width: auto;
        margin-top: .75rem;
    }
}
</style>

<div id="assetSearchWorkspace">
    <div class="asset-search-hero mb-4">
        <div class="card-body px-4 py-5 px-md-5">
            <div class="asset-search-intro text-center">
                <span class="asset-search-icon mb-3">
                    <i class="fad fa-radar fa-3x"
                        style="--fa-primary-color: #0055A6; --fa-secondary-color: #6c757d;"></i>
                </span>
                <h2 class="mb-2">Global asset search</h2>
                <p class="lead text-muted mx-auto mb-4" style="max-width: 760px;">
                    Search every client's live and archived assets from one place.
                </p>
            </div>

            <div class="asset-search-box">
                <label class="form-label fw-bold" for="searchTerm">What asset information are you looking for?</label>
                <div class="input-group">
                    <input id="searchTerm" class="form-control" type="search"
                        placeholder="Description, plant number, serial number, model or manufacturer"
                        aria-label="Search all client assets">
                    <button class="btn btn-primary" type="button" onclick="searchAssets()">
                        <i class="fad fa-search me-2" aria-hidden="true"></i>Search
                    </button>
                </div>
                <small id="lastAssetSearch" class="text-muted d-none"></small>
            </div>

            <div class="asset-search-intro row g-4 mt-4">
                <div class="col-12 col-lg-6">
                    <div class="asset-search-detail asset-search-alert h-100 bg-light rounded-3 p-4">
                        <div class="d-flex align-items-start">
                            <i class="fad fa-shield-exclamation fa-2x text-danger me-3"></i>
                            <div>
                                <h5>Respond to safety notices</h5>
                                <p class="text-muted mb-0">Check a manufacturer, model, or serial number against every
                                    client to quickly identify assets affected by a recall or safety notice.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="asset-search-detail h-100 bg-light rounded-3 p-4">
                        <div class="d-flex align-items-start">
                            <i class="fad fa-clipboard-check fa-2x text-primary me-3"></i>
                            <div>
                                <h5>Support internal audits</h5>
                                <p class="text-muted mb-0">Find matching assets across the full client base and review
                                    both current and archived records.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="asset-search-intro text-center mt-4">
                <span class="badge bg-light text-dark me-2 mb-2"><i class="fad fa-tag me-1"></i>Description</span>
                <span class="badge bg-light text-dark me-2 mb-2"><i class="fad fa-barcode me-1"></i>Plant number</span>
                <span class="badge bg-light text-dark me-2 mb-2"><i class="fad fa-fingerprint me-1"></i>Serial number</span>
                <span class="badge bg-light text-dark me-2 mb-2"><i class="fad fa-cube me-1"></i>Model</span>
                <span class="badge bg-light text-dark mb-2"><i class="fad fa-industry me-1"></i>Manufacturer</span>
            </div>
        </div>
    </div>
</div>

<div id="loadingObject" style="position: fixed; top:50%; width:100%; display:none">
    <h1 class="text-center"><i class="fad fa-radar fa-spin fa-3x fa-fw" style="--fa-primary-color: #0055A6; --fa-secondary-color: gray;"></i><br>Searching Data for "<span id="term"></span>" <br><small><span id="count">Please
                wait</span></small><span class="sr-only">Searching...</span></h1>
</div>

<div id="results"></div>
<link rel="stylesheet" type="text/css" href="<?=ROOT_URL?>/packages/dfinal/datatables.min.css" />
<script type="text/javascript" src="<?=ROOT_URL?>/packages/dfinal/datatables.min.js"></script>
<script>
function searchAssets() {
    var searchInput = document.getElementById('searchTerm');
    var term = searchInput.value.trim();

    if (term !== '') {
        document.getElementById('term').textContent = term;
        document.getElementById('assetSearchWorkspace').classList.add('has-results');
        document.getElementById('lastAssetSearch').textContent = 'Showing global matches for "' + term + '"';
        document.getElementById('lastAssetSearch').classList.remove('d-none');
        document.getElementById('results').innerHTML = '';
        document.getElementById('loadingObject').style.display = 'block';

        // Parameters for the POST request
        var params = 'FCN=search&searchString=' + encodeURIComponent(term) + '&tenant=' + encodeURIComponent(TENANT_URL);

        // Use loadContentAndExecuteScripts to handle the request
        loadContentAndExecuteScripts(
            ROOT_URL + '/includes/asset/asset_search_functions.php', // URL
            'results', // Container ID
            params, // POST parameters
            function() {
                document.getElementById('loadingObject').style.display = 'none';

                // Initialize DataTables after content is loaded
                var liveAssetTable = document.getElementById('liveAssetTable');
                var archiveAssetTable = document.getElementById('archiveAssetTable');

                if (liveAssetTable) {
                    new DataTable(liveAssetTable); // Assuming vanilla DataTable initialization
                }

                if (archiveAssetTable) {
                    new DataTable(archiveAssetTable); // Assuming vanilla DataTable initialization
                }

                searchInput.focus();
            }
        );
    } else {
        showResponse('warning', 'Please add a search term before proceeding');
        searchInput.focus();
    }
}

document.getElementById('searchTerm').addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault();
        searchAssets();
    }
});

document.getElementById('navBox').innerHTML = '<li class="breadcrumb-item">Tools <i class="fad fa-angle-double-right mx-2 mt-1" aria-hidden="true"></i></li><li class="breadcrumb-item active">Global Asset Search</li>';
</script>
