@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="#">Reporting</a></li>
      <li class="breadcrumb-item active" aria-current="page">Predictive Report </li>
    </ol>
  </nav>
<div class="container">
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Predictive Maintenance Report</h6>
                    <p class="text-muted mb-3">View predictive maintenance reports and actions for upcoming maintenance activities.</p>
                    
                        <div class="row mb-4">
                            <div class="col-md-3">
                                <label for="start_date" class="form-label">Start Date</label>
                                <input type="date" class="form-control" id="start_date" name="start_date">
                            </div>
                            <div class="col-md-3">
                                <label for="end_date" class="form-label">End Date</label>
                                <input type="date" class="form-control" id="end_date" name="end_date">
                            </div>
                            <div class="col-md-3">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select" id="status" name="status">
                                    <option value="">All</option>
                                    <option value="Upcoming">Upcoming</option>
                                    <option value="Due Soon">Due Soon</option>
                                    <option value="Late">Late</option>
                                </select>
                            </div>
                            <div class="col-md-3 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary w-100">Filter</button>
                            </div>
                        </div>
<div class="table-responsive">
    <table id="dataTableExample" class="table table-bordered">
        <thead class="table-light">
            <tr>
                <th>#</th>
                <th>Crane ID</th>
                <th>Platform</th>
                <th>Next Maintenance Date</th>
                <th>Status</th>
                <th>Technician</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>App001</td>
                <td>TIONG A (WEST)</td>
                <td>2024-12-20</td>
                <td><span class="badge bg-warning">Due Soon</span></td>
                <td>Ahmad Bin Ali</td>
                <td>
                    <a href="#" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#viewDetailModal">View Details</a>
                    <a href="{{ route('maintenance.scheduled') }}" class="btn btn-sm btn-success">Schedule</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>Kesuma002</td>
                <td>TIONG A (EAST)</td>
                <td>2024-12-25</td>
                <td><span class="badge bg-danger">Late</span></td>
                <td>Abu Bakar</td>
                <td>
                    <a href="#" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#viewDetailModal">View Details</a>
                    <a href="{{ route('maintenance.scheduled') }}" class="btn btn-sm btn-success">Schedule</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>Petronas003</td>
                <td>TIONG B</td>
                <td>2024-12-30</td>
                <td><span class="badge bg-primary">Upcoming</span></td>
                <td>Hasimah Binti Ali</td>
                <td>
                    <a href="#" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#viewDetailModal">View Details</a>
                    <a href="{{ route('maintenance.scheduled') }}" class="btn btn-sm btn-success">Schedule</a>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>App004</td>
                <td>PULAI A</td>
                <td>2024-12-15</td>
                <td><span class="badge bg-danger">Late</span></td>
                <td>Fatimah Binti Zain</td>
                <td>
                    <a href="#" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#viewDetailModal">View Details</a>
                    <a href="{{ route('maintenance.scheduled') }}" class="btn btn-sm btn-success">Schedule</a>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>Kesuma005</td>
                <td>PULAI B</td>
                <td>2024-12-10</td>
                <td><span class="badge bg-warning">Due Soon</span></td>
                <td>Razak Bin Ismail</td>
                <td>
                    <a href="#" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#viewDetailModal">View Details</a>
                    <a href="{{ route('maintenance.scheduled') }}" class="btn btn-sm btn-success">Schedule</a>
                </td>
            </tr>
            <tr>
                <td>6</td>
                <td>Petronas006</td>
                <td>BEKOK A (WEST)</td>
                <td>2024-12-18</td>
                <td><span class="badge bg-primary">Upcoming</span></td>
                <td>Ali Bin Sulaiman</td>
                <td>
                    <a href="#" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#viewDetailModal">View Details</a>
                    <a href="{{ route('maintenance.scheduled') }}" class="btn btn-sm btn-success">Schedule</a>
                </td>
            </tr>
            <tr>
                <td>7</td>
                <td>App007</td>
                <td>BEKOK A (EAST)</td>
                <td>2024-12-12</td>
                <td><span class="badge bg-warning">Due Soon</span></td>
                <td>Rina Binti Faris</td>
                <td>
                    <a href="#" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#viewDetailModal">View Details</a>
                    <a href="{{ route('maintenance.scheduled') }}" class="btn btn-sm btn-success">Schedule</a>
                </td>
            </tr>
            <tr>
                <td>8</td>
                <td>Kesuma008</td>
                <td>BEKOK B</td>
                <td>2024-12-05</td>
                <td><span class="badge bg-danger">Late</span></td>
                <td>Halimah Binti Hassan</td>
                <td>
                    <a href="#" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#viewDetailModal">View Details</a>
                    <a href="{{ route('maintenance.scheduled') }}" class="btn btn-sm btn-success">Schedule</a>
                </td>
            </tr>
            <tr>
                <td>9</td>
                <td>Petronas009</td>
                <td>BEKOK C</td>
                <td>2024-12-25</td>
                <td><span class="badge bg-primary">Upcoming</span></td>
                <td>Jamal Bin Idris</td>
                <td>
                    <a href="#" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#viewDetailModal">View Details</a>
                    <a href="{{ route('maintenance.scheduled') }}" class="btn btn-sm btn-success">Schedule</a>
                </td>
            </tr>
            <tr>
                <td>10</td>
                <td>App010</td>
                <td>TINGGI A</td>
                <td>2024-12-30</td>
                <td><span class="badge bg-primary">Upcoming</span></td>
                <td>Shamsul Bin Rahman</td>
                <td>
                    <a href="#" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#viewDetailModal">View Details</a>
                    <a href="{{ route('maintenance.scheduled') }}" class="btn btn-sm btn-success">Schedule</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>


