@extends('core::layouts.master')

@section('title', $title . ' - ASETQU V.2')
@section('meta_description', $meta_description)

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/pages/token-dashboard.css') }}">
@endpush

@section('content')
{{-- Hero Section --}}
<section class="explore-hero token-hero">
    <div class="hero-bg-overlay"></div>
    <div class="hero-particles"></div>
    <div class="container">
        <div class="hero-content text-center">
            <h1 class="hero-title" data-aos="fade-up">
                <span class="text-gradient-cyan">Informasi</span> <span class="text-white">Token</span>
            </h1>
            <p class="hero-subtitle" data-aos="fade-up" data-aos-delay="100">
                Ringkasan status, distribusi, dan aktivitas token secara real-time
            </p>
        </div>
    </div>
</section>

{{-- Live Token Price Section --}}
<section class="token-price-section section">
    <div class="container">
        <h2 class="section-title-gradient text-center" data-aos="fade-up">LIVE TOKEN PRICE</h2>

        {{-- Main Token Card --}}
        <div class="token-main-card" data-aos="fade-up" data-aos-delay="100">
            <div class="row">
                {{-- Chart Area --}}
                <div class="col-lg-7">
                    <h4 class="token-card-title">ASETQU V.2 TOKEN</h4>
                    <div class="chart-container">
                        <canvas id="tokenPriceChart"></canvas>
                    </div>
                </div>

                {{-- Supply Stats --}}
                <div class="col-lg-5">
                    <div class="supply-stats">
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="supply-card purple">
                                    <span class="supply-label">MAX. SUPPLY</span>
                                    <span class="supply-value">Rp.4.499.999 ASETQU</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="supply-card purple-dark">
                                    <span class="supply-label">TOTAL SUPPLY</span>
                                    <span class="supply-value cyan">Rp.9.999.999 ASETQU</span>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="supply-card dark">
                                    <span class="supply-label">SELF-REPORTED CIRCULATING SUPPLY</span>
                                    <span class="supply-value gold">201.2K ASETQU</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Market Stats Grid --}}
            <div class="market-stats-grid">
                <div class="row g-3">
                    <div class="col-lg-6">
                        <div class="market-stat-card purple-gradient">
                            <span class="stat-label">MARKET CAP</span>
                            <span class="stat-value">Rp.5.62</span>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="market-stat-card purple-gradient">
                            <span class="stat-label">UNLOCKED MKT CAP</span>
                            <span class="stat-value">Rp.275.222 JT</span>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="market-stat-card purple-gradient">
                            <span class="stat-label">VOLUME (24H)</span>
                            <span class="stat-value">Rp.0</span>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="market-stat-card purple-gradient">
                            <span class="stat-label">FDV</span>
                            <span class="stat-value">Rp.27.50 M</span>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="market-stat-card purple-gradient">
                            <span class="stat-label">VOL/MKT CAP (24)</span>
                            <span class="stat-value">Rp.0</span>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="market-stat-card purple-gradient">
                            <span class="stat-label">HOLDERS</span>
                            <span class="stat-value">2.12K</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Token Price Chart
    const ctx = document.getElementById('tokenPriceChart');
    if (ctx) {
        // Generate sample data
        const labels = [];
        const priceData = [];
        const volumeData = [];

        for (let i = 0; i <= 35; i++) {
            labels.push(i.toString());
            // Random price fluctuation
            const basePrice = 0.5;
            const randomPrice = basePrice + (Math.random() * 1.5);
            priceData.push(randomPrice);
            // Random volume
            volumeData.push(Math.random() * 100);
        }

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        type: 'line',
                        label: 'Price',
                        data: priceData,
                        borderColor: '#c026d3',
                        backgroundColor: 'transparent',
                        borderWidth: 2,
                        tension: 0.4,
                        pointRadius: 0,
                        pointHoverRadius: 4,
                        yAxisID: 'y1',
                    },
                    {
                        type: 'bar',
                        label: 'Volume',
                        data: volumeData,
                        backgroundColor: function(context) {
                            const index = context.dataIndex;
                            const value = context.dataset.data[index];
                            return value > 50 ? '#22d3ee' : '#a3e635';
                        },
                        borderRadius: 2,
                        yAxisID: 'y',
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: 'rgba(20, 15, 40, 0.95)',
                        titleColor: '#fff',
                        bodyColor: 'rgba(255, 255, 255, 0.8)',
                        borderColor: 'rgba(139, 92, 246, 0.3)',
                        borderWidth: 1,
                        padding: 12,
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false,
                            color: 'rgba(255, 255, 255, 0.05)'
                        },
                        ticks: {
                            color: 'rgba(255, 255, 255, 0.5)',
                            font: {
                                size: 10
                            }
                        }
                    },
                    y: {
                        position: 'left',
                        grid: {
                            color: 'rgba(255, 255, 255, 0.05)'
                        },
                        ticks: {
                            display: false
                        }
                    },
                    y1: {
                        position: 'right',
                        grid: {
                            display: false
                        },
                        ticks: {
                            color: 'rgba(255, 255, 255, 0.5)',
                            font: {
                                size: 10
                            },
                            callback: function(value) {
                                return value.toFixed(1) + '%';
                            }
                        }
                    }
                }
            }
        });
    }
});
</script>
@endpush