@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@php($headingOptions = [
    '<a href="' . route('my-merchants.index') . '" class="'. \Config::get('view.buttons.secondary') .'"><i class="bx bx-arrow-back"></i> My Merchants</a>',
])
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="col-12">
    <x-heading-sec :module="'Portfolio Activity'" :options="$headingOptions" />

    {{-- Filter Bar --}}
    <div class="project-box mb-3 p-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-2">
                <div class="project-form mb-0">
                    <label class="form-label mb-0">Processor</label>
                    <select name="processor" class="form-select form-select-sm select2">
                        <option value="">All Processors</option>
                        @foreach($processors ?? [] as $pId => $pLabel)
                            <option value="{{ $pId }}" {{ $selectedProcessor == $pId ? 'selected' : '' }}>{{ $pLabel }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="project-form mb-0">
                    <label class="form-label mb-0">Datasource</label>
                    <select name="datasource" class="form-select form-select-sm select2">
                        <option value="">All Datasources</option>
                        @foreach($datasources ?? [] as $dId => $dLabel)
                            <option value="{{ $dId }}" {{ $selectedDatasource == $dId ? 'selected' : '' }}>{{ $dLabel }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="project-form mb-0">
                    <label class="form-label mb-0">Group</label>
                    <select name="master_group_id" class="form-select form-select-sm select2">
                        <option value="">All Groups</option>
                        @foreach($groups ?? [] as $gId => $gTitle)
                            <option value="{{ $gId }}" {{ $selectedGroup == $gId ? 'selected' : '' }}>{{ $gTitle }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="project-form mb-0">
                    <label class="form-label mb-0">Date Range</label>
                    <select name="date_range" class="form-select form-select-sm select2 no-search" id="pa-date-range-select">
                        <option value="last_12_months" {{ ($selectedDateRange ?? 'last_12_months') === 'last_12_months' ? 'selected' : '' }}>Last 12 Months</option>
                        <option value="this_year"      {{ ($selectedDateRange ?? '') === 'this_year'      ? 'selected' : '' }}>This Year</option>
                        <option value="last_year"      {{ ($selectedDateRange ?? '') === 'last_year'      ? 'selected' : '' }}>Last Year</option>
                        <option value="custom"         {{ ($selectedDateRange ?? '') === 'custom'         ? 'selected' : '' }}>Custom</option>
                    </select>
                </div>
            </div>
            <div class="col-md-4" id="pa-custom-date-wrapper" style="{{ ($selectedDateRange ?? '') === 'custom' ? '' : 'display:none' }}">
                <div class="row g-2">
                    <div class="col-6">
                        <div class="project-form mb-0">
                            <label class="form-label mb-0">From</label>
                            <input type="date" name="date_from" class="form-control form-control-sm" value="{{ $dateFrom ?? '' }}">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="project-form mb-0">
                            <label class="form-label mb-0">To</label>
                            <input type="date" name="date_to" class="form-control form-control-sm" value="{{ $dateTo ?? '' }}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-auto d-flex gap-2">
                <button type="submit" class="green-btn-inner waves-effect"><i class="bx bx-filter-alt me-1"></i>Apply</button>
                <a href="{{ route('merchants.portfolio-activity') }}" class="black-btn-inner waves-effect"><i class="bx bx-x me-1"></i>Clear</a>
            </div>
        </form>
    </div>

    {{-- Monthly Booked Volume Chart --}}
    <div class="project-box mb-3 p-3">
        <h6 class="fw-semibold mb-3">Monthly Booked Volume
            @if(($selectedDateRange ?? 'last_12_months') === 'last_12_months') (Last 12 Months)
            @elseif(($selectedDateRange ?? '') === 'this_year') (This Year)
            @elseif(($selectedDateRange ?? '') === 'last_year') (Last Year)
            @elseif(($selectedDateRange ?? '') === 'custom') (Custom Range)
            @endif
        </h6>
        <input type="hidden" id="pa-chart-labels" value='@json($chartLabels ?? [])'>
        <input type="hidden" id="pa-chart-volumes" value='@json($chartVolumes ?? [])'>
        <div id="portfolio-activity-chart" style="min-height:280px;"></div>
    </div>

    {{-- Merchant Data Table --}}
    <div class="project-box p-3">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="fw-semibold mb-0">Merchants
                @if(isset($data))
                    <span class="text-muted small ms-2">({{ $data->total() ?? 0 }} total)</span>
                @endif
            </h6>
        </div>
        <div class="table-responsive project-table">
            <table class="table table-bordered mb-0">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Merchant</th>
                    <th>MID</th>
                    <th>Group</th>
                    <th>Processor</th>
                    <th>Status</th>
                    <th>Last Batch</th>
                </tr>
                </thead>
                <tbody>
                @forelse($data ?? [] as $i => $merchant)
                <tr>
                    <td>{{ ($data->firstItem() ?? 0) + $i }}</td>
                    <td>
                        <a href="{{ route('my-merchants.show', $merchant->id) }}" class="fw-semibold text-decoration-none">
                            {{ $merchant->dba ?: $merchant->legal_name }}
                        </a>
                        @if($merchant->lead_id)
                        <div class="small text-muted">
                            <a href="{{ route('leads.show', $merchant->lead_id) }}" class="text-muted">Lead #{{ $merchant->lead_id }}</a>
                        </div>
                        @endif
                    </td>
                    <td><code>{{ $merchant->mid ?? '—' }}</code></td>
                    <td>{{ $merchant->group_text ?: '—' }}</td>
                    <td>{{ $merchant->processor_text ?: '—' }}</td>
                    <td>
                        @php($status = $merchant->statuses[$merchant->status] ?? null)
                        @if($status)
                            <span class="badge bg-{{ $status['badge'] }}">{{ $status['name'] }}</span>
                        @else —
                        @endif
                    </td>
                    <td>{{ $merchant->last_batch_date ? \App\Helpers\Helper::showdate($merchant->last_batch_date, false) : '—' }}</td>
                </tr>
                @empty
                <tr><td colspan="7" class="text-center py-4">No merchant data found.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if(isset($data) && is_object($data) && method_exists($data, 'links'))
            @include('admin.components.pagination-inner')
        @endif
    </div>
</div>
@endsection
@push('page_script')
<script src="{{ asset('assets/js/common.js') }}"></script>
<script>
(function(){
    const chartEl = document.querySelector('#portfolio-activity-chart');
    if (!chartEl || typeof ApexCharts === 'undefined') return;
    const labelsEl  = document.querySelector('#pa-chart-labels');
    const volumesEl = document.querySelector('#pa-chart-volumes');
    const labels    = JSON.parse(labelsEl ? labelsEl.value : '[]');
    const volumes   = JSON.parse(volumesEl ? volumesEl.value : '[]');
    if (!labels.length) { chartEl.innerHTML = '<div class="text-center text-muted py-4">No data available.</div>'; return; }
    const chart = new ApexCharts(chartEl, {
        chart: { type: 'bar', height: 280, toolbar: { show: false } },
        series: [{ name: 'Monthly Volume', data: volumes }],
        xaxis: { categories: labels },
        yaxis: { labels: { formatter: v => '$' + Math.round(v/1000) + 'K' } },
        colors: ['#0B6FA4'],
        dataLabels: { enabled: false },
        plotOptions: { bar: { borderRadius: 3, columnWidth: '40%' } },
        tooltip: { y: { formatter: v => '$' + parseFloat(v).toLocaleString('en-US', {minimumFractionDigits: 2}) } }
    });
    chart.render();
})();
</script>
<script>
(function(){
    const sel = document.getElementById('pa-date-range-select');
    const wrap = document.getElementById('pa-custom-date-wrapper');
    if (!sel || !wrap) return;
    sel.addEventListener('change', function(){
        wrap.style.display = this.value === 'custom' ? '' : 'none';
    });
})();
</script>
@endpush