@extends('layout.master')

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

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

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Safety Device Status Table</h6>
        <p class="text-muted mb-3">Ensure all safety devices are operational and protocols are strictly followed</p>

        <!-- Safety Device Alert Section -->
        <div class="alert alert-warning" id="safetyAlert" style="display: none;">
          <strong>Safety Alert:</strong> Some safety devices require immediate attention. Please review the devices listed below.
        </div>

        <div class="table-responsive">
          <table id="safetyDeviceTable" class="table">
            <thead class="table-light">
              <tr>
                <th>Crane<br> Name</th>
                <th>Equipment<br> Name</th>
                <th>Status</th>
                <th>Last Inspection</th>
                <th>Next Inspection Due</th>
                <th>Technician Name</th> <!-- New column for technician name -->
                <th>Notification</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($safetyDevices as $device)
              <tr>
                <td>{{ $device->crane->company_name  ?? 'No Crane Assigned' }}{{ $device->crane->serial_no  ?? 'No Crane Assigned' }}</td>
                <td>{{ $device->equipment->name  }}</td>
                <td>
                  <span class="badge 
                    @if ($device->status == 'Operational') bg-success 
                    @elseif ($device->status == 'Malfunction') bg-danger 
                    @elseif ($device->status == 'Needs Maintenance') bg-warning 
                    @endif">
                    {{ $device->status }}
                  </span>
                </td>
                <td>{{ $device->last_inspection->format('Y/m/d') }}</td>
                <td>{{ $device->next_inspection_due->format('Y/m/d') }}</td>
                <td>{{ $device->technician_name ?? 'N/A' }}</td>
                <td>{{ $device->notification ?? 'No alert' }}</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() {
    $('#safetyDeviceTable').DataTable({
      responsive: true,
      "order": [[2, "asc"]],
      "columnDefs": [
        { "orderable": false, "targets": [6] }
      ]
    });

    // Show Safety Alert if any device has malfunction or needs attention
    function checkSafetyDeviceAlerts() {
      const rows = document.querySelectorAll('#safetyDeviceTable tbody tr');
      let alertRequired = false;
      
      rows.forEach(row => {
        const status = row.cells[2].innerText;
        if (status === 'Malfunction' || status === 'Needs Maintenance') {
          alertRequired = true;
        }
      });

      if (alertRequired) {
        document.getElementById('safetyAlert').style.display = 'block';
      }
    }

    // Check safety alerts when the page loads
    checkSafetyDeviceAlerts();
  });
</script>
@endpush