@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>

<!-- Button to trigger modal -->
<div class="row mb-4">
  <div class="col-md-12">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Compliance Notification</h6>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addComplianceModal">Add New Compliance</button>
      </div>
    </div>
  </div>
</div>

<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.</p>

        <!-- Compliance Alert Section -->
        <div class="alert alert-warning" id="complianceAlert" style="display: none;">
          <strong>Compliance Alert:</strong> Some compliance checks require immediate attention. Please review the compliance updates listed below.
        </div>

        <div class="table-responsive">
          <table id="complianceNotificationTable" class="table">
          <thead class="table-light">
            <tr>
                <th>Crane ID</th>
                <th>Platform</th>
                <th>Operator Name</th>
                <th>Technician Name</th>
                <th>Last Maintenance</th>
                <th>Next Compliance Check</th>
                <th>Compliance Status</th>
                <th>Action</th> <!-- Action Column -->
            </tr>
        </thead>
            <tbody>
              @foreach($complianceNotifications as $notification)
                <tr>
                <td>{{ $notification->crane->company_name  ?? 'No Crane Assigned' }}{{ $notification->crane->serial_no  ?? 'No Crane Assigned' }}</td>
                <td>{{ $notification->crane->platform }}</td>
                  <td>{{ $notification->operator_name }}</td>
                  <td>{{ $notification->technician_name }}</td>
                  <td>{{ $notification->last_maintenance_date->format('Y/m/d') }}</td>
                  <td>{{ $notification->next_compliance_check->format('Y/m/d') }}</td>
                  <td>
                  <span class="badge bg-{{ $notification->status === 'Review Needed' ? 'warning' : ($notification->compliance_status === 'Compliant' ? 'success' : 'danger') }}">
                    {{ $notification->compliance_status }}
                  </span>
                  </td>
                  <td>
                    <button class="btn btn-danger btn-sm delete-btn" data-id="{{ $notification->id }}">Delete</button>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>

      </div>
    </div>
  </div>
</div>

<!-- Modal for Adding Compliance Notification -->
<div class="modal fade" id="addComplianceModal" tabindex="-1" aria-labelledby="addComplianceModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addComplianceModalLabel">Add Compliance Notification</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="addComplianceForm">
          @csrf
          <div class="mb-3">
            <label for="crane_id" class="form-label">Crane</label>
            <select name="crane_id" id="crane_id" class="form-control" required>
              <option value="">Select Crane</option>
              @foreach($cranes as $crane)
                  <option value="{{ $crane->id }}" data-platform="{{ $crane->platform }}">{{ $crane->company_name }} - {{ $crane->serial_no }}</option>
              @endforeach
            </select>
          </div>
          <div class="mb-3">
            <label for="platform" class="form-label">Platform</label>
            <input type="text" class="form-control" name="platform" id="platform" readonly required>
          </div>
          <div class="mb-3">
            <label for="operator_name" class="form-label">Operator Name</label>
            <select class="form-control" id="operator_name" name="operator_name" required>
              <option value="" disabled selected>Select Operator</option>
              <option value="Ali Bin Sulaiman">Ali Bin Sulaiman</option>
              <option value="Rina Binti Faris">Rina Binti Faris</option>
              <option value="John Doe">Johan Doe</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="technician_name" class="form-label">Technician Name</label>
            <select class="form-control" id="technician_name" name="technician_name">
              <option value="" disabled selected>Select Technician</option>
              <option value="Ahmad Bin Ali">Ahmad Bin Ali</option>
              <option value="Fatimah Binti Zain">Fatimah Binti Zain</option>
              <option value="John Doe">Malik Doe</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="last_maintenance_date" class="form-label">Last Maintenance Date</label>
            <input type="date" class="form-control" name="last_maintenance_date" id="last_maintenance_date" required>
          </div>
          <div class="mb-3">
            <label for="next_compliance_check" class="form-label">Next Compliance Check</label>
            <input type="date" class="form-control" name="next_compliance_check" id="next_compliance_check" required>
          </div>
          <div class="mb-3">
            <label for="compliance_status" class="form-label">Compliance Status</label>
            <select name="compliance_status" id="compliance_status" class="form-control" required>
              <option value="">Select Status</option>
              <option value="Compliant">Compliant</option>
              <option value="Non-Compliant">Non-Compliant</option>
            </select>
          </div>
          <div class="form-group mb-2">
            <label for="assigned_user_id" class="form-label">Assigned User</label>
            <select id="assigned_user_id" name="assigned_user_id" class="form-control" required>
              <option value="" disabled selected>Select User</option>
              @foreach($users as $user)
                <option value="{{ $user->id }}" {{ old('assigned_user_id') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
              @endforeach
            </select>
            @error('assigned_user_id') <span class="text-danger">{{ $message }}</span> @enderror
          </div>
          <button type="submit" class="btn btn-primary">Add Compliance</button>
        </form>
      </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>
  $(document).ready(function() {
    var table = $('#complianceNotificationTable').DataTable();

    // Handle form submission for adding compliance notification
    $('#addComplianceForm').on('submit', function(e) {
      e.preventDefault();

      var formData = {
        crane_id: $('#crane_id').val(),
        platform: $('#platform').val(),
        operator_name: $('#operator_name').val(),
        technician_name: $('#technician_name').val(),
        last_maintenance_date: $('#last_maintenance_date').val(),
        next_compliance_check: $('#next_compliance_check').val(),
        compliance_status: $('#compliance_status').val(),
        assigned_user_id: $('#assigned_user_id').val(), // Ensure assigned user is sent
        _token: '{{ csrf_token() }}'
      };

      $.ajax({
        url: "{{ route('compliance_notifications.store') }}",
        type: "POST",
        data: formData,
        success: function(response) {
            // Add new row to the DataTable
            table.row.add([
                response.crane_id, // Column 0
                response.platform, // Column 1
                response.operator_name, // Column 2
                response.technician_name, // Column 3
                response.last_maintenance_date, // Column 4
                response.next_compliance_check, // Column 5
                `<span class="badge bg-${response.compliance_status === 'Compliant' ? 'success' : 'danger'}">${response.compliance_status}</span>`, // Column 6
            ]).draw();
        },
        error: function(xhr) {
            alert('An error occurred while adding the compliance notification.');
        }
    });
    });

    // Auto-fill platform when crane is selected
    $('#crane_id').on('change', function() {
      var platformInput = $('#platform');
      var selectedCraneOption = this.selectedOptions[0];

      platformInput.val('');

      if (this.value) {
        var platform = selectedCraneOption.getAttribute('data-platform');
        platformInput.val(platform); // Auto-fill the platform field
      }
    });

    // Edit Button Click Handler
    $(document).on('click', '.edit-btn', function() {
      var id = $(this).data('id');
      alert('Edit functionality for ID: ' + id);
    });

    // Delete Button Click Handler
    $(document).on('click', '.delete-btn', function() {
      var id = $(this).data('id');
      if (confirm('Are you sure you want to delete this compliance notification?')) {
        $.ajax({
          url: '/compliance_notifications/' + id,
          type: 'DELETE',
          data: { _token: '{{ csrf_token() }}' },
          success: function(response) {
            alert('Compliance notification deleted successfully!');
            location.reload();
          }, 
          error: function() {
            alert('Error deleting compliance notification.');
          }
        });
      }
    });
  });
</script>

@endpush