@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">Lifting Equipment Availability</li>
    </ol>
</nav>

<div class="container my-1">
    <h1 class="display-6">Lifting Equipment Availability (LEA )</h1>
    <p class="text-muted mb-3">Analyze Lifting Equipment Availability  for insights and performance metrics.</p>
    <div class="row mb-4">
        <div class="col-md-4">
            <select class="form-control" id="failureType">
                <option value="all">Crane Name</option>
                <option value="001">App001</option>
                <option value="002">Kesuma002</option>
                <option value="003">Petronas003</option>
                <option value="004">App004</option>
                <option value="005">Kesuma005</option>
                <option value="006">Petronas006</option>
                <option value="007">App007</option>
                <option value="008">Kesuma008</option>
                <option value="009">Petronas009</option>
                <option value="010">App010</option>
            </select>
            
        </div>
        <div class="col-md-4">
            <select class="form-control" id="urgencyLevel">
                <option value="" disabled selected>Select Severity Level</option>
                <option value="high">P1</option>
                <option value="medium">P2</option>
                <option value="low">P3</option>
                <option value="urgent">Out of Service</option>
            </select> 
        </div>
        <div class="col-md-4">
            <input type="date" class="form-control" id="dateRange">
        </div>
    </div>
     <!-- use hardcode to display data-->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title mb-3">Lifting Equipment Availability Status</h5>
                    <canvas id="chartjsPieLEA"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title mb-3">Cranes Status Overview</h5>
                    <canvas id="chartjsAreaLEA"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="craneModal" tabindex="-1" aria-labelledby="craneModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="craneModalLabel">Crane List</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="table-responsive mt-3">
                <table class="table table-bordered">
                    <thead class="table-light">
                    <tr>
                        <th>Crane Name</th>
                        <th>Platform</th>
                        <th>Field</th>
                        <th>Model</th>
                        <th>Tag No</th>
                        <th>Manufacturer</th>
                    </tr>
                    </thead>
                    <tbody id="craneTableBody"></tbody>
                </table>
            </div>
        </div>
      </div>
    </div>
  </div>
  

<div class="container my-1">
    <div class="col-lg-7 col-xl-12 grid-margin stretch-card">
        <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="dropdown mb-2">
                        <button class="btn btn-link p-0" type="button" id="dropdownMenuButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
                             <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>-->
                            <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
                            <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table id="dataTableExample" class="table table-striped 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/pages/reporting/lea-reporting.blade.php:137
Stack trace:
#0 {main}
  thrown in <b>/home/pbuild/public_html/oksb/resources/views/pages/reporting/lea-reporting.blade.php</b> on line <b>137</b><br />