@include('dashboards.header')
    <style>
    /* Main table container */
    .table-container {
        background: #ffffff;
        border-radius: 14px;
        padding: 20px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.08);
        border: 1px solid #e6e6e6;
    }

    /* Header row styling */
    .table thead th {
        background: #0d6efd;
        color: #fff !important;
        font-weight: 600;
        padding: 12px 8px;
        font-size: 11px !important;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    /* Sticky header */
    thead {
        position: sticky;
        top: 0;
        z-index: 5;
    }

    /* Table rows */
    .table tbody tr {
        transition: 0.25s ease;
    }
    .table tbody tr:hover {
        background: #f5f9ff !important;
    }

    .table td {
        padding: 10px 6px !important;
        vertical-align: middle;
        font-size: 11px !important;
        color: #333;
        border-color: #eaeaea !important;
    }

    /* Border helpers */
    .bb { border-left: 1px solid #e1e1e1 !important; }
    .rbg { border-right: 1px solid #e1e1e1 !important; }

    /* Highlight device column when phase = 1 */
    .active-device {
        background: #d1f5d1 !important;
        font-weight: 600;
        color: #0b6e0b;
    }

    /* Pagination center alignment */
    .pagination {
        margin: auto !important;
    }
</style>


<link rel="stylesheet" href="{{asset('assets')}}/vendor/datepicker/css/classic.css" />
<link rel="stylesheet" href="{{asset('assets')}}/vendor/datepicker/css/classic.date.css" />
<link rel="stylesheet" href="{{asset('assets')}}/vendor/bs-select/bs-select.css" />

<div class="row gutters">
    <div class="col-xl-12 col-lg-12 col-md-12">

        <div class="table-container">

            <div class="table-responsive" style="max-height: 800px; overflow-y: auto;">
                <table class="table table-hover m-0">
                    <thead>
                        <tr>
                            <th class="text-center">STime <br> DTime</th>
                            <th>Global ID</th>
                            <th>Alert Code</th>
                            <th>Counter</th>
                            <th>Description</th>
                        </tr>
                    </thead>

                    <tbody class="recent-record-row">

                        @if($alertdata && !$alertdata->isEmpty())
                            @foreach($alertdata as $row)

                                <tr>
                                    <td>{{$row->db_datetime}}<br>{{$row->event_datetime}}</td>

                                    <td class="{{ $row->dmdt_phase == 1 ? 'active-device' : '' }}">
                                        {{$row->global_device_id}}
                                    </td>

                                    <td>{{$row->event_code}}</td>
                                    <td>{{$row->event_counter}}</td>
                                    <td class="rbg">{{$row->event_description}}</td>
                                </tr>

                            @endforeach
                        @else
                            <tr>
                                <td colspan="25" class="text-danger text-center py-3">
                                    No Record Found
                                </td>
                            </tr>
                        @endif

                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-center mt-3">
                {{ $alertdata->appends(request()->query())->links('pagination::bootstrap-4') }}
            </div>

        </div>

    </div>
</div>

<script src="{{asset('assets')}}/vendor/datepicker/js/picker.js"></script>
<script src="{{asset('assets')}}/vendor/datepicker/js/picker.date.js"></script>
<script src="{{asset('assets')}}/vendor/datepicker/js/custom-picker.js"></script>
<script src="{{asset('assets')}}/vendor/bs-select/bs-select.min.js"></script>
<script src="{{asset('assets')}}/js/main.js"></script>