@php
    $exportYear = $selectedYear ?? (int) now()->format('Y');
    $exportBranch = $selectedBranch ?? null;
    $exportFrom = $fromDate ?? request('from_date', \Carbon\Carbon::create($exportYear, 1, 1)->toDateString());
    $exportTo = $toDate ?? request('to_date', now()->toDateString());
    $canSummary = $canViewSummary ?? App\Support\MscPermissions::canViewSummary(auth()->user());
    $userBranchId = auth()->user()->branch_id;
    $defaultBranch = $exportBranch ?: ($canViewAll ? null : $userBranchId);
    $exportService = app(App\Services\MscExportService::class);
    $monthsMatrix = $exportService->availableMonthsMatrix($exportYear);
    $defaultMonth = $defaultBranch
        ? ($exportService->defaultMonth((int) $defaultBranch, $exportYear) ?? (int) now()->format('n'))
        : (int) now()->format('n');
    $availableMonths = $defaultBranch
        ? $exportService->availableMonths((int) $defaultBranch, $exportYear)
        : [];
    $monthNames = collect(range(1, 12))
        ->mapWithKeys(fn ($m) => [$m => \Carbon\Carbon::create(null, $m, 1)->format('M')])
        ->all();
    $monthFullNames = collect(range(1, 12))
        ->mapWithKeys(fn ($m) => [$m => \Carbon\Carbon::create(null, $m, 1)->format('F')])
        ->all();
@endphp

