@extends('admin.layouts.main')

@section('title', 'Dashboard')

@section('content')
    <main class="dashboard-page">

        {{-- <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">
                            <div id="reportrange" class="date-range-input" role="button" aria-label="Select date range">
                                <i class="material-icons">date_range</i>&nbsp;
                                <span></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-bordered">Export</button>
                        </div>
                    </div>
                </div>

                <!-- Regional Sales Report -->
                <div class="mb-5">
                    <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="search-input">
                            {{-- <img src="../img/ic_search.png" srcset="../img/ic_search@2x.png 2x" alt="search"> --}}
                            <input type="text" name="search" placeholder="Search" aria-label="Search regional sales">
                        </div>

                        <div class="d-flex align-items-center gap-12 page-count">
                            <p class="mb-0 font-14">Record Per Page</p>

                            <div class="dropdown">
                                <a class="btn-dropdown dropdown-toggle font-14" href="#" role="button"
                                    data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
                                    100
                                </a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">200</a>
                                    <a class="dropdown-item" href="#">300</a>
                                    <a class="dropdown-item" href="#">400</a>
                                </div>
                            </div>

                            <p class="mb-0 font-14">Total 5</p>
                        </div>

                        <nav class="pagination-sec" aria-label="Regional Sales pagination">
                            <ul class="pagination m-0 align-items-center">
                                <li class="page-item disabled">
                                    <a class="page-link p-0" href="javascript:void(0)" tabindex="-1" aria-disabled="true">
                                        <i class="material-icons">keyboard_arrow_left</i>
                                    </a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a></li>
                                <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
                                <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                                <li class="page-item">
                                    <a class="page-link p-0" href="javascript:void(0)">
                                        <i class="material-icons">arrow_right_alt</i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>

                    <div class="table-data">
                        <div class="table-responsive">
                            <table class="table" id="mtcTable-regional">
                                <thead>
                                    <tr>
                                        <th scope="col">PRODUCTS/REGION</th>
                                        <th scope="col">YAS</th>
                                        <th scope="col">SELCOM</th>
                                        <th scope="col">STRATEGIS</th>
                                        <th scope="col">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Dar es Salaam</td>
                                        <td>3</td>
                                        <td>4</td>
                                        <td>1</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td>Njombe</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                    </tr>
                                    <tr>
                                        <td>Mbeya</td>
                                        <td>3</td>
                                        <td>4</td>
                                        <td>1</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td>Tanga</td>
                                        <td>3</td>
                                        <td>4</td>
                                        <td>1</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td>Iringa</td>
                                        <td>3</td>
                                        <td>4</td>
                                        <td>1</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td class="fw-600 pb-30">Total</td>
                                        <td class="fw-600 pb-30">3</td>
                                        <td class="fw-600 pb-30">16</td>
                                        <td class="fw-600 pb-30">3</td>
                                        <td class="fw-600 pb-30">24</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </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">
                        <div class="col-md-4">
                            <div class="table-data">
                                <div class="table-responsive">
                                    <table class="table" id="mtcTable-selcom">
                                        <thead>
                                            <tr>
                                                <th scope="col">SELCOM</th>
                                                <th scope="col">SOLD UNITS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Soft POS</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>Hard POS</td>
                                                <td>19</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-600 pb-30">TOTAL</td>
                                                <td class="fw-600 pb-30">19</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="table-data">
                                <div class="table-responsive">
                                    <table class="table" id="mtcTable-strategis">
                                        <thead>
                                            <tr>
                                                <th scope="col">STRATEGIS</th>
                                                <th scope="col">SOLD UNITS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Principal</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>Principal + 1</td>
                                                <td>19</td>
                                            </tr>
                                            <tr>
                                                <td>Principal + 2</td>
                                                <td>19</td>
                                            </tr>
                                            <tr>
                                                <td>Principal + 3</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>Principal + 4</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>Principal + 5</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-600 pb-30">Total</td>
                                                <td class="fw-600 pb-30">38</td> {{-- fixed sum --}}
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="table-data">
                                <div class="table-responsive">
                                    <table class="table" id="mtcTable-yas">
                                        <thead>
                                            <tr>
                                                <th scope="col">YAS</th>
                                                <th scope="col">SOLD UNITS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>MJASIRIAMALI BOX</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>FIBER (FTTX)</td>
                                                <td>2</td>
                                            </tr>
                                            <tr>
                                                <td>FWA 5G Internet</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>COMPANY MOBILE + CUG</td>
                                                <td>1</td>
                                            </tr>
                                            <tr>
                                                <td>MIFI</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-600 pb-30">Total</td>
                                                <td class="fw-600 pb-30">3</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Revenue Dashboard -->
                <div class="mb-5">
                    <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="../img/ic_search.png" srcset="../img/ic_search@2x.png 2x" alt="search"> --}}
                            <input type="text" name="search" placeholder="Search" aria-label="Search revenue">
                        </div>

                        <div class="d-flex align-items-center gap-12 page-count">
                            <p class="mb-0 font-14">Record Per Page</p>

                            <div class="dropdown">
                                <a class="btn-dropdown dropdown-toggle font-14" href="#" role="button"
                                    data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
                                    100
                                </a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">200</a>
                                    <a class="dropdown-item" href="#">300</a>
                                    <a class="dropdown-item" href="#">400</a>
                                </div>
                            </div>

                            <p class="mb-0 font-14">Total 5</p>
                        </div>

                        <nav class="pagination-sec" aria-label="Revenue pagination">
                            <ul class="pagination m-0 align-items-center">
                                <li class="page-item disabled">
                                    <a class="page-link p-0" href="javascript:void(0)" tabindex="-1"
                                        aria-disabled="true">
                                        <i class="material-icons">keyboard_arrow_left</i>
                                    </a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a></li>
                                <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
                                <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                                <li class="page-item">
                                    <a class="page-link p-0" href="javascript:void(0)">
                                        <i class="material-icons">arrow_right_alt</i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </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>
                                        <td>YAS</td>
                                        <td>TZS 120,000.00</td>
                                        <td>TZS 56,400.00</td>
                                        <td>TZS 0.00</td>
                                    </tr>
                                    <tr>
                                        <td>Selcom</td>
                                        <td>TZS 120,000.00</td>
                                        <td>TZS 56,400.00</td>
                                        <td>TZS 0.00</td>
                                    </tr>
                                    <tr>
                                        <td>Strategis</td>
                                        <td>TZS 120,000.00</td>
                                        <td>TZS 56,400.00</td>
                                        <td>TZS 0.00</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Growth Agents Report -->
                <div class="mb-5">
                    <p class="mb-20 font-18 fw-600">Growth Agents Report</p>

                    <div class="d-flex justify-content-between align-items-center mb-20 flex-wrap gap-12">
                        <div class="search-input">
                            {{-- <img src="../img/ic_search.png" srcset="../img/ic_search@2x.png 2x" alt="search"> --}}
                            <input type="text" name="search" placeholder="Search" aria-label="Search growth agents">
                        </div>

                        <div class="d-flex align-items-center gap-12 page-count">
                            <p class="mb-0 font-14">Record Per Page</p>
                            <div class="dropdown">
                                <a class="btn-dropdown dropdown-toggle font-14" href="#" role="button"
                                    data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
                                    100
                                </a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">200</a>
                                    <a class="dropdown-item" href="#">300</a>
                                    <a class="dropdown-item" href="#">400</a>
                                </div>
                            </div>
                            <p class="mb-0 font-14">Total 5</p>
                        </div>

                        <nav class="pagination-sec" aria-label="Growth Agents pagination">
                            <ul class="pagination m-0 align-items-center">
                                <li class="page-item disabled">
                                    <a class="page-link p-0" href="javascript:void(0)" tabindex="-1"
                                        aria-disabled="true">
                                        <i class="material-icons">keyboard_arrow_left</i>
                                    </a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a></li>
                                <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
                                <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                                <li class="page-item">
                                    <a class="page-link p-0" href="javascript:void(0)">
                                        <i class="material-icons">arrow_right_alt</i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>

                    <div class="table-data">
                        <div class="table-responsive table-checkable">
                            <table class="table" id="mtcTable-growth">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">AGENTS/PRODUCT</th>
                                        <th scope="col">YAS</th>
                                        <th scope="col">SELCOM</th>
                                        <th scope="col">STRATEGIS</th>
                                        <th scope="col">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>John Adam (Dar es Salaam)</td>
                                        <td>0</td>
                                        <td>1</td>
                                        <td>5</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Mohamed Mwinyi</td>
                                        <td>0</td>
                                        <td>1</td>
                                        <td>5</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Neema Richard</td>
                                        <td>0</td>
                                        <td>1</td>
                                        <td>5</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Ozgad Timothy</td>
                                        <td>0</td>
                                        <td>1</td>
                                        <td>5</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>Victor Edwin Mpogolo</td>
                                        <td>0</td>
                                        <td>1</td>
                                        <td>5</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td>6</td>
                                        <td>Andrew Seif</td>
                                        <td>0</td>
                                        <td>1</td>
                                        <td>5</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td>7</td>
                                        <td>Boaz Ponsiano</td>
                                        <td>0</td>
                                        <td>1</td>
                                        <td>5</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td>8</td>
                                        <td>Emmanuel Abeid Ignas</td>
                                        <td>0</td>
                                        <td>1</td>
                                        <td>5</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td>9</td>
                                        <td>George Pijo Kawelela</td>
                                        <td>0</td>
                                        <td>1</td>
                                        <td>5</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td class="fw-600 pb-30">Total</td>
                                        <td class="fw-600 pb-30">0</td>
                                        <td class="fw-600 pb-30">13</td>
                                        <td class="fw-600 pb-30">1</td>
                                        <td class="fw-600 pb-30">14</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Leads Generated -->
                <div class="mb-5">
                    <p class="mb-20 font-18 fw-600">Leads Generated</p>
                
                    {{-- Controls row --}}
                    <form id="lead-filters" method="GET"
                          class="d-flex justify-content-between align-items-center mb-20 flex-wrap gap-12"
                          role="search" aria-label="Filter leads">
                
                        {{-- keep existing query when changing search/per_page --}}
                        @foreach (request()->except(['search', 'per_page', 'page']) as $k => $v)
                            @if (is_array($v))
                                @foreach ($v as $vv)
                                    <input type="hidden" name="{{ $k }}[]" value="{{ $vv }}">
                                @endforeach
                            @else
                                <input type="hidden" name="{{ $k }}" value="{{ $v }}">
                            @endif
                        @endforeach
                
                        {{-- Search (server-side). If you use Vue, v-model is optional --}}
                        <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"
                                   value="{{ old('search', $search) }}"
                                   placeholder="Search agent or company"
                                   aria-label="Search leads"
                                   v-model="search_text"
                                   @keyup.enter="() => { document.getElementById('lead-filters').submit(); }">
                            <i class="material-icons" v-if="search_text" @click="search_text=''; document.getElementById('search').value=''; document.getElementById('lead-filters').submit();">close</i>
                        </div>
                
                        <div class="d-flex align-items-center mx-auto">
                            {{-- Per page (server-side). Using change event to submit. --}}
                            <div class="form-group select btm-arrow mb-0 d-flex without-label align-items-center">
                                <label class="mb-0 gray" style="white-space: nowrap;">Records Per Page</label>
                                <select class="form-control" id="per_page" name="per_page"
                                        onchange="document.getElementById('lead-filters').submit();"
                                        v-model="per_page">
                                    @foreach([25,50,100] as $pp)
                                        <option value="{{ $pp }}" {{ (int)request('per_page', $agentsPage->perPage()) === $pp ? 'selected' : '' }}>
                                            {{ $pp }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <span class="ml-2">Total {{ number_format($agentsPage->total()) }}</span>
                        </div>
                
                        {{-- Pagination (shared partial) --}}
                        @if($agentsPage->count())
                            <div class="pagination d-flex justify-content-center ml-auto">
                                @php($paginator = $agentsPage)
                                @include('admin.common.paginate_js')
                            </div>
                        @endif
                    </form>
                
                    <div class="table-wrapper">
                        <div class="table-data" @if(!$agentsPage->count()) style="display:none" @endif v-if="items?.length ?? true">
                            <div class="table-responsive table-checkable">
                                <table class="table" id="mtcTable">
                                    <thead>
                                        @php
                                            $currentBy  = $sort['by'] ?? 'agent';
                                            $currentDir = $sort['dir'] ?? 'asc';
                                            $flip = fn($by) => ($currentBy === $by && $currentDir === 'asc') ? 'desc' : 'asc';
                                            $sortIcon = function($by) use ($currentBy, $currentDir) {
                                                if ($currentBy !== $by) return '';
                                                return $currentDir === 'asc' ? '▲' : '▼';
                                            };
                                        @endphp
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">
                                                <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'agent', 'sort_dir' => $flip('agent'), 'page' => 1]) }}">
                                                    Growth Agents {!! $sortIcon('agent') !!}
                                                </a>
                                            </th>
                                            @foreach ($companies as $company)
                                                @php $colKey = 'company_'.$company->id; @endphp
                                                <th scope="col">
                                                    <a href="{{ request()->fullUrlWithQuery(['sort_by' => $colKey, 'sort_dir' => $flip($colKey), 'page' => 1]) }}">
                                                        {{ $company->name }} {!! $sortIcon($colKey) !!}
                                                    </a>
                                                </th>
                                            @endforeach
                                            <th scope="col">
                                                <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'total', 'sort_dir' => $flip('total'), 'page' => 1]) }}">
                                                    Total {!! $sortIcon('total') !!}
                                                </a>
                                            </th>
                                        </tr>
                                    </thead>
                
                                    <tbody>
                                        @forelse ($leadRows as $r)
                                            <tr>
                                                <td>{{ $r['index'] }}</td>
                                                <td>{{ $r['agent'] }}</td>
                                                @foreach ($companies as $company)
                                                    <td>{{ $r['cols'][$company->id] ?? 0 }}</td>
                                                @endforeach
                                                <td><strong>{{ $r['total'] }}</strong></td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="{{ 2 + $companies->count() }}" class="text-center">No data found</td>
                                            </tr>
                                        @endforelse
                
                                        {{-- Footer row (totals for current page) --}}
                                        <tr>
                                            <td></td>
                                            <td class="fw-600 pb-30">Total</td>
                                            @foreach ($companies as $company)
                                                <td class="fw-600 pb-30">{{ $leadTotals[$company->id] ?? 0 }}</td>
                                            @endforeach
                                            <td class="fw-600 pb-30">{{ $leadTotals['__grand__'] ?? 0 }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                
                        {{-- If empty --}}
                        @if(!$agentsPage->count())
                            <div class="text-center py-4">No data found</div>
                        @endif
                    </div>
                </div>
                
                
            </div>


        </div> <!-- /.right-sec -->
        </div> <!-- /.two-col -->
    </main>
@endsection

@push('pageJs')
@endpush