@extends('layouts.default')

    @section('content')


    <div class="container-fluid">

        <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-5 g-3 mb-4">
    <div class="col">
        <div class="card gradient-bx text-white bg-secondary">
            <div class="card-body">
                <p class="mb-1">Scheduled</p>
                <h2 class="fs-30 font-w600 text-white mb-0">12</h2>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="card gradient-bx text-white bg-info">
            <div class="card-body">
                <p class="mb-1">In Progress</p>
                <h2 class="fs-30 font-w600 text-white mb-0">5</h2>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="card gradient-bx text-white bg-success">
            <div class="card-body">
                <p class="mb-1">Completed</p>
                <h2 class="fs-30 font-w600 text-white mb-0">6</h2>
            </div>
        </div>
    </div>

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

    <div class="col">
        <div class="card gradient-bx text-white bg-success">
            <div class="card-body">
                <p class="mb-1">Completion Rate</p>
                <h2 class="fs-30 font-w600 text-white mb-0">91%</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>Missed Patrol Alert</strong>
    </div>
    <p class="visitor-alert-message mb-0">
        Route Gamma at Lakeside Commercial Park – scheduled 09:00 AM – No guard assigned
    </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">Patrol Schedule · All Sites</h4>
    </div>
    <div class="card-body p-0">
                    <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>Route</th>
                                        <th>Site</th>
                                        <th>Guard</th>
                                        <th>Scheduled</th>
                                        <th>Checkpoints</th>
                                        <th>Progress</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                        
                                        <td>Route Alpha</td>
                                        <td>Emerald Residence</td>
                                        <td>Officer Hassan</td>
                                        <td>10:00 AM</td>
                                        <td><strong class="score-warning">2/6</strong></td>
                                        <td>
                                        <div class="progress" style="background: rgba(255, 193, 7, .1)">
                                            <div class="progress-bar bg-warning" style="width: 70%;" role="progressbar">
                                            </div>
                                        </div>
                                    </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">IN PROGRESS</span>
                                            </span>
                                        </td>

                                    </tr>
                                    <tr>
                                        </td>
                                        <td>Route Beta</td>
                                        <td>Emerald Residence</td>
                                        <td>Officer Ravi</td>
                                        <td>10:15 AM</td>
                                        <td><strong class="score-warning">4/6</strong></td>
                                        <td>
                                        <div class="progress" style="background: rgba(255, 193, 7, .1)">
                                            <div class="progress-bar bg-warning" style="width: 70%;" role="progressbar">
                                            </div>
                                        </div>
                                    </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">IN PROGRESS</span>
                                            </span>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>Tan Wei Ming</td>
                                        <td>Central Business Tower</td>
                                        <td>Officer Tan</td>
                                        <td>09:30 AM</td>
                                        <td><strong class="score-good">6/6</strong></td>
                                        <td>
                                        <div class="progress" style="background: #464a531a">
                                            <div class="progress-bar bg-success" style="width: 100%;" role="progressbar">
                                            </div>
                                        </div>
                                    </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">COMPLETED</span>
                                            </span>
                                        </td>
                                        
                                    </tr>
                                    <tr>
                                        <td>Route Gamma</td>
                                        <td>Lakeside Commercial</td>
                                        <td>— Unassigned</td>
                                        <td>09:00 AM</td>
                                        <td><strong class="score-warning">0/4</strong></td>
                                        <td>
                                        <div class="progress" style="background: rgba(255, 87, 34, .1)">
                                            <div class="progress-bar bg-warning" style="width: 0%;" role="progressbar">
                                            </div>
                                        </div>
                                    </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">MISSED</span>
                                            </span>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td>Heights Alpha</td>
                                        <td>Vista Heights</td>
                                        <td>Officer Ali</td>
                                        <td>10:30 AM</td>
                                        <td><strong class="score-warning">3/5</strong></td>
                                        <td>
                                        <div class="progress" style="background: rgba(255, 193, 7, .1)">
                                            <div class="progress-bar bg-warning" style="width: 70%;" role="progressbar">
                                            </div>
                                        </div>
                                    </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">IN PROGRESS</span>
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </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