@extends('layouts.default')

    @section('content')


    <div class="container-fluid">
        

        <div class="row g-3 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="card gradient-bx text-white bg-success">
            <div class="card-body">
                <p class="mb-1">Inside Now (All Sites)</p>
                <h2 class="fs-30 font-w600 text-white mb-0">47</h2>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card gradient-bx text-white bg-warning">
            <div class="card-body">
                <p class="mb-1">Expected Today</p>
                <h2 class="fs-30 font-w600 text-white mb-0">12</h2>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card gradient-bx text-white bg-danger">
            <div class="card-body">
                <p class="mb-1">Overstayed</p>
                <h2 class="fs-30 font-w600 text-white mb-0">3</h2>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card gradient-bx text-white bg-dark">
            <div class="card-body">
                <p class="mb-1">Blacklisted</p>
                <h2 class="fs-30 font-w600 text-white mb-0">0</h2>
            </div>
        </div>
    </div>
</div>

<div class="visitor-alert mb-4" role="alert">
    <div class="visitor-alert-title">
        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
        <strong> 3 Overstayed Visitors</strong>
    </div>
    <p class="visitor-alert-message mb-0">
        Visitors have exceeded their expected departure time. Residents have been notified.
    </p>
</div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card">
    <div class="card-header bg-white border-bottom">
        <h4 class="card-title mb-0">Visitor Log · All Sites · 03 Sep 2026</h4>
    </div>
    
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table id="example5" class="table table-striped patient-list mb-4 dataTablesCard fs-14">
                                        <td>Showing aggregated visitor data across all 5 sites · Filter by site above</td>
</table>
</div>
</div>
    </div>
    </div>
    </div>
    </div>
    </div>

    @endsection
    @push('scripts')
        <script>
            (function($) {

                var table = $('#example5').DataTable({
                    searching: false,
                    paging:true,
                    select: false,
                    //info: false,
                    lengthChange:false

                });
                $('#example tbody').on('click', 'tr', function () {
                    var data = table.row( this ).data();

                });

            })(jQuery);
        </script>
    @endpush