@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"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.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; }
  }
  
  .badge {
    padding: 0.35em 0.65em;
    font-size: 0.875em;
    font-weight: 600;
  }
  
  .stat-card {
    border-left: 4px solid;
    transition: transform 0.3s ease;
  }
  
  .stat-card:hover {
    transform: translateY(-5px);
  }
  
  .stat-card.total {
    border-left-color: #007bff;
  }
  
  .stat-card.open {
    border-left-color: #dc3545;
  }
  
  .stat-card.closed {
    border-left-color: #28a745;
  }
  
  .btn-action {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    margin-right: 0.25rem;
  }

  /* New table styling */
  #dataTableExample {
    font-size: 0.8rem;
  }
  
  #dataTableExample th,
  #dataTableExample td {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
  }
  
  #dataTableExample th {
    font-weight: 600;
    white-space: nowrap;
  }
  
  #dataTableExample td {
    word-wrap: break-word;
    white-space: normal;
  }
  
  /* Make badges smaller */
  .badge {
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
  }
  
  /* Make buttons smaller */
  .btn-action {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
  }
  
  /* Ensure table stays responsive */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .img-preview {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
    margin: 2px;
  }
</style>

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Maintenance</a></li>
    <li class="breadcrumb-item active" aria-current="page">All Findings</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">
        <h6 class="card-title">Maintenance Findings Overview</h6>
        
        <!-- Statistics Cards -->
        <div class="row mb-4">
          <div class="col-md-4">
            <div class="card stat-card total">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h6 class="text-muted mb-2">Total Findings</h6>
                    <h4 class="mb-0">{{ $findings->total() }}</h4>
                  </div>
                  <div class="bg-primary bg-opacity-10 p-3 rounded">
                    <i class="fas fa-list text-primary"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card stat-card open">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h6 class="text-muted mb-2">Open Findings</h6>
                    <h4 class="mb-0">{{ $findings->where('status', 'open')->count() }}</h4>
                  </div>
                  <div class="bg-danger bg-opacity-10 p-3 rounded">
                    <i class="fas fa-exclamation-circle text-danger"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card stat-card closed">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h6 class="text-muted mb-2">Closed Findings</h6>
                    <h4 class="mb-0">{{ $findings->where('status', 'closed')->count() }}</h4>
                  </div>
                  <div class="bg-success bg-opacity-10 p-3 rounded">
                    <i class="fas fa-check-circle text-success"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="d-flex justify-content-between align-items-center mb-3">
          <!-- Filter dropdown on the left -->
          <div>
            <select class="form-select form-select-sm" id="statusFilter" style="width: 200px;">
              <option value="">All Statuses</option>
              <option value="open">Open</option>
              <option value="closed">Closed</option>
            </select>
          </div>
          
          <!-- Add New Finding button on the right -->
          <div>
            <button class="btn btn-primary" id="addFindingBtn">
              <i class="fas fa-plus me-2"></i> Add New Finding
            </button>
          </div>
        </div>

       <div class="table-responsive">
         <table id="dataTableExample" class="table table-sm compact" style="table-layout: fixed; font-size: 0.825rem;">
            <thead class="bg-light">  
              <tr>
                <th style="width: 3%;">#</th>
                <th style="width: 5%;">Crane</th>
                <th style="width: 8%;">Location</th>
                <th style="width: 7%;">Tag No</th>
                <th style="width: 9%;">System</th>
                <th style="width: 10%;"> Component</th>
                <th style="width: 10%;">Report Date</th>
                <th style="width: 18%;">Remarks</th>
                <th style="width: 18%;">Action</th>
                <th style="width: 12%;">Recommendation</th>
                <th style="width: 7%;">Status</th>
                <th style="width: 12%;">Actions</th>
              </tr>
            </thead>
          <tbody>
            @forelse($findings as $finding)
            <tr>
              <td>{{ $loop->iteration + $findings->firstItem() - 1 }}</td>
              <td>{{ $finding->crane_id }}</td>
              <td>{{ $finding->platform }}</td>
              <td>{{ $finding->tag_no }}</td>
              <td>{{ $finding->system_name }}</td>
              <td>{{ $finding->new_component ?? 'None' }}</td>              
              <!-- FIXED: Show maintenance report date when available, otherwise use finding report date -->
              <td>
                @if($finding->cranes_maintenance_id && $finding->maintenance_report_date)
                  {{ \Carbon\Carbon::parse($finding->maintenance_report_date)->format('d-M-Y') }}
                @else
                  {{ \Carbon\Carbon::parse($finding->report_date)->format('d-M-Y') }}
                @endif
              </td>
              <td style="word-wrap: break-word; white-space: normal;">{{ $finding->remarks ? Str::title($finding->remarks) : '' }}</td>
              <td style="word-wrap: break-word; white-space: normal;">{{ $finding->action ? Str::title($finding->action) : '' }}</td>
              <td style="word-wrap: break-word; white-space: normal;">{{ $finding->recommendation ? Str::title($finding->recommendation) : '' }}</td>
              <td>
                <span class="badge bg-{{ $finding->status == 'open' ? 'primary' : 'danger' }}" data-id="{{ $finding->id }}">
                    {{ ucfirst($finding->status) }}
                </span>
              </td>
            <td style="white-space: nowrap; font-size: 0.75rem;"> 
    <div class="d-flex align-items-center" style="gap: 0.35rem;">
        <a href="#" class="btn btn-primary btn-icon btn-xs edit-finding" 
            title="Edit" 
            data-id="{{ $finding->id }}"
            data-status="{{ $finding->status }}">
            <i data-feather="edit-2" width="12" height="12"></i>
        </a>
        
        {{-- Button 1: Full Maintenance Report (DPR) --}}
        @if($finding->cranes_maintenance_id && $finding->crane_id && $finding->maintenance_report_date)
            @php
                $reportDate = \Carbon\Carbon::parse($finding->maintenance_report_date);
                $urlDate = $reportDate->format('Y-m-d');
            @endphp
            
            <a href="{{ route('crane-maintenance.print', [
                'craneId' => $finding->crane_id,
                'reportDate' => $urlDate
            ]) }}" 
                class="btn btn-info btn-icon btn-xs" 
                title="View Full Maintenance Report (DPR)" 
                target="_blank">
                <i class="fas fa-file-pdf"></i>
            </a>
        
        {{-- Button 2: Findings Report Only --}}
        @elseif($finding->crane_id && $finding->report_date)
            @php
                // Use the finding's own report date since no maintenance report date available
                $reportDate = \Carbon\Carbon::parse($finding->report_date);
                $urlDate = $reportDate->format('Y-m-d');
            @endphp
            
            <a href="{{ route('crane-maintenance.print-findings-only', [
                'craneId' => $finding->crane_id,
                'reportDate' => $urlDate
            ]) }}" 
                class="btn btn-warning btn-icon btn-xs" 
                title="View Findings Report Only (No DPR Available)" 
                target="_blank">
                <i class="fas fa-file-pdf"></i>
            </a>
        
        {{-- No PDF Available --}}
        @else
            <button class="btn btn-secondary btn-icon btn-xs" 
                title="PDF report not available - Missing required data" 
                disabled>
                <i class="fas fa-file-pdf"></i>
            </button>
        @endif
        
        @if(in_array($userRole, [7, 8]))
            <form action="{{ route('findings.delete', $finding->id) }}" method="POST" class="delete-form m-0">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger btn-icon btn-xs" title="Delete">
                    <i data-feather="trash-2" width="12" height="12"></i>
                </button>
            </form>
        @endif
    </div>
