@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>
    .action-buttons {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .btn-action {
      min-width: 90px;
      padding: 0.375rem 0.75rem;
      font-size: 0.875rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .btn-action i {
      margin-right: 5px;
    }

    #dataTableExample {
    font-size: 0.8rem; /* Smaller font size for table content */
    }
    
    #dataTableExample thead th {
      font-size: 0.75rem; /* Same font size as body for consistency */
      font-weight: 600;
    }
    
    /* Adjust badge font size to match */
    #dataTableExample .badge {
      font-size: 0.8rem;
    }
    
    /* Keep your existing action button styles */
    .action-buttons {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    
    .btn-action {
      min-width: 90px;
      padding: 0.375rem 0.75rem;
      font-size: 0.875rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    
    .btn-action i {
      margin-right: 5px;
    }
  </style>
@endpush
@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Crane Maintenance</a></li>
    <li class="breadcrumb-item active" aria-current="page">Maintenance Approvals</li>
  </ol>
</nav>
<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Pending Maintenance Status Approvals</h4>
        <p class="text-muted mb-3">This page is only for approving/rejecting "Out of Service" crane status requests. Please verify carefully before taking action.</p>
        <div class="table-responsive">
  <table class="table table-hover table-bordered table-sm compact" id="dataTableExample">
   <thead class="table-light">
      <tr>
        <th>Serial No</th>
        <th>Company</th>
        <th>Platform</th>
        <th>Model</th>
        <th>Tag No</th>
        <th>Current Status</th>
        <th>Requested Status</th>
        <th>Request Date</th>
        <th>Actions</th>
      </tr>
    </thead>
            <tbody>
              @foreach($pendingRequests as $request)
              <tr>
                <td>{{ $request->inventory->serial_no ?? 'N/A' }}</td>
                <td>{{ $request->inventory->company_name ?? 'N/A' }}</td>
                <td>{{ $request->inventory->model ?? 'N/A' }}</td>
                <td>{{ $request->inventory->tag_no ?? 'N/A' }}</td>
                <td>{{ $request->inventory->platform ?? 'N/A' }}</td>
                <td>
                  <span class="badge badge-{{ $request->currentStatus->maintenance_badge ?? 'secondary' }}" 
                        style="background-color: {{ $request->currentStatus->maintenance_colour ?? '#6c757d' }}">
                    {{ $request->currentStatus->maintenance_name ?? 'N/A' }}
                  </span>
                </td>
                <td>
                  <span class="badge badge-{{ $request->requestedStatus->maintenance_badge ?? 'warning' }}" 
                        style="background-color: {{ $request->requestedStatus->maintenance_colour ?? '#ffc107' }}">
                    {{ $request->requestedStatus->maintenance_name ?? 'N/A' }}
                  </span>
                </td>
                <td>{{ $request->created_at->format('Y-m-d H:i') }}</td>
                <td>
                  <div class="action-buttons">
                    <form action="{{ route('maintenance.approve', $request->id) }}" method="POST" class="d-inline approve-form">
                      @csrf
                      <button type="submit" class="btn btn-success btn-icon" title="Approve">
                        <i class="fas fa-check"></i>
                      </button>
                    </form>
                    <form action="{{ route('maintenance.reject', $request->id) }}" method="POST" class="d-inline reject-form">
                      @csrf
                      <button type="submit" class="btn btn-danger btn-icon" title="Reject">
                        <i class="fas fa-times"></i>
                      </button>
                    </form>
                    <a href="{{ route('crane-maintenance.print', [
                        'craneId' => $request->cranes_inventory_id,
                        'reportDate' => $request->report_date
                    ]) }}" class="btn btn-info btn-icon" title="Download PDF" target="_blank">
                      <i class="fas fa-file-pdf"></i>
                    </a>
                  </div>
                </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/font-awesome/js/all.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
  // Approve confirmation
  document.querySelectorAll('.approve-form').forEach(form => {
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      Swal.fire({
        title: 'Confirm Approval',
        text: "You are about to approve this status change. Are you sure?",
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes, approve it!',
        cancelButtonText: 'Cancel'
      }).then((result) => {
        if (result.isConfirmed) {
          form.submit();
        }
      });
    });
  });

  // Reject confirmation
  document.querySelectorAll('.reject-form').forEach(form => {
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      Swal.fire({
        title: 'Confirm Rejection',
        text: "You are about to reject this status change. Are you sure?",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes, reject it!',
        cancelButtonText: 'Cancel'
      }).then((result) => {
        if (result.isConfirmed) {
          form.submit();
        }
      });
    });
  });

  // Show success message if exists
  @if(session('success'))
    Swal.fire({
      icon: 'success',
      title: 'Success!',
      text: '{{ session('success') }}',
      timer: 3000,
      showConfirmButton: false,
      background: '#f8f9fa',
      iconColor: '#28a745'
    });
  @endif

  // Show error message if exists
  @if(session('error'))
    Swal.fire({
      icon: 'error',
      title: 'Error!',
      text: '{{ session('error') }}',
      confirmButtonColor: '#dc3545',
      background: '#f8f9fa'
    });
  @endif
</script>
@endpush