@include('frontend.header')
@include('frontend.navbar')

<section class="soft-bg-section px-4 sm:px-6 bg-[#F4F1E8] text-base" style="padding-top: 8.5rem; padding-bottom: 5rem;">
    <div class="max-w-5xl mx-auto">
        <a href="{{ route('home') }}#certifications" class="inline-flex items-center text-sm font-bold text-[#D98E28] mb-6">&lt;- Back to quality reports</a>

        <div class="bg-[#0A2615] text-white rounded-3xl p-6 sm:p-10 mb-6">
            <span class="text-xs uppercase tracking-wider text-amber-400 font-bold">Batch {{ $batch->batch_number }}</span>
            <h1 class="serif-title text-4xl sm:text-5xl leading-tight mt-3 mb-4">{{ $batch->title ?: $batch->productLabel() }}</h1>
            <div class="grid sm:grid-cols-3 gap-3">
                <div class="rounded-2xl bg-white/10 border border-white/10 p-4">
                    <div class="text-xs uppercase tracking-wider text-gray-300">Product</div>
                    <div class="font-bold mt-1">{{ $batch->productLabel() }}</div>
                </div>
                <div class="rounded-2xl bg-white/10 border border-white/10 p-4">
                    <div class="text-xs uppercase tracking-wider text-gray-300">Available Quantity</div>
                    <div class="font-bold mt-1">{{ number_format((float) $batch->remaining_quantity, 2) }} {{ $batch->quantity_unit }}</div>
                </div>
                <div class="rounded-2xl bg-white/10 border border-white/10 p-4">
                    <div class="text-xs uppercase tracking-wider text-gray-300">Production Date</div>
                    <div class="font-bold mt-1">{{ optional($batch->production_date)->format('d M Y') ?: 'Not specified' }}</div>
                </div>
            </div>
        </div>

        <div class="grid gap-4">
            @forelse ($batch->activeLabReports as $report)
                <article class="bg-white border border-[#E5DDCF] rounded-2xl p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div>
                        <div class="text-xs uppercase tracking-wider font-bold text-[#D98E28]">{{ $report->report_type }}</div>
                        <h2 class="serif-title text-2xl text-[#0d1f14] mt-1 mb-1">{{ $report->title }}</h2>
                        <p class="text-sm text-gray-600 mb-0">
                            {{ $report->laboratory_name ?: 'Laboratory not specified' }}
                            @if ($report->tested_at)
                                - Tested {{ $report->tested_at->format('d M Y') }}
                            @endif
                        </p>
                    </div>
                    <span class="inline-flex items-center bg-[#E2EBE2] text-[#2C5234] px-5 py-2.5 rounded-full text-xs font-bold">Active Report</span>
                </article>
            @empty
                <div class="bg-white border border-[#E5DDCF] rounded-2xl p-6 text-center">
                    <div class="font-bold text-[#0d1f14]">No active reports for this batch</div>
                </div>
            @endforelse
        </div>
    </div>
</section>

@include('frontend.footer')
@include('frontend.floating-whatsapp')
@include('frontend.scripts')