@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="'The Scoop'" :options="$headingOptions" />

    {{-- Filter Bar --}}
    <div class="project-box mb-3 p-3">
        <form method="GET" class="row g-2 align-items-end" id="scoop-filter-form">
            <div class="col-md-2">
                <div class="project-form mb-0">
                    <label class="form-label mb-0">Month</label>
                    <select name="month" class="form-select form-select-sm select2 no-search">
                        @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" {{ request('month', date('n')) == $m ? 'selected' : '' }}>
                            {{ date('F', mktime(0,0,0,$m,1)) }}
                        </option>
                        @endfor
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="project-form mb-0">
                    <label class="form-label mb-0">Year</label>
                    <select name="year" class="form-select form-select-sm select2 no-search">
                        @for($y = date('Y'); $y >= date('Y')-3; $y--)
                        <option value="{{ $y }}" {{ request('year', date('Y')) == $y ? 'selected' : '' }}>{{ $y }}</option>
                        @endfor
                    </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>
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <label class="form-label small">&nbsp;</label>
                <div class="form-check project-checkbox mt-1">
                    <input class="form-check-input" type="checkbox" id="primary-user-only" name="primary_only" value="1"
                        {{ request('primary_only') ? 'checked' : '' }}>
                    <label class="form-check-label" for="primary-user-only">Show Primary User Data Only</label>
                </div>
            </div>
            <div class="col-md-1">
                <label class="form-label small">&nbsp;</label>
                <button type="submit" class="btn btn-sm btn-primary d-block"><i class="bx bx-filter-alt"></i></button>
            </div>
        </form>
    </div>

    {{-- Tabs: Portfolio Overview | Agents --}}
    <ul class="nav nav-tabs mb-3" id="scoopTabs" role="tablist">
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#scoop-portfolio">Portfolio Overview</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#scoop-agents">Agents</button></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="scoop-portfolio">
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="project-box p-3">
                        <h6 class="fw-semibold mb-3">Total Volume Shown (15 Month History)</h6>
                        <div id="scoop-volume-chart" style="min-height:250px;"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="project-box p-3">
                        <h6 class="fw-semibold mb-3">Total Residual Contribution (Per Agent)</h6>
                        <div id="scoop-residual-chart" style="min-height:250px;"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="project-box p-3">
                        <h6 class="fw-semibold mb-3">Total Approvals Shown</h6>
                        <div id="scoop-approvals-chart" style="min-height:250px;"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="project-box p-3">
                        <h6 class="fw-semibold mb-3">Total Approved</h6>
                        <div id="scoop-approved-chart" style="min-height:250px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="scoop-agents">
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="project-box p-3">
                        <h6 class="fw-semibold mb-3">Agent Volume (15 Month History)</h6>
                        <div id="scoop-agent-volume-chart" style="min-height:250px;"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="project-box p-3">
                        <h6 class="fw-semibold mb-3">Agent Residual Contribution</h6>
                        <div id="scoop-agent-residual-chart" style="min-height:250px;"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="project-box p-3">
                        <h6 class="fw-semibold mb-3">Agent Approvals</h6>
                        <div id="scoop-agent-approvals-chart" style="min-height:250px;"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="project-box p-3">
                        <h6 class="fw-semibold mb-3">Agent Approved</h6>
                        <div id="scoop-agent-approved-chart" style="min-height:250px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('page_script')
<script src="{{ asset('assets/js/common.js') }}"></script>
<script src="{{ asset('assets/js/the-scoop.js') }}"></script>
@endpush