@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="#">Compliance</a></li>
    <li class="breadcrumb-item active" aria-current="page">Regulatory Updates</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">Compliance Updates</h6>
        <p class="text-muted mb-3">Stay informed on the latest updates regarding compliance issues and regulatory standards like API RP 2C and API RP 2D.</p>
        
        <div id="complianceAlert" class="alert" style="display: none;"></div>
        
        <div class="table-responsive">
          <table id="dataTableExample" class="table">
            <thead class="table-light">
              <tr>
                <th>Crane ID</th>
                <th>Platform</th>
                <th>Last Maintenance Date</th>
                <th>Next Compliance Check</th>
                <th>Compliance Status</th>
                <th>Technician Name</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              @foreach($complianceNotifications as $notification)
                <tr>
                  <td>{{ $notification->crane->company_name }} {{ $notification->crane->serial_no }}</td>
                  <td>{{ $notification->crane->platform }}</td>
                  <td>{{ $notification->last_maintenance_date }}</td>
                  <td>{{ $notification->next_compliance_check }}</td>
                  <td>
                    <span class="badge {{ $notification->compliance_status === 'Compliant' ? 'bg-success' : ($notification->compliance_status === 'Non-Compliant' ? 'bg-danger' : 'bg-warning') }}">
                      {{ $notification->compliance_status }}
                    </span>
                  </td>
                  <td>{{ $notification->technician_name }}</td>
                  <td>
                    <button class="btn btn-primary" onclick="showAlert('{{ strtolower($notification->compliance_status) }}', '{{ ucfirst($notification->compliance_status) }} check scheduled for Crane {{ $notification->crane->id }}')">
                      Schedule Check
                    </button>
                  </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 src="{{ asset('assets/js/data-table.js') }}"></script>
  <script>
    function showAlert(type, message) {
      const alertDiv = document.getElementById('complianceAlert');
      alertDiv.className = `alert alert-${type}`;
      alertDiv.innerHTML = `<strong>${type.charAt(0).toUpperCase() + type.slice(1)}:</strong> ${message}`;
      alertDiv.style.display = 'block';
      setTimeout(() => { alertDiv.style.display = 'none'; }, 10000); // Hide alert after 10 seconds
    }
  </script>
@endpush