@php
    $safeLoadIndicatorDescriptions = [
        'Check operation of safe load indicator using known load weight and measured',
        'Check operating of visual and audible alarms',
        'Check boom angle/radius indicators over full range of accuracy'
    ];

    $existingDetails = $existingDetails ?? collect();
@endphp

<div class="tab-pane fade show active" id="section10" role="tabpanel" aria-labelledby="section10-tab">
    <form id="safeLoadIndicatorForm" action="{{ route('ppm.safeLoadIndicator.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="ppm_id" value="{{ $ppm->id ?? '' }}">
        <input type="hidden" name="component_name" value="Safe Load Indicator">
        <input type="hidden" name="ppm_component_id" value="{{ $component->id ?? '' }}">

        <div class="mt-3">
            <div class="section-header text-center" style="font-weight: bold; color: #d61b1c; border-bottom: 2px solid #d61b1c; padding-bottom: 5px; font-size: 1.25rem; margin-bottom: 10px;">
                <h6 class="mb-0">Safe Load Indicator</h6>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Components/Items</th>
                            <th>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 class="text-center">Priority</th>
                            <th>Remarks</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($safeLoadIndicatorDescriptions as $index => $description)
                            @php
                                $existingDetail = $existingDetails->where('description', $description)->first();
                                $mediaItems = $existingDetail ? $existingDetail->getMedia('safe_load_indicator') : collect();
                                $mediaUrls = $mediaItems->map(function($item) {
                                    return $item->getUrl();
                                })->toArray();
                            @endphp
                            <tr>
                                @if($index === 0)
                                    <td rowspan="{{ count($safeLoadIndicatorDescriptions) }}" style="vertical-align: middle;">Safe Load Indicator</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" {{ optional($existingDetail)->pre_condition === 'Good' ? 'selected' : '' }}>Good</option>
                                        <option value="Bad" {{ optional($existingDetail)->pre_condition === 'Bad' ? 'selected' : '' }}>Bad</option>
                                        <option value="N/A" {{ optional($existingDetail)->pre_condition === 'N/A' ? 'selected' : '' }}>N/A</option>
                                    </select>
                                </td>
                                <td>
                                    <select name="items[{{ $index }}][post_condition]" class="form-control" required>
                                        <option value="">Select Condition</option>
                                        <option value="Good" {{ optional($existingDetail)->post_condition === 'Good' ? 'selected' : '' }}>Good</option>
                                        <option value="Bad" {{ optional($existingDetail)->post_condition === 'Bad' ? 'selected' : '' }}>Bad</option>
                                        <option value="N/A" {{ optional($existingDetail)->post_condition === 'N/A' ? 'selected' : '' }}>N/A</option>
                                    </select>
                                </td>
                                <td>
                                    <select name="items[{{ $index }}][priority]" class="form-control select-style" required>
                                        <option value="">Select Priority</option>
                                        <option value="P1" {{ optional($existingDetail)->priority === 'P1' ? 'selected' : '' }}>P1</option>
                                        <option value="P2" {{ optional($existingDetail)->priority === 'P2' ? 'selected' : '' }}>P2</option>
                                        <option value="P3" {{ optional($existingDetail)->priority === 'P3' ? 'selected' : '' }}>P3</option>
                                        <option value="N/A" {{ optional($existingDetail)->priority === 'N/A' ? 'selected' : '' }}>N/A</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="text" name="items[{{ $index }}][remark]" class="form-control" value="{{ optional($existingDetail)->remark }}">
                                </td>
                                <td class="text-center">
                                    <input type="file" name="items[{{ $index }}][images][]" multiple style="display: none;" id="safe-load-indicator-images-{{ $index }}">
                                    <i class="fas fa-upload text-primary" style="cursor: pointer;" title="Upload Image" onclick="document.getElementById('safe-load-indicator-images-{{ $index }}').click()"></i>
                                    
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <hr class="mt-4" style="border-color: #d61b1c;">
        <div class="row mt-3">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="martinDeckerGap">Martin Decker Load Cell Gap (mm)</label>
                    <input type="number" step="0.01" name="martin_decker_gap" id="martinDeckerGap" class="form-control" placeholder="Enter measurement in mm" value="{{ $martinDeckerGap ?? '' }}">
                </div>
            </div>
        </div>

        <div class="form-group mt-4">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> Save Safe Load Indicator
            </button>
        </div>
    </form>
</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() {
    $('#safeLoadIndicatorForm').on('submit', function(e) {
        e.preventDefault();

        let formData = new FormData(this);
        let submitBtn = $(this).find('button[type="submit"]');

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

        $.ajax({
            url: "{{ route('ppm.safeLoadIndicator.store') }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    $('input[name="ppm_component_id"]').val(response.ppm_component_id);
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Safe Load Indicator data saved successfully!',
                        timer: 2000,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: response.message || 'Error saving inspection data',
                    });
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    let errorMessages = '';
                    for (let field in errors) {
                        errorMessages += errors[field][0] + '<br>';
                    }
                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        html: errorMessages,
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'An error occurred: ' + xhr.statusText,
                    });
                }
            },
            complete: function() {
                submitBtn.prop('disabled', false).html('<i class="fas fa-save"></i> Save Safe Load Indicator');
            }
        });
    });
});

function viewSafeLoadIndicatorImages(index, imageUrls) {
    let html = '<div class="row">';
    if (imageUrls && imageUrls.length > 0) {
        imageUrls.forEach(url => {
            html += `<div class="col-md-4 mb-3">
                <img src="${url}" class="img-fluid" alt="Inspection Image">
                <div class="text-center mt-2">
                    <a href="${url}" target="_blank" class="btn btn-sm btn-primary">View Full Size</a>
                </div>
            </div>`;
        });
    } else {
        html += '<p>No images available for this inspection item.</p>';
    }
    html += '</div>';

    $('#imageModalBody').html(html);
    $('#imageModal').modal('show');
}
</script>