{{-- Product Codes --}}
<div class="card card-default bg-transparent border-0 mb-4">
    <div class="card-header p-0">
        <h2>Product Codes</h2>
    </div>
    <div class="card-body px-0 pb-0">
        <div class="row">
            <div class="col-lg-3">
                <div class="card card-default">
                    <div class="d-flex p-5 justify-content-between">
                        <div class="icon-md bg-primary rounded-circle mr-3">
                            <i class="mdi mdi-qrcode"></i>
                        </div>
                        <div class="text-right">
                            <span class="h2 d-block">{{ $data['product_codes_count'] }}</span>
                            <p>Total Codes</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="card card-default">
                    <div class="d-flex p-5 justify-content-between">
                        <div class="icon-md bg-warning rounded-circle mr-3">
                            <i class="mdi mdi-qrcode-edit"></i>
                        </div>
                        <div class="text-right">
                            <span class="h2 d-block">{{ $data['used_product_codes_count'] }}</span>
                            <p>Used Codes</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="card card-default">
                    <div class="d-flex p-5 justify-content-between">
                        <div class="icon-md bg-success rounded-circle mr-3">
                            <i class="mdi mdi-qrcode-edit"></i>
                        </div>
                        <div class="text-right">
                            <span class="h2 d-block">{{ $data['unused_product_codes_count'] }}</span>
                            <p>Unused Codes</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="card card-default">
                    <div class="d-flex p-5 justify-content-between">
                        <div class="icon-md bg-danger rounded-circle mr-3">
                            <i class="mdi mdi-delete-empty"></i>
                        </div>
                        <div class="text-right">
                            <span class="h2 d-block">{{ $data['trashed_product_codes_count'] }}</span>
                            <p>Trashed Codes</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="row mb-5">
    <div class="col-lg-6">
        <h4 class="mb-3">Redeemable Gifts</h4>
        <div class="card">
            <div class="card-body pb-0">
                <div id="redeem-gift-chart"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <h4 class="mb-3">Redeem Requests</h4>
        <div class="card">
            <div class="card-body pb-0">
                <div id="redeem-request-chart"></div>
            </div>
        </div>
    </div>
</div>


<div class="mb-5 mt-5">
    <h4 class="mb-3">Users</h4>
    <div class="card">
        <div class="card-body pb-0">
            <div id="users-chart"></div>
        </div>
    </div>
</div>

@section('scripts')
    <script>
        var RedeemPieChart = document.querySelector("#redeem-gift-chart");
        if (RedeemPieChart !== null) {
            var redeemPieChartOptions = {
                chart: {
                    type: "donut",
                },
                colors: ["#0BCB8E", "#FE5461", "#fd5190"],
                labels: ["Active Gifts", "Inactive Gifts"],
                legend: {
                    position: "top",
                    horizontalAlign: "left",
                    markers: {
                        radius: 0
                    },
                },
                series: [
                    {{ $data['active_redeemable_gifts_percentage'] }},
                    {{ $data['in_active_redeemable_gifts_percentage'] }}
                ],
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return +val + "%";
                        },
                    },
                },
            };

            var chart = new ApexCharts(RedeemPieChart, redeemPieChartOptions);
            chart.render();
        }

        var requestPieChart = document.querySelector("#redeem-request-chart");
        if (requestPieChart !== null) {
            var requestPieChartOptions = {
                chart: {
                    type: "pie",
                },
                colors: ["#FEC400", "#9E6DE0", "#0BCB8E", "#FE5461", "#fd5190"],
                labels: ["Pending", "In-Progress", "Completed", "Canceled"],
                legend: {
                    position: "top",
                    horizontalAlign: "left",
                    markers: {
                        radius: 0
                    },
                },
                series: [
                    {{ $data['pending_redeem_requests_percentage'] }},
                    {{ $data['in_progress_redeem_requests_percentage'] }},
                    {{ $data['completed_redeem_requests_percentage'] }},
                    {{ $data['canceled_redeem_requests_percentage'] }}
                ],
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return +val + "%";
                        },
                    },
                },
            };

            var chart = new ApexCharts(requestPieChart, requestPieChartOptions);
            chart.render();
        }

        var mixedChart1 = document.querySelector("#users-chart");
        if (mixedChart1 !== null) {
            var mixedOptions1 = {
                chart: {
                    height: 370,
                    type: "bar",
                    toolbar: {
                        show: false
                    },
                },
                colors: ["#9e6de0"],
                legend: {
                    show: false
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: "50%",
                    },
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    show: true,
                    width: 2,
                    curve: "smooth",
                },
                series: [{
                    name: "Users",
                    data: @json($data['user_counts']),
                }],
                xaxis: {
                    categories: @json($data['city_names']),
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    },
                    labels: {
                        rotate: -45
                    },
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val + " users";
                        },
                    },
                },
                fill: {
                    opacity: 1
                },
            };

            var renderMixedChart1 = new ApexCharts(mixedChart1, mixedOptions1);
            renderMixedChart1.render();
        }
    </script>
@endsection