//inspection deadline -admin

@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">Inspection Deadlines</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">Inspection Deadlines</h6>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addInspectionModal">Add New Inspection Deadline</button>
      </div>
    </div>
  </div>
</div>

<!-- Add Inspection Deadline Modal -->
<div class="modal fade" id="addInspectionModal" tabindex="-1" aria-labelledby="addInspectionModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addInspectionModalLabel">Add New Inspection Deadline</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="{{ route('inspection.store') }}" method="POST">
          @csrf
          
          <!-- Crane Equipment -->
          <div class="form-group mb-2">
              <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($inventory as $item)
                     <option value="{{ $item->id }}">{{ $item->company_name }}{{ $item->serial_no }}</option>
                  @endforeach
              </select>
            </div>
          <div class="form-group mb-2">
            <label for="equipment_id">Crane Equipment</label>
            <select name="equipment_id" class="form-control" required>
              <option value="" disabled selected>Select Crane</option>
              @foreach($cranes as $crane)
                <option value="{{ $crane->id }}" {{ old('equipment_id') == $crane->id ? 'selected' : '' }}>{{ $crane->name }}</option>
              @endforeach
            </select>
            @error('crane_equipment_id') <span class="text-danger">{{ $message }}</span> @enderror
          </div>

          <!-- Inspection Type -->
          <div class="form-group mb-2">
            <label for="inspection_type">Inspection Type</label>
            <select id="inspection_type" name="inspection_type" class="form-control" required>
              <option value="" disabled selected>Select Inspection Type</option>
              @foreach(['Mechanical', 'Safety', 'Electrical', 'Structural', 'All'] as $type)
                <option value="{{ $type }}" {{ old('inspection_type') == $type ? 'selected' : '' }}>{{ $type }}</option>
              @endforeach
            </select>
            @error('inspection_type') <span class="text-danger">{{ $message }}</span> @enderror
          </div>

          <!-- Location -->
          <div class="form-group mb-2">
            <label for="location">Location</label>
            <select id="location" name="location" class="form-control" required>
              <option value="" disabled selected>Select Location</option>
              @foreach($inventory as $item)
                <option value="{{ $item->platform }}" {{ old('location') == $item->platform ? 'selected' : '' }}>{{ $item->platform }}</option>
              @endforeach
            </select>
            @error('location') <span class="text-danger">{{ $message }}</span> @enderror
          </div>

          <!-- Last Inspection Date -->
          <div class="form-group mb-2">
            <label for="last_inspection_date">Last Inspection Date</label>
            <input type="date" id="last_inspection_date" name="last_inspection_date" class="form-control" value="{{ old('last_inspection_date') }}" required>
            @error('last_inspection_date') <span class="text-danger">{{ $message }}</span> @enderror
          </div>

          <!-- Next Inspection Due -->
          <div class="form-group mb-2">
            <label for="next_inspection_due">Next Inspection Due</label>
            <input type="date" id="next_inspection_due" name="next_inspection_due" class="form-control" value="{{ old('next_inspection_due') }}" required>
            @error('next_inspection_due') <span class="text-danger">{{ $message }}</span> @enderror
          </div>

          <!-- Status -->
          <div class="form-group mb-2">
            <label for="status">Status</label>
            <select id="status" name="status" class="form-control" required>
              <option value="" disabled selected>Select Status</option>
              @foreach(['Pending', 'Completed', 'Overdue', 'In Progress'] as $status)
                <option value="{{ $status }}" {{ old('status') == $status ? 'selected' : '' }}>{{ $status }}</option>
              @endforeach
            </select>
            @error('status') <span class="text-danger">{{ $message }}</span> @enderror
          </div>

          <!-- Technician Name -->
          <div class="form-group mb-2">
            <label for="technician_name">Technician Name</label>
            <select id="technician_name" name="technician_name" class="form-control" required>
              <option value="" disabled selected>Select Technician</option>
              @foreach(['Ali Bin Ahmad', 'Abu Bakar', 'Hasimah Binti Ali', 'Syakira Binti Kamil', 'Azlan Bin Ismail', 'Rohana Binti Mohd Noor', 'Iskandar Bin Zulkifli', 'Faridah Binti Harun', 'Zainal Bin Rahim'] as $technician)
                <option value="{{ $technician }}" {{ old('technician_name') == $technician ? 'selected' : '' }}>{{ $technician }}</option>
              @endforeach
            </select>
            @error('technician_name') <span class="text-danger">{{ $message }}</span> @enderror
          </div>

          <!-- Assigned User -->
          <div class="form-group mb-2">
            <label for="assigned_user_id">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-success mt-3">Add Task</button>
        </form>
      </div>
    </div>
  </div>
