@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"/>
@endpush
<style>
  .flash {
    animation: flash-animation 1s ease-in-out infinite;
  }

  @keyframes flash-animation {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }
  
  /* Smaller text for entire datatable */
  #dataTableExample {
    font-size: 0.75rem; /* Even smaller font size (12px equivalent) */
  }
  
  /* Grey background for header with consistent small text */
  #dataTableExample thead th {
    background-color: #f8f9fa !important;
    font-size: 0.75rem; /* Match the body font size */
    font-weight: 600; /* Slightly bolder for headers */
  }
  
  /* Reduce padding for more compact look */
  #dataTableExample th, 
  #dataTableExample td {
    padding: 0.3rem 0.5rem; /* Reduced padding */
  }
  
  /* Make action buttons smaller */
  #dataTableExample .btn {
    padding: 0.25rem 0.4rem;
    font-size: 0.6875rem; /* Smaller buttons */
  }
  
  /* Make icons in buttons smaller */
  #dataTableExample .btn i {
    width: 12px;
    height: 12px;
  }
</style>

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('crane.inventories.index') }}">Crane Inventory</a></li>
    <li class="breadcrumb-item active" aria-current="page">List all Cranes</li>
  </ol>
</nav>
@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@elseif (session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif
<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
                        @if(in_array($userRole, [7, 8]))
         <div class="col-6 d-flex justify-content-end gap-2" style="width: 100%;">
            <a href="{{ route('crane.inventories.create') }}" id="add_cranes" class="btn btn-primary btn-sm" type="button"><i data-feather="plus"></i> Add Cranes</a>
            <a href="{{ route('crane.inventories.export') }}" id="export_excel" class="btn btn-success btn-sm" type="button"><i data-feather="download"></i></a>
        </div>
        @endif
        <h6 class="card-title">List all Cranes</h6>
        <div class="table-responsive">
          <table id="dataTableExample" class="table table-sm">
            <thead>
              <tr>
                <th>No</th>
                <th>Serial No</th>
                <th>Company Name</th>
                <th>Field</th>
                <th>Platform</th>
                <th>Manufacturer</th>
                <th>Model</th>
                <th>Tag No</th>
                <th>SWL Main/Fly</th>
                <th>Status Crane</th>
                <th>Crane Type</th>
                <th>EIAC Validity</th>
                <th>Presence</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
                            @foreach ($craneInventories as $craneInventory)
              <tr>
                <td>{{ $no++ }}</td>
                <td>{{ $craneInventory->serial_no }}</td>
                <td>{{ $craneInventory->company_name }}</td>
                <td>{{ $craneInventory->craneField->field_name ?? '' }}</td>
                <td>{{ $craneInventory->platform }}</td>
                <td>{{ $craneInventory->manufacturer }}</td>
                <td>{{ $craneInventory->model }}</td>
                <td>{{ $craneInventory->tag_no }}</td>
                <td>{{ $craneInventory->swl }}</td>
                <td>{{ $craneInventory->status_crane ?? 'None' }}</td>
                <td>{{ $craneInventory->crane_type ?? 'None' }}</td>
                <td>{{ $craneInventory->eiac_validity ?? 'None' }}</td>
                <td>{{ $craneInventory->presence ?? 'None' }}</td>
                <td style="white-space: nowrap;">
                  <a href="{{ route('crane.inventories.show', $craneInventory) }}" class="btn btn-primary btn-xs" role="button" aria-pressed="true" title="View">
                    <i data-feather="clipboard" width="14" height="14"></i>
                  </a>
                   @if(in_array($userRole, [7, 8]))
                  <a href="{{ route('crane.inventories.edit', $craneInventory) }}" class="btn btn-primary btn-xs" role="button" aria-pressed="true" title="Edit">
                    <i data-feather="edit" width="14" height="14"></i>
                  </a>
                  <form action="{{ route('crane.inventories.destroy', $craneInventory->id) }}" method="POST" style="display:inline;" class="delete-form">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-xs" title="Delete">
                      <i data-feather="trash-2" width="14" height="14"></i>
                    </button>
                  </form>
                  @endif
                </td>
              </tr>
              @endforeach
            </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>
  <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>
<script>
  window.addEventListener('DOMContentLoaded', function() {
      // Check if there's a success or error message
      var message = document.querySelector('.alert');
      if (message) {
          // Add the flash class to make it blink
          message.classList.add('flash');

          // Remove the message after 5 seconds
          setTimeout(function() {
              message.style.display = 'none';
          }, 5000); // 5000ms = 5 seconds
      }
  });
</script>

<!-- Add SweetAlert CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
  document.querySelectorAll('.delete-form').forEach((form) => {
      form.addEventListener('submit', function (e) {
          e.preventDefault();
          Swal.fire({
              title: 'Are you sure?',
              text: 'This action cannot be undone.',
              icon: 'warning',
              showCancelButton: true,
              confirmButtonText: 'Yes, delete it!',
              cancelButtonText: 'No, cancel',
          }).then((result) => {
              if (result.isConfirmed) {
                  form.submit(); // Proceed with form submission
              }
          });
      });
  });
</script>
@endpush