@extends('actor.layouts.layout')

@section('content')

    <div class="container">

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

                        @php
                           $actor_assetdetails=\App\Models\AssetDetails::where('asset_user_id',Auth::user()->id)->get();
                        @endphp

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

                                    @php
                                        $overallassetorderamount=0;
                                    @endphp

                                    @foreach($actor_assetdetails as $actor_assetdetail)
                                        @php
                                            $assetorderamount=\App\Models\Orderdetails::where('asset_id',$actor_assetdetail->id)->where('payment_status','Paid')->sum('asset_price');
                                            $overallassetorderamount=$overallassetorderamount+$assetorderamount;
                                        @endphp
                                    @endforeach

@php

    $display_countrydetails = \App\Models\CountryDetails::find(Auth::user()->countryid);
        $country_price_symbol = $display_countrydetails->pricesymbol;

        if($overallassetorderamount != 0)
        {
        $overallassetorderamount = \Mgcodeur\CurrencyConverter\Facades\CurrencyConverter::convert($overallassetorderamount)->from("INR")->to($display_countrydetails->countrycode)->get();
        $overallassetorderamount = number_format($overallassetorderamount, 2);
        }
@endphp

                                    <div class="clearfix"><h6>{{ $country_price_symbol." ".$overallassetorderamount }} </h6></div>

                                    <div class="clearfix">
                                        <div class="float-left">
                                            <small class="text-muted" style=" top: 5px; position: relative; ">View net earnings</small>
                                        </div>
                                        <div class="number float-right text-right">
                                            {{ $country_price_symbol }}
                                        </div>
                                    </div>

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

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

                                    <div class="clearfix"><h6>{{ count($actor_assetdetails) }}</h6></div>

                                    <div class="clearfix">
                                        <div class="float-left">
                                            <small class="text-muted" style=" top: 5px; position: relative; ">View all assets</small>
                                        </div>
                                        <div class="number float-right text-right">
                                            <i class="fa fa-2x fa-shopping-bag" aria-hidden="true"></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="actorrevenuechartdisplay" style="height: 400px;"></div>

                        </div>



                    </div>

                    <div class="row clearfix">

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

                            <div class="row clearfix">

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

                                    <input type="date" class="form-control changeassetvisitorsfilteroption" id="rassetvisitorsstartdate">

                                </div>

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

                                    <input type="date" class="form-control changeassetvisitorsfilteroption" id="assetvisitorsenddate">

                                </div>

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

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

                                </div>

                            </div>

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

                        </div>

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

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

                        </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-6">

                            <div class="row">

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

                                    <h6 class="text-center">Recent Order</h6>

                                </div>

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

                                    <input type="date" class="form-control changeassetorderfilteroption" id="assetorderstartdate">

                                </div>

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

                                    <input type="date" class="form-control changeassetorderfilteroption" id="assetorderenddate">

                                </div>

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

                                    <div class="form-group">

                                        <br>
                                        <br>

                                        <div class="table-responsive">
                                            <table class="table" id="recentorderassetlist">
                                                <thead>
                                                <tr>
                                                    <th>Order no</th>
                                                    <th>User Id</th>
                                                    <th>User Name</th>
                                                    <th>Date</th>
                                                    <th>Amount</th>
                                                </tr>
                                                </thead>
                                                <tbody id="recentorderassetlisttbody">
                                                </tbody>
                                            </table>
                                        </div>

                                    </div>

                                </div>


                            </div>

                        </div>

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

                            <div class="row">

                                <div class="col-md-4">
                                    <h6>Popular Assets</h6>
                                </div>

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

                                    <input type="date" class="form-control changepopularassetsfilteroption" id="popularassetsstartdate">

                                </div>

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

                                    <input type="date" class="form-control changepopularassetsfilteroption" id="popularassetsenddate">

                                </div>

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

                                    <select id="popularassetsdatetype" class="mb-4 form-control changepopularassetsfilteroption">
                                        <option value="onsale" selected>On Sale</option>
                                        <option value="topselling">Top Selling</option>
                                        <option value="topnew">Top New</option>
                                        <option value="topfree">Top Free</option>
                                        <option value="verifiedasset">Verified Asset</option>
                                    </select>

                                </div>

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

                                    <div class="form-group">


                                        <div class="table-responsive">
                                            <table class="table" id="recentorderpopularassetslist">
                                                <thead>
                                                <tr>
                                                    <th>Asset</th>
                                                    <th>Price</th>
                                                </tr>
                                                </thead>
                                                <tbody id="displaypopularassetstbody">

                                                </tbody>
                                            </table>
                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>

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

    </div>

@endsection

@section('script')


    @include('actor.dashboard.chartjs')

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


    @php

        $actorfreeassetcount=\App\Models\AssetDetails::where('asset_user_id',Auth::user()->id)->where('pricetype','2')->count();
        $actorpaidassetcount=\App\Models\AssetDetails::where('asset_user_id',Auth::user()->id)->where('pricetype','1')->count();

    @endphp

    <script>
        var options = {
            series: [{{ $actorfreeassetcount }}, {{ $actorpaidassetcount }}],
            chart: {
                width: 400,
                type: 'donut',
                toolbar: {
                    show: true, // Show toolbar for export options
                    tools: {
                        download: true, // Enable download button
                    }
                },
            },
            labels: ['Free Asset', 'Paid Asset'],
            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: "Asset Type",
                align: "left"
            },
            responsive: [{
                breakpoint: 10,
                options: {
                    chart: {
                        width: 400
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }]
        };

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

@endsection