@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">Maintenance 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">Crane Maintenance Historical Report</h6>
                    <p class="text-muted mb-3">Use the filters to view specific reports, including date ranges and maintenance status.</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="Completed">Completed</option>
                                    <option value="Pending">Pending</option>
                                    <option value="In Progress">In Progress</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>

                    <!-- Data Table Section -->
<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>Last Maintenance Date</th>
                <th>Status</th>
                <th>Technician</th>
                <th>Remarks</th>
                <th>Details</th>
            </tr>
        </thead>
        <tbody>
            <!-- Updated Data with Database Values -->
            <tr>
                <td>1</td>
                <td>App001</td>
                <td>TIONG A (WEST)</td>
                <td>2024-12-01</td>
                <td><span class="badge bg-success">Completed</span></td>
                <td>Ahmad Bin Ali</td>
                <td>Routine inspection completed.</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm" role="button" aria-pressed="true" data-bs-toggle="modal" data-bs-target="#viewDetailModal" title="View">
                        <i data-feather="clipboard"></i> View
                    </a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>Kesuma002</td>
                <td>TIONG A (EAST)</td>
                <td>2024-12-10</td>
                <td><span class="badge bg-warning text-dark">Pending</span></td>
                <td>Abu Bakar</td>
                <td>Parts need replacement.</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm" role="button" aria-pressed="true" data-bs-toggle="modal" data-bs-target="#viewDetailModal" title="View">
                        <i data-feather="clipboard"></i> View
                    </a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>Petronas003</td>
                <td>TIONG B</td>
                <td>2024-11-25</td>
                <td><span class="badge bg-primary">In Progress</span></td>
                <td>Hasimah Binti Ali</td>
                <td>Ongoing detailed inspection.</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm" role="button" aria-pressed="true" data-bs-toggle="modal" data-bs-target="#viewDetailModal" title="View">
                        <i data-feather="clipboard"></i> View
                    </a>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>App004</td>
                <td>PULAI A</td>
                <td>2024-11-15</td>
                <td><span class="badge bg-danger">Failed</span></td>
                <td>Fatimah Binti Zain</td>
                <td>Failure in hydraulic system.</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm" role="button" aria-pressed="true" data-bs-toggle="modal" data-bs-target="#viewDetailModal" title="View">
                        <i data-feather="clipboard"></i> View
                    </a>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>Kesuma005</td>
                <td>PULAI B</td>
                <td>2024-10-20</td>
                <td><span class="badge bg-success">Completed</span></td>
                <td>Razak Bin Ismail</td>
                <td>Routine maintenance, no issues found.</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm" role="button" aria-pressed="true" data-bs-toggle="modal" data-bs-target="#viewDetailModal" title="View">
                        <i data-feather="clipboard"></i> View
                    </a>
                </td>
            </tr>
            <tr>
                <td>6</td>
                <td>Petronas006</td>
                <td>BEKOK A (WEST)</td>
                <td>2024-12-15</td>
                <td><span class="badge bg-success">Completed</span></td>
                <td>Ali Bin Sulaiman</td>
                <td>No issues detected during inspection.</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm" role="button" aria-pressed="true" data-bs-toggle="modal" data-bs-target="#viewDetailModal" title="View">
                        <i data-feather="clipboard"></i> View
                    </a>
                </td>
            </tr>
            <tr>
                <td>7</td>
                <td>App007</td>
                <td>BEKOK A (EAST)</td>
                <td>2024-11-30</td>
                <td><span class="badge bg-warning text-dark">Pending</span></td>
                <td>Rina Binti Faris</td>
                <td>Parts on order, inspection pending.</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm" role="button" aria-pressed="true" data-bs-toggle="modal" data-bs-target="#viewDetailModal" title="View">
                        <i data-feather="clipboard"></i> View
                    </a>
                </td>
            </tr>
            <tr>
                <td>8</td>
                <td>Kesuma008</td>
                <td>BEKOK B</td>
                <td>2024-12-01</td>
                <td><span class="badge bg-danger">Failed</span></td>
                <td>Halimah Binti Hassan</td>
                <td>Critical failure in engine system.</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm" role="button" aria-pressed="true" data-bs-toggle="modal" data-bs-target="#viewDetailModal" title="View">
                        <i data-feather="clipboard"></i> View
                    </a>
                </td>
            </tr>
            <tr>
                <td>9</td>
                <td>Petronas009</td>
                <td>BEKOK C</td>
                <td>2024-11-10</td>
                <td><span class="badge bg-primary">In Progress</span></td>
                <td>Jamal Bin Idris</td>
                <td>Inspection ongoing for hydraulic testing.</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm" role="button" aria-pressed="true" data-bs-toggle="modal" data-bs-target="#viewDetailModal" title="View">
                        <i data-feather="clipboard"></i> View
                    </a>
                </td>
            </tr>
            <tr>
                <td>10</td>
                <td>App010</td>
                <td>TINGGI A</td>
                <td>2024-12-05</td>
                <td><span class="badge bg-success">Completed</span></td>
                <td>Shamsul Bin Rahman</td>
                <td>Maintenance completed successfully.</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm" role="button" aria-pressed="true" data-bs-toggle="modal" data-bs-target="#viewDetailModal" title="View">
                        <i data-feather="clipboard"></i> View
                    </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 fw-bold" id="viewDetailModalLabel">Crane Maintenance Report</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="container">
            <!-- General Information -->
            <div class="row mb-3">
              <div class="col-md-6">
                <p><strong>Crane ID:</strong> CRN-001</p>
                <p><strong>Crane Name:</strong> Crane Alpha</p>
                <p><strong>Last Maintenance Date:</strong> 2024-12-01</p>
              </div>
              <div class="col-md-6 text-md-end">
                <p><strong>Status:</strong> <span class="badge bg-success">Completed</span></p>
                <p><strong>Technician:</strong> Ahmad Bin Ali</p>
              </div>
            </div>

            <!-- Maintenance Findings -->
            <div class="row">
              <div class="col-md-12">
                <div class="card border-0 shadow-sm">
                  <div class="card-header bg-light fw-bold">Inspection Summary</div>
                  <div class="card-body">
                    <p><strong>Remarks:</strong> Routine inspection completed. No issues found.</p>
                    <p><strong>Detailed Inspection Results:</strong></p>
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item">✅ Hydraulic systems inspected and functioning normally.</li>
                      <li class="list-group-item">✅ Electrical components checked, no faults detected.</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">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 () {
    $("#dataTableExample").DataTable(); // Initialize the data table
    
    // Filter button click event
    $('.btn-primary').click(function () {
      const startDate = $('#start_date').val();
      const endDate = $('#end_date').val();
      const status = $('#status').val();

      // Format the date for comparison
      const formatDate = (date) => new Date(date).getTime();

      // Loop through each row and show/hide based on filters
      $('#dataTableExample tbody tr').each(function () {
        const rowDate = $(this).find('td:nth-child(4)').text().trim();
        const rowStatus = $(this).find('td:nth-child(5) span').text().trim();

        const showByDate = (!startDate || formatDate(rowDate) >= formatDate(startDate)) &&
          (!endDate || formatDate(rowDate) <= formatDate(endDate));

        const showByStatus = !status || rowStatus.includes(status);

        // Show or hide row based on filters
        $(this).toggle(showByDate && showByStatus);
      });
    });
  });
</script>
@endpush