@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-warning">
            <div class="card-body">
                <p class="mb-1">Active</p>
                <h2 class="fs-30 font-w600 text-white mb-0">2</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">Critical</p>
                <h2 class="fs-30 font-w600 text-white mb-0">1</h2>
            </div>
        </div>
    </div>

    <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">Resolved (MTD)</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-success">
            <div class="card-body">
                <p class="mb-1">Total MTD</p>
                <h2 class="fs-30 font-w600 text-white mb-0">6</h2>
            </div>
        </div>
    </div>
</div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header bg-white border-bottom">
        <h4 class="card-title mb-0">All Incidents · All Sites</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">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Time</th>
                                        <th>Site</th>
                                        <th>Category</th>
                                        <th>Guard</th>
                                        <th>Severity</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                        
                                        <td>INC-000246</td>
                                        <td>10:41 AM · 03 Sep 2026</td>
                                        <td>Emerald Residence</td>
                                        <td>Suspicious Activity</td>
                                        <td>Officer Hassan</td>
                                        <td>
                                            <span class="text-nowrap">
                                                <svg class="me-2" width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                </svg>
                                                <span class="badge badge-warning">MEDIUM</span>
                                            </span>
                                        </td>
                                        <td>
                                            <span class="text-nowrap">
                                                <svg class="me-2" width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                </svg>
                                                <span class="badge badge-dark">ACKNOWLEDGED</span>
                                            </span>
                                        </td>   

                                    </tr>
                                    <tr>
                                        </td>
                                        <td>INC-000245</td>
                                        <td>09:15 AM · 03 Sep 2026</td>
                                        <td>Lakeside Commercial</td>
                                        <td>Unauthorized Entry</td>
                                        <td>Officer Chai</td>
                                        <td>
                                            <span class="text-nowrap">
                                                <svg class="me-2" width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                </svg>
                                                <span class="badge badge-danger">HIGH</span>
                                            </span>
                                        </td>
                                        <td>
                                            <span class="text-nowrap">
                                                <svg class="me-2" width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                </svg>
                                                <span class="badge badge-warning">INVESTIGATING</span>
                                            </span>
                                        </td> 
                                    </tr>

                                    <tr>
                                        <td>INC-000244</td>
                                        <td>06:15 PM · 02 Sep 2026</td>
                                        <td>Emerald Residence</td>
                                        <td>Emerald Residence</td>
                                        <td>Officer Ravi</td>
                                        <td>
                                            <span class="text-nowrap">
                                                <svg class="me-2" width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                </svg>
                                                <span class="badge badge-success">LOW</span>
                                            </span>
                                        </td>
                                        <td>
                                            <span class="text-nowrap">
                                                <svg class="me-2" width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                </svg>
                                                <span class="badge badge-success">RESOLVED</span>
                                            </span>
                                        </td> 
                                    </tr>

                                        <td>INC-000243</td>
                                        <td>11:30 AM · 01 Sep 2026</td>
                                        <td>Central Business Tower</td>
                                        <td>Safety Hazard</td>
                                        <td>Officer Tan</td>
                                        <td>
                                            <span class="text-nowrap">
                                                <svg class="me-2" width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                </svg>
                                                <span class="badge badge-success">LOW</span>
                                            </span>
                                        </td>
                                        <td>
                                            <span class="text-nowrap">
                                                <svg class="me-2" width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                </svg>
                                                <span class="badge badge-success">CLOSED</span>
                                            </span>
                                        </td> 
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>INC-000242</td>
                                        <td>03:45 PM · 31 Aug 2026</td>
                                        <td>Vista Heights</td>
                                        <td>Damage/Vandalism</td>
                                        <td>Officer Ali</td>
                                        <td>
                                            <span class="text-nowrap">
                                                <svg class="me-2" width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                </svg>
                                                <span class="badge badge-warning">MEDIUM</span>
                                            </span>
                                        </td>
                                        <td>
                                            <span class="text-nowrap">
                                                <svg class="me-2" width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                </svg>
                                                <span class="badge badge-success">CLOSED</span>
                                            </span>
                                        </td> 
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </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