@extends('layout.master')
<style>
    /* Basic styling for dashboard elements */
    .fixed-width {
        width: 100px;
        word-wrap: break-word;
        white-space: normal;
    }

    /* Badge styling */
    .badge-pink-badge {
        background-color: #d63384 !important;
        color: white;
    }

    .crane-badge {
        padding: 10px;
        border-radius: 8px;
        text-align: center;
        color: white;
        font-weight: bold;
        margin: 5px;
    }

    /* Animation for blinking elements */
    @keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 0.4; }
        100% { opacity: 1; }
    }

    .blinking-card {
        animation: blink 1s infinite;
    }

    /* Card hover effects */
    .card-hover {
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-color: rgb(244, 229, 229);
    }

    /* Crane eagle view specific styles */
    .crane-eagle-view {
        min-height: 100vh;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .crane-eagle-view .header-section,
    .crane-eagle-view .field-section {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        margin-bottom: 20px;
        padding: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }

    .crane-eagle-view .field-title {
        color: white;
        font-weight: 700;
        font-size: 1.5rem;
        margin-bottom: 15px;
        padding: 10px 15px;
        background: rgba(214, 20, 20, 0.95);
        border-radius: 10px;
        text-align: center;
    }

    .crane-eagle-view .crane-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .crane-eagle-view .crane-card {
        background: rgba(255, 255, 255, 0.9);
        border-radius: 12px;
        padding: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        border-left: 4px solid #28a745;
    }

    .crane-eagle-view .crane-card.status-low {
        border-left-color: #ffc107;
        background: rgba(255, 193, 7, 0.1);
    }

    .crane-eagle-view .crane-card.status-critical {
        border-left-color: #dc3545;
        background: rgba(220, 53, 69, 0.1);
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
        50% { box-shadow: 0 4px 25px rgba(220, 53, 69, 0.3); }
        100% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
    }

    /* Status badges */
    .status-badge {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .status-normal { background: #28a745; color: white; }
    .status-low { background: #ffc107; color: #212529; }
    .status-critical { background: #dc3545; color: white; }
    .status-unknown { background: #6c757d; color: white; }

    /* Stats section */
    .crane-eagle-view .stats-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    /* Filter section */
    .crane-eagle-view .filter-section {
        margin-bottom: 20px;
    }

    /* Legend styles */
    .legend { list-style: none; padding: 0; }
    .legend li { display: inline-block; margin-right: 10px; }
    .legend span { 
        display: inline-block;
        width: 12px; 
        height: 12px; 
        margin-right: 4px;
        border-radius: 3px;
        vertical-align: middle;
    }
    .legend .secondary { background-color: #6c757d; }
    .legend .danger { background-color: #dc3545; }
    .legend .warning { background-color: #ffc107; }
    .legend .info { background-color: #0dcaf0; }
    .legend .success { background-color: #198754; }

    /* Loading spinner */
    .loading-spinner {
        text-align: center;
        padding: 50px;
    }

    .spinner {
        border: 4px solid #f3f3f3;
        border-top: 4px solid rgb(234, 102, 102);
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
        margin: 0 auto 20px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* CRANE ITEM STYLES - UPDATED FOR TIGHT STATUS CIRCLE */
    .crane-item {
        padding: 8px 10px;
        margin-bottom: 4px;
        border-radius: 4px;
        background-color: #f8f9fa;
        transition: all 0.2s;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: center;
    }

    .tag-status-container {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .crane-status-circle {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
        margin-left: 2px;
    }

    /* Status color definitions */
     .status-critical { 
    background-color: #dc3545;
    animation: blink 1s linear infinite;
    }
    .status-high { 
        background-color: #ffc107;  /* Previously rgb(255, 197, 5) */
    }
    .status-medium { 
        background-color: #0dcaf0;  /* Previously rgb(21, 181, 255) */
    }
    .status-low { 
        background-color: #198754;  /* Previously hsl(114, 88.00%, 48.80%) */
    }
    .status-out-of-service { 
        background-color: #ff0000ff;
    }
    .status-pending-approval { 
        background-color: #17a2b8;
    }
    .status-unknown { 
        background-color: #000000;  /* Previously rgb(0, 0, 0) */
    }
    /* Field card styling */
    .field-card {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .field-card .card-header {
        border-radius: 8px 8px 0 0 !important;
        padding: 12px 15px;
        background-color: #dc3545 !important;
        color: white !important;
    }

    /* Table styling */
    .table-responsive {
        overflow-x: auto;
    }

    /* Header alignment */
    .crane-header {
        font-weight: bold;
        padding: 8px 10px;
        background-color: #e9ecef;
        border-radius: 4px;
        margin-bottom: 5px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .crane-eagle-view .crane-grid {
            grid-template-columns: 1fr;
        }
        
        .crane-eagle-view .stats-section {
            grid-template-columns: 1fr;
        }
        
        .legend li {
            display: block;
            margin: 5px 0;
        }
    }

    /* Modal styling */
    .modal-lg .modal-body table {
        width: 100%;
    }

    .modal-lg .modal-body th {
        width: 30%;
    }

    .legend-list {
    font-size: 0.7rem;
  }
  .legend-list .list-inline-item {
    margin-right: 0.5rem;
    white-space: nowrap;
  }
  .legend-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 3px;
  }
  .compact-chart-container {
    height: 200px;
  }

    .status-indicators {
    font-size: 0.7rem;
  }
  .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 3px;
  }
  .bg-critical { background-color: #dc3545; }
  .bg-high { background-color: #ffc107; }
  .bg-medium { background-color: #0dcaf0; }
  .bg-low { background-color: #198754; }
  .bg-out-of-service { background-color: #6c757d; }
  .bg-pending { background-color: #17a2b8; }
  .bg-unknown { background-color: #000000ff; }

/* Add these styles to your existing CSS */
  .crane-list {
    max-height: 300px;
    overflow-y: auto;
  }
  
  .crane-item {
    padding: 6px 8px;
    margin-bottom: 3px;
    font-size: 0.8rem;
  }
  
  .crane-status-circle {
    width: 12px;
    height: 12px;
  }
  
  .see-more-btn {
    font-size: 0.75rem;
    padding: 2px 8px;
    margin-top: 5px;
  }
  
  .field-card .card-header {
    padding: 8px 12px;
  }
  
  .field-card .card-header h5 {
    font-size: 1rem;
  }
    /* Ensure charts fill their containers */
    .chart-container canvas {
        width: 100% !important;
        height: 100% !important;
    }
    /* Optional: Adjust the aspect ratio of smaller charts */
    #fieldStatusChart, #fieldPresenceChart {
        max-height: 250px !important;  /* Limits the height of smaller charts */
    }

</style>

<link href="{{ asset('assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">


@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
  <div>
    <h4 class="fw-bold fs-3 mb-3 mb-md-0">Welcome to Dashboard</h4>
  </div>
</div>

<div class="row">
  <div class="col-12 col-xl-12 stretch-card">
    <div class="row flex-grow-1">
    
      <!-- Overall LEA % Card -->
      <div class="col-md-6 grid-margin stretch-card">  <!-- Changed from col-md-4 to col-md-6 -->
        <div class="card card-hover" onclick="window.location.href='/lea'">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-baseline">
              <h6 class="card-title mb-0">Overall LEA (%)</h6>
            </div>
            <div class="row align-items-center">
              <div class="col-6 col-md-6 col-xl-6">
                <!-- Hardcoded LEA value -->
                <h3 class="mb-2">{{ $overallLEA }}%</h3>
              </div>
              <div class="col-6 col-md-6 col-xl-6 d-flex justify-content-end">
                <img src="{{ asset('assets/images/report.png') }}" 
                     alt="workforce Icon"
                     class="img-fluid"
                     style="max-width: 48px; max-height: 48px;">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- PPM Compliance Card -->
      <div class="col-md-6 grid-margin stretch-card">  <!-- Changed from col-md-4 to col-md-6 -->
        <div class="card card-hover" onclick="window.location.href='{{ in_array(auth()->user()->role_id, [7, 8]) ? route('ppm_files.admin') : route('ppm_files.index') }}'">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-baseline">
              <h6 class="card-title mb-0">Overall PPM Compliance (%)</h6>
            </div>
            <div class="row align-items-center">
              <div class="col-6 col-md-6 col-xl-6">
                <!-- Hardcoded PPM value -->
                <h3 class="mb-2">{{ $totalPPM }}%</h3> 
              </div>
              <div class="col-6 col-md-6 col-xl-6 d-flex justify-content-end">
                <img src="{{ asset('assets/images/optimizing.png') }}" 
                     alt="maintenance Icon"
                     class="img-fluid"
                     style="max-width: 48px; max-height: 48px;">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Crane Status Eagle View Section -->
<div class="row">
  <div class="col-md-12 grid-margin">
    <div class="card crane-eagle-view">
      <div class="container-fluid p-3">
        <!-- Header Section with right-aligned filter -->
        <div class="d-flex justify-content-between align-items-center mb-3">
          <div>
            <h5 class="mb-0">
              <i class="fas fa-industry me-1"></i>
              General Crane Status 
            </h5>
          </div>
          <div class="filter-section d-flex">
            <!-- Existing filter -->
            <div class="me-2">
                <button class="btn btn-sm filter-btn dropdown-toggle" type="button" id="fieldFilterBtn" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-filter me-1"></i>All Fields
                </button>
                <ul class="dropdown-menu dropdown-menu-end" id="fieldFilterList"></ul>
            </div>
            
            <!-- Crane Status Filter -->
            <div class="me-2">
              <button class="btn btn-sm filter-btn dropdown-toggle" type="button" id="statusFilterBtn" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-filter me-1"></i>Crane Status
              </button>
              <ul class="dropdown-menu dropdown-menu-end common-filter-dropdown" id="statusFilterList" data-filter-type="status">
                <li><a class="dropdown-item" href="#" data-value="all">All Statuses</a></li>
                <li><a class="dropdown-item" href="#" data-value="active">Active</a></li>
                <li><a class="dropdown-item" href="#" data-value="inactive">Inactive</a></li>
              </ul>
            </div>

            <!-- EIAC Validity Filter -->
            <div class="me-2">
              <button class="btn btn-sm filter-btn dropdown-toggle" type="button" id="eiacFilterBtn" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-filter me-1"></i>EIAC Validity
              </button>
              <ul class="dropdown-menu dropdown-menu-end common-filter-dropdown" id="eiacFilterList" data-filter-type="eiac">
                <!-- Options will be added dynamically -->
              </ul>
            </div>

            <!-- Crane Type Filter -->
            <div>
              <button class="btn btn-sm filter-btn dropdown-toggle" type="button" id="craneTypeFilterBtn" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-filter me-1"></i>Crane Type
              </button>
              <ul class="dropdown-menu dropdown-menu-end common-filter-dropdown" id="craneTypeFilterList" data-filter-type="craneType">
                <!-- Options will be added dynamically -->
              </ul>
            </div>
          </div>
        </div>

        <!-- Status Indicators -->
        <div class="status-indicators mb-3">
            <div class="d-flex flex-wrap justify-content-center gap-1">
                <div class="d-flex align-items-center mx-1">
                <span class="status-dot bg-critical me-1"></span>
                <small>OOS</small>
                </div>
                <div class="d-flex align-items-center mx-1">
                <span class="status-dot bg-low me-1"></span>
                <small>Full Operation</small>
                </div>
                <div class="d-flex align-items-center mx-1">
                <span class="status-dot bg-out-of-service me-1"></span>
                <small>Derated</small>
                </div>
                <div class="d-flex align-items-center mx-1">
                <span class="status-dot bg-info me-1"></span>  <!-- Changed to bg-info for cyan/blue -->
                <small>Pending Approval</small>
                </div>
                <div class="d-flex align-items-center mx-1">
                <span class="status-dot bg-unknown me-1"></span>  <!-- Changed to bg-secondary for gray -->
                <small>Unknown</small>
                </div>
            </div>
        </div>

        <!-- Loading Spinner -->
        <div class="loading-spinner" id="loadingSpinner">
          <div class="spinner"></div>
          <p>Loading crane data...</p>
        </div>

        <!-- Cranes by Field - Single Row Layout -->
        <div class="row g-2 flex-nowrap overflow-auto" id="cranesContainer">
          <!-- Field cards will be dynamically inserted here by JavaScript -->
        </div>

        <!-- Dual Chart Container -->
        <div class="row">
          <!-- Compact Status Card -->
          <div class="col-md-6 grid-margin stretch-card">
            <div class="card">
              <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-baseline mb-2">
                  <h6 class="card-title mb-0">Crane Status</h6>
                  <div class="dropdown">
                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle py-0 px-2" type="button" 
                            id="compactStatusDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                      <i class="fas fa-filter"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="compactStatusDropdown">
                      <h6 class="dropdown-header">Filter By Field</h6>
                      <div id="compactFieldFilterOptions">
                        <!-- Field options will be dynamically inserted here by JavaScript -->
                      </div>
                    </div>
                  </div>
                </div>
                <div style="position: relative; height: 200px; width: 100%;">
                  <canvas id="compactCraneStatusChart"></canvas>
                </div>
                <div class="legend mt-2 text-center">
                  <ul class="legend-list list-inline mb-0">
                    <!-- Legend items will be dynamically inserted here by JavaScript -->
                  </ul>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Horizontal Bar Chart Card -->
            <div class="col-md-6 grid-margin stretch-card">
            <div class="card">
                <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-baseline mb-2">
                    <h6 class="card-title mb-0">Crane Status by Field</h6>
                    <div class="dropdown">
                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle py-0 px-2" type="button" 
                            id="barChartDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-filter"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="barChartDropdown">
                        <h6 class="dropdown-header">Filter By Field</h6>
                        <div id="barChartFieldFilterOptions">
                        <!-- Field options will be dynamically inserted here by JavaScript -->
                        </div>
                    </div>
                    </div>
                </div>
                <div style="position: relative; height: 200px; width: 100%;">
                    <canvas id="craneStatusByTypeChart"></canvas>
                </div>
                <div class="legend mt-2 text-center">
                    <ul class="legend-list list-inline mb-0" id="dynamicStatusLegend">
                    <!-- Legend items will be dynamically inserted here by JavaScript based on current data -->
                    </ul>
                </div>
                </div>
            </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- PPM-->
<div class="row mt-2">
  <!-- Pie Chart -->
  <div class="col-md-6 grid-margin stretch-card">
      <div class="card">
          <div class="card-body">
              <div class="d-flex justify-content-between align-items-baseline mb-3">
                  <h6 class="card-title mb-0">PPM Status Distribution ({{ $monthName }})</h6>
                  <div class="dropdown">
                      <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" 
                              id="ppmPieMonthDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                          {{ $monthName }}
                      </button>
                      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="ppmPieMonthDropdown">
                          <h6 class="dropdown-header">View By</h6>
                          <div class="px-3 py-2">
                              <div class="form-check mb-2">
                                  <input class="form-check-input view-by-radio" type="radio" name="view_by_pie" 
                                         id="viewByMonthPie" value="month" {{ $viewBy === 'month' ? 'checked' : '' }}>
                                  <label class="form-check-label" for="viewByMonthPie">
                                      By Month
                                  </label>
                              </div>
                              <div class="form-check mb-2">
                                  <input class="form-check-input view-by-radio" type="radio" name="view_by_pie" 
                                         id="viewByYearPie" value="year" {{ $viewBy === 'year' ? 'checked' : '' }}>
                                  <label class="form-check-label" for="viewByYearPie">
                                      By Year
                                  </label>
                              </div>
                          </div>
                          <div class="dropdown-divider"></div>
                          <div class="px-3 py-2" id="pieMonthYearControls">
                              <select class="form-select form-select-sm mb-2" id="ppmPieYearSelect">
                                  @foreach(range(date('Y')-2, date('Y')) as $year)
                                      <option value="{{ $year }}" {{ $year == $selectedYear ? 'selected' : '' }}>{{ $year }}</option>
                                  @endforeach
                              </select>
                              <select class="form-select form-select-sm" id="ppmPieMonthSelect" {{ $viewBy === 'year' ? 'disabled' : '' }}>
                                  @foreach(range(1, 12) as $month)
                                      <option value="{{ $month }}" {{ $month == $selectedMonth ? 'selected' : '' }}>
                                          {{ date('F', mktime(0, 0, 0, $month, 1)) }}
                                      </option>
                                  @endforeach
                              </select>
                          </div>
                      </div>
                  </div>
              </div>
              <div style="position: relative; height: 300px; width: 100%;">
                  <canvas id="ppmStatusPieChart"></canvas>
              </div>
          </div>
      </div>
  </div>
  
  <!-- Bar Chart -->
  <div class="col-md-6 grid-margin stretch-card">
      <div class="card">
          <div class="card-body">
              <div class="d-flex justify-content-between align-items-baseline mb-3">
                  <h6 class="card-title mb-0">PPM Status by Field ({{ $monthName }})</h6>
                  <div class="dropdown">
                      <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" 
                              id="ppmBarMonthDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                          {{ $monthName }}
                      </button>
                      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="ppmBarMonthDropdown">
                          <h6 class="dropdown-header">View By</h6>
                          <div class="px-3 py-2">
                              <div class="form-check mb-2">
                                  <input class="form-check-input view-by-radio" type="radio" name="view_by_bar" 
                                         id="viewByMonthBar" value="month" {{ $viewBy === 'month' ? 'checked' : '' }}>
                                  <label class="form-check-label" for="viewByMonthBar">
                                      By Month
                                  </label>
                              </div>
                              <div class="form-check mb-2">
                                  <input class="form-check-input view-by-radio" type="radio" name="view_by_bar" 
                                         id="viewByYearBar" value="year" {{ $viewBy === 'year' ? 'checked' : '' }}>
                                  <label class="form-check-label" for="viewByYearBar">
                                      By Year
                                  </label>
                              </div>
                          </div>
                          <div class="dropdown-divider"></div>
                          <div class="px-3 py-2" id="barMonthYearControls">
                              <select class="form-select form-select-sm mb-2" id="ppmBarYearSelect">
                                  @foreach(range(date('Y')-2, date('Y')) as $year)
                                      <option value="{{ $year }}" {{ $year == $selectedYear ? 'selected' : '' }}>{{ $year }}</option>
                                  @endforeach
                              </select>
                              <select class="form-select form-select-sm" id="ppmBarMonthSelect" {{ $viewBy === 'year' ? 'disabled' : '' }}>
                                  @foreach(range(1, 12) as $month)
                                      <option value="{{ $month }}" {{ $month == $selectedMonth ? 'selected' : '' }}>
                                          {{ date('F', mktime(0, 0, 0, $month, 1)) }}
                                      </option>
                                  @endforeach
                              </select>
                          </div>
                      </div>
                  </div>
              </div>
              <div style="position: relative; height: 300px; width: 100%;">
                  <canvas id="ppmFieldBarChart"></canvas>
              </div>
          </div>
      </div>
  </div>
</div>

<!-- div class="row mb-3">
  <div class="col-md-12">
      <div class="card">
          <div class="card-body">
              <div class="d-flex justify-content-between align-items-baseline mb-2">
                  <h6 class="card-title mb-0">Lifting Equipment Availability (LEA)</h6>
                  <div class="d-flex align-items-center">
                      <form method="GET" action="" class="me-3">
                          <select name="month_for_avg" class="form-select form-select-sm" onchange="this.form.submit()">
                              @for($i = 1; $i <= 12; $i++)
                                  <option value="{{ $i }}" {{ $selectedMonthForAvg == $i ? 'selected' : '' }}>
                                      {{ date('F', mktime(0, 0, 0, $i, 1)) }}
                                  </option>
                              @endfor
                          </select>
                          <input type="hidden" name="month" value="{{ $selectedMonth }}">
                          <input type="hidden" name="year" value="{{ $selectedYear }}">
                      </form>
                      <span class="badge bg-info">Showing: {{ $monthNameForAvg }}</span>
                  </div>
                  <ul class="legend">
                      <li><span class="secondary"></span> Out Of Services</li>
                      <li><span class="danger"></span> Critical</li>
                      <li><span class="warning"></span> High</li>
                      <li><span class="info"></span> Medium</li>
                      <li><span class="success"></span> Low</li>
                  </ul>
                  
              </div>
              <div class="table-responsive">
                <table id="lea" class="table table-hover table-bordered align-middle">
                  <thead>
                      <tr>
                          <th>No</th>
                          <th>Id</th>
                          <th>Field</th>
                          <th>Location</th>
                          <th>Area</th>
                          <th>Type</th>
                          <th>Model</th>
                          <th>Tag No</th>
                          <th>Make</th>
                          <th>Serial No</th>
                          <th>Status</th>
                          <th>Monthly Avg (%)</th>
                      </tr>
                  </thead>
                  <tbody>
                                            @foreach ($cranesInventories as $cranesInventory)
                          <br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function getCraneFieldName() in /home/pbuild/public_html/oksb/resources/views/dashboard.blade.php:749
Stack trace:
#0 {main}
  thrown in <b>/home/pbuild/public_html/oksb/resources/views/dashboard.blade.php</b> on line <b>749</b><br />