@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush

<style>

.alert-body {
    padding: 20px;
    background-color: #f8f9fa;
    color: #333;
}

.alert-body .list-group-item {
    border: 0;
    padding: 15px;
}

.blinking-row {
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% {
        background-color: #f9e5e5;
    }
    50% {
        background-color: #f8d7da;
    }
}

/* Modern table styles */
.table th, .table td {
    padding: 15px;
    text-align: center;
    vertical-align: middle;
}

.table thead {
    background-color: #f1f1f1;
    color: #333;
}

.table tbody tr {
    border-bottom: 1px solid #ddd;
}

.table-hover tbody tr:hover {
    background-color: #f1f1f1;
}

.table .badge {
    font-size: 0.9rem;
    padding: 5px 10px;
}
</style>

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Real-Time Monitoring</a></li>
      <li class="breadcrumb-item active" aria-current="page">Operation</li>
    </ol>
</nav>
  
<div class="container my-1">
    <div class="row mb-4">
        <div class="col-md-12">
            <h1 class="display-6">Crane Maintenance Alerts</h1>
            <p class="text-muted">Monitor real-time alerts, maintenance schedules, and crane status updates.</p>
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-danger text-white">
                    <i class="feather icon-alert-circle"></i> <strong>Immediate Action Required!</strong>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <i class="feather icon-alert-circle text-danger me-2"></i>
                            <strong>CRN-003:</strong> Hydraulic failure detected. Immediate action required!
                        </li>
                        <li class="list-group-item">
                            <i class="feather icon-alert-circle text-warning me-2"></i>
                            <strong>CRN-002:</strong> Excessive wear on swing circle assemblies. Schedule maintenance.
                        </li>
                        <li class="list-group-item">
                            <i class="feather icon-check-circle text-success me-2"></i>
                            <strong>CRN-001:</strong> No issues detected. Crane operational.
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-warning text-white">
                    <i class="feather icon-calendar"></i> <strong>Scheduled Maintenance</strong>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <i class="feather icon-calendar text-primary me-2"></i>
                            <strong>CRN-001:</strong> Annual load test scheduled for <span class="text-info">2025-01-15</span>.
                        </li>
                        <li class="list-group-item">
                            <i class="feather icon-calendar text-primary me-2"></i>
                            <strong>CRN-002:</strong> Monthly swing mechanism inspection due <span class="text-danger">tomorrow</span>.
                        </li>
                        <li class="list-group-item">
                            <i class="feather icon-calendar text-primary me-2"></i>
                            <strong>CRN-003:</strong> Quarterly hoist inspection scheduled for <span class="text-info">2025-02-01</span>.
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <i class="feather icon-clock"></i> <strong>Inspection Deadlines & Compliance</strong>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <i class="feather icon-clock text-warning me-2"></i>
                            <strong>CRN-002:</strong> Pre-use inspection deadline in <span class="text-danger">3 days</span>.
                        </li>
                        <li class="list-group-item">
                            <i class="feather icon-check-circle text-success me-2"></i>
                            <strong>CRN-001:</strong> Compliance check completed. Next check in <span class="text-primary">6 months</span>.
                        </li>
                        <li class="list-group-item">
                            <i class="feather icon-alert-circle text-danger me-2"></i>
                            <strong>CRN-003:</strong> Overload alarm test overdue. Immediate testing required.
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <i class="feather icon-activity"></i> <strong>Live Data Feed</strong>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="dataTableExample" class="table table-bordered table-hover">
                            <thead class="table-light">
                              <tr>
                                <th>#</th>
                                <th>Crane ID</th>
                                <th>Crane Name</th>
                                <th>Status</th>
                                <th>Load (Ton)</th>
                                <th>Operator</th>
                                <th>Manager</th>
                                <th>Location</th>
                                <th>Last Update</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr class="blinking-row">
                                <td>1</td>
                                <td>CRN-004</td>
                                <td>Penang Bridge Lifter</td>
                                <td><span class="badge bg-primary">Ongoing</span></td>
                                <td>10</td>
                                <td>Hafiz Ahmad</td>
                                <td>Siti Rosliza</td>
                                <td>Penang, Malaysia</td>
                                <td>Just now</td>
                              </tr>
                              <tr>
                                <td>2</td>
                                <td>CRN-001</td>
                                <td>Kemaman Heavy Lifter</td>
                                <td><span class="badge bg-success">Operational</span></td>
                                <td>15</td>
                                <td>Ahmad Faizal</td>
                                <td>Raja Muhammad</td>
                                <td>Kemaman, Terengganu</td>
                                <td>2 mins ago</td>
                              </tr>
                              <tr>
                                <td>3</td>
                                <td>CRN-002</td>
                                <td>Port Klang Lifter</td>
                                <td><span class="badge bg-warning">Maintenance</span></td>
                                <td>0</td>
                                <td>Nur Aisyah</td>
                                <td>Tan Chong Wei</td>
                                <td>Port Klang, Selangor</td>
                                <td>5 mins ago</td>
                              </tr>
                              <tr>
                                <td>4</td>
                                <td>CRN-003</td>
                                <td>Bintulu Offshore Lifter</td>
                                <td><span class="badge bg-danger">Critical Failure</span></td>
                                <td>20</td>
                                <td>Azlan Hamid</td>
                                <td>Lim Zhi Wei</td>
                                <td>Bintulu, Sarawak</td>
                                <td>10 mins ago</td>
                              </tr>
                              <!-- Additional Data -->
                              <tr>
                                <td>5</td>
                                <td>CRN-005</td>
                                <td>Melaka Industrial Lifter</td>
                                <td><span class="badge bg-success">Operational</span></td>
                                <td>18</td>
                                <td>Siti Mariam</td>
                                <td>Yusof Harun</td>
                                <td>Melaka, Malaysia</td>
                                <td>12 mins ago</td>
                              </tr>
                              <tr>
                                <td>6</td>
                                <td>CRN-006</td>
                                <td>Johor Port Lifter</td>
                                <td><span class="badge bg-warning">Maintenance</span></td>
                                <td>12</td>
                                <td>Rizal Iskandar</td>
                                <td>Zarina Sulaiman</td>
                                <td>Johor Bahru, Johor</td>
                                <td>20 mins ago</td>
                              </tr>
                              <tr>
                                <td>7</td>
                                <td>CRN-007</td>
                                <td>KLIA Lifter</td>
                                <td><span class="badge bg-danger">Critical Failure</span></td>
                                <td>25</td>
                                <td>Aminah Rahim</td>
                                <td>Faridah Zain</td>
                                <td>Kuala Lumpur, Malaysia</td>
                                <td>25 mins ago</td>
                              </tr>
                              <tr>
                                <td>8</td>
                                <td>CRN-008</td>
                                <td>Putrajaya High Rise Lifter</td>
                                <td><span class="badge bg-primary">Ongoing</span></td>
                                <td>14</td>
                                <td>Haris Johari</td>
                                <td>Jamilah Hadi</td>
                                <td>Putrajaya, Malaysia</td>
                                <td>30 mins ago</td>
                              </tr>
                              <tr>
                                <td>9</td>
                                <td>CRN-009</td>
                                <td>Kuching Offshore Lifter</td>
                                <td><span class="badge bg-success">Operational</span></td>
                                <td>22</td>
                                <td>Samad Abdul</td>
                                <td>Noraini Sharif</td>
                                <td>Kuching, Sarawak</td>
                                <td>35 mins ago</td>
                              </tr>
                              <tr>
                                <td>10</td>
                                <td>CRN-010</td>
                                <td>Klang Valley Lifter</td>
                                <td><span class="badge bg-warning">Maintenance</span></td>
                                <td>13</td>
                                <td>Junaidah Rahmat</td>
                                <td>Jamal Nasir</td>
                                <td>Klang, Selangor</td>
                                <td>40 mins ago</td>
                              </tr>
                              <tr>
                                <td>11</td>
                                <td>CRN-011</td>
                                <td>Sungai Petani Lifter</td>
                                <td><span class="badge bg-success">Operational</span></td>
                                <td>30</td>
                                <td>Rohana Sulaiman</td>
                                <td>Abdullah Zain</td>
                                <td>Sungai Petani, Kedah</td>
                                <td>45 mins ago</td>
                              </tr>
                              <tr>
                                <td>12</td>
                                <td>CRN-012</td>
                                <td>Ipoh Crane Lifter</td>
                                <td><span class="badge bg-primary">Ongoing</span></td>
                                <td>28</td>
                                <td>Hidayah Abu</td>
                                <td>Rashid Ali</td>
                                <td>Ipoh, Perak</td>
                                <td>50 mins ago</td>
                              </tr>
                              <tr>
                                <td>13</td>
                                <td>CRN-013</td>
                                <td>Kota Kinabalu Offshore Lifter</td>
                                <td><span class="badge bg-danger">Critical Failure</span></td>
                                <td>35</td>
                                <td>Fauzi Omar</td>
                                <td>Azman Hamzah</td>
                                <td>Kota Kinabalu, Sabah</td>
                                <td>55 mins ago</td>
                              </tr>
                              <tr>
                                <td>14</td>
                                <td>CRN-014</td>
                                <td>Kedah Crane Lifter</td>
                                <td><span class="badge bg-warning">Maintenance</span></td>
                                <td>16</td>
                                <td>Mahmud Ismail</td>
                                <td>Halimah Zain</td>
                                <td>Alor Setar, Kedah</td>
                                <td>1 hour ago</td>
                              </tr>
                              <tr>
                                <td>15</td>
                                <td>CRN-015</td>
                                <td>Seremban Lifter</td>
                                <td><span class="badge bg-success">Operational</span></td>
                                <td>18</td>
                                <td>Shaharuddin Hassan</td>
                                <td>Azlan Abd Rahman</td>
                                <td>Seremban, Negeri Sembilan</td>
                                <td>1 hour ago</td>
                              </tr>
                            </tbody>
                          </table>
                          
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
@endpush