@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
    <h2>Dashboard</h2>
    <div class="row g-3">

        <div class="col-md-2">
            <div class="card text-bg-primary">
                <div class="card-body">
                    <h6>สมาชิกทั้งหมด</h6>
                    <p class="fs-4">{{ $memberCount }}</p>
                </div>
            </div>
        </div>

        <div class="col-md-2">
            <div class="card text-bg-success">
                <div class="card-body">
                    <h6>จำนวนบัญชีเงินฝาก</h6>
                    <p class="fs-4">{{ $depositCount }}</p>
                </div>
            </div>
        </div>

        <div class="col-md-2">
            <div class="card text-bg-warning">
                <div class="card-body">
                    <h6>จำนวนบัญชีหุ้น</h6>
                    <p class="fs-4">{{ $shareCount }}</p>
                </div>
            </div>
        </div>

        <div class="col-md-2">
            <div class="card text-bg-info">
                <div class="card-body">
                    <h6>จำนวนสัญญาเงินกู้</h6>
                    <p class="fs-4">{{ $loanCount }}</p>
                </div>
            </div>
        </div>

        <div class="col-md-2">
            <div class="card text-bg-dark">
                <div class="card-body">
                    <h6>ผู้ใช้ที่ผูกกับ LINE</h6>
                    <p class="fs-4">{{ $lineUserCount }}</p>
                </div>
            </div>
        </div>

    </div>

    <div class="row mt-4">
        <div class="col-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">สถิติการ usage รายวัน</h5>
                    <form method="GET" action="{{ route('admin.dashboard') }}" class="d-flex gap-2">
                        <div class="d-flex align-items-center gap-1">
                            <label for="from_date">From:</label>
                            <input type="date" name="from_date" id="from_date" class="form-control form-control-sm"
                                value="{{ $fromDateVal }}">
                        </div>
                        <div class="d-flex align-items-center gap-1">
                            <label for="to_date">To:</label>
                            <input type="date" name="to_date" id="to_date" class="form-control form-control-sm"
                                value="{{ $toDateVal }}">
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
                    </form>
                </div>
                <div class="card-body">
                    <div style="height: 300px;">
                        <canvas id="usageChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Register the plugin to all charts:
            Chart.register(ChartDataLabels);

            const ctx = document.getElementById('usageChart').getContext('2d');
            const usageChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: @json($chartLabels),
                    datasets: [{
                        label: 'จำนวนการใช้งาน (ครั้ง)',
                        data: @json($chartData),
                        borderColor: 'rgba(54, 162, 235, 1)',
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0 // เป็นเส้นตรง ไม่โค้ง
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false, // เพื่อให้ยืดตาม container width/height
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    },
                    plugins: {
                        datalabels: {
                            align: 'top',
                            anchor: 'end',
                            color: '#444',
                            font: {
                                weight: 'bold'
                            },
                            formatter: function(value, context) {
                                return value > 0 ? value : '';
                            }
                        }
                    }
                }
            });
        });
    </script>
@endpush