</div>


<!-- Edit Inspection Deadline Modal -->
<div class="modal fade" id="editInspectionModal" tabindex="-1" aria-labelledby="editInspectionModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editInspectionModalLabel">Edit Inspection Deadline</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="editInspectionForm" method="POST">
          @csrf
          @method('PUT')

          <!-- Hidden Field for ID -->
          <input type="hidden" id="edit_inspection_id" name="id">

          <!-- Crane Equipment -->
          <div class="form-group mb-2">
            <label for="edit_equipment_id">Crane Equipment</label>
            <select name="equipment_id" id="edit_equipment_id" class="form-control" required>
              <option value="" disabled>Select Crane</option>
              @foreach($cranes as $crane)
                <option value="{{ $crane->id }}">{{ $crane->name }}</option>
              @endforeach
            </select>
          </div>

          <!-- Inspection Type -->
          <div class="form-group mb-2">
            <label for="edit_inspection_type">Inspection Type</label>
            <select id="edit_inspection_type" name="inspection_type" class="form-control" required>
              <option value="" disabled>Select Inspection Type</option>
              <option value="Mechanical">Mechanical</option>
              <option value="Safety">Safety</option>
              <option value="Electrical">Electrical</option>
              <option value="Structural">Structural</option>
              <option value="All">All</option>
            </select>
          </div>

          <!-- Location -->
          <div class="form-group mb-2">
            <label for="edit_location">Location</label>
            <select id="edit_location" name="location" class="form-control" required>
              <option value="" disabled>Select Location</option>
              @foreach($inventory as $item)
                <option value="{{ $item->platform }}">{{ $item->platform }}</option>
              @endforeach
            </select>
          </div>

          <!-- Last Inspection Date -->
          <div class="form-group mb-2">
            <label for="edit_last_inspection_date">Last Inspection Date</label>
            <input type="date" id="edit_last_inspection_date" name="last_inspection_date" class="form-control" required>
          </div>

          <!-- Next Inspection Due -->
          <div class="form-group mb-2">
            <label for="edit_next_inspection_due">Next Inspection Due</label>
            <input type="date" id="edit_next_inspection_due" name="next_inspection_due" class="form-control" required>
          </div>

          <!-- Status -->
          <div class="form-group mb-2">
            <label for="edit_status">Status</label>
            <select id="edit_status" name="status" class="form-control" required>
              <option value="" disabled>Select Status</option>
              @foreach(['Pending', 'Completed', 'Overdue', 'In Progress'] as $status)
                <option value="{{ $status }}">{{ $status }}</option>
              @endforeach
            </select>
          </div>

          <!-- Technician Name -->
          <div class="form-group mb-2">
            <label for="edit_technician_name">Technician Name</label>
            <select id="edit_technician_name" name="technician_name" class="form-control" required>
              <option value="" disabled>Select Technician</option>
              @foreach(['Ali Bin Ahmad', 'Abu Bakar', 'Hasimah Binti Ali', 'Syakira Binti Kamil', 'Azlan Bin Ismail', 'Rohana Binti Mohd Noor', 'Iskandar Bin Zulkifli', 'Faridah Binti Harun', 'Zainal Bin Rahim'] as $technician)
                <option value="{{ $technician }}">{{ $technician }}</option>
              @endforeach
            </select>
          </div>

          <button type="submit" class="btn btn-primary mt-3">Update Task</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Inspection Deadlines Table -->