</td>
            </tr>
            @empty
            <tr>
              <td colspan="11" class="text-center py-4">
                <i class="fas fa-search fa-3x text-muted mb-3"></i>
                <h5>No Findings Recorded</h5>
                <p class="text-muted">When findings are added, they'll appear here</p>
              </td>
            </tr>
            @endforelse 
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Add Finding Modal -->
<div class="modal fade" id="addFindingModal" tabindex="-1" aria-labelledby="addFindingModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addFindingModalLabel">Add New Finding</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="addFindingForm" method="POST" action="{{ route('crane-findings.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="cranes_maintenance_id" class="form-label">Maintenance</label>
              <select class="form-select" id="cranes_maintenance_id" name="cranes_maintenance_id">
                <option value="">Select Maintenance (Optional)</option>
                @foreach($maintenances as $maintenance)
                  @php
                      // Format the date properly for the input field
                      $formattedDate = $maintenance->report_date ? 
                          \Carbon\Carbon::parse($maintenance->report_date)->format('Y-m-d') : 
                          '';
                      
                      // Debug: Check available properties
                      // Uncomment the line below to see what properties are available
                      // {{-- dd($maintenance) --}}
                      
                      // Try different possible property names for crane ID
                      $craneId = $maintenance->cranes_inventory_id ?? 
                                $maintenance->crane_inventory_id ?? 
                                $maintenance->crane_id ?? 
                                $maintenance->inventory_id ?? 
                                '';
                  @endphp
                  <option value="{{ $maintenance->id }}" 
                          data-report-date="{{ $formattedDate }}"
                          data-crane-id="{{ $craneId }}">
                    Maintenance {{ \Carbon\Carbon::parse($maintenance->report_date)->format('d-M-Y') }} - Crane {{ $maintenance->tag_no ?? 'N/A' }}
                  </option>
                @endforeach
                <option value="">Other (No DPR)</option>              
              </select>
            </div>
            <div class="col-md-6 mb-3">
              <label for="crane_id" class="form-label">Crane *</label>
              <select class="form-select" id="crane_id" name="crane_id" required disabled>
                <option value="">Select Crane</option>
                @foreach($cranes as $crane)
                  <option value="{{ $crane->id }}" 
                          data-platform="{{ $crane->platform }}"
                          data-tag_no="{{ $crane->tag_no }}">
                    {{ $crane->platform }} - {{ $crane->tag_no }}
                  </option>
                @endforeach
              </select>
              <small class="form-text text-muted">Crane selection will be enabled when "Other (No DPR)" is selected</small>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="crane_system_id" class="form-label">System/Component</label>
              <select class="form-select" id="crane_system_id" name="crane_system_id">
                <option value="">Select System/Component</option>
                @if(isset($systems) && count($systems) > 0)
                  @foreach($systems as $system)
                    <option value="{{ $system->id }}">{{ $system->name }}</option>
                  @endforeach
                @endif
              </select>
              <div class="mt-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="toggleNewComponent">
                  + Add New Component
                </button>
              </div>
              <div id="newComponentField" class="mt-2" style="display: none;">
                <div class="row">
                  <div class="col-md-6 mb-3">
                    <label for="equipment_id" class="form-label">Component *</label>
                    <select class="form-select" id="equipment_id" name="equipment_id">
                      <option value="">Select Equipment</option>
                      @foreach($equipments as $equipment)
                        <option value="{{ $equipment->id }}">{{ $equipment->name }}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="col-md-6 mb-3">
                    <label for="equipment_component_id" class="form-label">Primary</label>
                    <select class="form-select" id="equipment_component_id" name="equipment_component_id" disabled>
                      <option value="">Select Component</option>
                    </select>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6 mb-3">
                    <label for="component_part_id" class="form-label">Sub-Primary</label>
                    <select class="form-select" id="component_part_id" name="component_part_id" disabled>
                      <option value="">Select Part</option>
                    </select>
                  </div>
                  <div class="col-md-6 mb-3">
                    <label for="part_detail_id" class="form-label">Secondary</label>
                    <select class="form-select" id="part_detail_id" name="part_detail_id" disabled>
                      <option value="">Select Detail</option>
                    </select>
                  </div>
                </div>
                <input type="hidden" id="combined_component" name="new_component">
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <label for="report_date" class="form-label">Report Date *</label>
              <input type="date" class="form-control" id="report_date" name="report_date" required>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="status" class="form-label">Status *</label>
              <select class="form-select" id="status" name="status" required>
                <option value="open" selected>Open</option>
                <option value="closed">Closed</option>
              </select>
            </div>
            <div class="col-md-6 mb-3">
              <label for="recommendation" class="form-label">Recommendation</label>
              <select class="form-select" id="recommendation" name="recommendation">
                <option value="">Select Recommendation</option>
                <option value="repair">Repair</option>
                <option value="replace">Replace</option>
                <option value="remove">Remove</option>
                <option value="none required">None Required</option>
              </select>
            </div>
          </div>

          <div class="mb-3">
            <label for="remarks" class="form-label">Remarks *</label>
            <textarea class="form-control" id="remarks" name="remarks" rows="3" required></textarea>
          </div>

          <div class="mb-3">
            <label for="action" class="form-label">Action Taken</label>
            <textarea class="form-control" id="action" name="action" rows="3"></textarea>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="remarks_image" class="form-label">Image Upload (Before) - Multiple</label>
              <input type="file" class="form-control" id="remarks_image" name="remarks_image[]" accept="image/*" multiple>
              <small class="form-text text-muted">Select multiple images by holding Ctrl/Cmd</small>
              <div id="remarks_image_preview" class="mt-2 d-flex flex-wrap gap-2"></div>
            </div>
            <div class="col-md-6 mb-3">
              <label for="image_after" class="form-label">Image Upload (After) - Multiple</label>
              <input type="file" class="form-control" id="image_after" name="image_after[]" accept="image/*" multiple>
              <small class="form-text text-muted">Select multiple images by holding Ctrl/Cmd</small>
              <div id="image_after_preview" class="mt-2 d-flex flex-wrap gap-2"></div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save Finding</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Edit Finding Modal -->
