@extends('layouts.app')
@section('title', __('reports.title'))

@push('styles')
<style>
    .kpi { border:0; border-radius:1rem; background:#fff; position:relative; overflow:hidden; height:100%; }
    .kpi::before { content:""; position:absolute; inset-inline-start:0; inset-block:0; width:5px; background:var(--accent,#0d2b45); }
    .kpi .k-val { font-size:1.45rem; font-weight:800; color:var(--brand-navy); line-height:1; }
    .kpi .k-lbl { font-size:.78rem; color:#7a8699; font-weight:600; }
    .kpi .k-ico { width:44px;height:44px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem; }
    @media (max-width:575.98px){ .kpi .k-val{ font-size:1.15rem; } }
    .preset-btn.active { background:var(--brand-navy); color:#fff; border-color:var(--brand-navy); }

    @media print {
        .app-sidebar, .app-navbar, .reports-toolbar, .sidebar-backdrop { display:none !important; }
        .app-content { margin:0 !important; }
        .card { box-shadow:none !important; border:1px solid #e5e9f0 !important; break-inside:avoid; }
        a[href]::after { content:""; }
    }
</style>
@endpush

@section('content')
@php
    $fromStr = $from?->format('Y-m-d');
    $toStr   = $to?->format('Y-m-d');
    $periodLabel = ($fromStr || $toStr)
        ? (($fromStr ?? '…') . ' → ' . ($toStr ?? '…'))
        : __('reports.all_time');

    $money = fn ($n) => \App\Support\Money::html($n, 0);

    $kpis = [
        ['label'=>__('reports.total'),            'val'=>number_format($stats['total']),                     'icon'=>'folder2-open',      'c'=>'#0d2b45'],
        ['label'=>__('reports.approved'),         'val'=>number_format($stats['approved']),                  'icon'=>'check2-circle',     'c'=>'#198754'],
        ['label'=>__('reports.rejected'),         'val'=>number_format($stats['rejected']),                  'icon'=>'x-circle',          'c'=>'#dc3545'],
        ['label'=>__('reports.approval_rate'),    'val'=>$stats['approval_rate'].'%',                        'icon'=>'graph-up-arrow',    'c'=>'#0e9499'],
        ['label'=>__('reports.under_review'),     'val'=>number_format($stats['under_review']),              'icon'=>'hourglass-split',   'c'=>'#fd7e14'],
        ['label'=>__('reports.sent_to_funding'),  'val'=>number_format($stats['sent_to_funding']),           'icon'=>'bank',              'c'=>'#6f42c1'],
        ['label'=>__('reports.total_amount'),     'val'=>$money($stats['total_amount']),                     'icon'=>'cash-stack',        'c'=>'#0d2b45'],
        ['label'=>__('reports.approved_amount'),  'val'=>$money($stats['approved_amount']),                  'icon'=>'cash-coin',         'c'=>'#198754'],
        ['label'=>__('reports.avg_ticket'),       'val'=>$money($stats['avg_ticket']),                       'icon'=>'receipt',           'c'=>'#0e9499'],
        ['label'=>__('reports.funding_efficiency'),'val'=>$stats['funding_efficiency'].'%',                  'icon'=>'pie-chart',         'c'=>'#6f42c1'],
        ['label'=>__('reports.avg_closing'),      'val'=>($stats['avg_closing_days'] ?? '—').' '.__('reports.days'), 'icon'=>'clock-history','c'=>'#fd7e14'],
        ['label'=>__('reports.missing'),          'val'=>number_format($stats['missing']),                   'icon'=>'exclamation-triangle','c'=>'#6c757d'],
    ];
@endphp

{{-- ===== Toolbar: period filter + export/print ===== --}}
<div class="card filter-card shadow-sm mb-3 reports-toolbar">
    <div class="card-body">
        <form method="GET" action="{{ route('reports.index') }}" id="report-filter">
            <div class="row g-2 align-items-end">
                <div class="col-6 col-md-3">
                    <label class="form-label small fw-semibold text-muted mb-1">{{ __('reports.date_from') }}</label>
                    <input type="date" name="date_from" id="date_from" class="form-control form-control-sm" value="{{ $fromStr }}">
                </div>
                <div class="col-6 col-md-3">
                    <label class="form-label small fw-semibold text-muted mb-1">{{ __('reports.date_to') }}</label>
                    <input type="date" name="date_to" id="date_to" class="form-control form-control-sm" value="{{ $toStr }}">
                </div>
                <div class="col-12 col-md-6 d-flex flex-wrap gap-1 justify-content-md-end">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-funnel"></i> {{ __('reports.apply') }}</button>
                    <a href="{{ route('reports.index') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-counterclockwise"></i> {{ __('reports.reset') }}</a>
                    <a href="{{ route('reports.export', request()->only('date_from','date_to')) }}" class="btn btn-outline-success btn-sm"><i class="bi bi-filetype-csv"></i> {{ __('reports.export_csv') }}</a>
                    <button type="button" class="btn btn-outline-dark btn-sm" onclick="window.print()"><i class="bi bi-printer"></i> {{ __('reports.print') }}</button>
                </div>
            </div>
            <div class="d-flex flex-wrap gap-1 mt-2">
                @foreach(['today','this_week','this_month','this_quarter','this_year','all'] as $preset)
                    <button type="button" class="btn btn-outline-secondary btn-sm preset-btn" data-preset="{{ $preset }}">
                        {{ __('reports.presets.' . $preset) }}
                    </button>
                @endforeach
            </div>
        </form>
        <div class="small text-muted mt-2">
            <i class="bi bi-calendar-range me-1"></i> {{ __('reports.showing_period') }}: <strong>{{ $periodLabel }}</strong>
        </div>
    </div>
</div>

{{-- ===== KPI cards ===== --}}
<div class="row g-2 g-md-3 mb-4">
    @foreach($kpis as $k)
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card kpi shadow-sm" style="--accent:{{ $k['c'] }}">
                <div class="card-body d-flex align-items-center justify-content-between gap-2 p-3">
                    <div class="overflow-hidden">
                        <div class="k-val text-truncate">{!! $k['val'] !!}</div>
                        <div class="k-lbl text-truncate">{{ $k['label'] }}</div>
                    </div>
                    <div class="k-ico" style="background:{{ $k['c'] }}1a;color:{{ $k['c'] }}"><i class="bi bi-{{ $k['icon'] }}"></i></div>
                </div>
            </div>
        </div>
    @endforeach
</div>

{{-- ===== Monthly trend ===== --}}
<div class="card chart-card shadow-sm mb-3">
    <div class="card-header"><i class="bi bi-graph-up me-1"></i> {{ __('reports.monthly_trend') }}</div>
    <div class="card-body"><div class="chart-box" style="height:300px"><canvas id="chart-monthly"></canvas></div></div>
</div>

{{-- ===== Breakdown charts ===== --}}
<div class="row g-3 mb-3">
    <div class="col-12 col-lg-5">
        <div class="card chart-card shadow-sm h-100">
            <div class="card-header"><i class="bi bi-pie-chart me-1"></i> {{ __('reports.by_status') }}</div>
            <div class="card-body"><div class="chart-box">@if($byStatus->isEmpty())<div class="text-center text-muted py-5">{{ __('reports.no_data') }}</div>@else<canvas id="chart-status"></canvas>@endif</div></div>
        </div>
    </div>
    <div class="col-12 col-lg-7">
        <div class="card chart-card shadow-sm h-100">
            <div class="card-header"><i class="bi bi-bar-chart me-1"></i> {{ __('reports.by_product') }}</div>
            <div class="card-body"><div class="chart-box">@if($byProduct->isEmpty())<div class="text-center text-muted py-5">{{ __('reports.no_data') }}</div>@else<canvas id="chart-product"></canvas>@endif</div></div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-12 col-lg-7">
        <div class="card chart-card shadow-sm h-100">
            <div class="card-header"><i class="bi bi-bank me-1"></i> {{ __('reports.by_funding') }}</div>
            <div class="card-body"><div class="chart-box">@if($byFunding->isEmpty())<div class="text-center text-muted py-5">{{ __('reports.no_data') }}</div>@else<canvas id="chart-funding"></canvas>@endif</div></div>
        </div>
    </div>
    <div class="col-12 col-lg-5">
        <div class="card chart-card shadow-sm h-100">
            <div class="card-header"><i class="bi bi-megaphone me-1"></i> {{ __('reports.by_source') }}</div>
            <div class="card-body"><div class="chart-box">@if($bySource->isEmpty())<div class="text-center text-muted py-5">{{ __('reports.no_data') }}</div>@else<canvas id="chart-source"></canvas>@endif</div></div>
        </div>
    </div>
</div>

{{-- ===== Officer table ===== --}}
<div class="card chart-card shadow-sm mt-3">
    <div class="card-header"><i class="bi bi-people me-1"></i> {{ __('reports.by_officer') }}</div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover align-middle w-100 mb-0" id="officer-table">
                <thead class="table-light"><tr>
                    <th>{{ __('applications.columns.assignee') }}</th>
                    <th class="text-end">{{ __('reports.count') }}</th>
                    <th class="text-end">{{ __('reports.amount') }}</th>
                </tr></thead>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
const BS = { primary:'#0d2b45',success:'#198754',danger:'#dc3545',warning:'#ffc107',info:'#16b8be',teal:'#16b8be',secondary:'#6c757d',dark:'#212529',light:'#adb5bd' };
const PALETTE = ['#0d2b45','#16b8be','#198754','#fd7e14','#6f42c1','#dc3545','#0dcaf0','#6c757d','#ffc107','#143a5c'];

const statusData  = @json($byStatus);
const productData  = @json($byProduct);
const fundingData = @json($byFunding);
const sourceData  = @json($bySource);
const monthlyData = @json($monthly);

Chart.defaults.maintainAspectRatio = false;
Chart.defaults.responsive = true;
Chart.defaults.font.family = getComputedStyle(document.body).fontFamily;
Chart.defaults.color = '#6b7a8d';

// Monthly trend — bars (count) + line (amount on 2nd axis)
new Chart(document.getElementById('chart-monthly'), {
    data: {
        labels: monthlyData.map(m => m.label),
        datasets: [
            { type:'bar', label:'{{ __('reports.count') }}', data: monthlyData.map(m=>m.count), backgroundColor:'rgba(22,184,190,.65)', borderRadius:6, yAxisID:'y', order:2 },
            { type:'line', label:'{{ __('reports.total_amount') }}', data: monthlyData.map(m=>m.amount), borderColor:BS.primary, backgroundColor:'rgba(13,43,69,.08)', borderWidth:3, tension:.4, pointRadius:3, fill:true, yAxisID:'y1', order:1 },
        ]
    },
    options: {
        interaction:{ mode:'index', intersect:false },
        plugins:{ legend:{ position:'bottom' } },
        scales:{
            y:{ beginAtZero:true, position:'{{ app()->getLocale()==='en' ? 'left' : 'right' }}', ticks:{ precision:0 }, grid:{ color:'#eef1f6' }, title:{ display:true, text:'{{ __('reports.count') }}' } },
            y1:{ beginAtZero:true, position:'{{ app()->getLocale()==='en' ? 'right' : 'left' }}', grid:{ display:false }, title:{ display:true, text:'{{ __('reports.amount') }}' } },
            x:{ grid:{ display:false } },
        }
    }
});

if (statusData.length) new Chart(document.getElementById('chart-status'), {
    type:'doughnut',
    data:{ labels: statusData.map(s=>s.label), datasets:[{ data: statusData.map(s=>s.total), backgroundColor: statusData.map(s=>BS[s.color]||BS.secondary), borderWidth:2, borderColor:'#fff' }] },
    options:{ cutout:'60%', plugins:{ legend:{ position:'bottom', labels:{ boxWidth:12, padding:10, font:{ size:11 } } } } }
});

if (productData.length) new Chart(document.getElementById('chart-product'), {
    type:'bar',
    data:{ labels: productData.map(p=>p.label), datasets:[{ data: productData.map(p=>p.total), backgroundColor:BS.teal, borderRadius:6, maxBarThickness:34 }] },
    options:{ plugins:{ legend:{ display:false } }, scales:{ y:{ beginAtZero:true, ticks:{ precision:0 }, grid:{ color:'#eef1f6' } }, x:{ grid:{ display:false } } } }
});

if (fundingData.length) new Chart(document.getElementById('chart-funding'), {
    type:'bar',
    data:{ labels: fundingData.map(f=>f.label), datasets:[{ data: fundingData.map(f=>f.total), backgroundColor:BS.primary, borderRadius:6, maxBarThickness:26 }] },
    options:{ indexAxis:'y', plugins:{ legend:{ display:false } }, scales:{ x:{ beginAtZero:true, ticks:{ precision:0 }, grid:{ color:'#eef1f6' } }, y:{ grid:{ display:false } } } }
});

if (sourceData.length) new Chart(document.getElementById('chart-source'), {
    type:'doughnut',
    data:{ labels: sourceData.map(s=>s.label), datasets:[{ data: sourceData.map(s=>s.total), backgroundColor: sourceData.map((_,i)=>PALETTE[i%PALETTE.length]), borderWidth:2, borderColor:'#fff' }] },
    options:{ cutout:'60%', plugins:{ legend:{ position:'bottom', labels:{ boxWidth:12, padding:10, font:{ size:11 } } } } }
});

$(function () {
    $('#officer-table').DataTable(Object.assign({}, window.dtDefaults, {
        serverSide: false,
        ajax: { url: "{{ route('reports.data', request()->only('date_from','date_to')) }}", dataSrc: 'data' },
        columns: [
            { data: 'officer' },
            { data: 'total', className:'text-end' },
            { data: 'amount', className:'text-end' },
        ],
        order: [[1, 'desc']],
    }));
});

// ---- Date presets ----
(function () {
    const pad = n => String(n).padStart(2,'0');
    const fmt = d => d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate());
    const form = document.getElementById('report-filter');
    document.querySelectorAll('.preset-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const now = new Date();
            let from = null, to = new Date();
            switch (this.dataset.preset) {
                case 'today':        from = new Date(); break;
                case 'this_week':    { const d = new Date(); const day = (d.getDay()+6)%7; from = new Date(d.setDate(d.getDate()-day)); break; }
                case 'this_month':   from = new Date(now.getFullYear(), now.getMonth(), 1); break;
                case 'this_quarter': from = new Date(now.getFullYear(), Math.floor(now.getMonth()/3)*3, 1); break;
                case 'this_year':    from = new Date(now.getFullYear(), 0, 1); break;
                case 'all':          from = null; to = null; break;
            }
            document.getElementById('date_from').value = from ? fmt(from) : '';
            document.getElementById('date_to').value   = to ? fmt(to) : '';
            form.submit();
        });
    });
})();
</script>
@endpush