<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Upcoming Inspection Deadlines</h6>
        <p class="text-muted mb-3">
          Ensure compliance and maintain equipment safety by adhering to the following inspection schedules.
        </p>
        <div class="table-responsive">
          <table id="inspectionTable" class="table">
            <thead class="table-light">
              <tr>
                <th>Crane  <br> Name</th>
                <th>Crane Equipment<br> Name</th>
                <th>Inspection Type</th>
                <th>Location</th>
                <th>Last Inspection <br>Date</th>
                <th>Next Inspection <br>Due</th>
                <th>Status</th>
                <th>Countdown</th>
                <th>Technician Name</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody id="taskList">
              @foreach($inspectionDeadlines as $inspectionDeadline)
                <tr>
                  <td>{{ $inspectionDeadline->crane->company_name  ?? 'No Crane Assigned' }}{{ $inspectionDeadline->crane->serial_no  ?? 'No Crane Assigned' }}</td>
                  <td>{{ $inspectionDeadline->equipment->name ?? 'No Equipment Assigned' }}</td>
                  <td>{{ $inspectionDeadline->inspection_type }}</td>
                  <td>{{ $inspectionDeadline->location }}</td>
                  <td>{{ $inspectionDeadline->last_inspection_date }}</td>
                  <td>{{ $inspectionDeadline->next_inspection_due }}</td>
                  <td><span class="badge bg-success">{{ $inspectionDeadline->status }}</span></td>
                  <td>{{ \Carbon\Carbon::parse($inspectionDeadline->next_inspection_due)->diffInDays(\Carbon\Carbon::now()) }} days left</td>
                  <td>{{ $inspectionDeadline->technician_name }}</td>
                  <td>
                    <!-- Edit Button -->
                    <button class="btn btn-warning btn-sm edit-btn" data-id="{{ $inspectionDeadline->id }}" data-bs-toggle="modal" data-bs-target="#editInspectionModal">
                      Edit
                    </button>
                    <!-- Delete Button -->
                    <form action="{{ route('inspection.destroy', $inspectionDeadline->id) }}" method="POST" style="display:inline;" class="delete-form">
                      @csrf
                      @method('DELETE')
                      <button type="submit" class="btn btn-danger btn-sm delete-btn">Delete</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() {
      // Initialize DataTable
      $('#inspectionTable').DataTable({
        "order": [[5, "asc"]],
        "pageLength": 10,
        "responsive": true
      });

      // Handle form submission to add a new inspection task
      $('#addInspectionForm').on('submit', function(event) {
        event.preventDefault();

        // Collect form data
        var equipmentId = $('#equipment_id').val();
        var equipmentName = $('#equipment_name').val();
        var inspectionType = $('#inspection_type').val();
        var usageType = $('#usage_type').val();
        var location = $('#location').val();
        var lastInspectionDate = $('#last_inspection_date').val();
        var nextInspectionDue = $('#next_inspection_due').val();
        var technicianName = $('#technician_name').val();
        var operatorName = $('#operator_name').val();

        // Calculate days left for inspection (dummy logic here)
        var nextInspection = new Date(nextInspectionDue);
        var currentDate = new Date();
        var daysLeft = Math.floor((nextInspection - currentDate) / (1000 * 60 * 60 * 24));

        // Determine status based on days left
        var status = 'On Track';
        if (daysLeft <= 0) {
          status = 'Overdue'; 
        } else if (daysLeft <= 7) {
          status = 'Due Soon';
        }

        // Create a new table row
        var newRow = `<tr>
          <td>${equipmentId}</td>
          <td>${equipmentName}</td>
          <td>${inspectionType}</td>
          <td>${location}</td>
          <td>${lastInspectionDate}</td>
          <td>${nextInspectionDue}</td>
          <td><span class="badge bg-${status === 'Overdue' ? 'danger' : status === 'Due Soon' ? 'warning' : 'success'}">${status}</span></td>
          <td>${daysLeft} days left</td>
          <td>${technicianName}</td>
        </tr>`;

        // Append new row to the table
        $('#inspectionTable tbody').append(newRow);

        // Close the modal
        $('#addInspectionModal').modal('hide');
      });
      
    });
  </script>
@endpush