@extends('layouts.print-preview', [
    'previewTitle' => __('In-sight Reports — Print Preview'),
    'previewPrintLabel' => __('Print report'),
    'previewBackUrl' => route('custom-reports.index'),
    'previewBackLabel' => __('Back to In-sight Reports'),
    'previewBodyClass' => 'ir-preview-body',
    'previewStylesPartial' => 'custom-reports.print.partials.styles',
])

@section('content')
@php
    $periodLabel = \Carbon\Carbon::parse($filters['date_from'])->format('d M Y')
        .' — '.\Carbon\Carbon::parse($filters['date_to'])->format('d M Y');
@endphp

<div class="ir-preview-sheet">
    <header class="ir-hero">
        <div class="ir-hero-kicker">{{ __('M&E Cell') }} · {{ __('P&D Department') }} · {{ __('Government of Sindh') }}</div>
        <h1 class="ir-hero-title">{{ __('In-sight Reports') }}</h1>
        <p class="ir-hero-subtitle">{{ __('Comprehensive monitoring analytics — visits, reports, assessments, regions, sectors, officers & trends') }}</p>
        <div class="ir-hero-meta">
            <div class="ir-hero-meta-card">
                <div class="ir-hero-meta-label">{{ __('Period') }}</div>
                <div class="ir-hero-meta-value ir-hero-meta-value--mono">{{ $periodLabel }}</div>
            </div>
            <div class="ir-hero-meta-card">
                <div class="ir-hero-meta-label">{{ __('Scope') }}</div>
                <div class="ir-hero-meta-value" id="irPrintScope">{{ $initialData['filter_summary'] ?? __('All data') }}</div>
            </div>
            <div class="ir-hero-meta-card">
                <div class="ir-hero-meta-label">{{ __('Reports in Scope') }}</div>
                <div class="ir-hero-meta-value" id="irPrintReportCount">{{ count($initialData['reports'] ?? []) }}</div>
            </div>
            <div class="ir-hero-meta-card">
                <div class="ir-hero-meta-label">{{ __('Generated') }}</div>
                <div class="ir-hero-meta-value ir-hero-meta-value--mono">{{ now()->format('d M Y, H:i') }}</div>
            </div>
        </div>
    </header>

    <div class="ir-preview-main mec-insight-page">
        <div class="alert alert-info py-2 small d-none mb-3" id="filterScopeBanner"></div>
        <div class="mec-insight-scheme-banner mb-3 d-none" id="schemeBanner"></div>

        <div class="mec-insight-print-stack" id="mecInsightPrintStack">
            @include('custom-reports.partials.panels')
        </div>
    </div>
</div>

@include('partials.chart-js-bridge')
<script>
window.MEC_INSIGHT = {
    printMode: true,
    initialData: @json($initialData),
    applyUrl: @json(route('custom-reports.apply')),
    csrf: @json(csrf_token()),
    defaultFrom: @json($filters['date_from']),
    defaultTo: @json($filters['date_to']),
    sectors: @json($filterOptions['sectors']),
    schemes: @json($filterOptions['schemes']),
    labels: {
        allRegions: @json(__('All Regions')),
        allOfficers: @json(__('All Officers')),
        allSectors: @json(__('All Sectors')),
        allSubSectors: @json(__('All Sub-Sectors')),
        allData: @json(__('All data')),
        satisfactory: @json(__('Satisfactory')),
        unsatisfactory: @json(__('Un-Satisfactory')),
        inProcess: @json(__('In Process')),
        published: @json(__('Published')),
        approved: @json(__('Approved')),
        declined: @json(__('Declined')),
    }
};
</script>
<script src="{{ asset('js/mec-insight-reports.js') }}"></script>
@endsection