@extends('layouts.default')

    @section('content')


    <div class="container-fluid">
        <section class="sos-active-card">
    <div class="sos-active-heading">
        <div>
            <h2><span class="sos-alert-dot"></span> ACTIVE SOS · SOS-000012</h2>
            <p>Metro Corporate Centre · Unit C-05-02</p>
        </div>
        <span class="sos-status-pill">RESPONDING</span>
    </div>

    <div class="sos-summary-grid">
        <div class="sos-summary-item">
            <strong>10:58 AM</strong>
            <small>Activated</small>
        </div>
        <div class="sos-summary-item">
            <strong>Officer Evan</strong>
            <small>Nearest Guard</small>
        </div>
        <div class="sos-summary-item">
            <strong class="sos-orange">Responding</strong>
            <small>Guard Status</small>
        </div>
        <div class="sos-summary-item">
            <strong class="sos-green">~1 minute</strong>
            <small>ETA</small>
        </div>
        <div class="sos-summary-item">
            <strong class="sos-timer">04:32</strong>
            <small>Response Timer</small>
        </div>
    </div>

    <div class="sos-progress">
        <div class="sos-step is-complete">
            <span>✓</span><small>SOS Activated</small>
        </div>
        <div class="sos-step is-complete">
            <span>✓</span><small>Guard Identified</small>
        </div>
        <div class="sos-step is-complete">
            <span>✓</span><small>Guard Assigned</small>
        </div>
        <div class="sos-step is-current">
            <span>➜</span><small>Responding</small>
        </div>
        <div class="sos-step">
            <span></span><small>On Site</small>
        </div>
        <div class="sos-step">
            <span></span><small>Resolved</small>
        </div>
    </div>

    <div class="sos-action-buttons">
        <button type="button" class="sos-button sos-button-resolve">Mark as Resolved</button>
        <button type="button" class="sos-button">Reassign Guard</button>
        <button type="button" class="sos-button">Contact Guard</button>
    </div>
</section>

        <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">SOS History</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>Site</th>
                                        <th>Unit</th>
                                        <th>Activated</th>
                                        <th>Guard Assigned</th>
                                        <th>Response Time</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                        
                                        <td>SOS-000012</td>
                                        <td>Metro Corporate</td>
                                        <td>C-05-02</td>
                                        <td>10:58 AM</td>
                                        <td>Officer Evan</td>
                                        <td>5 min</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">RESPONDING</span>
                                            </span>
                                        </td> 

                                    </tr>
                                    <tr>
                                        </td>
                                        <td>SOS-000011</td>
                                        <td>Emerald Residence</td>
                                        <td>B-12-03</td>
                                        <td>28 Aug, 3:15 PM</td>
                                        <td>Officer Hassan</td>
                                        <td>3 min</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>

                                    <tr>
                                        <td>SOS-000010</td>
                                        <td>Vista Heights</td>
                                        <td>A-08-05</td>
                                        <td>20 Aug, 11:00 AM</td>
                                        <td>Officer Daniel</td>
                                        <td>7 min</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> 
                                        
                                    </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