@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? 'Residuals',
        $subTitle ?? 'Residuals Analytics',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@extends('admin.layouts.layout', $headerOption)

@section('content')
<div class="container-fluid mt-4">

    {{-- Filter Bar --}}
    <div class="project-box p-3 mb-3">
        <div class="d-flex flex-wrap align-items-end gap-3">
            <div class="project-form mb-0" style="width: 170px;">
                <label class="small">Group</label>
                <select class="form-select select2 no-search" id="filterGroup" name="group_id">
                    <option value="">All Groups</option>
                    @foreach($groups ?? [] as $gId => $gName)
                        <option value="{{ $gName }}">{{ $gName }}</option>
                    @endforeach
                </select>
            </div>
            <div class="project-form mb-0" style="width: 180px;">
                <label class="small">Agent</label>
                <select class="form-select select2" id="filterAgent" name="user_id">
                    <option value="">All Agents</option>
                    @foreach($agents ?? [] as $agent)
                        <option value="{{ $agent->id }}">{{ $agent->first_name }} {{ $agent->last_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="project-form mb-0" style="width: 130px;">
                <label class="small">Start Month</label>
                <select class="form-select select2 no-search" id="filterStartMonth" name="start_month">
                    @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" {{ ($startMonth ?? 1) == $m ? 'selected' : '' }}>{{ date('F', mktime(0,0,0,$m,1)) }}</option>
                    @endfor
                </select>
            </div>
            <div class="project-form mb-0" style="width: 90px;">
                <label class="small">Start Year</label>
                <select class="form-select select2 no-search" id="filterStartYear" name="start_year">
                    @for($y = date('Y') - 5; $y <= date('Y') + 1; $y++)
                        <option value="{{ $y }}" {{ ($startYear ?? date('Y') - 1) == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endfor
                </select>
            </div>
            <div class="project-form mb-0" style="width: 130px;">
                <label class="small">End Month</label>
                <select class="form-select select2 no-search" id="filterEndMonth" name="end_month">
                    @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" {{ ($endMonth ?? date('n')) == $m ? 'selected' : '' }}>{{ date('F', mktime(0,0,0,$m,1)) }}</option>
                    @endfor
                </select>
            </div>
            <div class="project-form mb-0" style="width: 90px;">
                <label class="small">End Year</label>
                <select class="form-select select2 no-search" id="filterEndYear" name="end_year">
                    @for($y = date('Y') - 5; $y <= date('Y') + 1; $y++)
                        <option value="{{ $y }}" {{ ($endYear ?? date('Y')) == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endfor
                </select>
            </div>
            <div>
                <button type="button" class="btn green-btn-inner" id="btnApplyFilters">
                    <i class="bx bx-filter-alt me-1"></i> Apply
                </button>
            </div>
            <div>
                <a href="{{ route('residuals.index') }}" class="btn btn-outline-secondary">
                    <i class="bx bx-arrow-back me-1"></i> Back to Residuals
                </a>
            </div>
        </div>
    </div>

    {{-- 1. Profitability Analytics --}}
    <div class="project-box p-3 mb-3">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h5 class="mb-0 font-size-16"><i class="bx bx-bar-chart-alt-2 me-1 text-primary"></i> Profitability Analytics</h5>
            <button type="button" class="btn btn-sm btn-outline-secondary btn-show-breakdown" data-chart="profitability">
                <i class="bx bx-spreadsheet me-1"></i> Show Portfolio Metric Breakdown
            </button>
        </div>
        <div id="chart-profitability" style="min-height: 350px;"></div>
    </div>

    {{-- 2. Processing Merchants Analytics --}}
    <div class="project-box p-3 mb-3">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h5 class="mb-0 font-size-16"><i class="bx bx-store me-1 text-primary"></i> Processing Merchants Analytics</h5>
            <button type="button" class="btn btn-sm btn-outline-secondary btn-show-breakdown" data-chart="processing">
                <i class="bx bx-spreadsheet me-1"></i> Show Portfolio Metric Breakdown
            </button>
        </div>
        <div id="chart-processing" style="min-height: 350px;"></div>
    </div>

    {{-- 3. Financial Key Indicators --}}
    <div class="project-box p-3 mb-3">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h5 class="mb-0 font-size-16"><i class="bx bx-trending-up me-1 text-primary"></i> Financial Key Indicators</h5>
            <button type="button" class="btn btn-sm btn-outline-secondary btn-show-breakdown" data-chart="financial">
                <i class="bx bx-spreadsheet me-1"></i> Show Portfolio Metric Breakdown
            </button>
        </div>
        <div id="chart-financial" style="min-height: 350px;"></div>
    </div>

    {{-- 4 & 5: Top Merchants (two columns) --}}
    <div class="row">
        <div class="col-lg-6">
            <div class="project-box p-3 mb-3">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h5 class="mb-0 font-size-16"><i class="bx bx-pie-chart-alt me-1 text-primary"></i> Top Merchants By Volume</h5>
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-show-breakdown" data-chart="top-volume">
                        <i class="bx bx-spreadsheet me-1"></i> Show Portfolio Metric Breakdown
                    </button>
                </div>
                <div id="chart-top-volume" style="min-height: 350px;"></div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="project-box p-3 mb-3">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h5 class="mb-0 font-size-16"><i class="bx bx-pie-chart-alt-2 me-1 text-primary"></i> Top Merchants By Net Income</h5>
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-show-breakdown" data-chart="top-income">
                        <i class="bx bx-spreadsheet me-1"></i> Show Portfolio Metric Breakdown
                    </button>
                </div>
                <div id="chart-top-income" style="min-height: 350px;"></div>
            </div>
        </div>
    </div>

    {{-- 6. Geographic Distribution --}}
    <div class="project-box p-3 mb-3">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h5 class="mb-0 font-size-16"><i class="bx bx-map me-1 text-primary"></i> Merchant Distribution by Geographic States</h5>
            <button type="button" class="btn btn-sm btn-outline-secondary btn-show-breakdown" data-chart="geographic">
                <i class="bx bx-spreadsheet me-1"></i> Show Portfolio Metric Breakdown
            </button>
        </div>
        <div id="chart-geographic" style="min-height: 350px;"></div>
    </div>

    {{-- 7. Industry Analytics --}}
    <div class="project-box p-3 mb-3">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h5 class="mb-0 font-size-16"><i class="bx bx-buildings me-1 text-primary"></i> Industry Analytics</h5>
            <button type="button" class="btn btn-sm btn-outline-secondary btn-show-breakdown" data-chart="industry">
                <i class="bx bx-spreadsheet me-1"></i> Show Portfolio Metric Breakdown
            </button>
        </div>
        <div id="chart-industry" style="min-height: 350px;"></div>
    </div>

</div>
@endsection

@push('page_script')
<script>
window.ResidualsAnalyticsConfig = {
    csrf: '{{ csrf_token() }}',
    startMonth: {{ $startMonth ?? 1 }},
    startYear: {{ $startYear ?? (date('Y') - 1) }},
    endMonth: {{ $endMonth ?? date('n') }},
    endYear: {{ $endYear ?? date('Y') }},
    routes: {
        chartData: '{{ route("residuals.analytics.chart-data") }}',
        residualsIndex: '{{ route("residuals.index") }}',
    }
};
</script>
<script src="{{ asset('assets/js/residuals-analytics.js') }}?v={{ date('YmdHis') }}"></script>
@endpush