@extends('layouts.panel')

@section('title', 'Dashboard')
@section('page-title', '')

@section('content')

    @php
        $isAdmin = auth()->user()->isAdmin();
    @endphp

    @if($isAdmin)
        <div class="row g-3 mb-4">

            <div class="col-md-3">
                <div class="card text-white bg-primary shadow">
                    <div class="card-body">
                        <h6>Total Users</h6>
                        <h3>{{ $totalUsers }}</h3>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card text-white bg-success shadow">
                    <div class="card-body">
                        <h6>Total Papers</h6>
                        <h3>{{ $totalPapers }}</h3>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card text-white bg-warning shadow">
                    <div class="card-body text-center">
                        <h6>Total Registrations</h6>
                        <div class="stat-grid mx-auto">

                            <div class="paid-num">{{ $paidRegistrations }}</div>
                            <div class="slash">/</div>
                            <div class="total-num">{{ $totalRegistrations }}</div>

                            <div class="paid-label">Paid</div>

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


        <div class="col-md-3">
            <div class="card text-white bg-danger shadow">
                <div class="card-body text-center">

                    <h6>Total Listeners</h6>

                    <div class="stat-grid mx-auto">

                        <div class="paid-num">{{ $paidListeners }}</div>
                        <div class="slash">/</div>
                        <div class="total-num">{{ $totalListeners }}</div>

                        <div class="paid-label">Paid</div>

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

        <div class="row g-3 mb-4">
            <!-- LISTENER COLUMN -->
            <div class="col-md-6">

                <div class="card text-white bg-secondary shadow">
                    <div class="card-body">
                        <h6>Listener Amount</h6>
                        <h3>${{ number_format($listenerPaymentTotal,2) }}</h3>
                    </div>
                </div>

                <div class="card shadow mt-3">
                    <div class="card-body">
                        <div class="text-xs font-weight-bold text-success mb-2">
                        Listener Received Amount
                        </div>

                        <div class="h6 mb-1 font-weight-bold text-gray-800">
                            {{ number_format($listenerReceivedUSD, 2) }} $
                        </div>

                        <div class="h6 mb-1 font-weight-bold text-gray-800">
                            {{ number_format($listenerReceivedTRY, 2) }} ₺
                        </div>

                        <div class="h6 mb-0 font-weight-bold text-gray-800">
                            {{ number_format($listenerReceivedEUR, 2) }} €
                        </div>
                    </div>
                </div>

            </div>

            <!-- REGISTRATION COLUMN -->
            <div class="col-md-6">
                <div class="card text-white bg-info shadow">
                    <div class="card-body">
                        <h6>Registration Amount</h6>
                        <h3>${{ number_format($registrationPaymentTotal,2) }}</h3>
                    </div>
                </div>

                <div class="card shadow mt-3">
                    <div class="card-body">
                        <div class="text-xs font-weight-bold text-success mb-2">
                        Registration Received Amount
                        </div>

                        <div class="h6 mb-1 font-weight-bold text-gray-800">
                            {{ number_format($regReceivedUSD, 2) }} $
                        </div>

                        <div class="h6 mb-1 font-weight-bold text-gray-800">
                            {{ number_format($regReceivedTRY, 2) }} ₺
                        </div>

                        <div class="h6 mb-0 font-weight-bold text-gray-800">
                            {{ number_format($regReceivedEUR, 2) }} €
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <!-- TOTAL -->
        <div class="row g-3 mb-4">

            <div class="col-md-4">
                <div class="card text-white bg-dark shadow">
                    <div class="card-body">
                        <h6>Total USD</h6>
                        <h3>{{ number_format($totalReceivedUSD,2) }} $</h3>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card text-white bg-dark shadow">
                    <div class="card-body">
                        <h6>Total TRY</h6>
                        <h3>{{ number_format($totalReceivedTRY,2) }} ₺</h3>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card text-white bg-dark shadow">
                    <div class="card-body">
                        <h6>Total EUR</h6>
                        <h3>{{ number_format($totalReceivedEUR,2) }} €</h3>
                    </div>
                </div>
            </div>
        </div>

        <!-- CHARTS -->
        <div class="row justify-content-center">

            <div class="col-md-6">
                <div class="card shadow p-3">
                    <h6>Listener </h6>
                    <canvas id="listenerChart" style="height:300px;"></canvas>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card shadow p-3">
                    <h6>Registration </h6>
                    <canvas id="registrationChart" style="height:300px;"></canvas>
                </div>
            </div>

        </div>

    @endif

@endsection

<style>
    .stat-grid{
        display: inline-grid;
        grid-template-columns: auto auto auto;
        justify-items: center;
        align-items: center;
        row-gap: 4px;
        column-gap: 15px;
    }

    .paid-num,
    .total-num,
    .slash{
        font-size: 28px;
        font-weight: 600;
    }

    .paid-label{
        grid-column: 1;
        font-size: 12px;
        opacity: .8;
        letter-spacing: .5px;
    }
</style>

@section('scripts')
    @if($isAdmin)

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

        <script>
            document.addEventListener("DOMContentLoaded", function() {

                // LISTENER
                new Chart(document.getElementById('listenerChart'), {
                    type: 'bar',
                    data: {
                        labels: ['USD', 'TRY', 'EUR'],
                        datasets: [{
                            data: [
                                {{ $listenerReceivedUSD }},
                                {{ $listenerReceivedTRY }},
                                {{ $listenerReceivedEUR }}
                            ],
                            backgroundColor: '#7b6ef6'
                        }]
                    },
                    options: {
                        plugins: {
                            legend: { display: false }
                        }
                    }
                });

                // REGISTRATION
                new Chart(document.getElementById('registrationChart'), {
                    type: 'bar',
                    data: {
                        labels: ['USD', 'TRY', 'EUR'],
                        datasets: [{
                            data: [
                                {{ $regReceivedUSD }},
                                {{ $regReceivedTRY }},
                                {{ $regReceivedEUR }}
                            ],
                            backgroundColor: '#20c997'
                        }]
                    },
                    options: {
                        plugins: {
                            legend: { display: false }
                        }
                    }
                });

            });

        </script>

    @endif


@endsection