<?php

require_once __DIR__ . '/../library/auth.php';

allow_roles(['admin', 'teacher', 'accountant']);

$page_title = 'Global Search';

require_once __DIR__ . '/../include/header.php';
require_once __DIR__ . '/../include/sidebar.php';

?>

<div class="content-wrapper">

    <section class="content-header">

        <div class="container-fluid">

            <h1>Global Search</h1>

        </div>

    </section>

    <section class="content">

        <div class="container-fluid">

            <!-- Search Card -->

            <div class="card card-primary">

                <div class="card-header">

                    <h3 class="card-title">

                        Search ERP Data

                    </h3>

                </div>

                <div class="card-body">

                    <div class="form-group">

                        <label>

                            Search Student, Fees, Staff...

                        </label>

                        <input
                            type="text"
                            id="global-search"
                            class="form-control"
                            placeholder="Type name, roll no, phone, receipt no...">

                    </div>

                </div>

            </div>

            <!-- Results -->

            <div class="card card-success">

                <div class="card-header">

                    <h3 class="card-title">

                        Search Results

                    </h3>

                </div>

                <div class="card-body">

                    <div id="search-results">

                        <div class="text-muted">

                            Start typing to search...

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>

</div>

<?php require_once __DIR__ . '/../include/footer.php'; ?>

<script>

const searchInput =
    document.getElementById('global-search');

const resultsDiv =
    document.getElementById('search-results');

let searchTimeout = null;

searchInput.addEventListener('keyup', function() {

    const query = this.value.trim();

    clearTimeout(searchTimeout);

    if (query.length < 2) {

        resultsDiv.innerHTML = `
            <div class="text-muted">
                Type at least 2 characters...
            </div>
        `;

        return;
    }

    searchTimeout = setTimeout(function() {

        fetch(
            'global_search.php?q=' +
            encodeURIComponent(query)
        )

        .then(response => response.json())

        .then(data => {

            if (!data.length) {

                resultsDiv.innerHTML = `
                    <div class="alert alert-warning">
                        No results found.
                    </div>
                `;

                return;
            }

            let html = '';

            data.forEach(function(item) {

                html += `

                    <a href="${item.url}"
                       class="text-decoration-none">

                        <div class="card mb-2">

                            <div class="card-body">

                                <div class="d-flex justify-content-between">

                                    <div>

                                        <h5 class="mb-1">

                                            ${item.title}

                                        </h5>

                                        <div class="text-muted">

                                            ${item.subtitle}

                                        </div>

                                    </div>

                                    <div>

                                        <span class="badge badge-primary">

                                            ${item.type}

                                        </span>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </a>

                `;
            });

            resultsDiv.innerHTML = html;

        })

        .catch(function(error) {

            resultsDiv.innerHTML = `
                <div class="alert alert-danger">
                    Search failed.
                </div>
            `;

            console.error(error);

        });

    }, 300);

});

</script>