@extends('layouts.main')

@section('main-content')

    @php
        $filterUrl = Request::fullUrl();
        $clearFilterUrl = explode("?", $filterUrl)[0];
        $queryParams = $queryParams ?? collect(request()->only('filter_start_date', 'filter_end_date', 'accounting_period'));
        $showFilter = collect($queryParams)->filter(function ($value, $key){ return !empty($value); })->isNotEmpty();
        $accountingPeriods = getAccountingPeriods();
    @endphp
    <section class="main-content-section thin-section-border">
        <div class="row m-2">
            <div class="col-md-6 col-sm-12">
                <h5 id="filter_instruction" style="display: none;">Apply any or all of the filters below to streamline your search</h5>
            </div>
            <div class="col-md-6 col-sm-12 text-right">
                <a href="{{ $clearFilterUrl }}" class="btn underline">Clear Filter</a>
                <button class="btn btn-lg btn-primary float-right" id="toggle_filter_section" onclick="$('#bills_filter_section, #filter_instruction').toggle('show');">Show/Hide Filter
                </button>
            </div>
        </div>
        <div class="row m-2">
            <div class="col-sm-12 m-auto">
                <form id="bills_filter_section" action="{{ $filterUrl }}" class="row pt-2">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label" for="filter_start_date">Date From</label>
                            <input type="date" value="{{ old('filter_start_date', request()->filter_start_date) }}" id="filter_start_date" name="filter_start_date"
                                   placeholder="From Date" class="form-control pick-date from-date">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label" for="filter_end_date">Date Till</label>
                            <input type="date" value="{{ old('filter_end_date', request()->filter_end_date) }}" id="filter_end_date" name="filter_end_date"
                                   placeholder="To Date"  class="form-control pick-date to-date">
                        </div>
                    </div>
                    <div class="form-group col-lg-3 col-md-4 col-sm-6">
                        <label class="form-label" for="order_status">Accounting Period</label>
                        <select name="accounting_period" id="accounting_period" class="form-select show-placeholder" data-preselected="{{ old('accounting_period') }}"
                            data-placeholder="Filter By Accounting Period">
                            <option value="">Filter by Accounting Period</option>
                            @foreach($accountingPeriods as $period)
                                <option value="{{ $period->id }}" {{ (old('accounting_period', request()->accounting_period) == $period->id) ? 'selected': '' }}>{{ $period->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="form-label"></label>
                            <button class="btn btn-primary w-100 h-100">Filter</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-content collapse show">
                        <div class="card-body card-dashboard">
                            <div class="row mb-2">
                                <div class="col-md-6 offset-md-6">
                                    <div class="dt-buttons btn-group float-right">
                                        <a class="btn btn-outline-success" href="{{ count(explode("?", $filterUrl)) > 1 ? $filterUrl . '&download_report=yes' : $filterUrl .'?download_report=yes'}}" tabindex="0" aria-controls="example"><span class="icon ni ni-download"> </span>Download Report</a>
                                    </div>
                                </div>
                            </div>
                            <table class="table table-bordered report-table-res top-table table-responsive">
                                <caption>Breakdown of top revenue generators by percentage of bills paid for</caption>
                                <thead class="thead-dark">
                                <tr>
                                    <th scope="col" colspan="5" class="text-uppercase">Top Performers</th>
                                </tr>
                                <tr>
                                    <th scope="col">S/N</th>
                                    <th scope="col">{{ $displayNameColumn }}</th>
                                    <th scope="col">Expected</th>
                                    <th scope="col">Revenue</th>
                                    <th scope="col">Percentage Received</th>
                                </tr>
                                </thead>
                            </table>
                            <div class="row" id="card-initial-loader">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-body container-to-center-items border" style="height: 300px !important;">
                                            <div class="dashb-loader"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-content collapse show">
                        <div class="card-body card-dashboard">
                            <table class="table table-bordered report-table-res worst-table table-responsive">
                                <caption></caption>
                                <thead class="thead-dark thead-dark-red">
                                <tr>
                                    <th scope="col" colspan="5" class="text-uppercase">Worst Performers</th>
                                </tr>
                                <tr>
                                    <th scope="col">S/N</th>
                                    <th scope="col">{{ $displayNameColumn }}</th>
                                    <th scope="col">Expected</th>
                                    <th scope="col">Revenue</th>
                                    <th scope="col">Percentage Received</th>
                                </tr>
                                </thead>
                            </table>
                            <div class="row" id="card-initial-loader">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-body container-to-center-items border" style="height: 300px !important;">
                                            <div class="dashb-loader"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('more-scripts')
    <script>
        const queryString = "{{ convertRequestToQueryString() }}";
        const currentRoute = "{{ request()->url() }}";

        $(document).ready(function () {
            @if(!$showFilter)
                $('#bills_filter_section').hide();
            @endif

            fetchTableData()
        })

        function fetchTableData()
        {
            $.get(`/report/performance-data?${queryString}`, function(res){
                let data = res.data;
                let topPerformersContent;
                let worstPerformersContent;

                data.topPerformers.forEach((item, indx) => {
                    let expected_revenue = item.expected_revenue ? parseFloat(item.expected_revenue).toLocaleString("en-US", { maximumFractionDigits: 2}) : 0;
                    let actual_revenue = item.actual_revenue ? parseFloat(item.actual_revenue).toLocaleString("en-US", { maximumFractionDigits: 2}) : 0;
                    let displayName = data.routeUrl ? `<a href="${data.routeUrl}/${item.id}">${item.display_name}</a>` : item.display_name;

                    topPerformersContent+=`<tr>
                            <td>${indx+1}</td>
                            <td class="nk-tb-col">${displayName}</td>
                            <td class="nk-tb-col naira-prefix">${expected_revenue}</td>
                            <td class="nk-tb-col naira-prefix">${actual_revenue}</td>
                            <td class="nk-tb-col">${item.percentage}<span class="icon ni ni-percent"></span></td>
                        </tr>`;
                });

                data.worstPerformers.forEach((item, indx) => {
                    let expected_revenue = item.expected_revenue ? parseFloat(item.expected_revenue).toLocaleString("en-US", { maximumFractionDigits: 2}) : 0;
                    let actual_revenue = item.actual_revenue ? parseFloat(item.actual_revenue).toLocaleString("en-US", { maximumFractionDigits: 2}) : 0;
                    let displayName = data.routeUrl ? `<a href="${data.routeUrl}/${item.id}">${item.display_name}</a>` : item.display_name;

                    worstPerformersContent+=`<tr>
                            <td>${indx+1}</td>
                            <td class="nk-tb-col">${displayName}</td>
                            <td class="nk-tb-col naira-prefix">${expected_revenue}</td>
                            <td class="nk-tb-col naira-prefix">${actual_revenue}</td>
                            <td class="nk-tb-col">${item.percentage}<span class="icon ni ni-percent"></span></td>
                        </tr>`;
                });

                let top = `<tbody>${topPerformersContent}</tbody>`;
                let worst = `<tbody>${worstPerformersContent}</tbody>`;

                $('.top-table').append(top)
                $('.worst-table').append(worst)
                $('#stat-card').removeClass('d-none');
                $('#card-initial-loader, .card-initial-loader').hide();
            });
        }

    </script>
    <script src="{{ asset('js/filter-datepicker-handler.js') }}"></script>
@endsection