<x-chm.card title="Download reports" class="mb-4 msc-download-card">
    <p class="text-muted small mb-3">
        Export MSC reports by month, by branch, or as a combined summary for a selected period.
        Downloads open in a new tab.
    </p>

    <ul class="nav nav-pills mb-3 msc-download-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#msc-dl-monthly" type="button">By month</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="pill" data-bs-target="#msc-dl-period" type="button">By period</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="pill" data-bs-target="#msc-dl-summary" type="button">Annual summary</button>
        </li>
        @if($canSummary)
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#msc-dl-combined" type="button">Combined (all branches)</button>
            </li>
        @endif
    </ul>

    <div class="tab-content">
        {{-- Monthly branch report --}}
        <div class="tab-pane fade show active" id="msc-dl-monthly">
            <form method="get" action="{{ route('msc.export.month') }}" target="_blank" class="row g-3 align-items-end" id="msc-monthly-export-form">
                <div class="col-md-4">
                    <label class="form-label">Branch <span class="text-danger">*</span></label>
                    <select name="branch_id" id="msc_month_branch" class="form-select chm-select" required data-placeholder="Select branch">
                        @if($canViewAll)
                            <option value="">Select branch</option>
                        @endif
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}" @selected((int) $defaultBranch === (int) $branch->id)>{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Year</label>
                    <select name="year" id="msc_month_year" class="form-select chm-select" data-placeholder="Select year">
                        @for($y = now()->year; $y >= now()->year - 5; $y--)
                            <option value="{{ $y }}" @selected($exportYear == $y)>{{ $y }}</option>
                        @endfor
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Month</label>
                    <select name="month" id="msc_month_month" class="form-select chm-select" data-placeholder="Select month">
                        @foreach(range(1, 12) as $m)
                            <option value="{{ $m }}" @selected($m == $defaultMonth) data-month="{{ $m }}">{{ \Carbon\Carbon::create(null, $m, 1)->format('F') }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-outline-secondary">
                        <i class="bx bx-download me-1"></i> PDF
                    </button>
                </div>
            </form>
            <p class="text-muted small mt-2 mb-0" id="msc-monthly-hint">
                Full MSC report for one branch and month (submitted reports only).
                @if($defaultBranch && $availableMonths)
                    Available for {{ $exportYear }}:
                    {{ collect($availableMonths)->map(fn ($m) => \Carbon\Carbon::create(null, $m, 1)->format('M'))->implode(', ') }}.
                @endif
            </p>
        </div>

        {{-- Period: list / bundle --}}
        <div class="tab-pane fade" id="msc-dl-period">
            <form id="msc-period-export-form" method="get" target="_blank" class="row g-3 align-items-end">
                @if($canViewAll)
                    <div class="col-md-3">
                        <label class="form-label">Branch</label>
                        <select name="branch_id" class="form-select chm-select" data-placeholder="All branches" data-allow-clear="true">
                            <option value=""></option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" @selected((int) $exportBranch === (int) $branch->id)>{{ $branch->name }}</option>
                            @endforeach
                        </select>
                    </div>
                @else
                    <input type="hidden" name="branch_id" value="{{ $userBranchId }}">
                @endif
                <div class="col-md-2">
                    <label class="form-label">From</label>
                    <input type="date" name="from_date" class="form-control" value="{{ $exportFrom }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">To</label>
                    <input type="date" name="to_date" class="form-control" value="{{ $exportTo }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select chm-select" data-placeholder="Submitted only">
                        <option value="submitted">Submitted</option>
                        <option value="">All statuses</option>
                        <option value="draft">Draft only</option>
                    </select>
                </div>
                <div class="col-auto d-flex flex-wrap gap-2">
                    <button type="submit" formaction="{{ route('msc.export.period.pdf') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-download me-1"></i> PDF bundle
                    </button>
                    <button type="submit" formaction="{{ route('msc.export.period.excel') }}" class="btn btn-outline-success">
                        <i class="bx bx-spreadsheet me-1"></i> Excel list
                    </button>
                </div>
            </form>
            <p class="text-muted small mt-2 mb-0">PDF bundle includes every report in the date range. Excel lists key totals per report.</p>
        </div>

        {{-- Annual summary --}}
        <div class="tab-pane fade" id="msc-dl-summary">
            <form method="get" target="_blank" class="row g-3 align-items-end">
                @if($canViewAll)
                    <div class="col-md-4">
                        <label class="form-label">Branch</label>
                        <select name="branch_id" class="form-select chm-select" data-placeholder="All branches" data-allow-clear="true">
                            <option value=""></option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" @selected((int) $exportBranch === (int) $branch->id)>{{ $branch->name }}</option>
                            @endforeach
                        </select>
                    </div>
                @else
                    <input type="hidden" name="branch_id" value="{{ $userBranchId }}">
                @endif
                <div class="col-md-2">
                    <label class="form-label">Year</label>
                    <select name="year" class="form-select chm-select" data-placeholder="Select year">
                        @for($y = now()->year; $y >= now()->year - 5; $y--)
                            <option value="{{ $y }}" @selected($exportYear == $y)>{{ $y }}</option>
                        @endfor
                    </select>
                </div>
                <div class="col-auto d-flex flex-wrap gap-2">
                    <button type="submit" formaction="{{ route('msc.export.summary.pdf') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-download me-1"></i> Summary PDF
                    </button>
                    <button type="submit" formaction="{{ route('msc.export.summary.excel') }}" class="btn btn-outline-success">
                        <i class="bx bx-spreadsheet me-1"></i> Summary Excel
                    </button>
                </div>
            </form>
            <p class="text-muted small mt-2 mb-0">Dashboard-style summary: KPIs, membership trend, branch comparison, and compliance.</p>
        </div>

        {{-- Combined org-wide for period --}}
        @if($canSummary)
            <div class="tab-pane fade" id="msc-dl-combined">
                <form method="get" target="_blank" class="row g-3 align-items-end">
                    @if($canViewAll)
                        <div class="col-md-3">
                            <label class="form-label">Branch</label>
                            <select name="branch_id" class="form-select chm-select" data-placeholder="All branches (combined)" data-allow-clear="true">
                                <option value=""></option>
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}" @selected((int) $exportBranch === (int) $branch->id)>{{ $branch->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    @else
                        <input type="hidden" name="branch_id" value="{{ $userBranchId }}">
                    @endif
                    <div class="col-md-2">
                        <label class="form-label">From</label>
                        <input type="date" name="from_date" class="form-control" value="{{ $exportFrom }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">To</label>
                        <input type="date" name="to_date" class="form-control" value="{{ $exportTo }}">
                    </div>
                    <div class="col-auto d-flex flex-wrap gap-2">
                        <button type="submit" formaction="{{ route('msc.export.combined.pdf') }}" class="btn btn-outline-secondary">
                            <i class="bx bx-download me-1"></i> Combined PDF
                        </button>
                        <button type="submit" formaction="{{ route('msc.export.combined.excel') }}" class="btn btn-outline-success">
                            <i class="bx bx-spreadsheet me-1"></i> Combined Excel
                        </button>
                    </div>
                </form>
                <p class="text-muted small mt-2 mb-0">Org-wide totals at period end, with a per-branch breakdown (members, savings, share capital, loans).</p>
            </div>
        @endif
    </div>