<!-- Modal for Viewing Details -->
<div class="modal fade" id="viewDetailModal" tabindex="-1" aria-labelledby="viewDetailModalLabel" 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="viewDetailModalLabel">
                  <i class="fas fa-tools"></i> Crane Maintenance Details
              </h5>
              <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              <div class="row">
                  <div class="col-md-6">
                      <p><strong>Crane ID:</strong> <span class="text-primary">CRN-001</span></p>
                      <p><strong>Crane Name:</strong> <span class="text-dark">Crane Alpha</span></p>
                      <p><strong>Next Maintenance Date:</strong> <span class="text-danger">2024-12-20</span></p>
                  </div>
                  <div class="col-md-6">
                      <p><strong>Status:</strong> <span class="badge bg-warning text-dark">Due Soon</span></p>
                      <p><strong>Technician:</strong> <span class="text-success">Ahmad Bin Ali</span></p>
                      <p><strong>Remarks:</strong> Routine inspection scheduled.</p>
                  </div>
              </div>
          </div>
          <div class="modal-footer d-flex justify-content-end">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                  <i class="fas fa-times"></i> Close
              </button>
          </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
        const table = $('#dataTableExample').DataTable();

        // Filter button functionality
        $('button[type="submit"]').on('click', function (e) {
            e.preventDefault();

            // Get filter criteria
            const startDate = $('#start_date').val();
            const endDate = $('#end_date').val();
            const status = $('#status').val();

            // Filter logic
            table.rows().every(function () {
                const row = this.data();
                const nextMaintenanceDate = row[3]; // Assuming date is in the 4th column
                const rowStatus = $(row[4]).text().trim(); // Get text from the Status column

                // Convert dates to a comparable format
                const rowDate = new Date(nextMaintenanceDate);
                const filterStartDate = startDate ? new Date(startDate) : null;
                const filterEndDate = endDate ? new Date(endDate) : null;

                let showRow = true;

                // Check date range filter
                if (filterStartDate && rowDate < filterStartDate) showRow = false;
                if (filterEndDate && rowDate > filterEndDate) showRow = false;

                // Check status filter
                if (status && rowStatus !== status) showRow = false;

                // Toggle row visibility
                if (showRow) {
                    $(this.node()).show();
                } else {
                    $(this.node()).hide();
                }
            });
        });
    });
  </script>
@endpush