@extends('admin.layouts.main')

@section('title', 'Dashboard')
@section('content')
<main class="dashboard-page" id="app" v-cloak>
    <loading :active.sync="isLoading"></loading>
    <div class="two-col">
        @include('admin.common.sidebar')

        <div class="right-sec">
            <div class="breadcumb-bar">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Kua Dashboard</li>
                    </ol>
                </nav>
            </div>

            <div class="top-bar gap-10">
                <div class="d-flex align-items-center">
                    <h2 class="mr-2 mb-0">Kua Dashboard</h2>
                </div>
                <div class="d-flex align-items-center gap-10">
                    <div class="form-group date-range mb-0">
                        <!-- your existing control -->
                        <div id="reportrange" class="date-range-input" role="button" aria-label="Select date range">
                            <i class="material-icons">date_range</i>&nbsp;
                            <span>@{{ date_from }} - @{{ date_to }}</span> <i
                                class="fa fa-caret-down"></i>
                        </div>

                    </div>
                    <div class="btn-group-em float-right" role="group" aria-label="Export actions">
                        <button type="button" class="btn btn-em" id="applyDate">Apply</button>
                        <button type="button" class="btn btn-em" id="resetDate">Reset</button>
                        <button type="button" class="btn btn-em btn-primary-em" @click="exportLeads">Export</button>
                    </div>
                </div>
            </div>

            <!-- Regional Sales Report -->
            <div class="mb-5" @mouseenter="activePager='regional'" @focusin="activePager='regional'">
                <p class="mb-20 font-18 fw-600">Regional Sales Report</p>

                <!-- <div class="d-flex justify-content-between align-items-center mb-20 flex-wrap gap-12">
                    <div class="form-group search-input float-left mb-0">
                        <img src="{{ asset('/img/ic_search.png') }}" srcset="{{ asset('/img/ic_search@2x.png') }} 2x"
                            alt="search">
                        <input type="text" name="region_search" placeholder="Search region/company"
                            v-model="regional_search_text" @input="regionalSearch" aria-label="Search regional sales">
                    </div>
                </div> -->

                <div class="table-data">
                    <div class="table-responsive">
                        <table class="table" id="mtcTable-regional">
                            <thead>
                                <tr>
                                    <th scope="col">Region</th>
                                    <th scope="col" v-for="c in regional_companies" :id="'hc' + c.id">
                                        @{{ (c.name) }}
                                    </th>
                                    <th scope="col">Total</th>
                                </tr>
                            </thead>

                            <tbody>
                                <!-- data rows -->
                                <tr v-for="r in regional_rows" :id="'rr' + r.index">
                                    <td>@{{ r.region }}</td>
                                    <td v-for="c in regional_companies" :id="'rc' + c.id">
                                        @{{ (r.cols && r.cols[c.id]) ? r.cols[c.id]: 0 }}
                                    </td>
                                    <td><strong>@{{ r.total }}</strong></td>
                                </tr>

                                <!-- empty-state row -->
                                <tr v-if="!regional_rows.length">
                                    <td :colspan="(regional_companies?.length || 0) + 2" class="text-center">
                                        No data found
                                    </td>
                                </tr>

                                <!-- totals row (will be zeros if no rows) -->
                                <tr>
                                    <td class="fw-600 pb-30">Total</td>
                                    <td class="fw-600 pb-30" v-for="c in regional_companies" :id="'rt' + c.id">
                                        @{{ regional_totals[c.id] ?? 0 }}
                                    </td>
                                    <td class="fw-600 pb-30">@{{ regional_totals.__grand__ ?? 0 }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>


                {{-- <div class="text-center py-4" v-show="!regional_rows.length && !isLoading">No data found</div> --}}
            </div>

            <!-- Unit Sales Per Product -->
            <div class="mb-5">
                <p class="mb-20 font-18 fw-600">Unit Sales Per Product</p>

                <div class="row gap-15-res">
                    <!-- When we have data: show your current per-company tables -->
                    <template v-if="unitSales && unitSales.length">
                        <div class="col-md-4 mb-3" v-for="group in unitSales" :key="'us-' + group.company.id">
                            <div class="table-data">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col">@{{ (group.company.name || '') }}</th>
                                                <th scope="col">SOLD UNITS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <template v-if="group.rows.length > 0">
                                                <tr v-for="row in group.rows" :key="'p-' + row.product_id">
                                                    <td>@{{ row.product_name }}</td>
                                                    <td>@{{ row.units }}</td>
                                                </tr>
                                            </template>
                                            <template v-if="group.rows.length == 0">
                                                <tr>
                                                    <td colspan="2" class="text-center">No data found</td>
                                                </tr>
                                            </template>
                                            <tr>
                                                <td class="fw-600 pb-30">TOTAL</td>
                                                <td class="fw-600 pb-30">@{{ group.total }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </template>

                    <!-- When no data: still render a table with an in-table empty row -->
                    <template v-else>
                        <div class="col-md-4">
                            <div class="table-data">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col">Company</th>
                                                <th scope="col">SOLD UNITS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="2" class="text-center">No data found</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-600 pb-30">TOTAL</td>
                                                <td class="fw-600 pb-30">0</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>

            </div>

            <!-- Revenue Dashboard -->
            <div class="mb-5" @mouseenter="activePager='revenue'" @focusin="activePager='revenue'">
                <p class="mb-20 font-18 fw-600">Revenue Dashboard</p>

                <div class="d-flex justify-content-between align-items-center mb-20 flex-wrap gap-12">
                    <div class="search-input">
                        <img src="{{ asset('/img/ic_search.png') }}" srcset="{{ asset('/img/ic_search@2x.png') }} 2x"
                            alt="search">
                        <input type="text" name="search" placeholder="Search" v-model="revenue_search_text"
                            @input="revenueSearch" aria-label="Search revenue">
                        {{-- <i class="material-icons" v-if="revenue_search_text" @click="regionalClearSearch">close</i> --}}
                    </div>
                </div>

                <div class="table-data">
                    <div class="table-responsive">
                        <table class="table" id="mtcTable-revenue">
                            <thead>
                                <tr>
                                    <th scope="col">TOTAL SALES</th>
                                    <th scope="col">AMOUNTS</th>
                                    <th scope="col">EXPECTED COMMISSION</th>
                                    <th scope="col">INCENTIVE AMOUNTS</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="r in revenueRows" :id="'rev' + r.company_id">
                                    <td>@{{ (r.company) }}</td>
                                    <td>@{{ money(r.amounts) }}</td>
                                    <td>@{{ money(r.expected_commission) }}</td>
                                    <td>@{{ money(r.incentive) }}</td>
                                </tr>

                                <tr v-if="revenueRows.length">
                                    <td class="fw-600 pb-30">Total</td>
                                    <td class="fw-600 pb-30">@{{ money(revenueTotals.amounts) }}</td>
                                    <td class="fw-600 pb-30">@{{ money(revenueTotals.expected_commission) }}</td>
                                    <td class="fw-600 pb-30">@{{ money(revenueTotals.incentive) }}</td>
                                </tr>

                                <tr v-if="!revenueRows.length">
                                    <td colspan="4" class="text-center">No data found</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Growth Agents Report (Active Agents by Company) -->
            <div class="mb-5" @mouseenter="activePager='agents'" @focusin="activePager='agents'">
                <p class="mb-20 font-18 fw-600">Growth Agents Report</p>

                <!-- <div id="lead-filters"
                    class="d-flex justify-content-between align-items-center mb-20 flex-wrap gap-12" role="search"
                    aria-label="Filter leads">
                    <div class="form-group search-input float-left mb-0">
                        <img src="{{ asset('/img/ic_search.png') }}" srcset="{{ asset('/img/ic_search@2x.png') }} 2x"
                            alt="search">
                        <input type="text" name="search" id="search" v-model="agents_search_text"
                            @input="agentsSearch" @keydown.enter.prevent placeholder="Search agent or company"
                            aria-label="Search agents" />

                        <i class="material-icons" v-if="agents_search_text" @click="agentsClearSearch">close</i>
                    </div>

                </div> -->

                <div class="table-wrapper" v-if="activeAgent">
                    <div class="table-data">
                        <div class="table-responsive table-checkable">
                            <table class="table" id="mtcTable-active-agents">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">
                                            Growth Agents
                                            {{-- <a href="javascript:void(0)" @click="agentsSort('agent')"
                                                    :class="agentsClassSort('agent')"></a> --}}
                                        </th>
                                        <th scope="col" v-for="c in activeAgent.companies" :id="'ah' + c.id">
                                            @{{ (c.name) }}
                                            {{-- <a href="javascript:void(0)" @click="agentsSort('company_'+c.id)"
                                                    :class="agentsClassSort('company_' + c.id)"></a> --}}
                                        </th>
                                        <th scope="col">
                                            Total
                                            {{-- <a href="javascript:void(0)" @click="agentsSort('total')"
                                                    :class="agentsClassSort('total')"></a> --}}
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="r in activeAgent.leadRows" :id="'ar' + r.index">
                                        <td>@{{ r.index }}</td>
                                        <td>@{{ r.agent }}</td>
                                        <td v-for="c in activeAgent.companies" :id="'ac' + c.id">
                                            @{{ (r.cols && r.cols[c.id]) ? r.cols[c.id].sold : 0 }}
                                        </td>
                                        <td><strong>@{{ (r.total && r.total.sold) ? r.total.sold : 0 }}</strong></td>
                                    </tr>

                                    <!-- Empty-state row INSIDE the table -->
                                    <tr v-if="!activeAgent.leadRows || !activeAgent.leadRows.length">
                                        <td :colspan="(activeAgent.companies?.length || 0) + 3" class="text-center">No data found</td>
                                    </tr>

                                    <!-- Totals row -->
                                    <tr>
                                        <td></td>
                                        <td class="fw-600 pb-30">Total</td>
                                        <td class="fw-600 pb-30" v-for="c in activeAgent.companies" :id="'at' + c.id">
                                            @{{ activeAgent.leadTotals?.[c.id]?.sold ?? 0 }}
                                        </td>
                                        <td class="fw-600 pb-30">@{{ activeAgent.leadTotals?.__grand__?.sold ?? 0 }}</td>
                                    </tr>
                                </tbody>


                            </table>
                        </div>
                    </div>

                    {{-- <div class="text-center py-4"
                            v-show="(!activeAgent.leadRows || !activeAgent.leadRows.length) && !isLoading">
                            No data found
                        </div> --}}
                    <div class="text-center py-4" v-if="isLoading">Loading…</div>
                </div>

                <div class="text-center py-4" v-else>Loading…</div>
            </div>

            <!-- Leads Generated -->
            <div class="mb-5" @mouseenter="activePager='leads'" @focusin="activePager='leads'">
                <p class="mb-20 font-18 fw-600">Leads Generated</p>

                <!-- <div id="lead-filters"
                    class="d-flex justify-content-between align-items-center mb-20 flex-wrap gap-12" role="search"
                    aria-label="Filter leads">
                    <div class="form-group search-input float-left mb-0">
                        <img src="{{ asset('/img/ic_search.png') }}" srcset="{{ asset('/img/ic_search@2x.png') }} 2x"
                            alt="search">
                        <input type="text" v-model="leads_search_text" @input="search"
                            placeholder="Search agent or company">
                        <i class="material-icons" v-if="leads_search_text" @click="leadsClearSearch">close</i>
                    </div>
                </div> -->

                <div class="table-wrapper">
                    <div class="table-data">
                        <div class="table-responsive table-checkable">
                            <table class="table" id="mtcTable-leads">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Growth Agents</th>

                                        <th scope="col" v-for="c in companies" :id="'h' + c.id">
                                            @{{ (c.name) }}
                                        </th>

                                        <!-- NEW -->
                                        <th scope="col">Generic</th>

                                        <th scope="col">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(r,indexKey) in leads" :id="'r' + r.index">
                                        <td>@{{ indexKey + 1 }}</td>
                                        <td>@{{ r.agent }}</td>

                                        <td v-for="c in companies" :id="'c' + c.id">
                                            @{{ (r.cols && r.cols[c.id]) ? r.cols[c.id]: 0 }}
                                        </td>

                                        <!-- NEW -->
                                        <td>@{{ r.generic }}</td>

                                        <td><strong>@{{ r.total }}</strong></td>
                                    </tr>
                                    <tr v-if="!leads.length && !isLoading">
                                        <td :colspan="(companies?.length || 0) + 3" class="text-center">No data found
                                        </td>
                                    </tr>

                                    <tr>
                                        <td></td>
                                        <td class="fw-600 pb-30">Total</td>

                                        <td class="fw-600 pb-30" v-for="c in companies" :id="'t' + c.id">
                                            @{{ leadTotals[c.id] ?? 0 }}
                                        </td>

                                        <!-- NEW -->
                                        <td class="fw-600 pb-30">@{{ leadTotals.__generic__ ?? 0 }}</td>

                                        <td class="fw-600 pb-30">@{{ leadTotals.__grand__ ?? 0 }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- <div class="text-center py-4" v-show="!leads.length && !isLoading">No data found</div> --}}
                    <div class="text-center py-4" v-if="isLoading">Loading…</div>
                    <div class="text-danger small mt-2" v-if="Object.keys(errors).length">
                        <div v-for="(v,k) in errors" :id="'e' + k">@{{ k }}:
                            @{{ Array.isArray(v) ? v.join(', ') : v }}</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</main>

@push('pageJs')
<script>
    window.dashboardDataUrl = "{{ route('admin.dashboard.data', ['panel' => session('panel')]) }}";

    var dashboardDataExportUrl = "{{route('admin.dashboard.export-data',['panel' => Session('panel')])}}";
</script>
<script defer src="{{ asset('js/admin/dashboard.js') }}"></script>
<script>
    $(document).ready(function() {
        let pickedStart = moment().startOf("month"); // default 1st day
        let pickedEnd = moment(); // default today

        $('#reportrange').daterangepicker({
            autoApply: true, // remove Cancel & Apply buttons inside popup
            showCustomRangeLabel: false, // remove "Custom Range" option
            ranges: true, // no presets
            locale: {
                format: "YYYY-MM-DD"
            },
            startDate: pickedStart,
            endDate: pickedEnd
        }, function(start, end) {
            // update temp vars
            pickedStart = start;
            pickedEnd = end;

            // update label
            $('#reportrange span').html(
                start.format("YYYY-MM-DD") + ' - ' + end.format("YYYY-MM-DD")
            );
        });

        // External Apply button
        $('#applyDate').on('click', function() {
            if (window.app) {
                app.date_from = pickedStart.format("YYYY-MM-DD");
                app.date_to = pickedEnd.format("YYYY-MM-DD");
                app.refreshAll();
            }
        });

        // Reset button (optional)
        $('#resetDate').on('click', function() {
            pickedStart = moment().startOf("month");
            pickedEnd = moment();

            if (window.app) {
                app.date_from = pickedStart.format("YYYY-MM-DD");
                app.date_to = pickedEnd.format("YYYY-MM-DD");
                app.refreshAll();
            }
            // Update the daterangepicker itself
            $('#reportrange').data('daterangepicker').setStartDate(pickedStart);
            $('#reportrange').data('daterangepicker').setEndDate(pickedEnd);

            // reset visible label
            $('#reportrange span').html(
                pickedStart.format("YYYY-MM-DD") + ' - ' + pickedEnd.format("YYYY-MM-DD")
            );
        });

        // Initialize label with defaults
        $('#reportrange span').html(
            pickedStart.format("YYYY-MM-DD") + ' - ' + pickedEnd.format("YYYY-MM-DD")
        );
    });
</script>
@endpush