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

<!-- 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">Safety Device </h6>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addDeviceModal">Add New Safety Device</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">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>Crane Equipment<br> Name</th>
                    <th>Status</th>
                    <th>Last Inspection</th>
                    <th>Next Inspection Due</th>
                    <th>Technician Name</th>
                    <th>Operator Name</th>
                    <th>Notification</th>
                    <th>Action</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 bg-{{ $device->status === 'Operational' ? 'success' : ($device->status === 'Malfunction' ? 'danger' : 'warning') }}">{{ $device->status }}</span></td>
                        <td>{{ $device->last_inspection }}</td>
                        <td>{{ $device->next_inspection_due }}</td>
                        <td>{{ $device->technician_name }}</td>
                        <td>{{ $device->operator_name }}</td>
                        <td>{{ $device->notification }}</td>
                        <td>
                        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#editDeviceModal{{ $device->id }}">
                          Edit
                        </button>
                        <!-- Delete Button -->
                        <form action="{{ route('safety.device.destroy', $device->id) }}" method="POST" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    </td>
                    </tr>
                @endforeach
            </tbody>
        </table>        
        </div>
      </div>
    </div>
  </div> 
</div>

<!-- Modal for Adding New Device -->
<div class="modal fade" id="addDeviceModal" tabindex="-1" aria-labelledby="addDeviceModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addDeviceModalLabel">Add New Safety Device</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="addDeviceForm" method="POST" action="{{ route('safety.device.store') }}">
          @csrf
          <div class="mb-3">
              <label for="crane_id" class="form-label"><i class="bi bi-gear"></i> Crane </label>
              <select name="crane_id" class="form-control" required>
                  <option value="" disabled selected>Select Crane </option>
                  @foreach($inventories as $inventory)
                     <option value="{{ $inventory->id }}">{{ $inventory->company_name }}{{ $inventory->serial_no }}</option>
                  @endforeach
              </select>
            </div>
          <div class="mb-3">
            <label for="equipment_id" class="form-label"><i class="bi bi-gear"></i> Crane Equipment</label>
            <select name="equipment_id" class="form-control" required>
              <option value="" disabled selected>Select Crane Equipment</option>
              @foreach($cranes as $crane)
                <option value="{{ $crane->id }}">{{ $crane->name }}</option>
              @endforeach
            </select>
          </div>

          <div class="mb-3">
            <label for="status" class="form-label">Status</label>
            <select class="form-control" id="status" name="status" required>
              <option value="Operational">Operational</option>
              <option value="Malfunction">Malfunction</option>
              <option value="Needs Maintenance">Needs Maintenance</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="technician_name" class="form-label">Technician Name</label>
            <input type="text" class="form-control" name="technician_name" required>
          </div>

          <div class="mb-3">
            <label for="operator_name" class="form-label">Operator Name</label>
            <input type="text" class="form-control" name="operator_name" required>
          </div>

          <div class="mb-3">
            <label for="last_inspection" class="form-label">Last Inspection</label>
            <input type="date" class="form-control" name="last_inspection" required>
          </div>

          <div class="mb-3">
            <label for="next_inspection_due" class="form-label">Next Inspection Due</label>
            <input type="date" class="form-control" name="next_inspection_due" required>
          </div>

          <!-- New Assigned User Dropdown -->
          <div class="mb-3">
            <label for="assigned_user_id" class="form-label"><i class="bi bi-person"></i> Assigned User</label>
            <select name="assigned_user_id" class="form-control" required>
              <option value="" disabled selected>Select User</option>
              @foreach($users as $user)
                <option value="{{ $user->id }}">{{ $user->name }}</option>
              @endforeach
            </select>
          </div>

          <div class="mb-3">
            <label for="notification" class="form-label">Notification</label>
            <textarea class="form-control" name="notification" rows="3" placeholder="Enter any notifications or remarks"></textarea>
          </div>

          <button type="submit" class="btn btn-primary">Add Device</button>
        </form>
      </div>
    </div>
  </div>
</div>


<!-- Edit Modal -->
@foreach($safetyDevices as $device)
  <div class="modal fade" id="editDeviceModal{{ $device->id }}" tabindex="-1" aria-labelledby="editDeviceModalLabel{{ $device->id }}" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editDeviceModalLabel{{ $device->id }}">Edit Safety Device</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form method="POST" action="{{ route('safety.device.update', $device->id) }}">
            @csrf
            @method('PUT')
            <div class="mb-3">
              <label for="crane_equipment_id" class="form-label">Crane Equipment</label>
              <select name="crane_equipment_id" class="form-control" required>
                @foreach($cranes as $crane)
                  <option value="{{ $crane->id }}" {{ $crane->id == $device->crane_equipment_id ? 'selected' : '' }}>{{ $crane->component_name }}</option>
                @endforeach
              </select>
            </div>
            <div class="mb-3">
              <label for="status" class="form-label">Status</label>
              <select class="form-control" name="status" required>
                <option value="Operational" {{ $device->status == 'Operational' ? 'selected' : '' }}>Operational</option>
                <option value="Malfunction" {{ $device->status == 'Malfunction' ? 'selected' : '' }}>Malfunction</option>
                <option value="Needs Maintenance" {{ $device->status == 'Needs Maintenance' ? 'selected' : '' }}>Needs Maintenance</option>
              </select>
            </div>
            <div class="mb-3">
              <label for="technician_name" class="form-label">Technician Name</label>
              <input type="text" class="form-control" name="technician_name" value="{{ $device->technician_name }}" required>
            </div>
            <div class="mb-3">
              <label for="operator_name" class="form-label">Operator Name</label>
              <input type="text" class="form-control" name="operator_name" value="{{ $device->operator_name }}" required>
            </div>
            <div class="mb-3">
              <label for="last_inspection" class="form-label">Last Inspection</label>
              <input type="date" class="form-control" name="last_inspection" value="{{ $device->last_inspection }}" required>
            </div>
            <div class="mb-3">
              <label for="next_inspection_due" class="form-label">Next Inspection Due</label>
              <input type="date" class="form-control" name="next_inspection_due" value="{{ $device->next_inspection_due }}" required>
            </div>
            <div class="mb-3">
              <label for="notification" class="form-label">Notification</label>
              <textarea class="form-control" name="notification" rows="3" required>{{ $device->notification }}</textarea>
            </div>
            <button type="submit" class="btn btn-primary">Update Device</button>
          </form>
        </div>
      </div>
    </div>
  </div>
@endforeach

@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();
    });
  </script>
@endpush