@extends('admin.master_layout')
@section('title')
    <title>{{ __('translate.Accounting') }}</title>
@endsection

@section('body-header')
    <h3 class="crancy-header__title m-0">{{ __('translate.Accounting') }}</h3>
    <p class="crancy-header__text">{{ __('translate.API Usage & Costs') }} >> {{ __('translate.Accounting') }}</p>
@endsection

@push('style_section')
    <link rel="stylesheet" href="{{ asset('backend/css/charts.min.css') }}">
@endpush

@section('body-content')
<section class="crancy-adashboard crancy-show">
    <div class="container container__bscreen">
        <div class="row">
            <div class="col-12">
                <div class="crancy-body">
                    <div class="crancy-dsinner">

                        @include('admin.accounting.partials.filters', ['filters' => $filters, 'providers' => $data['providers'], 'featureLabels' => $data['feature_labels']])

                        @include('admin.accounting.partials.period-rollups', ['rollups' => $data['period_rollups']])

                        <div class="row mg-top-30">
                            <div class="col-lg-3 col-md-6">
                                <div class="crancy-ecom-card">
                                    <h4>{{ __('translate.Total API Cost') }}</h4>
                                    <p class="crancy-ecom-card__amount">{{ number_format($data['totals']['cost'], 4) }} {{ config('api_tracking.default_currency') }}</p>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="crancy-ecom-card">
                                    <h4>{{ __('translate.Total Requests') }}</h4>
                                    <p class="crancy-ecom-card__amount">{{ number_format($data['totals']['requests']) }}</p>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="crancy-ecom-card">
                                    <h4>{{ __('translate.Error Requests') }}</h4>
                                    <p class="crancy-ecom-card__amount">{{ number_format($data['totals']['errors']) }}</p>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="crancy-ecom-card">
                                    <h4>{{ __('translate.Period') }}</h4>
                                    <p class="crancy-ecom-card__amount" style="font-size:14px;">{{ $data['start']->format('d.m.Y') }} — {{ $data['end']->format('d.m.Y') }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="row mg-top-30">
                            <div class="col-lg-8">
                                <div class="crancy-table crancy-table--v3">
                                    <div class="crancy-customer-filter">
                                        <div class="crancy-customer-filter__single">
                                            <h4 class="crancy-product-card__title">{{ __('translate.Cost evolution') }}</h4>
                                        </div>
                                    </div>
                                    <div class="p-4">
                                        <canvas id="apiCostLineChart" height="120"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="crancy-table crancy-table--v3">
                                    <div class="crancy-customer-filter">
                                        <div class="crancy-customer-filter__single">
                                            <h4 class="crancy-product-card__title">{{ __('translate.Cost by provider') }}</h4>
                                        </div>
                                    </div>
                                    <div class="p-4">
                                        <canvas id="apiCostBarChart" height="200"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mg-top-30">
                            <div class="col-lg-6">
                                <div class="crancy-table crancy-table--v3">
                                    <div class="crancy-customer-filter">
                                        <h4 class="crancy-product-card__title">{{ __('translate.Top costly APIs') }}</h4>
                                    </div>
                                    <table class="crancy-table__main crancy-table__main-v3">
                                        <thead><tr><th>{{ __('translate.Provider') }}</th><th>{{ __('translate.Requests') }}</th><th>{{ __('translate.Cost') }}</th></tr></thead>
                                        <tbody>
                                        @forelse($data['top_costly'] as $row)
                                            <tr>
                                                <td>{{ api_provider_label($row->provider) }}</td>
                                                <td>{{ number_format($row->requests) }}</td>
                                                <td>{{ number_format($row->cost, 4) }}</td>
                                            </tr>
                                        @empty
                                            <tr><td colspan="3">{{ __('translate.No data') }}</td></tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="crancy-table crancy-table--v3">
                                    <div class="crancy-customer-filter">
                                        <h4 class="crancy-product-card__title">{{ __('translate.Cost by feature') }}</h4>
                                    </div>
                                    <table class="crancy-table__main crancy-table__main-v3">
                                        <thead><tr><th>{{ __('translate.Feature') }}</th><th>{{ __('translate.Requests') }}</th><th>{{ __('translate.Cost') }}</th></tr></thead>
                                        <tbody>
                                        @forelse($data['by_feature'] as $row)
                                            <tr>
                                                <td>{{ api_feature_label($row->feature_type) }}</td>
                                                <td>{{ number_format($row->requests) }}</td>
                                                <td>{{ number_format($row->cost, 4) }}</td>
                                            </tr>
                                        @empty
                                            <tr><td colspan="3">{{ __('translate.No data') }}</td></tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="mg-top-20">
                            <a href="{{ route('admin.accounting.logs', request()->query()) }}" class="crancy-btn">{{ __('translate.View all logs') }}</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('js_section')
<script src="{{ asset('backend/js/charts.js') }}"></script>
<script>
const timelineLabels = @json($data['timeline']->pluck('period_date'));
const timelineCosts = @json($data['timeline']->pluck('cost'));
const providerLabels = @json($data['by_provider']->map(fn($r) => api_provider_label($r->provider)));
const providerCosts = @json($data['by_provider']->pluck('cost'));

if (typeof Chart !== 'undefined') {
    new Chart(document.getElementById('apiCostLineChart'), {
        type: 'line',
        data: {
            labels: timelineLabels.length ? timelineLabels : ['—'],
            datasets: [{
                label: '{{ __('translate.Cost') }}',
                data: timelineCosts.length ? timelineCosts : [0],
                borderColor: '#fd4917',
                backgroundColor: 'rgba(253, 73, 23, 0.1)',
                fill: true,
                tension: 0.3,
            }]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });

    new Chart(document.getElementById('apiCostBarChart'), {
        type: 'bar',
        data: {
            labels: providerLabels.length ? providerLabels : ['—'],
            datasets: [{
                label: '{{ __('translate.Cost') }}',
                data: providerCosts.length ? providerCosts : [0],
                backgroundColor: '#fd4917',
            }]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });
}
</script>
@endpush