@php
    $craneCabinDescriptions = [
        'Check the cabin and the machinery house is tidy with no loose material',
        'Check fire extinguishers are present',
        'Check annunciator and dashboard panel, gauges and switches for any defect',
        'Check that control levers returns to neutral unaided',
        'Visually inspect cabin support structure for any defects',
        'Lubricate door runner, hinges, locks as necessary',
        'Check window wiper operation',
        'Check operation and condition of Air Conditioner'
    ];
@endphp

<div class="tab-pane fade show active" id="section9" role="tabpanel" aria-labelledby="section9-tab">
    <form id="craneCabinForm" action="{{ route('ppm.inspection.storeCraneCabin') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="ppm_id" value="{{ $ppm->id ?? '' }}">
        <input type="hidden" name="component_name" value="Crane Cabin">

        <div class="mt-3">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Components/Items</th>
                            <th class="description-column">Description</th>
                            <th class="text-center">Pre Condition <span class="text-danger">*</span></th>
                            <th class="text-center">Post Condition <span class="text-danger">*</span></th>
                            <th>Priority</th>
                            <th>Remarks</th>
                            <th>Images</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($craneCabinDescriptions as $index => $description)
                        @php
                            // Get existing media if editing
                            $existingMedia = isset($ppmComponentDetails[$index]) 
                                ? $ppmComponentDetails[$index]->getMedia('crane_cabin_images') 
                                : collect();
                        @endphp
                        <tr>
                            @if($index === 0)
                                <td rowspan="{{ count($craneCabinDescriptions) }}" style="vertical-align: middle;">Crane Cabin</td>
                            @endif
                            <td>
                                {{ $description }}
                                <input type="hidden" name="items[{{ $index }}][description]" value="{{ $description }}">
                            </td>
                            <td>
                                <select name="items[{{ $index }}][pre_condition]" class="form-control" required>
                                    <option value="">Select Condition</option>
                                    <option value="Good">Good</option>
                                    <option value="Bad">Bad</option>
                                    <option value="N/A">N/A</option>
                                </select>
                            </td>
                            <td>
                                <select name="items[{{ $index }}][post_condition]" class="form-control" required>
                                    <option value="">Select Condition</option>
                                    <option value="Good">Good</option>
                                    <option value="Bad">Bad</option>
                                    <option value="N/A">N/A</option>
                                </select>
                            </td>
                            <td>
                                <select name="items[{{ $index }}][priority]" class="form-control">
                                    <option value="">Select Priority</option>
                                    <option value="P1">P1</option>
                                    <option value="P2">P2</option>
                                    <option value="P3">P3</option>
                                    <option value="N/A">N/A</option>
                                </select>
                            </td>
                            <td><input type="text" name="items[{{ $index }}][remark]" class="form-control"></td>
                            <td class="text-center">
                                <!-- File input for new images -->
                                <input type="file" name="items[{{ $index }}][images][]" multiple style="display: none;" 
                                       id="crane-cabin-images-{{ $index }}" accept="image/*">
                                <button type="button" class="btn btn-sm btn-primary" 
                                        onclick="document.getElementById('crane-cabin-images-{{ $index }}').click()">
                                    <i class="fas fa-upload"></i> Upload
                                </button>
                                

                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="form-group mt-4">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> Save Crane Cabin Inspection
            </button>
        </div>
    </form>
</div>

<!-- Modal for viewing images -->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalLabel">Inspection Images</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="imageModalBody">
                <!-- Images will be loaded here -->
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    // Image preview for new uploads
    $('input[type="file"][name^="items["]').change(function() {
        const index = $(this).attr('id').split('-')[3];
        const previewDiv = $('#image-preview-' + index);
        
        // Only show new files (don't clear existing media)
        if (this.files && this.files.length > 0) {
            Array.from(this.files).forEach(file => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewDiv.append(`
                        <div class="d-inline-block mr-2 mb-2">
                            <img src="${e.target.result}" class="img-thumbnail" width="80">
                            <small class="d-block text-center text-truncate" style="max-width: 80px">${file.name}</small>
                        </div>
                    `);
                }
                reader.readAsDataURL(file);
            });
        }
    });

    // Form submission
    $('#craneCabinForm').on('submit', function(e) {
        e.preventDefault();
        
        const form = this;
        const formData = new FormData(form);
        const submitBtn = $(form).find('button[type="submit"]');

        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');

        $.ajax({
            url: $(form).attr('action'),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Saved!',
                    text: response.message || 'Data saved successfully.',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    window.location.reload(); // Refresh to show new images
                });
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    let errorMessages = Object.values(errors).map(err => err[0]).join('<br>');
                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        html: errorMessages
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: xhr.responseJSON?.message || 'An error occurred while saving.'
                    });
                }
            },
            complete: function() {
                submitBtn.prop('disabled', false).html('<i class="fas fa-save"></i> Save');
            }
        });
    });
});

function viewCraneCabinImages(index) {
    // Get the PPM component detail ID if available
    const detailId = $('input[name="items['+index+'][id]"]').val();
    
    if (!detailId) {
        $('#imageModalBody').html('<p>No images available for this item yet.</p>');
        $('#imageModal').modal('show');
        return;
    }

    // Fetch images via AJAX if needed
    $.get('/ppm/inspection/get-images/' + detailId, function(response) {
        if (response.images && response.images.length > 0) {
            let html = '<div class="row">';
            response.images.forEach(image => {
                html += `
                    <div class="col-md-4 mb-3">
                        <img src="${image.url}" class="img-fluid rounded">
                        <div class="text-center mt-2">${image.name}</div>
                    </div>
                `;
            });
            html += '</div>';
            $('#imageModalBody').html(html);
        } else {
            $('#imageModalBody').html('<p>No images available for this item.</p>');
        }
        $('#imageModal').modal('show');
    }).fail(function() {
        $('#imageModalBody').html('<p>Error loading images.</p>');
        $('#imageModal').modal('show');
    });
}
</script>