<div class="modal fade" id="editFindingModal" tabindex="-1" aria-labelledby="editFindingModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editFindingModalLabel">Edit Finding Status</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="editFindingForm" method="POST">
        @csrf
        @method('PUT')
        <div class="modal-body">
          <div class="mb-3">
            <label for="edit_status" class="form-label">Status</label>
            <select class="form-select" id="edit_status" name="status" required>
              <option value="open">Open</option>
              <option value="closed">Closed</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save Changes</button>
        </div>
      </form>
    </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 src="{{ asset('assets/js/data-table.js') }}"></script>
<script>
$(document).ready(function() {
    // ========== MODAL HANDLING ==========
    $('#addFindingBtn').click(function(e) {
        e.preventDefault();
        $('#addFindingModal').modal('show');
    });

    // ========== STATUS FILTER ==========
    $('#statusFilter').change(function() {
        const selectedStatus = $(this).val();
        
        $('#dataTableExample tbody tr').each(function() {
            const rowStatusBadge = $(this).find('td:eq(9) .badge');
            const rowStatus = rowStatusBadge.text().trim().toLowerCase();
            
            if (selectedStatus === '' || rowStatus === selectedStatus) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
        
        updateFilteredCounts();
    });

    function updateFilteredCounts() {
        const visibleRows = $('#dataTableExample tbody tr:visible');
        const totalCount = visibleRows.length;
        const openCount = visibleRows.filter(function() {
            return $(this).find('td:eq(9) .badge').text().trim().toLowerCase() === 'open';
        }).length;
        const closedCount = visibleRows.filter(function() {
            return $(this).find('td:eq(9) .badge').text().trim().toLowerCase() === 'closed';
        }).length;
        
        $('.stat-card.total h4').text(totalCount);
        $('.stat-card.open h4').text(openCount);
        $('.stat-card.closed h4').text(closedCount);
    }

    // ========== MAINTENANCE SELECTION WITH CRANE ENABLE/DISABLE LOGIC ==========
    $('#cranes_maintenance_id').change(function() {
        var maintenanceId = $(this).val();
        var selectedOption = $(this).find('option:selected');
        var reportDate = selectedOption.data('report-date');
        var craneId = selectedOption.data('crane-id');
        
        console.log('Maintenance ID:', maintenanceId);
        console.log('Report Date from data:', reportDate);
        console.log('Crane ID from data:', craneId);
        
        // ========== CRANE SELECTION ENABLE/DISABLE LOGIC ==========
        if (maintenanceId === '') {
            // "Other (No DPR)" selected - ENABLE crane selection
            $('#crane_id').prop('disabled', false);
            $('#crane_id').val('');
            console.log('Crane selection ENABLED - No DPR selected');
        } else {
            // Specific maintenance selected - DISABLE crane selection and auto-set crane
            $('#crane_id').prop('disabled', true);
            if (craneId) {
                $('#crane_id').val(craneId);
                console.log('Crane selection DISABLED and set to:', craneId);
            }
        }
        
        // Set the report date from maintenance if available
        if (maintenanceId && reportDate) {
            $('#report_date').val(reportDate);
            console.log('Setting report date to:', reportDate);
        } else {
            // Reset to today's date if no maintenance selected or "Other (No DPR)"
            $('#report_date').val(new Date().toISOString().split('T')[0]);
            console.log('Setting report date to today');
        }
        
        // Handle system loading for selected maintenance
        if (maintenanceId) {
            $('#crane_system_id').html('<option value="">Loading systems...</option>');
            
            // Load systems for selected maintenance
            $.get('/crane-findings/systems/' + maintenanceId, function(data) {
                var options = '<option value="">Select System/Component</option>';
                if (data && data.length) {
                    $.each(data, function(key, system) {
                        options += '<option value="' + system.id + '">' + system.name + '</option>';
                    });
                    $('#crane_system_id').html(options);
                } else {
                    $('#crane_system_id').html('<option value="">No systems found</option>');
                }
            }).fail(function() {
                $('#crane_system_id').html('<option value="">Error loading systems</option>');
            });
        } else {
            $('#crane_system_id').html('<option value="">Select System/Component</option>');
        }
    });

    // ========== CRANE SELECTION ==========
    $('#crane_id').change(function() {
        var selectedOption = $(this).find('option:selected');
        var platform = selectedOption.data('platform');
        var tag_no = selectedOption.data('tag_no');
        
        console.log('Selected Crane - Platform:', platform, 'Tag No:', tag_no);
    });

    // ========== IMAGE PREVIEW ==========
    function handleImagePreview(input, previewId) {
        const preview = document.getElementById(previewId);
        preview.innerHTML = '';
        
        if (input.files && input.files.length > 0) {
            for (let i = 0; i < input.files.length; i++) {
                const file = input.files[i];
                
                if (file.type.match('image.*')) {
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.classList.add('img-preview');
                        preview.appendChild(img);
                    }
                    
                    reader.readAsDataURL(file);
                }
            }
        }
    }

    $('#remarks_image').change(function() {
        handleImagePreview(this, 'remarks_image_preview');
    });

    $('#image_after').change(function() {
        handleImagePreview(this, 'image_after_preview');
    });

    // ========== COMPONENT HIERARCHY ==========
    function updateCombinedComponent() {
        let combinedValue = '';
        const selects = ['equipment_id', 'equipment_component_id', 'component_part_id', 'part_detail_id'];
        
        selects.forEach((id, index) => {
            const select = document.getElementById(id);
            if (select && select.value) {
                if (index > 0) combinedValue += ' > ';
                combinedValue += select.options[select.selectedIndex].text;
            }
        });
        
        $('#combined_component').val(combinedValue);
        console.log('Combined Component:', combinedValue);
    }

    function handleHierarchyChange(parentId, childId, data) {
        const parentValue = document.getElementById(parentId).value;
        const childSelect = document.getElementById(childId);
        
        // Reset child dropdown
        childSelect.innerHTML = '<option value="">Select...</option>';
        childSelect.disabled = true;
        
        if (parentValue && data && data.length > 0) {
            // Determine the correct parent field name
            const parentField = parentId.replace('_id', '') + '_id';
            
            // Filter data based on parent value
            const filtered = data.filter(item => item[parentField] == parentValue);
            
            if (filtered.length > 0) {
                // Populate child dropdown with filtered options
                filtered.forEach(item => {
                    const option = document.createElement('option');
                    option.value = item.id;
                    option.textContent = item.name;
                    childSelect.appendChild(option);
                });
                childSelect.disabled = false;
            }
        }
        
        // Reset all downstream selects
        const hierarchy = {
            'equipment_id': 'equipment_component_id',
            'equipment_component_id': 'component_part_id',
            'component_part_id': 'part_detail_id'
        };
        
        let currentChild = childId;
        while (hierarchy[currentChild]) {
            currentChild = hierarchy[currentChild];
            const downstreamSelect = document.getElementById(currentChild);
            downstreamSelect.innerHTML = '<option value="">Select...</option>';
            downstreamSelect.disabled = true;
        }
        
        updateCombinedComponent();
    }

    // Initialize hierarchy handlers
    $('#equipment_id').change(function() {
        try {
            handleHierarchyChange('equipment_id', 'equipment_component_id', 
                {!! json_encode($equipmentComponents ?? []) !!});
        } catch (e) {
            console.error('Error handling equipment change:', e);
        }
    });

    $('#equipment_component_id').change(function() {
        try {
            handleHierarchyChange('equipment_component_id', 'component_part_id', 
                {!! json_encode($componentParts ?? []) !!});
        } catch (e) {
            console.error('Error handling component change:', e);
        }
    });

    $('#component_part_id').change(function() {
        try {
            handleHierarchyChange('component_part_id', 'part_detail_id', 
                {!! json_encode($partDetails ?? []) !!});
        } catch (e) {
            console.error('Error handling part change:', e);
        }
    });

    $('#part_detail_id').change(function() {
        updateCombinedComponent();
    });

    // Toggle new component field
    $('#toggleNewComponent').click(function() {
        $('#newComponentField').toggle();
        if ($('#newComponentField').is(':visible')) {
            $('#crane_system_id').prop('disabled', true);
            $('#crane_system_id').val('');
        } else {
            $('#crane_system_id').prop('disabled', false);
        }
    });

    // ========== EDIT FINDING ==========
    $('.edit-finding').click(function(e) {
        e.preventDefault();
        var findingId = $(this).data('id');
        var status = $(this).data('status');
        $('#editFindingForm').attr('action', '/findings-status/' + findingId);
        $('#editFindingForm #edit_status').val(status);
        $('#editFindingModal').modal('show');
    });

    $('#editFindingForm').submit(function(e) {
        e.preventDefault();
        var form = $(this);
        var url = form.attr('action');
        
        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(),
            success: function(response) {
                $('#editFindingModal').modal('hide');
                Swal.fire('Success!', 'Finding status updated successfully', 'success')
                    .then(() => location.reload());
            },
            error: function(xhr) {
                Swal.fire('Error!', xhr.responseJSON.message || 'Failed to update finding status', 'error');
            }
        });
    });

    // ========== DELETE HANDLING ==========
    $('.delete-form').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!',
        }).then((result) => result.isConfirmed && this.submit());
    });

    // ========== FORM SUBMISSION ==========
    $('#addFindingForm').submit(function(e) {
        e.preventDefault();
        
        // Ensure combined component is updated before submission
        updateCombinedComponent();
        
        var form = $(this);
        var submitBtn = form.find('button[type="submit"]');
        submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Saving...');
        
        // Create FormData object
        var formData = new FormData(this);
        
        // Log form data for debugging
        for (var pair of formData.entries()) {
            console.log(pair[0] + ': ' + (pair[0].includes('image') ? pair[1].name : pair[1]));
        }
        
        $.ajax({
            type: "POST",
            url: form.attr('action'),
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#addFindingModal').modal('hide');
                Swal.fire('Success!', 'Finding added successfully', 'success')
                    .then(() => location.reload());
            },
            error: function(xhr) {
                let errorMessage = xhr.responseJSON?.message || 'Failed to add finding';
                if (xhr.status === 422) {
                    errorMessage = Object.values(xhr.responseJSON.errors).join('\n');
                }
                Swal.fire('Error!', errorMessage, 'error');
            },
            complete: function() {
                submitBtn.prop('disabled', false).html('Save Finding');
            }
        });
    });

    // Reset form when modal is closed
    $('#addFindingModal').on('hidden.bs.modal', function() {
        $('#addFindingForm')[0].reset();
        $('#remarks_image_preview, #image_after_preview').empty();
        $('#crane_system_id').html('<option value="">Select System/Component</option>');
        $('#newComponentField').hide();
        $('#crane_system_id').prop('disabled', false);
        
        // Reset crane selection to disabled state by default
        $('#crane_id').prop('disabled', true);
        $('#crane_id').val('');
        
        $('.is-invalid').removeClass('is-invalid');
        $('.invalid-feedback').remove();
        
        // Reset to today's date
        $('#report_date').val(new Date().toISOString().split('T')[0]);
    });

    // Set today's date as default on page load
    $('#report_date').val(new Date().toISOString().split('T')[0]);
    
    // Auto-hide alerts after 5 seconds
    setTimeout(function() {
        $('.alert').fadeOut('slow');
    }, 5000);
});
</script>
@endpush