@extends('agent.layouts.app')
<title>Agent Portal Dashboard</title>
@section('content')
    <div class="flex">
        <!-- Main Content -->
        <div class="flex-1 flex flex-col overflow-hidden">

            <!-- Scrollable Content -->
            <div class="flex-1 overflow-auto">
                <div class="p-8">
                    @include('agent.layouts.message')

                    <!-- Leads Table -->
                    <div id="leads-container">
                        @include('agent.leads-table', [
                            'leads' => $leads,
                            'without_pagination' => false,
                            'title' => 'All Leads'
                        ])
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection
<script>
    setInterval(function () {
        fetch("{{ route('agent.leads') }}?{{ http_build_query(request()->query()) }}")
            .then(response => response.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const newTable = doc.querySelector('#leads-container').innerHTML;
                document.querySelector('#leads-container').innerHTML = newTable;
            });
    }, 30000); // checks every 30 seconds
</script>