@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush
<style>
  @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }
 
  .blinking-alert {
    animation: blink 1s infinite; /* 1-second interval */
  }
</style>
@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Offshore Alerts</a></li>
    <li class="breadcrumb-item active" aria-current="page">Urgent Maintenance</li>
  </ol>
</nav>

<div class="alert alert-danger blinking-alert" role="alert">
  <h4 class="alert-heading">⚠️ Urgent Maintenance!</h4>
  <p>Systems require immediate attention to ensure operational safety and efficiency. Please address the listed issues below urgently.</p>
</div>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Urgent Maintenance Tasks</h6>
        <p class="text-muted mb-3">Below are the critical offshore maintenance tasks that need immediate resolution.</p>
        <div class="table-responsive">
          <table id="urgentMaintenanceTable" class="table table-bordered table-hover">
            <thead class="table-danger">
              <tr>
                <th>Crane Name</th>
                <th>Crane Equipment Name</th>
                <th>Issue</th>
                <th>Priority</th>
                <th>Reported On</th> 
                <th>Action Required</th>
                <th>Technician Name</th>
              </tr>
            </thead>
            <tbody>
              @foreach($urgentMaintenances as $maintenance)
              <tr>
                <td>{{ $maintenance->crane->company_name  ?? 'No Crane Assigned' }}{{ $maintenance->crane->serial_no  ?? 'No Crane Assigned' }}</td>
                <td>{{ $maintenance->equipment->name ?? 'No Equipment Assigned' }}</td>
                <td>{{ $maintenance->issue }}</td>
                <td>{{ $maintenance->priority }}</td>
                <td>{{ $maintenance->reported_on }}</td>
                <td>
                  @if(str_contains($maintenance->priority, 'P1'))
                    <button class="btn btn-sm btn-danger">Resolve Now</button>
                  @elseif($maintenance->priority == 'P2')
                    <button class="btn btn-sm btn-warning">Check Soon</button>
                  @else
                    <button class="btn btn-sm btn-secondary">Schedule Maintenance</button>
                  @endif
                </td>
                <td>{{ $maintenance->technician_name }}</td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </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>
  $(document).ready(function() {
    $('#urgentMaintenanceTable').DataTable({
      "paging": true,
      "searching": true,
      "ordering": true,
      "order": [[3, "asc"]] // Sort by Priority column
    });
  });
</script>
@endpush