@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">



@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Crane Management</a></li>
    <li class="breadcrumb-item active" aria-current="page">Crane Documentation</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Crane Documentation Records</h6>
        <p class="text-muted mb-3">This section contains all the documentation related to cranes, including their specifications, certifications, and maintenance records. Use the table below to browse or search for specific details.</p>
        <div class="table-responsive">
          <table id="dataTableExample" class="table table-bordered table-hover">
            <thead>
              <tr>
                <th>#</th>
                <th>Crane ID</th>
                <th>Document Type</th>
                <th>Date Uploaded</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>3</td>
                <td>CRN003</td>
                <td>Inspection Checklist</td>
                <td>2024-10-20</td>
                <td>
                  <button class="btn btn-primary btn-sm">View</button>
                  <button class="btn btn-secondary btn-sm">Download</button>
                </td>
              </tr>
              <tr>
                <td>4</td>
                <td>CRN004</td>
                <td>Operational Manual</td>
                <td>2024-09-05</td>
                <td>
                  <button class="btn btn-primary btn-sm">View</button>
                  <button class="btn btn-secondary btn-sm">Download</button>
                </td>
              </tr>
              <tr>
                <td>5</td>
                <td>CRN005</td>
                <td>Safety Certificate</td>
                <td>2024-08-12</td>
                <td>
                  <button class="btn btn-primary btn-sm">View</button>
                  <button class="btn btn-secondary btn-sm">Download</button>
                </td>
              </tr>
              <tr>
                <td>6</td>
                <td>CRN006</td>
                <td>Maintenance Report</td>
                <td>2024-07-30</td>
                <td>
                  <button class="btn btn-primary btn-sm">View</button>
                  <button class="btn btn-secondary btn-sm">Download</button>
                </td>
              </tr>
              <tr>
                <td>7</td>
                <td>CRN007</td>
                <td>Inspection Checklist</td>
                <td>2024-06-18</td>
                <td>
                  <button class="btn btn-primary btn-sm">View</button>
                  <button class="btn btn-secondary btn-sm">Download</button>
                </td>
              </tr>
              <tr>
                <td>8</td>
                <td>CRN008</td>
                <td>Operational Manual</td>
                <td>2024-05-22</td>
                <td>
                  <button class="btn btn-primary btn-sm">View</button>
                  <button class="btn btn-secondary btn-sm">Download</button>
                </td>
              </tr>
            </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 src="{{ asset('assets/js/data-table.js') }}"></script>
@endpush