@extends('advertiser.layouts.layout')

@section('content')

    <div class="container">

        <div class="row clearfix">
            <div class="col-12">
                <div class="top_report">
                    <div class="row clearfix">


                        <div class="col-lg-3 col-md-6 col-sm-6 card">
                            <a href="{{ route('advertiseradvertisementdetails.index') }}">
                                <div class="body">
                                    <div class="clearfix">
                                        <div class="float-left">
                                            <h6>Total Advertisement</h6>
                                        </div>
                                        <div class="number float-right text-right">
{{--                                            <span class="dashboardpercentagedesign">0 %</span>--}}
                                        </div>
                                    </div>

                                    <div class="clearfix"><h6>{{ \App\Models\AdvertisementDetails::where('userid',Auth::user()->id)->count() }}</h6></div>

                                    <div class="clearfix">
                                        <div class="float-left">
                                            <small class="text-muted" style=" top: 5px; position: relative; ">View all advertisement</small>
                                        </div>
                                        <div class="number float-right text-right">
                                            <i class="fa fa-2x fa-desktop" aria-hidden="true"></i>
                                        </div>
                                    </div>

                                </div>
                            </a>
                        </div>


                        <div class="col-lg-3 col-md-6 col-sm-6 card">
                            <a href="{{ route('advertiseradvertisementdetails.index') }}">
                                <div class="body">
                                    <div class="clearfix">
                                        <div class="float-left">
                                            <h6>Active Ads</h6>
                                        </div>
                                        <div class="number float-right text-right">
{{--                                            <span class="dashboardpercentagedesign">0 %</span>--}}
                                        </div>
                                    </div>

                                    <div class="clearfix"><h6>{{ \App\Models\AdvertisementDetails::where('userid',Auth::user()->id)->where('advertisement_displaystatus','1')->whereDate('scheduledclose', '>=', \Carbon\Carbon::now())->count() }}</h6></div>

                                    <div class="clearfix">
                                        <div class="float-left">
                                            <small class="text-muted" style=" top: 5px; position: relative; ">View all advertisement</small>
                                        </div>
                                        <div class="number float-right text-right">
                                            <i class="fa fa-2x fa-shopping-bag text-col-blue"></i>
                                        </div>
                                    </div>

                                </div>
                            </a>
                        </div>

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

        <div class="row clearfix">
            <div class="col-12">
                <div class="top_report">

                    <div class="row clearfix">

                        <div class="col-md-4">

                            <input type="date" class="form-control changerevenuefilteroption" id="revenuestartdate">

                        </div>

                        <div class="col-md-4">

                            <input type="date" class="form-control changerevenuefilteroption" id="revenueenddate">

                        </div>

                        <div class="col-md-4">

                            <select id="revenuedatetype" class="mb-4 form-control changerevenuefilteroption">
                                <option value="monthly" selected>Monthly</option>
                                <option value="weekly">Weekly</option>
                                <option value="daily">Daily</option>
                            </select>

                        </div>

                    </div>

                    <div class="row clearfix">

                        <div class="col-md-12">

                            <div id="adminoverallrevenuechart" style="height: 400px;"></div>

                        </div>



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

    </div>


    </div>


@endsection



@section('script')



    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


    @include('advertiser.dashboard.chartjs')


    @php

        $admincount=\App\Models\User::where('user_type_id','1')->count();
        $actorcount=\App\Models\User::where('user_type_id','2')->count();
        $clientcount=\App\Models\User::where('user_type_id','3')->count();
        $manufactorcount=\App\Models\User::where('user_type_id','4')->count();
        $advertisercount=\App\Models\User::where('user_type_id','5')->count();

    @endphp

    <script>
        var options = {
            series: [{{ $admincount }}, {{ $actorcount }}, {{ $clientcount }}, {{ $manufactorcount }}, {{ $advertisercount }}],
            chart: {
                width: 400,
                type: 'donut',
                toolbar: {
                    show: true, // Show toolbar for export options
                    tools: {
                        download: true, // Enable download button
                    }
                },
            },
            labels: ['Admin', 'Actor', 'Client', 'Manufactor', 'Advertiser'],
            legend: {
                position: 'right',  // Align legend to the left
                horizontalAlign: 'bottom', // Center the legend text
                fontSize: '14px',
                itemMargin: {
                    vertical: 15  // Increases vertical margin
                },
                markers: {
                    width: 12,
                    height: 12
                }
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: '40%' // Increase this value to create more center space
                    }
                }
            },
            title: {
                text: "User Type",
                align: "left"
            },
            responsive: [{
                breakpoint: 10,
                options: {
                    chart: {
                        width: 400
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }]
        };

        var chart = new ApexCharts(document.querySelector("#adminusertypedistribution"), options);
        chart.render();
    </script>


    @php

        $adminadvertisementDetails=\App\Models\AdvertisementDetails::where('advertisement_type','1')->count();
        $advertiseradvertisementDetails=\App\Models\AdvertisementDetails::where('advertisement_type','!=','1')->count();
        $useradvertisementDetails=0;

    @endphp


    <script>
        var options = {
            series: [{{ $adminadvertisementDetails }}, {{ $advertiseradvertisementDetails }}, {{ $useradvertisementDetails }}], // Static values
            title: {
                text: "Advertishment Type Distributtion",
                align: "left"
            },
            chart: {
                type: 'pie',
                height: 350
            },
            labels: ['Admin', 'Advertiser', 'User'], // Static labels
            legend: {
                position: 'right',  // Align legend to the left
                horizontalAlign: 'bottom', // Center the legend text
                fontSize: '14px',
                itemMargin: {
                    vertical: 15  // Increases vertical margin
                },
                markers: {
                    width: 12,
                    height: 12
                }
            },
        };

        var chart = new ApexCharts(document.querySelector("#adminadvertishmenttypedistributtion"), options);
        chart.render();
    </script>
@endsection