@extends('front.layouts.main')
@section('title') Kua Dashboard @endsection
@push('pageCss')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
<!-- vue components -->
<link rel="stylesheet" type="text/css" href="{{ asset('css/vendor/vue-loading.css') }}">
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<style>
    .vs__open-indicator {
        border-color: #888 transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        height: 0;
        width: 0;
        margin-right: 10px;
        margin-left: 6px;
    }

    .vs__dropdown-toggle {
        min-height: 40px;
    }

    .mb-20 {
        margin-bottom: 20px;
    }

    .product-heading {
        font-size: 18px;
        line-height: 30px;
        font-weight: 600;
    }

    .table td,
    .table th {
        font-size: 14px;
        line-height: 16px;
    }

    .table thead th {
        font-weight: 500;
    }
</style>
@endpush
@section('content')
<div id="app">
    <main class="service-page pt-0">
        <loading :active.sync="isLoading"></loading>
        <section class="section pt-4 kua-front-dashboard">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="d-flex justify-content-between align-items-center mb-30 flex-wrap gap-10">
                            <div class="d-flex align-items-center">
                                <h2 class="product-heading mb-0">Kua Dashboard</h2>
                            </div>
                            <div class="d-flex align-items-center flex-wrap gap-10">
                                <div class="form-group date-dashboard-range mb-0">
                                    <div id="reportrange" class="custom-select date-range-input" role="button" aria-label="Select date range">
                                        <i class="material-icons">date_range</i>&nbsp;
                                        <span>@{{ date_from }} - @{{ date_to }}</span>
                                    </div>
                                </div>
                                <div class="agent-dashbord btn-group-em float-right d-flex gap-10" role="group">
                                    <button type="button" class="btn btn-bordered" id="applyDate">Apply</button>
                                    <button type="button" class="btn btn-bordered" id="resetDate">Reset</button>
                                </div>
                            </div>
                        </div>
                        <!-- Leads Generated -->
                        <div class="mb-5">
                            <div class="mb-20">
                                <h2 class="product-heading mb-0">Leads Generated</h2>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <template v-for="(c,companyKey) in companies">
                                    <div class="leads-box text-center py-3 border-right">
                                        <template>
                                            <p class="mb-10 title-font fw-600">@{{ leads[0].cols[c.id] ?? 0}}</p>
                                        </template>
                                        <p class="mb-0 xs-font-size">@{{ c.name }}</p>
                                    </div>
                                </template>
                                <div class="leads-box text-center py-3">
                                    <p class="mb-10 title-font fw-600" v-if="leads.length > 0">@{{ leads[0].generic ?? 0 }}</p>
                                    <p class="mb-0 xs-font-size">Generic</p>
                                </div>
                            </div>
                        </div>
                        <!-- Regional Sales Report -->
                        <div class="mb-5">
                            <div class="d-flex justify-content-between align-items-center mb-20">
                                <h2 class="product-heading mb-0">Regional Sales Report</h2>
                            </div>
                            <!-- <div class="d-flex justify-content-between align-items-center mb-20 flex-wrap gap-12">
                                <div class="search-input-wrapper">
                                    <i class="fa-solid fa-search"></i>
                                    <input type="text" name="search" placeholder="Search by name, tin, or email">
                                </div>
                            </div> -->
                            <div class="table-data bg-white">
                                <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>
                        <!-- Unit Sales Per Product -->
                        <div class="mb-5">
                            <div class="mb-20">
                                <h2 class="product-heading mb-0">Unit Sales Per Product</h2>
                            </div>
                            <div class="row gap-15-res">
                                <template v-if="unitSales && unitSales.length">
                                    <div class="col-md-4" v-for="group in unitSales">
                                        <div class="table-data bg-white">
                                            <div class="table-responsive">
                                                <table class="table" id="mtcTable">
                                                    <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">TOTAL</td>
                                                            <td class="fw-600">@{{ group.total }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="col-md-4">
                                        <div class="table-data bg-white">
                                            <div class="table-responsive">
                                                <table class="table" id="mtcTable">
                                                    <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">TOTAL</td>
                                                            <td class="fw-600">0</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>


                        </div>
                        <!-- Revenue Dashboard -->
                        <div class="mb-5">
                            <div class="d-flex justify-content-between align-items-center mb-20">
                                <h2 class="product-heading mb-0">Revenue Dashboard</h2>
                            </div>
                            <div class="table-data bg-white">
                                <div class="table-responsive">
                                    <table class="table" id="mtcTable">
                                        <thead>
                                            <tr>
                                                <th>TOTAL SALES <!-- <a href="javascript:void(0)" class="btm-arrow"><img src="img-front/ic_sort.svg" alt="ic_sort"></a> --></th>
                                                <th>AMOUNTS</th>
                                                <th>EXPECTED COMMISION</th>
                                                <th>INCENTIVE AMOUNTS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="r in revenueRows">
                                                <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>
                    </div>
                </div>
            </div>
        </section>

    </main>
</div>
@endsection
@push('pageJs')

<!-- Vuejs related -->

@if(!isset($notIncludeVue))
@if(config('app.env') == 'local')
<script type="text/javascript" src="{{ asset('js/vendor/vue.js') }}"></script>
@else
<script type="text/javascript" src="{{ asset('js/vendor/vue.min.js') }}"></script>
@endif
@endisset
<script type="text/javascript" src="{{ asset('js/vendor/axios.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/lodash.min.js') }}"></script>


<script type="text/javascript" src="{{ asset('js/vendor/vue-loading-overlay@3.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/admin/vuecomponents/star-rating.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/vue-select.js') }}"></script>
<script>
    Vue.component('v-select', VueSelect.VueSelect);
</script>
<script type="text/javascript" src="{{ asset('js/admin/commonVue.js') }}"></script>

<!-- Vuejs related -->
<script>
    var dashboardDataUrl = "{{ route('agent.dashboard.data') }}";
</script>
<script type="text/javascript" src="{{ asset('js/front/agent_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