</x-chm.card>

@once
    @push('scripts')
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const matrix = @json($monthsMatrix);
        const branchEl = document.getElementById('msc_month_branch');
        const yearEl = document.getElementById('msc_month_year');
        const monthEl = document.getElementById('msc_month_month');
        const hintEl = document.getElementById('msc-monthly-hint');
        const monthNames = @json($monthNames);
        const monthFullNames = @json($monthFullNames);
        const monthsUrl = @json(route('msc.export.available-months'));

        function initMonthSelect2() {
            if (!window.jQuery || !jQuery.fn.select2 || !monthEl) return;
            const $monthEl = jQuery(monthEl);
            if ($monthEl.hasClass('select2-hidden-accessible')) {
                $monthEl.select2('destroy');
            }
            $monthEl.select2({
                theme: 'bootstrap-5',
                width: '100%',
                dropdownParent: jQuery(document.body),
                placeholder: monthEl.dataset.placeholder || 'Select month',
                allowClear: false,
                closeOnSelect: true,
            });
        }

        function applyMonths(months, branchSelected) {
            if (!monthEl) return;

            monthEl.innerHTML = '';

            if (months.length) {
                months.forEach(function (m) {
                    const opt = document.createElement('option');
                    opt.value = m;
                    opt.textContent = monthFullNames[m] || m;
                    monthEl.appendChild(opt);
                });
                monthEl.value = String(months[months.length - 1]);
            } else if (branchSelected) {
                const opt = document.createElement('option');
                opt.value = '';
                opt.textContent = 'No reports available';
                opt.disabled = true;
                monthEl.appendChild(opt);
            } else {
                for (let m = 1; m <= 12; m++) {
                    const opt = document.createElement('option');
                    opt.value = m;
                    opt.textContent = monthFullNames[m] || m;
                    monthEl.appendChild(opt);
                }
            }

            initMonthSelect2();
        }

        function loadMonths() {
            if (!branchEl || !yearEl || !hintEl) return;

            const branchId = branchEl.value;
            const year = yearEl.value;

            if (!branchId) {
                applyMonths([], false);
                hintEl.textContent = 'Choose a branch to see available months.';
                return;
            }

            fetch(monthsUrl + '?branch_id=' + encodeURIComponent(branchId) + '&year=' + encodeURIComponent(year), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    matrix[branchId] = data.months || [];
                    applyMonths(matrix[branchId], true);
                    if (matrix[branchId].length) {
                        hintEl.textContent = 'Submitted reports available for ' + year + ': ' +
                            matrix[branchId].map(function (m) { return monthNames[m]; }).join(', ') + '.';
                    } else {
                        hintEl.textContent = 'No submitted reports for this branch in ' + year + '.';
                    }
                })
                .catch(function () {
                    hintEl.textContent = 'Could not load available months.';
                });
        }

        if (window.jQuery && branchEl) {
            jQuery(branchEl).on('change', loadMonths);
            jQuery(yearEl).on('change', loadMonths);
        } else {
            branchEl?.addEventListener('change', loadMonths);
            yearEl?.addEventListener('change', loadMonths);
        }

        loadMonths();

        document.querySelectorAll('.msc-download-tabs [data-bs-toggle="pill"]').forEach(function (btn) {
            btn.addEventListener('shown.bs.tab', function () {
                if (window.ChmForms) ChmForms.init();
            });
        });
    });
    </script>
    @endpush
@endonce