@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush
<style>
    /* Compact table styling */
    .table-sm {
        font-size: 0.875rem;
    }
    
    .table-sm th,
    .table-sm td {
        padding: 0.4rem 0.5rem;
    }

    /* Smaller card and container */
    .compact-card .card-body {
        padding: 1rem;
    }

    .compact-header {
        padding: 0.75rem 1rem;
    }

    /* Smaller tabs */
    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Compact table columns */
    #dataTableExample th, #dataTableExample td,
    #dataTableExample1 th, #dataTableExample1 td {
        white-space: normal !important;
        word-wrap: break-word;
        font-size: 0.8rem;
    }
    
    /* Fixed column widths - More compact */
    /* Open Findings Table (8 columns) */
    #dataTableExample th:nth-child(1), #dataTableExample td:nth-child(1) { width: 40px; } /* No */
    #dataTableExample th:nth-child(2), #dataTableExample td:nth-child(2) { width: 100px; } /* Date */
    #dataTableExample th:nth-child(3), #dataTableExample td:nth-child(3) { width: 150px; } /* System */
    #dataTableExample th:nth-child(4), #dataTableExample td:nth-child(4) { width: 180px; } /* Attribute */
    #dataTableExample th:nth-child(5), #dataTableExample td:nth-child(5) { width: 120px; } /* Action */
    #dataTableExample th:nth-child(6), #dataTableExample td:nth-child(6) { width: 100px; } /* Recommendation */
    #dataTableExample th:nth-child(7), #dataTableExample td:nth-child(7) { width: 300px; } /* Images */
    #dataTableExample th:nth-child(8), #dataTableExample td:nth-child(8) { width: 60px; } /* Actions */
    
    /* Closed Findings Table (8 columns) */
    #dataTableExample1 th:nth-child(1), #dataTableExample1 td:nth-child(1) { width: 40px; } /* No */
    #dataTableExample1 th:nth-child(2), #dataTableExample1 td:nth-child(2) { width: 100px; } /* Reported Date */
    #dataTableExample1 th:nth-child(3), #dataTableExample1 td:nth-child(3) { width: 100px; } /* Closed On */
    #dataTableExample1 th:nth-child(4), #dataTableExample1 td:nth-child(4) { width: 200px; } /* System */
    #dataTableExample1 th:nth-child(5), #dataTableExample1 td:nth-child(5) { width: 180px; } /* Attribute */
    #dataTableExample1 th:nth-child(6), #dataTableExample1 td:nth-child(6) { width: 120px; } /* Action */
    #dataTableExample1 th:nth-child(7), #dataTableExample1 td:nth-child(7) { width: 100px; } /* Recommendation */
    #dataTableExample1 th:nth-child(8), #dataTableExample1 td:nth-child(8) { width: 300px; } /* Images */

    /* Smaller images */
    .img-thumbnail-container {
        position: relative;
        display: inline-block;
        margin: 2px;
    }

    .img-thumbnail {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 0;
        cursor: pointer;
    }

    /* Smaller popup */
    .img-popup {
        display: none;
        position: absolute;
        top: 0;
        left: 90px;
        z-index: 100;
        border: 1px solid #ccc;
        background: #fff;
        padding: 3px;
        box-shadow: 0 0 5px rgba(0,0,0,0.3);
    }

    .img-popup img {
        width: 300px;
        height: auto;
        object-fit: contain;
    }

    /* Show on hover */
    .img-thumbnail-container:hover .img-popup {
        display: block;
    }

    /* Smaller badges */
    .badge {
        font-size: 0.7rem;
        padding: 0.25em 0.4em;
    }

    /* Smaller buttons */
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.775rem;
    }

    /* Compact info display */
    .compact-info p {
        margin-bottom: 0.3rem;
        font-size: 0.875rem;
    }

    /* Smaller modal */
    .modal-smaller .modal-dialog {
        max-width: 600px;
    }

    .modal-smaller .modal-body {
        padding: 1rem;
    }

    .modal-smaller .form-control {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Reduce spacing */
    .compact-spacing {
        margin-bottom: 0.5rem;
    }
</style>
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card compact-card">
                <div class="card-header compact-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Findings Summary for {{ $crane->tag_no }}-{{ $crane->model }}</h5>
                    <a href="{{ url()->previous() }}" class="btn btn-primary btn-sm" role="button" aria-pressed="true" title="View">
                        <i data-feather="arrow-left" class="me-1" style="width: 14px; height: 14px;"></i>
                        Back
                    </a>
                </div>
                <div class="card-body">
                    <div class="row compact-info compact-spacing">
                        <div class="col-md-3">
                            <p><strong>Serial No:</strong> {{ $crane->serial_no }}</p>
                        </div>
                        <div class="col-md-3">
                            <p><strong>Company:</strong> {{ $crane->company_name }}</p>
                        </div>
                        <div class="col-md-3">
                            <p><strong>Platform:</strong> {{ $crane->platform }}</p>
                        </div>
                        <div class="col-md-3">
                            <p><strong>Tag No:</strong> {{ $crane->tag_no }}</p>
                        </div>
                    </div>
                    <div class="row compact-info">
                        <div class="col-md-3">
                            <p><strong>Manufacturer:</strong> {{ $crane->manufacturer }}</p>
                        </div>
                        <div class="col-md-3">
                            <p><strong>Model:</strong> {{ $crane->model }}</p>
                        </div>
                    </div>

                    <ul class="nav nav-tabs mt-3" id="findingsTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="open-tab" data-bs-toggle="tab" data-bs-target="#open" type="button" role="tab">
                                Open <span class="badge bg-danger">{{ count($openFindings) }}</span>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="closed-tab" data-bs-toggle="tab" data-bs-target="#closed" type="button" role="tab">
                                Closed <span class="badge bg-success">{{ count($closedFindings) }}</span>
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content p-2 border border-top-0" id="findingsTabContent">
                        <!-- Open Findings Tab -->
                        <div class="tab-pane fade show active" id="open" role="tabpanel">
                            @if($openFindings->isEmpty())
                                <div class="alert alert-info py-2">No open findings for this crane.</div>
                            @else
                                <div class="table-responsive">
                                    <table id="dataTableExample" class="table table-bordered table-sm">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Date</th>
                                                <th>System</th>
                                                <th>Remarks</th>
                                                <th>Action</th>
                                                <th>Rec.</th>
                                                <th>Images</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($openFindings as $index => $finding)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                @if($finding->report_date)
                                                    {{ \Carbon\Carbon::parse($finding->report_date)->format('d-M-Y') }}
                                                @else
                                                    N/A
                                                @endif
                                            </td>
                                            <td>
                                                @if($finding->crane_inventory_equipment_id)
                                                @php
                                                    $system = $equipmentStatuses->firstWhere('system_id', $finding->crane_inventory_equipment_id);
                                                @endphp
                                                {{ $system->system_name ?? 'N/A' }}
                                                @elseif($finding->crane_inventory_equipment_component_id)
                                                    @php
                                                        $system = $primaryStatuses->firstWhere('system_id', $finding->crane_inventory_equipment_component_id);
                                                    @endphp
                                                {{ $system->system_name ?? 'N/A' }}
                                                @elseif($finding->crane_inventory_component_part_id)
                                                    @php
                                                        $system = $subPrimaryStatuses->firstWhere('system_id', $finding->crane_inventory_component_part_id);
                                                    @endphp
                                                    {{ $system->system_name ?? 'N/A' }}
                                                @elseif($finding->crane_inventory_part_detail_id)
                                                    @php
                                                        $system = $secondaryStatuses->firstWhere('system_id', $finding->crane_inventory_part_detail_id);
                                                    @endphp
                                                    {{ $system->system_name ?? 'N/A' }}
                                                @else
                                                    General
                                                @endif
                                            </td>
                                            <td title="{{ $finding->remarks }}">
                                                {{ Str::limit($finding->remarks, 50) }}
                                            </td>
                                            <td title="{{ $finding->action }}">
                                                {{ Str::limit($finding->action, 30) }}
                                            </td>
                                            <td>{{ $finding->recommendation ?? 'N/A' }}</td> 
                                            <td>
                                                <div class="d-flex gap-1">
                                                    @if(!empty($finding->remarks_image_urls))
                                                        @foreach($finding->remarks_image_urls as $imageUrl)
                                                        <div class="img-thumbnail-container">
                                                            <img src="{{ $imageUrl }}" 
                                                                class="img-thumbnail"
                                                                alt="Before">
                                                            <div class="img-popup">
                                                                <img src="{{ $imageUrl }}" alt="Before Image">
                                                            </div>
                                                            <small class="d-block text-center mt-1" style="font-size: 0.7rem;">B</small>
                                                        </div>
                                                        @endforeach
                                                    @endif
                                                    
                                                    @if(!empty($finding->image_after_urls))
                                                        @foreach($finding->image_after_urls as $imageUrl)
                                                        <div class="img-thumbnail-container">
                                                            <img src="{{ $imageUrl }}" 
                                                                class="img-thumbnail"
                                                                alt="After">
                                                            <div class="img-popup">
                                                                <img src="{{ $imageUrl }}" alt="After Image">
                                                            </div>
                                                            <small class="d-block text-center mt-1" style="font-size: 0.7rem;">A</small>
                                                        </div>
                                                        @endforeach
                                                    @endif
                                                    
                                                    @if(empty($finding->remarks_image_urls) && empty($finding->image_after_urls) && $finding->remarks_image)
                                                        <div class="img-thumbnail-container">
                                                            <img src="{{ asset('storage/maintenance_findings/'.$finding->remarks_image) }}" 
                                                                class="img-thumbnail"
                                                                alt="Before">
                                                            <div class="img-popup">
                                                                <img src="{{ asset('storage/maintenance_findings/'.$finding->remarks_image) }}" alt="Before Image">
                                                            </div>
                                                            <small class="d-block text-center mt-1" style="font-size: 0.7rem;">B</small>
                                                        </div>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <button class="btn btn-success btn-sm edit-finding-btn" 
                                                        data-finding-id="{{ $finding->id }}"
                                                        data-remarks="{{ $finding->remarks }}"
                                                        data-action="{{ $finding->action }}"
                                                        data-recommendation="{{ $finding->recommendation }}"
                                                        data-status="{{ $finding->status }}"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#editFindingModal"
                                                        title="Edit Finding">
                                                    <i data-feather="edit-2" style="width: 12px; height: 12px;"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>

                        <!-- Closed Findings Tab -->
                        <div class="tab-pane fade" id="closed" role="tabpanel">
                            @if($closedFindings->isEmpty())
                                <div class="alert alert-info py-2">No closed findings for this crane.</div>
                            @else
                                <div class="table-responsive">
                                     <table id="dataTableExample1" class="table table-bordered table-sm">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Reported</th>
                                                <th>Closed</th>
                                                <th>System</th>
                                                <th>Remarks</th>
                                                <th>Action</th>
                                                <th>Rec.</th>
                                                <th>Images</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($closedFindings as $index => $finding)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>
                                                    @if($finding->report_date)
                                                        {{ \Carbon\Carbon::parse($finding->report_date)->format('d-M-Y') }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <td>{{ \Carbon\Carbon::parse($finding->updated_at)->format('d-M-Y') }}</td>
                                                <td>
                                                    @if($finding->crane_inventory_equipment_id)
                                                        @php
                                                            $system = $equipmentStatuses->firstWhere('system_id', $finding->crane_inventory_equipment_id);
                                                        @endphp
                                                        {{ $system->system_name ?? 'N/A' }}
                                                    @elseif($finding->crane_inventory_equipment_component_id)
                                                        @php
                                                            $system = $primaryStatuses->firstWhere('system_id', $finding->crane_inventory_equipment_component_id);
                                                        @endphp
                                                        {{ $system->system_name ?? 'N/A' }}
                                                    @elseif($finding->crane_inventory_component_part_id)
                                                        @php
                                                            $system = $subPrimaryStatuses->firstWhere('system_id', $finding->crane_inventory_component_part_id);
                                                        @endphp
                                                        {{ $system->system_name ?? 'N/A' }}
                                                    @elseif($finding->crane_inventory_part_detail_id)
                                                        @php
                                                            $system = $secondaryStatuses->firstWhere('system_id', $finding->crane_inventory_part_detail_id);
                                                        @endphp
                                                        {{ $system->system_name ?? 'N/A' }}
                                                    @else
                                                        General
                                                    @endif
                                                </td>
                                                <td title="{{ $finding->remarks }}">
                                                    {{ Str::limit($finding->remarks, 50) }}
                                                </td>
                                                <td title="{{ $finding->action }}">
                                                    {{ Str::limit($finding->action, 30) }}
                                                </td>
                                                <td>{{ $finding->recommendation ?? 'N/A' }}</td> 
                                                <td>
                                                    <div class="d-flex gap-1">
                                                        @if(!empty($finding->remarks_image_urls))
                                                            @foreach($finding->remarks_image_urls as $imageUrl)
                                                            <div class="img-thumbnail-container">
                                                                <img src="{{ $imageUrl }}" 
                                                                    class="img-thumbnail"
                                                                    alt="Before">
                                                                <div class="img-popup">
                                                                    <img src="{{ $imageUrl }}" alt="Before Image">
                                                                </div>
                                                                <small class="d-block text-center mt-1" style="font-size: 0.7rem;">B</small>
                                                            </div>
                                                            @endforeach
                                                        @endif
                                                        
                                                        @if(!empty($finding->image_after_urls))
                                                            @foreach($finding->image_after_urls as $imageUrl)
                                                            <div class="img-thumbnail-container">
                                                                <img src="{{ $imageUrl }}" 
                                                                    class="img-thumbnail"
                                                                    alt="After">
                                                                <div class="img-popup">
                                                                    <img src="{{ $imageUrl }}" alt="After Image">
                                                                </div>
                                                                <small class="d-block text-center mt-1" style="font-size: 0.7rem;">A</small>
                                                            </div>
                                                            @endforeach
                                                        @endif
                                                        
                                                        @if(empty($finding->remarks_image_urls) && empty($finding->image_after_urls) && $finding->remarks_image)
                                                            <div class="img-thumbnail-container">
                                                                <img src="{{ asset('storage/maintenance_findings/'.$finding->remarks_image) }}" 
                                                                    class="img-thumbnail"
                                                                    alt="Before">
                                                                <div class="img-popup">
                                                                    <img src="{{ asset('storage/maintenance_findings/'.$finding->remarks_image) }}" alt="Before Image">
                                                                </div>
                                                                <small class="d-block text-center mt-1" style="font-size: 0.7rem;">B</small>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Finding Modal -->
<div class="modal fade modal-smaller" id="editFindingModal" tabindex="-1" aria-labelledby="editFindingModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white py-2">
                <h6 class="modal-title mb-0" id="editFindingModalLabel">Edit Finding</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editFindingForm" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-2">
                        <label for="edit_remarks" class="form-label small">Remarks</label>
                        <textarea class="form-control form-control-sm" id="edit_remarks" name="remarks" rows="2" required></textarea>
                    </div>
                    <div class="mb-2">
                        <label for="edit_action" class="form-label small">Action</label>
                        <input type="text" class="form-control form-control-sm" id="edit_action" name="action" required>
                    </div>
                    <div class="mb-2">
                        <label for="edit_recommendation" class="form-label small">Recommendation</label>
                        <select class="form-select form-select-sm" id="edit_recommendation" name="recommendation">
                            <option value="" selected disabled>Select Recommendation</option>
                            <option value="repair">Repair</option>
                            <option value="replace">Replace</option>
                            <option value="remove">Remove</option>
                            <option value="none">None Required</option>
                        </select>
                    </div>
                    <div class="mb-2">
                        <label for="edit_image_after" class="form-label small">After Image (Optional)</label>
                        <input type="file" class="form-control form-control-sm" id="edit_image_after" name="image_after" accept="image/*">
                        <small class="text-muted">Upload image showing completed work</small>
                    </div>
                    <div class="mb-2 form-check">
                        <input type="checkbox" class="form-check-input" id="edit_markClosed" name="markClosed">
                        <label class="form-check-label small" for="edit_markClosed">Mark as Closed</label>
                    </div>
                    <div id="currentImagesContainer" class="d-flex gap-2 mb-2"></div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-sm">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>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script>
$(document).ready(function() {
    // Initialize Bootstrap tabs
    $('#findingsTab a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    // Handle edit button click
    $(document).on('click', '.edit-finding-btn', function() {
        const findingId = $(this).data('finding-id');
        const remarks = $(this).data('remarks');
        const action = $(this).data('action');
        const recommendation = $(this).data('recommendation');
        const status = $(this).data('status');
        
        $('#edit_remarks').val(remarks);
        $('#edit_action').val(action);
        $('#edit_recommendation').val(recommendation);
        $('#edit_markClosed').prop('checked', status === 'closed');
        $('#editFindingForm').attr('action', '/findings/' + findingId);
        
        $('#currentImagesContainer').empty();
        
        const row = $(this).closest('tr');
        const beforeImgSrc = row.find('td:nth-child(7) img:first').attr('src');
        if (beforeImgSrc) {
            $('#currentImagesContainer').append(`
                <div class="text-center">
                    <img src="${beforeImgSrc}" 
                         class="img-thumbnail" 
                         alt="Current Before">
                    <div class="mt-1 small">Before</div>
                </div>
            `);
        }
        
        const afterImgSrc = row.find('td:nth-child(7) img:last').attr('src');
        if (afterImgSrc && afterImgSrc !== beforeImgSrc) {
            $('#currentImagesContainer').append(`
                <div class="text-center">
                    <img src="${afterImgSrc}" 
                         class="img-thumbnail" 
                         alt="Current After">
                    <div class="mt-1 small">After</div>
                </div>
            `);
        }
    });

    // Form validation for image when closing
    $('#editFindingForm').on('submit', function(e) {
        if ($('#edit_markClosed').is(':checked') && $('#edit_image_after').val() === '') {
            e.preventDefault();
            alert('Please upload an "After Image" when closing a finding.');
            $('#edit_image_after').focus();
        }
    });

});
</script>
@endpush