@extends('layouts.admin')

<title>Prau Admin - Dashboard</title>

@section('content')
    <!-- Begin Page Content -->
    <div class="container-fluid">

        <!-- Page Heading -->
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-950 text-3xl font-semi-bold">Dashboard</h1>
        </div>

        <!-- Content Row -->
        <div class="row">
            <!-- Users Card Example -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100">
                    <div class="card-dashboard">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    Users</div>
                                <div class="text-3xl mb-0 font-weight-semibold text-gray-950">
                                    {{ $user }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-users fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Chart Area -->
                    <div x-data="{
                        init() {
                            new Chart(this.$refs.canvas, {
                                type: 'line',
                                data: {
                                    labels: {{ Js::from($chartLabels) }},
                                    datasets: [{
                                        data: {{ Js::from($chartData['user']) }},
                                        borderColor: 'rgb(78, 115, 223)',
                                        backgroundColor: 'rgba(78, 115, 223, 0.15)',
                                        fill: true,
                                        tension: 0.4,
                                        borderWidth: 2,
                                        pointRadius: 0
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: false,
                                    scales: {
                                        x: { display: false },
                                        y: { display: false }
                                    },
                                    plugins: {
                                        legend: { display: false },
                                        tooltip: {
                                            enabled: true,
                                            mode: 'index',
                                            intersect: false,
                                            backgroundColor: 'rgba(0, 0, 0, 0.7)',
                                            titleColor: '#ffffff',
                                            bodyColor: '#ffffff',
                                            padding: 8,
                                            displayColors: false,
                                            callbacks: {
                                                label: function(context) {
                                                    // Menampilkan nilai angka saja
                                                    return context.parsed.y;
                                                }
                                            }
                                        }
                                    }
                                }
                            });
                        }
                    }" class="h-6 mt-2 overflow-hidden relative">
                        <div style="position: relative; height: 48px;">
                            <canvas x-ref="canvas" class="w-100 d-block"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Mount Tracks Card Example -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100">
                    <div class="card-dashboard">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    Jalur Pendakian</div>
                                <div class="text-3xl mb-0 font-weight-semibold text-gray-950">{{ $track_mount }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-mountain fa-2x text-gray-300"></i>
                            </div>

                        </div>
                    </div>

                    <!-- Chart Area -->
                    <div x-data="{
                        init() {
                            new Chart(this.$refs.canvas, {
                                type: 'line',
                                data: {
                                    labels: {{ Js::from($chartLabels) }},
                                    datasets: [{
                                        data: {{ Js::from($chartData['track']) }},
                                        borderColor: 'rgb(28, 200, 138)',
                                        backgroundColor: 'rgba(28, 200, 138, 0.15)',
                                        fill: true,
                                        tension: 0.4,
                                        borderWidth: 2,
                                        pointRadius: 0
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: false,
                                    scales: {
                                        x: { display: false },
                                        y: { display: false }
                                    },
                                    plugins: {
                                        legend: { display: false },
                                        tooltip: {
                                            enabled: true,
                                            mode: 'index',
                                            intersect: false,
                                            backgroundColor: 'rgba(0, 0, 0, 0.7)',
                                            titleColor: '#ffffff',
                                            bodyColor: '#ffffff',
                                            padding: 8,
                                            displayColors: false,
                                            callbacks: {
                                                label: function(context) {
                                                    // Menampilkan nilai angka saja
                                                    return context.parsed.y;
                                                }
                                            }
                                        }
                                    }
                                }
                            });
                        }
                    }" class="h-6 mt-2 overflow-hidden relative">
                        <div style="position: relative; height: 48px;">
                            <canvas x-ref="canvas" class="w-100 d-block"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- News Card Example -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100">
                    <div class="card-dashboard">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Berita
                                </div>
                                <div class="row no-gutters align-items-center">
                                    <div class="col-auto">
                                        <div class="text-3xl mb-0 font-weight-semibold text-gray-950">{{ $news }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-newspaper fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Chart Area -->
                    <div x-data="{
                        init() {
                            new Chart(this.$refs.canvas, {
                                type: 'line',
                                data: {
                                    labels: {{ Js::from($chartLabels) }},
                                    datasets: [{
                                        data: {{ Js::from($chartData['news']) }},
                                        borderColor: 'rgb(54, 185, 204)',
                                        backgroundColor: 'rgba(54, 185, 204, 0.15)',
                                        fill: true,
                                        tension: 0.4,
                                        borderWidth: 2,
                                        pointRadius: 0
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: false,
                                    scales: {
                                        x: { display: false },
                                        y: { display: false }
                                    },
                                    plugins: {
                                        legend: { display: false },
                                        tooltip: {
                                            enabled: true,
                                            mode: 'index',
                                            intersect: false,
                                            backgroundColor: 'rgba(0, 0, 0, 0.7)',
                                            titleColor: '#ffffff',
                                            bodyColor: '#ffffff',
                                            padding: 8,
                                            displayColors: false,
                                            callbacks: {
                                                label: function(context) {
                                                    // Menampilkan nilai angka saja
                                                    return context.parsed.y;
                                                }
                                            }
                                        }
                                    }
                                }
                            });
                        }
                    }" class="h-6 mt-2 overflow-hidden relative">
                        <div style="position: relative; height: 48px;">
                            <canvas x-ref="canvas" class="w-100 d-block"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Transactions Card Example -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-warning shadow h-100">
                    <div class="card-dashboard">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                    Transaksi</div>
                                <div class="text-3xl mb-0 font-weight-semibold text-gray-950">{{ $transaction }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Chart Area -->
                    <div x-data="{
                        init() {
                            new Chart(this.$refs.canvas, {
                                type: 'line',
                                data: {
                                    labels: {{ Js::from($chartLabels) }},
                                    datasets: [{
                                        data: {{ Js::from($chartData['transaction']) }},
                                        borderColor: 'rgb(246, 194, 62)',
                                        backgroundColor: 'rgba(246, 194, 62, 0.15)',
                                        fill: true,
                                        tension: 0.4,
                                        borderWidth: 2,
                                        pointRadius: 0
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: false,
                                    scales: {
                                        x: { display: false },
                                        y: { display: false }
                                    },
                                    plugins: {
                                        legend: { display: false },
                                        tooltip: {
                                            enabled: true,
                                            mode: 'index',
                                            intersect: false,
                                            backgroundColor: 'rgba(0, 0, 0, 0.7)',
                                            titleColor: '#ffffff',
                                            bodyColor: '#ffffff',
                                            padding: 8,
                                            displayColors: false,
                                            callbacks: {
                                                label: function(context) {
                                                    // Menampilkan nilai angka saja
                                                    return context.parsed.y;
                                                }
                                            }
                                        }
                                    }
                                }
                            });
                        }
                    }" class="h-6 mt-2 overflow-hidden relative">
                        <div style="position: relative; height: 48px;">
                            <canvas x-ref="canvas" class="w-100 d-block"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.container-fluid -->
@endsection

{{-- @push('addon-script')
    <script>
        const ctx = document.getElementById('transactionChart').getContext('2d');
        const transactionChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [
                    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                ],
                datasets: [{
                    label: 'Total Transaksi',
                    data: @json($transactionChart),
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: '#36A2EB',
                    borderWidth: 2,
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
            }
        });
    </script>
@endpush --}}