@extends('layouts.master')

@section('title') Dashboard @endsection

@section('content')

<!-- @component('common-components.breadcrumb')
         @slot('title') Saas  @endslot
         @slot('li_1') Dashboard @endslot
         @slot('li_2') Saas @endslot
     @endcomponent -->

<div class="row">
    <div class="col-lg-12">
        <div class="card shadow-lg ">
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="media">
                            <div class="mr-3">
                                @if(!empty(Auth::user()->profile_image))
                                <img class="rounded-circle header-profile-user" src="/upload/users/{{Auth::user()->profile_image}}" alt="Header Avatar">
                                @else
                                <img src="{{ asset('/assets/images/users/avatar-1.jpg') }}" alt="" class="avatar-md rounded-circle img-thumbnail">
                                @endif
                            </div>
                            <div class="media-body align-self-center">
                                <div class="text-muted">
                                    <p class="mb-2">Give Social Dashboard</p>
                                    <h5 class="mb-1">{{ Auth::user()->name }}</h5>
                                    <p class="mb-0">{{ Auth::user()->name }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-8 align-self-center">
                        <div class="text-lg-center mt-4 mt-lg-0">
                            <div class="row">
                                <div class="col-4">
                                    <div>
                                        <p class="text-muted text-truncate mb-2">Total Donors</p>
                                        <h5 class="mb-0">{{$donor}}</h5>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div>
                                        <p class="text-muted text-truncate mb-2">Upcoming Campaigns</p>
                                        <h5 class="mb-0">{{ $campaign_count['upcoming_count'] }}</h5>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div>
                                        <p class="text-muted text-truncate mb-2">Total Campaigns</p>
                                        <h5 class="mb-0">{{ $campaign_count['count'] }}</h5>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->
            </div>
        </div>
    </div>
</div>
<!-- end row -->

<div class="row">
    <div class="col-xl-12">
        <div class="row">


            @component('common-components.saas-widget')
            @slot('icon') bx bx-copy-alt @endslot
            @slot('title') Total Donations @endslot
            @slot('price') $ {{ $donation['sum'] }} @endslot
            @slot('arrow') @endslot
            @slot('bClass') @endslot
            @slot('bValue') @endslot
            @slot('comment') @endslot
            @endcomponent



            @component('common-components.saas-widget')
            @slot('icon') bx bx-archive-in @endslot
            @slot('title') Total Donations this Month @endslot
            @slot('price') $ {{ $donation['this_month'] }} @endslot

            @php
            $this_month = $donation['this_month'];
            $last_month = $donation['last_month'];
            if($this_month > $last_month){
            $calu = 0.00;
            if($last_month != 0){
            $calu = ($this_month - $last_month)/$last_month*100;
            }
            @endphp
            @slot('arrow') mdi mdi-chevron-up ml-1 text-success @endslot
            @slot('bClass') badge badge-soft-success font-size-12 @endslot
            @slot('bValue')+{{ abs(round($calu,2)) }}% @endslot
            @php
            }else{
            $calu = 0.00;
            if($last_month != 0){
            $calu = ($this_month - $last_month)/$last_month*100;
            }
            @endphp
            @slot('arrow') mdi mdi-chevron-down ml-1 text-danger @endslot
            @slot('bClass') badge badge-soft-danger font-size-12 @endslot
            @slot('bValue')-{{ abs(round($calu,2)) }}% @endslot
            @php
            }
            @endphp
            @slot('comment') From previous Month @endslot
            @endcomponent

            @component('common-components.saas-widget')
            @slot('icon') bx bx-purchase-tag-alt @endslot
            @slot('title') Average Donation @endslot
            @slot('price') $ @php echo round($donation['avg'],2); @endphp @endslot
            @slot('arrow') @endslot
            @slot('bClass') @endslot
            @slot('bValue') @endslot
            @slot('comment') @endslot
            @endcomponent





        </div>
        <!-- end row -->
    </div>
</div>
<div class="row">
    <div class="col-xl-6">
        <div class="card shadow-lg">
            <div class="card-body">
                <div class="clearfix">
                    <!-- <div class="float-right">
                                                <div class="input-group input-group-sm">
                                                    <select class="custom-select custom-select-sm">

                                                        <option selected>Jan</option>
                                                        <option value="1">Dec</option>
                                                        <option value="2">Nov</option>
                                                        <option value="3">Oct</option>
                                                    </select>
                                                    <div class="input-group-append">
                                                        <label class="input-group-text">Month</label>
                                                    </div>
                                                </div>
                                            </div> -->
                    <h4 class="card-title mb-4">Donations</h4>
                </div>

                <div class="row">
                    <div class="col-lg-4">
                        <div class="text-muted">
                            <div class="mb-4">
                                <p>This month</p>
                                <h4>${{ $donation['this_month'] }}</h4>

                                <div>
                                    @php
                                    $this_month = $donation['this_month'];
                                    $last_month = $donation['last_month'];
                                    if($this_month > $last_month){
                                    $calu = 0.00;
                                    if($last_month != 0){
                                    $calu = ($this_month - $last_month)/$last_month*100;
                                    }
                                    @endphp
                                    <span class="badge badge-soft-success font-size-12 mr-1"> + {{ abs(round($calu,2)) }}%
                                        @php
                                        }else{
                                        $calu = 0.00;
                                        if($last_month != 0){
                                        $calu = ($this_month - $last_month)/$last_month*100;
                                        }
                                        @endphp
                                        <span class="badge badge-soft-danger font-size-12 mr-1"> - {{ abs(round($calu,2)) }}%
                                            @php
                                            }
                                            @endphp


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

                            <div class="mt-8">
                                <p class="mb-2">Last month</p>
                                <h5>{{ $donation['last_month'] }}</h5>
                            </div>

                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div id="line-chart" class="apex-charts" dir="ltr"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-6">
        <div class="card shadow-lg">
            <div class="card-body">
                <!-- <div class="float-right">
                    <select class="custom-select custom-select-sm ml-2">
                        <option value="1" selected>March</option>
                        <option value="2">February</option>
                        <option value="3">January</option>
                        <option value="4">December</option>
                    </select>
                </div> -->
                <h4 class="card-title mb-3">Stripe Balance</h4>

                <div class="row mb-4">
                    <div class="col-lg-5">
                        <div class="mt-4">
                            <p>Total Balance</p>
                            <h4>$ {{ $donation['sum'] }} </h4>

                            <p class="text-muted mb-4">

                                 <i class=" ml-1 text-success">

                                 </i>
                                </p>

                            <div class="row">
                                <div class="col-6">
                                    <div>
                                        <p class="mb-2">Available</p>
                                        <h5>$ {{ $stripe_data['sum'] }}</h5>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div>
                                        <p class="mb-2">Pending</p>
                                        <h5>$ {{ $stripe_pending }}</h5>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4">
                                <a href="{{ route('Wallet') }}" class="btn btn-primary btn-sm">View more <i class="mdi mdi-arrow-right ml-1"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-7 col-sm-6 pr-0">
                        <div>
                            <div id="wallet-balance-chart" class="apex-charts"></div>
                        </div>
                    </div>

                    <!-- <div class="col-lg-4 col-sm-6 align-self-center">
                        <div>
                            <p class="mb-2"><i class="mdi mdi-circle align-middle font-size-10 mr-2 text-primary"></i> Ethereum</p>
                            <h5>4.5701 ETH = <span class="text-muted font-size-14">$ 1123.64</span></h5>
                        </div>

                        <div class="mt-4 pt-2">
                            <p class="mb-2"><i class="mdi mdi-circle align-middle font-size-10 mr-2 text-warning"></i> Bitcoin</p>
                            <h5>0.4412 BTC = <span class="text-muted font-size-14">$ 4025.32</span></h5>
                        </div>

                        <div class="mt-4 pt-2">
                            <p class="mb-2"><i class="mdi mdi-circle align-middle font-size-10 mr-2 text-info"></i> Litecoin</p>
                            <h5>35.3811 LTC = <span class="text-muted font-size-14">$ 2263.09</span></h5>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end row -->

<div class="row">
    <div class="col-xl-6">
        <div class="card shadow-lg">
            <div class="card-body">
                <div class="clearfix">
                    <h4 class="card-title mb-4">Top Donation campaign</h4>
                </div>

                <div class="table-responsive mt-4" data-simplebar style="max-height: 310px;">
                    <table class="table table-centered mb-0">
                        <tbody>
                            @if(count($donation['monthwisedonation']) > 0)
                            @for ($i = 0; $i < count($donation['monthwisedonation']); $i++) <tr>
                                <td>
                                    <h5 class="font-size-14 mb-1">{{ $donation['monthwisedonation'][$i]->campaign_name }}</h5>
                                    <p class="text-muted mb-0">$ {{ $donation['monthwisedonation'][$i]->monntdonation }}</p>
                                </td>
                                @php
                                $cal = $donation['monthwisedonation'][$i]->monntdonation/$donation['sum'] * 100;
                                $vale= (int)$cal;
                                @endphp
                                <td>
                                    <div id="radialchart-{{$i}}" class="apex-charts"></div>
                                </td>
                                <td>
                                    <p class="text-muted mb-1">Donation</p>
                                    <h5 class="mb-0">$ {{$vale}} %</h5>
                                </td>
                                </tr>
                                @endfor
                                @else
                                <tr>
                                    <td>
                                        <p class="text-muted mb-1">Donation not add yet</p>
                                    </td>
                                </tr>
                                @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-6">
        <div class="card shadow-lg">
            <div class="card-body">
                <h4 class="card-title mb-4">Campaign</h4>
                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Completed</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Today</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Upcoming</a>
                    </li>
                </ul>
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                        <div data-simplebar style="max-height: 250px;">
                            <div class="table-responsive custom_tabal_saction_part">
                                <table class="table table-nowrap table-centered table-hover mb-0">
                                    <tbody>
                                        @if(count($campaign) > 0)
                                        @foreach ($campaign as $value)

                                        @php
                                        $now = Carbon::now();
                                        $event_date = $value['campaign']->event_datetime;
                                        if($event_date == ''){
                                        $event_date = $value['campaign']->created_at;
                                        }
                                        $today_dt = new DateTime($now);
                                        $expire_dt = new DateTime($event_date);
                                        if($expire_dt > $today_dt){

                                        break;
                                        }else{
                                        @endphp

                                        <tr>
                                            <td>
                                                <h5 class="text-truncate font-size-14 mb-1"><a href="campaign/show/{{ $value['campaign']->id }}" class="text-dark">{{$value['campaign']->title != '' ? $value['campaign']->title : ($value['campaign']->facebook_post_title == '' ? "Instagram Post" : $value['campaign']->facebook_post_title) }}</a></h5>
                                                <p class="text-muted mb-0">{{ $value['campaign']->description != '' ? $value['campaign']->description : $value['campaign']->caption  }}</p>
                                            </td>
                                        </tr>
                                        @php }
                                        @endphp

                                        @endforeach
                                        @else
                                        <tr>
                                            <td>
                                                <p class="text-muted mb-0"> data not found </p>
                                            </td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                        <div data-simplebar style="max-height: 250px;">

                            <div class="table-responsive custom_tabal_saction_part">
                                <table class="table table-nowrap table-centered table-hover mb-0">
                                    <tbody>
                                        @if(count($campaign) > 0)
                                        @foreach ($campaign as $value)

                                        @php
                                        $now = Carbon::now()->timestamp;
                                        $event_date = $value['campaign']->event_datetime;
                                        if($event_date == ''){
                                        $event_date = $value['campaign']->created_at;
                                        }
                                        $today_dt = date('Y-m-d',$now);
                                        $time = Carbon::parse($event_date)->timestamp;
                                        $expire_dt =date('Y-m-d',$time);
                                        if($expire_dt == $today_dt){
                                        @endphp
                                        <tr>
                                            <td>
                                                <h5 class="text-truncate font-size-14 mb-1"><a href="campaign/show/{{ $value['campaign']->id }}" class="text-dark">{{$value['campaign']->title != '' ? $value['campaign']->title : ($value['campaign']->facebook_post_title == '' ? "Instagram Post" : $value['campaign']->facebook_post_title) }}</a></h5>
                                                <p class="text-muted mb-0">{{ $value['campaign']->description != '' ? $value['campaign']->description : $value['campaign']->caption  }}</p>
                                            </td>
                                        </tr>
                                        @php }else{@endphp
                                        <td>
                                            <p class="text-muted mb-0"> there are no events today </p>
                                        </td>
                                        @php }
                                        break;
                                        @endphp

                                        @endforeach
                                        @else
                                        <tr>
                                            <td>
                                                <p class="text-muted mb-0"> data not found </p>
                                            </td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                        <div data-simplebar style="max-height: 250px;">

                            <div class="table-responsive custom_tabal_saction_part">
                                <table class="table table-nowrap table-centered table-hover mb-0">
                                    <tbody>
                                        @if(count($campaign) > 0)
                                        @foreach ($campaign as $value)

                                        @php
                                        echo $value['campaign']->id;
                                        $now = Carbon::now();
                                        $event_date = $value['campaign']->event_datetime;
                                        if($event_date == ''){
                                        $event_date = $value['campaign']->created_at;
                                        }



                                        $today_dt = new DateTime($now);
                                        $expire_dt = new DateTime($event_date);
                                        if($expire_dt < $today_dt){ echo "no upcomming event" ; break; }else{ @endphp <tr>
                                            <td>
                                                <h5 class="text-truncate font-size-14 mb-1"><a href="campaign/show/{{ $value['campaign']->id }}" class="text-dark">{{$value['campaign']->title != '' ? $value['campaign']->title : ($value['campaign']->facebook_post_title == '' ? "Instagram Post" : $value['campaign']->facebook_post_title) }}</a></h5>
                                                <p class="text-muted mb-0">{{ $value['campaign']->description != '' ? $value['campaign']->description : $value['campaign']->caption  }}</p>
                                            </td>
                                            </tr>
                                            @php }
                                            @endphp

                                            @endforeach
                                            @else
                                            <tr>
                                                <td>
                                                    <p class="text-muted mb-0"> data not found </p>
                                                </td>
                                            </tr>
                                            @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="tabs">
                                        <ul class="nav nav-pills bg-light rounded" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">In Process</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Upcoming</a>
                                            </li>
                                        </ul>

                                        <div class="mt-4">
                                        <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">sdas...</div>
                                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">..sads.</div>
                                    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">.dfdsfds..</div>
                                    </div>

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


        </div>
    </div>



</div>



<!-- end row -->

@endsection
@section('script')
<!-- apexcharts -->
<script src="{{ URL::asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>

<!-- crypto dash init js -->
<script src="{{ URL::asset('assets/js/pages/saas-dashboard.init.js')}}"></script>
<script src="{{ URL::asset('assets/js/pages/crypto-dashboard.init.js')}}"></script>
<script>
    $(document).ready(function() {
        a_data = '{{$new}}'.split(',');
        // console.log(a_data);
        var options = {
            series: [{
                name: 'donations',
                data: a_data
            }],
            chart: {
                height: 320,
                type: 'line',
                toolbar: 'false',
                dropShadow: {
                    enabled: true,
                    color: '#000',
                    top: 18,
                    left: 7,
                    blur: 8,
                    opacity: 0.2
                },
            },
            dataLabels: {
                enabled: false
            },
            colors: ['#556ee6'],

            stroke: {
                curve: 'smooth',
                width: 3,
            },

        };

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

@for ($i = 0; $i < count($donation['monthwisedonation']); $i++) @php $cal=$donation['monthwisedonation'][$i]->monntdonation/$donation['sum'] * 100;
    $vale= (int)$cal;
    @endphp
    <script>
        var value = "{{$vale}}";
        if (!value) {
            value = 0;
        }
        // console.log(value);
        var index = "{{$i}}";
        if (value > 25 && value <= 50) {
            var color = ['#FFFF00'];
        } else if (value > 50 && value <= 75) {
            var color = ['#556ee6'];
        } else if (value > 75 && value <= 100) {
            var color = ['#34c38f'];
        } else {
            var color = ['#f46a6a'];
        }
        var radialoptions1 = {
            series: [value],
            chart: {
                type: 'radialBar',
                width: 60,
                height: 60,
                sparkline: {
                    enabled: true
                }
            },
            dataLabels: {
                enabled: false
            },
            colors: color,
            plotOptions: {
                radialBar: {
                    hollow: {
                        margin: 0,
                        size: '60%'
                    },
                    track: {
                        margin: 0
                    },
                    dataLabels: {
                        show: false
                    }
                }
            }
        };
        var radialchart1 = new ApexCharts(document.querySelector("#radialchart-" + index), radialoptions1);
        radialchart1.render();

        var total_values ="{{ $donation['sum'] }}";
        var available_values ="{{ $stripe_data['sum'] }}";
        var pending_values = "{{ $stripe_pending }}";
        const main_value = [total_values,pending_values,available_values];
        console.log(main_value)



        // wallet-balance-chart
        var walletOptions = {
            series: main_value,
            chart: {
                height: 280,
                type: 'radialBar',
            },
            plotOptions: {
                radialBar: {
                    offsetY: 0,
                    startAngle: 0,
                    endAngle: 270,
                    hollow: {
                        margin: 5,
                        size: '35%',
                        background: 'transparent',
                        image: undefined,
                    },
                    track: {
                        show: true,
                        startAngle: undefined,
                        endAngle: undefined,
                        background: '#f2f2f2',
                        strokeWidth: '97%',
                        opacity: 1,
                        margin: 12,
                        dropShadow: {
                            enabled: false,
                            top: 0,
                            left: 0,
                            blur: 3,
                            opacity: 0.5
                        }
                    },
                    dataLabels: {
                        name: {
                            show: true,
                            fontSize: '16px',
                            fontWeight: 600,
                            offsetY: -10
                        },
                        value: {
                            show: true,
                            fontSize: '14px',
                            offsetY: '04',
                            formatter: function(val) {
                                return val + '%'
                            }
                        },
                        total: {
                            show: true,
                            label: 'Total',
                            color: '#373d3f',
                            fontSize: '16px',
                            fontFamily: undefined,
                            fontWeight: 600,
                            formatter: function(w) {
                                return w.globals.seriesTotals.reduce(function(a, b) {
                                    console.log(a,b);
                                    return '$'+total_values;
                                }, 0);
                            }
                        }
                    }
                }
            },
            stroke: {
                lineCap: 'round'
            },
            colors: ['#3452e1', '#f1b44c', '#50a5f1'],
            labels: ['Total', 'Pending','Available'],
            legend: {
                show: false,
            },
        };

        var chart = new ApexCharts(document.querySelector("#wallet-balance-chart"), walletOptions);
        chart.render();
    </script>
    @endfor


    @endsection