@extends('layouts.main')

@section('main-content')
    @php
        $queryParams = isset($queryParams) ? collect($queryParams) : collect(request()->all());
        $filterUrl = Request::fullUrl();
        $clearFilterUrl = explode("?", $filterUrl)[0];
        $showFilter = collect($queryParams)->filter(function ($value, $key){ return !empty($value); })->isNotEmpty();
        $accountingPeriods = getAccountingPeriods();
        $deepLink = isset($_GET['deep_link']) ? true : false;
    @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="$('#ReportFilters, #filter_instruction').toggle('show');">Show/Hide Filter
                </button>
            </div>
        </div>

        @include('components.reports.filters', ['filtersToShow' => ['ministries', 'departments'] ])

        @include('components.reports.received-and-expected-revenue-card')

        <div class="row">
            <div class="col-12">
                <div class="card mt-0">
                    <div class="card-content collapse show">
                        <div class="card-body card-dashboard">

                            @include('components.reports.download-report-button')

                            <table class="table table-bordered report-table-res">
                                <caption></caption>
                                <thead class="thead-dark">
                                <tr>
                                    <th scope="col" colspan="5" class="text-uppercase" style="font-size: 18px">Revenue
                                        Breakdown by Departments
                                    </th>
                                </tr>
                                <tr>
                                    <th scope="col">S/N</th>
                                    <th scope="col" @if($deepLink) style="display: none;" @endif>Ministry</th>
                                    <th scope="col">Department</th>
                                    <th scope="col">Expected Revenue</th>
                                    <th scope="col">Received Revenue</th>
                                </tr>
                                </thead>
                                </tbody>
                            </table>
                            @include('components.reports.loader')
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    @include('components.reports.options', ['linksToHide' => ['ministry', 'department'] ])
@endsection

@section('more-scripts')
    <script src="{{ asset('js/pages/reports-filter-handler.js') }}"></script>
    <script>
        const queryString = "{{ convertRequestToQueryString() }}";
        const deepLink = "{{ $deepLink }}";

        $(function () {
            fetchTableData();
        })

        function fetchTableData()
        {
            $.get(`/report/departments-revenue-report-data?${queryString}`, function(res){
                let data = res.data;
                let totalActualRevenue = parseFloat(data.totalActualRevenue).toLocaleString("en-US", { maximumFractionDigits: 2}) ?? 0;
                let totalExpectedRevenue = parseFloat(data.totalExpectedRevenue).toLocaleString("en-US", { maximumFractionDigits: 2}) ?? 0;
                let style = deepLink ? "style='display: none;'" : '';
                let content;
                data.revenueReportPayload.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;
                    content+=`<tr>
                            <td>${indx+1}</td>
                            <td class="nk-tb-col" ${style}>${item.ministry_name}</td>
                            <td class="nk-tb-col"><a href="javascript:void(0)" onclick="setOptionsUrl(${item.department_id})" data-toggle="modal" data-target="#optionsModal" > ${item.department_name} </a></td>
                            <td class="nk-tb-col naira-prefix">${expected_revenue}</td>
                            <td class="nk-tb-col naira-prefix">${actual_revenue}</td>
                        </tr>`;
                });

                let tableBody = `<tbody>${content}</tbody>`;

                $('.report-table-res').append(tableBody)
                $('#totalActualRevenue').text(totalActualRevenue);
                $('#totalExpectedRevenue').text(totalExpectedRevenue);
                $('#stat-card').removeClass('d-none');
                $('#card-initial-loader, .card-initial-loader').hide();
            });
        }

        function setOptionsUrl(department_id)
        {
            let ministry = $('#filter_ministry').val() ?? '';
            let service = $('#filter_service').val() ?? '';
            let department = department_id;
            let accounting_period = $('#accounting_period').val() ?? '';
            let payment_channel = $('#filter_payment_channels').val() ?? '';
            let payment_providers = $('#filter_payment_providers').val() ?? '';
            let from = $('#filter_start_date').val() ?? null;
            let to = $('#filter_end_date').val() ?? null;

            let query_string = `filter_ministry=${ministry}&filter_service=${service}&filter_department=${department}&filter_payment_channels=${payment_channel}&filter_payment_providers=${payment_providers}&accounting_period=${accounting_period}&filter_start_date=${from}&filter_end_date=${to}&deep_link=1`;
            let monthly_report_query_string = `rpt_ministry=${ministry}&rpt_department=${department}&accounting_period=${accounting_period}`;

            $('#ministries-report-options').attr('href', `{{ route('report.departments_revenue_report') }}?${query_string}`);
            $('#departments-report-options').attr('href', `{{ route('report.departments_revenue_report') }}?${query_string}`);
            $('#services-report-options').attr('href', `{{ route('report.services_revenue_report') }}?${query_string}`);
            $('#payment-providers-report-options').attr('href', `{{ route('report.payment_collectors_transactions') }}?${query_string}`);
            $('#payment-channels-report-options').attr('href', `{{ route('report.payment_channels_transactions') }}?${query_string}`);
            $('#transactions-report-options').attr('href', `{{ route('payment.list_all') }}?department=${department_id}&payment_from=${from}&payment_to=${to}&accounting_period=${accounting_period}`);
            $('#bills-report-options').attr('href', `{{ route('generated_bill.list') }}?department=${department_id}&bill_created_from=${from}&bill_created_to=${to}&accounting_period=${accounting_period}`);
            $('#monthly-report-options').attr('href', `{{ route('report.monthly_breakdown') }}?${monthly_report_query_string}`)
        }
    </script>
    <script src="{{ asset('js/filter-datepicker-handler.js') }}"></script>
@stop