@extends('admin.admin_dashboard')
@section('admin')

<style>
#invoice_chartt {
    min-height: 350px;
}
</style>
<div class="content container-fluid">
    <div class="row">
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card">
                <div class="card-body">
                    <div class="dash-widget-header">
                        <span class="dash-widget-icon bg-1">
                            <i class="fas fa-user"></i>
                        </span>
                        <div class="dash-count">
                            <div class="dash-title">Total Partners</div>
                            <div class="dash-counts">
                                <p>{{ $totalPartners }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="progress progress-sm mt-3">
                        <div class="progress-bar bg-5" role="progressbar" style="width: {{ $partnerChange }}%"
                            aria-valuenow="{{ $partnerChange }}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <p class="text-muted mt-3 mb-0">
                        <span class="{{ $partnerChange >= 0 ? 'text-success' : 'text-danger' }} me-1">
                            <i
                                class="fas {{ $partnerChange >= 0 ? 'fa-arrow-up' : 'fa-arrow-down' }} me-1"></i>{{ abs($partnerChange) }}%
                        </span> since last week
                    </p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card">
                <div class="card-body">
                    <div class="dash-widget-header">
                        <span class="dash-widget-icon bg-2">
                            <i class="fas fa-users"></i>
                        </span>
                        <div class="dash-count">
                            <div class="dash-title">Total Customers</div>
                            <div class="dash-counts">
                                <p>{{ $totalCustomers }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="progress progress-sm mt-3">
                        <div class="progress-bar bg-6" role="progressbar" style="width: {{ $customerChange }}%"
                            aria-valuenow="{{ $customerChange }}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <p class="text-muted mt-3 mb-0">
                        <span class="{{ $customerChange >= 0 ? 'text-success' : 'text-danger' }} me-1">
                            <i
                                class="fas {{ $customerChange >= 0 ? 'fa-arrow-up' : 'fa-arrow-down' }} me-1"></i>{{ abs($customerChange) }}%
                        </span> since last week
                    </p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card">
                <div class="card-body">
                    <div class="dash-widget-header">
                        <span class="dash-widget-icon bg-3">
                            <i class="fas fa-file-alt"></i>
                        </span>
                        <div class="dash-count">
                            <div class="dash-title">Discount Usages</div>
                            <div class="dash-counts">
                                <p>{{ $totalDiscountUsages }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="progress progress-sm mt-3">
                        <div class="progress-bar bg-7" role="progressbar" style="width: {{ $discountUsageChange }}%"
                            aria-valuenow="{{ $discountUsageChange }}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <p class="text-muted mt-3 mb-0">
                        <span class="{{ $discountUsageChange >= 0 ? 'text-success' : 'text-danger' }} me-1">
                            <i
                                class="fas {{ $discountUsageChange >= 0 ? 'fa-arrow-up' : 'fa-arrow-down' }} me-1"></i>{{ abs($discountUsageChange) }}%
                        </span> since last week
                    </p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card">
                <div class="card-body">
                    <div class="dash-widget-header">
                        <span class="dash-widget-icon bg-4">
                            <i class="far fa-file"></i>
                        </span>
                        <div class="dash-count">
                            <div class="dash-title">Active Discounts</div>
                            <div class="dash-counts">
                                <p>{{ $activeDiscounts }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="progress progress-sm mt-3">
                        <div class="progress-bar bg-8" role="progressbar" style="width: 100%" aria-valuenow="100"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <p class="text-muted mt-3 mb-0">
                        <span class="text-info me-1"><i class="fas fa-clock me-1"></i>Live Data</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">

        <div class="col-xl-6 d-flex">
            <div class="card flex-fill">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title">Monthly Discount Chart</h5>
                        <div class="dropdown">
                            <button class="btn btn-white btn-sm dropdown-toggle" type="button" id="dropdownMenuButton"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                Monthly
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <li><a href="javascript:void(0);" class="dropdown-item">Weekly</a></li>
                                <li><a href="javascript:void(0);" class="dropdown-item active">Monthly</a></li>
                                <li><a href="javascript:void(0);" class="dropdown-item">Yearly</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {{-- Chart Area --}}
                    <canvas id="monthly_chart" height="200"></canvas>
                </div>
            </div>
        </div>

        <div class="col-xl-6 d-flex">
            <div class="card flex-fill">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title">Customer Wise Monthly PieChart</h5>
                        <div class="dropdown">
                            <form method="GET" id="filterForm">
                                <input type="hidden" name="filter" id="filterInput" value="{{ $filter }}">
                                <button class="btn btn-white btn-sm dropdown-toggle" type="button"
                                    id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                    {{ ucfirst($filter) }}
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                    <li><a class="dropdown-item" href="#" onclick="changeFilter('weekly')">Weekly</a>
                                    </li>
                                    <li><a class="dropdown-item" href="#" onclick="changeFilter('monthly')">Monthly</a>
                                    </li>
                                    <li><a class="dropdown-item" href="#" onclick="changeFilter('yearly')">Yearly</a>
                                    </li>
                                </ul>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div id="invoice_chartt"></div>
                    <div class="text-center text-muted">
                        <div class="row">
                            <div class="col-4">
                                <div class="mt-4">
                                    <p class="mb-2 text-truncate"><i class="fas fa-circle text-primary me-1"></i> Top 1
                                    </p>
                                    <h5>{{ $pieChart[0]['percentage'] ?? 0 }}%</h5>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="mt-4">
                                    <p class="mb-2 text-truncate"><i class="fas fa-circle text-success me-1"></i> Top 2
                                    </p>
                                    <h5>{{ $pieChart[1]['percentage'] ?? 0 }}%</h5>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="mt-4">
                                    <p class="mb-2 text-truncate"><i class="fas fa-circle text-warning me-1"></i> Top 3
                                    </p>
                                    <h5>{{ $pieChart[2]['percentage'] ?? 0 }}%</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-6">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col">
                            <h5 class="card-title">Customer Get Discount</h5>
                        </div>
                        <div class="col-auto">
                            <a href="invoices.html" class="btn-right btn btn-sm btn-outline-primary">
                                View All
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-stripped table-hover">
                            <thead class="thead-light">
                                <tr>
                                    <th>Customer Name</th>
                                    <th>Partner Name</th>
                                    <th>Total Get_D</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($summary as $row)
                                <tr>
                                    <td>{{ $row->customer->name ?? 'N/A' }}</td>
                                    <td>{{ $row->partner->partner_name ?? 'N/A' }}</td>
                                    <td>{{ $row->total_discounts }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

{{-- Script Section --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const pieChartData = @json($pieChart);

    const options = {
        chart: {
            type: 'pie',
            height: 350
        },
        labels: pieChartData.map(item => item.name),
        series: pieChartData.map(item => item.percentage),
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 300
                },
                legend: {
                    position: 'bottom'
                }
            }
        }],
        tooltip: {
            y: {
                formatter: function(val) {
                    return val + "%";
                }
            }
        }
    };

    const pieChart = new ApexCharts(document.querySelector("#invoice_chartt"), options);
    pieChart.render();
});
</script>

<script>
const monthlyLabels = @json($monthlyLabels); // Example: ['Jan', 'Feb', ..., 'Dec']
const monthlyData = @json($monthlyDiscounts); // Example: [120, 140, 100, ...]

const ctxMonthly = document.getElementById('monthly_chart').getContext('2d');

const monthlyChart = new Chart(ctxMonthly, {
    type: 'bar',
    data: {
        labels: monthlyLabels,
        datasets: [{
            label: 'Monthly Discount Usages',
            data: monthlyData,
            backgroundColor: 'rgba(75, 192, 192, 0.6)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
            borderRadius: 6
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Usages'
                }
            },
            x: {
                title: {
                    display: true,
                    text: 'Month'
                }
            }
        }
    }
});
</script>
<script>
function changeFilter(type) {
    document.getElementById('filterInput').value = type;
    document.getElementById('filterForm').submit();
}
</script>

@endsection