@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
  <style>
    .field-image {
      width: 100%;
      height: 250px;
      object-fit: cover;
      border-radius: 0.375rem 0.375rem 0 0;
    }
    
    .field-card {
      height: 100%;
      transition: transform 0.2s;
    }
    
    .field-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
  </style>
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Crane Maintenance Status</a></li>
    <li class="breadcrumb-item active" aria-current="page">List all Field Cranes</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">List all Field Cranes</h6><br>
          <div class="row">
          @foreach ($cranesFields as $cranesField)
            <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
                <div class="card field-card">
                    <a href="{{ route('new.maintenance.schedule', ['field_id' => $cranesField->id]) }}">
                        <img class="card-img-top field-image" src="{{ asset('storage/CranesField/'.$cranesField->field_image) }}" alt="field_image">
                    </a>
                    <div class="card-body">
                        <p class="card-text">{{ $cranesField->field_name }}</p>
                    </div>
                </div>
            </div>
            @endforeach

          </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>
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
<script type="text/javascript" src="{{ asset('js/createCraneManagementJs.js') }}"></script>
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  
@endpush