@extends('layouts.training_centre_layout')

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

@php
function statusBadge($status) {
    return match($status) {
        'approved' => 'bg-success-subtle text-success-emphasis',
        'approved_with_conditions' => 'bg-info-subtle text-info-emphasis',
        'rejected' => 'bg-danger-subtle text-danger-emphasis',
        'requires_re_inspection' => 'bg-warning-subtle text-warning-emphasis',
        default => 'bg-secondary-subtle text-secondary-emphasis'
    };
}

function statusLabel($status) {
    return str_replace('_', ' ', strtoupper($status));
}
@endphp


<div class="container-fluid"> <!-- Changed to container-fluid for better grid usage -->
    <!-- Inspection Cards Grid Wrapper -->
    <!-- row-cols-1 (Mobile/Tablet) -> row-cols-xl-3 (Desktop) -->
    <div class="row row-cols-1 row-cols-xl-3 g-4"> 
    
        <!-- Card 1: Completed Inspection (2025-2026) -->
        @if ($inspectionDetails->count() > 0)
            @foreach ($inspectionDetails as $details)
                @php
                    $yearStart = \Carbon\Carbon::parse($details->inspection_date)->year;
                    $yearEnd = $yearStart + 1;
                @endphp
                <div class="col">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-start mb-4 pb-3 border-bottom">
                                <div>
                                    <h3 class="h6 text-uppercase text-secondary fw-bold mb-1">Inspection Year</h3>
                                    <span class="h5 fw-bold text-dark">{{ $yearStart }} - {{ $yearEnd }}</span>
                                </div>
                                <span class="badge rounded-pill px-3 py-2 {{ statusBadge($details->overall_status) }}">{{ statusLabel($details->overall_status) }}</span>
                            </div>
                            
                            <!-- Inspection Info Section -->
                            <div class="mb-4">
                                <h6 class="fw-bold text-secondary mb-3 border-start border-primary border-4 ps-3">Details</h6>

                                <!-- Inner details stacked for narrow grid card -->
                                <div class="row g-3">
                                    <div class="col-12">
                                        <div class="d-flex justify-content-between border-bottom pb-2">
                                            <small class="text-muted fw-semibold">Date</small>
                                            <span class="fw-bold text-dark">{{ \Carbon\Carbon::parse($details->inspection_date)->format('d-M-Y') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="d-flex justify-content-between border-bottom pb-2">
                                            <small class="text-muted fw-semibold">Inspector</small>
                                            <span class="fw-bold text-dark">{{ $details->inspector_name }}</span>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="d-flex justify-content-between border-bottom pb-2">
                                            <small class="text-muted fw-semibold">Result</small>
                                            <span class="fw-bold text-dark">{{ statusLabel($details->overall_status) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Remarks/Recommendations Section -->
                            <div class="d-flex flex-column gap-3">
                                @if ($details->final_remarks)
                                <div>
                                    <small class="text-uppercase text-muted fw-semibold d-block mb-1">Inspector Remark</small>
                                    <div class="p-3 bg-body-tertiary border rounded border-start border-4 border-primary small">
                                        {{ $details->final_remarks }}
                                    </div>
                                </div>
                                @endif
                                @if ($details->recommendations)
                                <div>
                                    <small class="text-uppercase text-muted fw-semibold d-block mb-1">Recommendation</small>
                                    <div class="p-3 bg-body-tertiary border rounded border-start border-4 border-warning small">
                                        {{ $details->recommendations }}
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        @endif

    </div> 
    <!-- End Inspection Cards Grid -->

</div>

@endsection

@section('pages-scripts')

@endsection