@extends('layouts.app_layout')

@section('content')
<!-- [ Page Header ] start -->
<x-page-header title="{{ $pageTitle ?? 'Inspection Details' }}" :backButton="true" />
<!-- [ Page Header ] end -->

<div class="row">
    <div class="col-12">
        <!-- Latest Inspection Overview Card -->
        <div class="card mb-4">
            <div class="card-header py-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Inspection Report Overview</h5>
                    <div class="d-flex align-items-center gap-3">
                        <span class="badge bg-{{ $inspection['status_class'] ?? 'primary' }} fs-6">
                            {{ $inspection['overall_status'] ?? 'Under Review' }}
                        </span>
                        @if(isset($inspection['id']))
                        <small class="text-muted">#{{ $inspection['id'] }}</small>
                        @endif
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <strong>Center Name:</strong>
                        <p class="mb-0">{{ $inspection['centre_name'] ?? 'N/A' }}</p>
                    </div>
                    <div class="col-md-3">
                        <strong>Inspector:</strong>
                        <p class="mb-0">{{ $inspection['inspector_name'] ?? 'N/A' }}</p>
                    </div>
                    <div class="col-md-3">
                        <strong>Inspection Date:</strong>
                        <p class="mb-0">{{ $inspection['inspection_date'] ?? 'N/A' }}</p>
                    </div>
                    <div class="col-md-3">
                        <strong>Submitted On:</strong>
                        <p class="mb-0">{{ $inspection['created_at'] ?? 'N/A' }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Inspection Checklist Results -->
        <div class="card mb-4">
            <div class="card-header py-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Checklist Results</h5>
                    <div class="inspection-summary">
                        @php
                        $totalItems = count($inspection['checklist'] ?? []);
                        $passedItems = collect($inspection['checklist'] ?? [])->sum();
                        $percentage = $totalItems > 0 ? round(($passedItems / $totalItems) * 100) : 0;
                        @endphp
                        <span class="badge bg-info">{{ $passedItems }}/{{ $totalItems }} Passed</span>
                        <span class="badge bg-{{ $percentage >= 80 ? 'success' : ($percentage >= 60 ? 'warning' : 'danger') }}">
                            {{ $percentage }}%
                        </span>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="inspection-results">
                    @foreach($inspection['checklist'] ?? [] as $key => $isChecked)
                    <div class="inspection-result-item {{ $isChecked ? 'passed' : 'failed' }}">
                        <div class="d-flex align-items-start gap-3 p-3">
                            <div class="status-icon">
                                @if($isChecked)
                                <i class="fas fa-check-circle text-success fs-4"></i>
                                @else
                                <i class="fas fa-times-circle text-danger fs-4"></i>
                                @endif
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="mb-1">{{ $loop->iteration }}. {{ $inspection['checklist_items'][$key]['title'] ?? ucfirst(str_replace('_',' ',$key)) }}</h6>
                                <p class="text-muted mb-2 small">
                                    {{ $inspection['checklist_items'][$key]['description'] ?? 'No description available.' }}
                                </p>
                                @if(!empty($inspection['remarks'][$key]))
                                <div class="remarks">
                                    <strong>Remarks:</strong>
                                    <p class="mb-0">{{ $inspection['remarks'][$key] }}</p>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Final Assessment -->
        <div class="card mb-4">
            <div class="card-header py-3">
                <h5 class="mb-0">Final Assessment</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-3">
                            <strong>Overall Status:</strong>
                            <span class="badge bg-{{ $inspection['status_class'] ?? 'primary' }} ms-2 fs-6">
                                {{ $inspection['overall_status'] ?? 'Under Review' }}
                            </span>
                        </div>

                        @if(!empty($inspection['final_remarks']))
                        <div class="mb-3">
                            <strong>Final Remarks:</strong>
                            <div class="p-3 bg-light rounded mt-2">
                                {{ $inspection['final_remarks'] }}
                            </div>
                        </div>
                        @endif

                        @if(!empty($inspection['recommendations']))
                        <div class="mb-3">
                            <strong>Recommendations:</strong>
                            <div class="p-3 bg-light rounded mt-2">
                                {{ $inspection['recommendations'] }}
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>


        <!-- Action Buttons -->
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        @if(isset($inspection['pdf_url']))
                        <a href="{{ $inspection['pdf_url'] }}" class="btn btn-outline-primary" target="_blank">
                            <i class="fas fa-download"></i> Download PDF Report
                        </a>
                        @endif
                    </div>
                    <div>
                        <button type="button" class="btn btn-secondary" onclick="window.history.back();">
                            <i class="fas fa-arrow-left"></i> Back
                        </button>
                        <button type="button" class="btn btn-primary" onclick="window.print();">
                            <i class="fas fa-print"></i> Print
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('pages-scripts')
<script>
    $(document).ready(function() {
        // Highlight failed items
        $('.inspection-result-item.failed').css('border-left', '4px solid #dc3545');
        $('.inspection-result-item.passed').css('border-left', '4px solid #28a745');
    });
</script>
@endsection