@extends('layout.master')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush
<style>
    /* Custom badge styles */
    .badge {
        font-size: 0.875rem; /* Adjusting font size for better readability */
        font-weight: 500; /* Making text a bit bolder */
        padding: 0.25rem 0.6rem;
        border-radius: 0.375rem;
    }

    .badge-primary {
        background-color: #007bff; /* Blue background */
        color: white; /* White text */
    }

    .badge-secondary {
        background-color: #6c757d; /* Gray background */
        color: white; /* White text */
    }

    .badge-success {
        background-color: #28a745; /* Green background */
        color: white; /* White text */
    }

    .badge-danger {
        background-color: #dc3545; /* Red background */
        color: white; /* White text */
    }

    .badge-warning {
        background-color: #ffc107; /* Yellow background */
        color: black; /* Black text */
    }

    .badge-info {
        background-color: #17a2b8; /* Cyan background */
        color: white; /* White text */
    }

    .badge-light {
        background-color: #f8f9fa; /* Light gray background */
        color: black; /* Black text */
    }

    .badge-dark {
        background-color: #343a40; /* Dark background */
        color: white; /* White text */
    }
</style>

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Critical Failures</a></li>
      <li class="breadcrumb-item active" aria-current="page">Notifications</li>
    </ol>
</nav>

<div class="container my-1">
    <div class="row mb-3">
        <div class="col-lg-12">
            <h1 class="display-5">Critical Failure Notifications</h1>
            <p class="text-muted">Configure escalated alerts for higher-level authorities in the event of critical failures.</p>
        </div>
    </div>

    <div class="row mt-4 mb-3">
        <div class="col-lg-12">
            <h5 class="mb-2">Why Critical Failure Notifications Matter ?</h5>
            <div class="alert alert-danger" role="alert">
                <strong>Immediate Attention Required:</strong> Critical failures demand urgent action. Escalating notifications ensures that higher authorities can respond promptly to minimize risks.
            </div>
            <div class="alert alert-warning" role="alert">
                <strong>Pro Tip:</strong> Set a short escalation time to ensure that higher authorities are notified quickly in the event of a critical failure.
            </div>
            <div class="alert alert-success" role="alert">
                <strong>Effective Response:</strong> With prompt escalation, you'll ensure that all stakeholders are well-informed and able to take appropriate action.
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-lg-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6 class="card-title">History Critical Failures</h6>
                    <div class="table-responsive">
                        <table id="dataTableExample" class="table table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Crane ID</th>
                                    <th>Failure Type</th>
                                    <th>Severity</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($notifications as $notification)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>
                                            {{ $notification->crane ? $notification->crane->company_name . $notification->crane->serial_no : 'N/A' }}  </td> 
                                        <td>{{ $notification->failure_type }}</td>
                                        <td>
                                            <span class="badge bg-{{ $notification->severity_level == 'P1' ? 'danger' : ($notification->severity_level == 'P2' ? 'warning' : ($notification->severity_level == 'P3' ? 'success' : 'secondary')) }}">
                                                {{ ucfirst($notification->severity_level) }}
                                            </span>
                                        </td>  
                                        <td>{{ $notification->created_at->format('Y-m-d H:i') }}</td>
                                    </tr>
                                @endforeach
                            </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