@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

@endpush

<style>
  @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }

  .blinking-alert {
    animation: blink 1s infinite;
  }
</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>

<!-- Alert Section -->
<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>

<!-- Button to trigger Modal -->
<div class="row mb-4">
  <div class="col-md-12">
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addTaskModal">
      <i class="bi bi-plus-circle"></i> Add Urgent Maintenance Task
    </button>
  </div>
</div>

<!-- Modal for Adding a New Task -->
<div class="modal fade" id="addTaskModal" tabindex="-1" aria-labelledby="addTaskModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="addTaskModalLabel"><i class="bi bi-tools"></i> Add Urgent Maintenance Task</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="{{ route('urgent_maintenance.store') }}" method="POST">
          @csrf
          <div class="row mb-3">
          <div class="col-md-6">
              <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="col-md-6">
              <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="col-md-6">
              <label for="issue" class="form-label"><i class="bi bi-exclamation-circle"></i> Issue</label>
              <input type="text" name="issue" class="form-control" placeholder="Describe the issue" required>
            </div>
          </div>

          <div class="row mb-3">
            <div class="col-md-6">
              <label for="priority" class="form-label"><i class="bi bi-flag"></i> Priority</label>
              <select name="priority" class="form-control" required>
                <option value="Low">Low</option>
                <option value="Medium">Medium</option>
                <option value="High">High</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="reported_on" class="form-label"><i class="bi bi-calendar-event"></i> Reported On</label>
              <input type="date" name="reported_on" class="form-control" required>
            </div>
          </div>

          <div class="row mb-3">
            <div class="col-md-6">
              <label for="technician_name" class="form-label"><i class="bi bi-person"></i> Technician Name</label>
                <select class="form-control" id="technician_name" name="technician_name" required>
                  <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="col-md-6">
              <label for="action_required" class="form-label"><i class="bi bi-tools"></i> Action Required</label>
              <input type="text" name="action_required" class="form-control">
            </div>
          </div>

          <!-- User Assigned Dropdown -->
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="assigned_user_id" class="form-label"><i class="bi bi-person-check"></i> Assign to 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 }}" {{ old('assigned_user_id') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                  @endforeach
              </select>
            </div>
          </div>

          <div class="d-grid">
            <button type="submit" class="btn btn-success"><i class="bi bi-check-circle"></i> Add Task</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Display Tasks Table -->
<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</th>
                <th>Crane Equipment</th>
                <th>Issue</th>
                <th>Priority</th>
                <th>Reported On</th>
                <th>Action Required</th>
                <th>Technician Name</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              @foreach($urgentMaintenances as $task)
              <tr>
              <td>{{ $task->crane->company_name  ?? 'No Crane Assigned' }}{{ $task->crane->serial_no  ?? 'No Crane Assigned' }}</td>
              <td>{{ $task->equipment->name ?? 'No Equipment Assigned' }}</td>
              <td>{{ $task->issue }}</td>
                <td>{{ $task->priority }}</td>
                <td>{{ $task->reported_on }}</td>
                <td>{{ $task->action_required ?? 'N/A' }}</td>
                <td>{{ $task->technician_name ?? 'N/A' }}</td>
                <td>
                  <button class="btn btn-sm btn-warning mb-1" data-bs-toggle="modal" data-bs-target="#editTaskModal-{{ $task->id }}">
                    <i class="fa fa-edit"></i>
                  </button>
                  <form action="{{ route('urgent.maintenance.destroy', $task->id) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?');">
                     <i class="fa fa-trash"></i>
                    </button>
                  </form>
                </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": [[2, "asc"]]
    });
  });
</script>
@endpush