@extends('layouts.master')
@section('title', __('locale.Billing_Dashboard'))
@section('content')
    <div class="main-content app-content mt-0">
        <div class="side-app">
            <div class="main-container container-fluid">
                <!-- PAGE-HEADER -->
                <div class="page-header">
                    <h1 class="page-title">{{ __('locale.Billing_Management') }} <i class="fe fe-credit-card"></i></h1>
                    <div>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="javascript:void(0)">{{ __('locale.Billing_Dashboard') }}</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('common.home') }}</li>
                        </ol>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="row mt-3 px-3">
                                <div class="col-md-3 col-6">
                                    <div class="stat-card">
                                        <h6>{{ __('locale.Current_Period') }}</h6>
                                        <h3>{{ $currentMonthName ?? date('F') }} {{ $currentYear ?? date('Y') }}</h3>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="stat-card">
                                        <h6>{{ __('locale.Total_Revenue_YTD') }}</h6>
                                        <h3 class="text-success">${{ number_format($monthlyRevenue->sum('revenue'), 2) }}
                                        </h3>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="stat-card">
                                        <h6>{{ __('locale.Total_API_Calls_YTD') }}</h6>
                                        <h3 class="text-warning">{{ number_format($monthlyRevenue->sum('calls')) }}</h3>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="stat-card">
                                        <h6>{{ __('locale.Pending_Invoices') }}</h6>
                                        <h3 class="text-danger">{{ $recentInvoices->where('status', 'pending')->count() }}
                                        </h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">{{ __('locale.Monthly_Revenue') }} {{ $currentYear }}</h3>
                            </div>
                            <div class="card-body">
                                <canvas id="revenueChart" style="height: 300px;"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">{{ __('locale.Top_Partners') }} -
                                    {{ date('F', mktime(0, 0, 0, $currentMonth, 1)) }}
                                </h3>
                            </div>
                            <div class="card-body p-0">
                                <ul class="list-group list-group-flush">
                                    @foreach($topPartners as $partner)
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            {{ $partner->partner->name ?? 'N/A' }}
                                            <span class="badge badge-primary badge-pill">
                                                {{ number_format($partner->total_billable_calls) }} {{ __('locale.Calls') }}
                                            </span>
                                        </li>
                                    @endforeach
                                    @if($topPartners->isEmpty())
                                        <li class="list-group-item text-center text-muted">{{ __('locale.No_Data_Available') }}
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h3 class="card-title mb-0">{{ __('locale.Recent_Invoices') }}</h3>
                                <div class="card-tools">
                                    <a href="{{ route('admin.billing.index') }}" class="btn btn-primary btn-sm">
                                        {{ __('locale.View_All_Invoices') }}
                                    </a>
                                </div>
                            </div>
                            <div class="card-body p-0">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>{{ __('locale.Invoice_Number') }}</th>
                                            <th>{{ __('locale.Partner') }}</th>
                                            <th>{{ __('locale.Period') }}</th>
                                            <th>{{ __('locale.Calls') }}</th>
                                            <th>{{ __('locale.Amount') }}</th>
                                            <th>{{ __('locale.Status') }}</th>
                                            <th>{{ __('locale.Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($recentInvoices as $invoice)
                                            <tr>
                                                <td>{{ $invoice->invoice_number }}</td>
                                                <td>{{ $invoice->partner->name ?? 'N/A' }}</td>
                                                <td>{{ date('F Y', mktime(0, 0, 0, $invoice->month, 1, $invoice->year)) }}</td>
                                                <td>{{ number_format($invoice->total_billable_calls) }}</td>
                                                <td>{{ $invoice->total_cost_formatted }}</td>
                                                <td>
                                                    @if($invoice->status == 'paid')
                                                        <span class="badge badge-success">{{ __('locale.Paid_Status') }}</span>
                                                    @elseif($invoice->status == 'pending')
                                                        <span class="badge badge-warning">{{ __('locale.Pending_Status') }}</span>
                                                    @else
                                                        <span class="badge badge-danger">{{ ucfirst($invoice->status) }}</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href="{{ route('admin.billing.show', $invoice) }}"
                                                        class="btn btn-sm btn-info">
                                                        <i class="fe fe-eye"></i> {{ __('locale.View') }}
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('bottom_script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        $(document).ready(function () {
            // Revenue Chart
            const ctx = document.getElementById('revenueChart').getContext('2d');
            const revenueData = @json($monthlyRevenue);

            const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            const revenue = Array(12).fill(0);

            revenueData.forEach(item => {
                revenue[item.month - 1] = item.revenue;
            });

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: months,
                    datasets: [{
                        label: 'Revenue ($)',
                        data: revenue,
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        tension: 0.1,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function (value) {
                                    return '$' + value.toLocaleString();
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>
@endsection