@extends('templates.main')

@section('content')
    @php
        use Carbon\Carbon;

        $userName = Auth::user()->name;
        $historyQuery = App\Models\History::where('reseller', $userName);
        $historyCount = $historyQuery->count();
        
        $pendapatan = (clone $historyQuery)
            ->selectRaw('SUM(REPLACE(REPLACE(harga, "Rp.", ""), ".", "")) as total')
            ->value('total');

        $bulanini = (clone $historyQuery)
            ->whereMonth('created_at', now()->month)
            ->selectRaw('SUM(REPLACE(REPLACE(harga, "Rp.", ""), ".", "")) as total')
            ->value('total');

        function get_months_until_now($format = 'F') {
            $months = [];
            for ($i = 1; $i <= now()->month; $i++) {
                $months[] = now()->startOfMonth()->subMonths($i - 1)->format($format);
            }
            return array_reverse($months);
        }

        $bulan = get_months_until_now();
        $register = [];
        $extended = [];
        
        foreach ($bulan as $key => $value) {
            $plus = $key + 1;
            $register[] = (clone $historyQuery)->where('barang', 'like', '%Order%')->whereMonth('created_at', $plus)->count();
            $extended[] = (clone $historyQuery)->where('barang', 'like', '%Perpanjang%')->whereMonth('created_at', $plus)->count();
        }
    @endphp

    <style>
        /* === GLOBAL RESET APP STYLE === */
        .mobile-content { background: #F2F4F8 !important; } /* Abu-abu dingin khas Apple */
        .mobile-content .container-fluid { padding: 0 !important; padding-bottom: 100px !important; overflow-x: hidden; }
        .mobile-content .row { margin: 0 !important; }
        .mobile-content > .row > [class*="col-"] { padding: 0 !important; width: 100%; }
        
        /* Hilangkan semua gaya card bawaan */
        .card { 
            background: transparent !important; border: none !important; 
            border-radius: 0 !important; box-shadow: none !important; 
        }
        .card-body, .card-header { background: transparent !important; border: none !important; }

        /* === 1. HEADER PROFILE === */
        .app-header {
            padding: 20px 24px 0;
            display: flex; justify-content: space-between; align-items: center;
        }
        .greeting h2 { font-size: 20px; font-weight: 800; color: #1e293b; margin: 0; line-height: 1.2; }
        .greeting p { font-size: 13px; color: #94a3b8; margin: 0; font-weight: 500; }
        .notif-btn {
            width: 44px; height: 44px; background: #fff; border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.04); color: #64748b; font-size: 18px;
        }

        /* === 2. CARD SALDO (FLOATING GLASS) === */
        .wallet-card {
            margin: 24px 24px 0;
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            border-radius: 24px; padding: 28px 24px; position: relative; overflow: hidden;
            box-shadow: 0 20px 40px rgba(37, 99, 235, 0.3);
        }
        /* Ornamen Organik/Blob */
        .wallet-card::before {
            content: ''; position: absolute; top: -50%; right: -20%; width: 300px; height: 300px;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%); border-radius: 50%;
        }
        .wallet-card::after {
            content: ''; position: absolute; bottom: -30%; left: -10%; width: 200px; height: 200px;
            background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); border-radius: 50%;
        }
        .wallet-label { font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 600; letter-spacing: 0.5px; z-index: 2; position: relative; }
        .wallet-amount { font-size: 32px; font-weight: 800; color: #fff; margin-top: 8px; z-index: 2; position: relative; letter-spacing: -1px; }
        .wallet-badge { 
            display: inline-block; margin-top: 12px; padding: 6px 14px; background: rgba(255,255,255,0.2); 
            border-radius: 20px; color: #fff; font-size: 12px; font-weight: 700; z-index: 2; position: relative;
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        }

        /* === 3. QUICK STATS (OVERLAP KE CARD SALDO) === */
        .stats-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
            margin: -20px 24px 0; padding: 0; position: relative; z-index: 3;
        }
        .stat-item {
            background: #fff; border-radius: 20px; padding: 20px 18px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.04);
        }
        .stat-icon {
            width: 42px; height: 42px; border-radius: 14px;
            display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; margin-bottom: 14px;
        }
        .stat-title { font-size: 12px; color: #94a3b8; font-weight: 600; margin-bottom: 4px; }
        .stat-value { font-size: 18px; color: #0f172a; font-weight: 800; letter-spacing: -0.5px; }

        /* === 4. CHART AREA === */
        .section-block {
            margin: 28px 24px 0;
            background: #fff; border-radius: 24px; padding: 24px 20px 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        }
        .block-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .block-title { font-size: 16px; font-weight: 800; color: #0f172a; }
        .block-nav { display: flex; gap: 8px; }
        .block-nav span {
            padding: 6px 14px; border-radius: 10px; font-size: 12px; font-weight: 700; cursor: pointer; color: #94a3b8; background: #f8fafc;
        }
        .block-nav span.active { background: #eff6ff; color: #2563eb; }

        /* === 5. INCOME LIST === */
        .income-list { margin-top: 10px; }
        .income-item { display: flex; align-items: center; padding: 14px 0; }
        .income-item:not(:last-child) { border-bottom: 1px solid #f1f5f9; }
        .income-icon {
            width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
            font-size: 18px; margin-right: 14px; background: #f8fafc; color: #64748b;
        }
        .income-info { flex: 1; }
        .income-label { font-size: 13px; font-weight: 600; color: #334155; }
        .income-sub { font-size: 11px; color: #94a3b8; font-weight: 500; margin-top: 2px; }
        .income-amount { font-size: 15px; font-weight: 800; color: #0f172a; text-align: right; }

        /* Tab pills override */
        .nav-pills .nav-link { background: transparent !important; color: #94a3b8 !important; font-weight: 700; font-size: 13px; padding: 0; border-radius: 0; }
        .nav-pills .nav-link.active { background: transparent !important; color: #0f172a !important; border-bottom: 3px solid #2563eb; border-radius: 0; }
    </style>

    <!-- HEADER PROFILE -->
    <div class="app-header">
        <div class="greeting">
            <p>Selamat datang,</p>
            <h2>{{ $userName }} </h2>
        </div>
        <div class="notif-btn">
            <i class="fas fa-bell"></i>
        </div>
    </div>

    <!-- CARD SALDO -->
    <div class="wallet-card">
        <div class="wallet-label">Total Saldo</div>
        @if (auth()->user()->saldo > 500000)
            <div class="wallet-amount">Unlimited</div>
        @else
            <div class="wallet-amount">Rp {{ number_format(auth()->user()->saldo, 0, ',', '.') }}</div>
        @endif
        <div class="wallet-badge"><i class="fas fa-shield-halved me-1"></i> {{ Auth::user()->level }} Access</div>
    </div>

    <!-- QUICK STATS (FLOATING) -->
    <div class="stats-grid">
        <div class="stat-item">
            <div class="stat-icon" style="background: linear-gradient(135deg, #06b6d4, #0891b2); box-shadow: 0 8px 16px rgba(6,182,212,0.3);">
                <i class="fas fa-arrow-trend-up"></i>
            </div>
            <div class="stat-title">Total Transaksi</div>
            <div class="stat-value">{{ $historyCount }}</div>
        </div>
        <div class="stat-item">
            <div class="stat-icon" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed); box-shadow: 0 8px 16px rgba(139,92,246,0.3);">
                <i class="fas fa-wallet"></i>
            </div>
            <div class="stat-title">Bulan Ini</div>
            <div class="stat-value">Rp {{ number_format($bulanini / 1000, 0, ',', '.') }}K</div>
        </div>
    </div>

    <!-- CHART & INCOME SECTION -->
    <div class="section-block">
        <div class="block-header">
            <div class="block-title">Aktivitas</div>
            <!-- Custom Tab Navs -->
            <ul class="nav nav-pills mb-0" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation"><a class="nav-link active" data-bs-toggle="pill" href="#chart-view" role="tab">Chart</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" data-bs-toggle="pill" href="#income-view" role="tab">Income</a></li>
            </ul>
        </div>

        <div class="tab-content">
            <!-- Tab Chart -->
            <div class="tab-pane fade show active" id="chart-view" role="tabpanel">
                <div id="overview-chart-1" style="min-height: 220px;"></div>
            </div>
            <!-- Tab Income -->
            <div class="tab-pane fade" id="income-view" role="tabpanel">
                <div class="income-list">
                    <div class="income-item">
                        <div class="income-icon" style="background: #eff6ff; color: #3b82f6;"><i class="fas fa-chart-pie"></i></div>
                        <div class="income-info">
                            <div class="income-label">Total Pendapatan</div>
                            <div class="income-sub">Sejak bergabung</div>
                        </div>
                        <div class="income-amount">Rp {{ number_format($pendapatan, 0, ',', '.') }}</div>
                    </div>
                    <div class="income-item">
                        <div class="income-icon" style="background: #f0fdfa; color: #14b8a6;"><i class="fas fa-calendar-check"></i></div>
                        <div class="income-info">
                            <div class="income-label">Bulan Ini</div>
                            <div class="income-sub">{{ now()->format('F Y') }}</div>
                        </div>
                        <div class="income-amount">Rp {{ number_format($bulanini, 0, ',', '.') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        var e = {
            chart: {
                height: 220,
                type: "bar",
                toolbar: { show: false },
                fontFamily: 'Inter, sans-serif',
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: "60%",
                    borderRadius: 8,
                    borderRadiusApplication: "end",
                },
            },
            legend: { show: false },
            dataLabels: { enabled: false },
            colors: ["#3b82f6", "#e2e8f0"], // Biru & Abu blok
            stroke: { width: 0 },
            grid: {
                show: true,
                borderColor: '#f1f5f9',
                strokeDashArray: 0,
                padding: { left: 0, right: 0, top: -20, bottom: 0 },
                xaxis: { lines: { show: false } },
                yaxis: { lines: { show: true } },
            },
            series: [{
                    name: "Order",
                    data: @json($register)
                },
                {
                    name: "Perpanjang",
                    data: @json($extended)
                },
            ],
            xaxis: {
                categories: @json($bulan),
                labels: {
                    style: { fontSize: '10px', fontWeight: 700, colors: '#94a3b8' },
                    offsetY: 5
                },
                axisBorder: { show: false },
                axisTicks: { show: false }
            },
            yaxis: {
                labels: { show: false } // Sembunyikan angka Y agar bersih khas app
            },
            tooltip: {
                theme: 'dark',
                style: { fontSize: '12px', fontWeight: 700 },
                y: { formatter: function(e) { return e + " Transaksi"; } },
            },
        };
        new ApexCharts(document.querySelector("#overview-chart-1"), e).render();
    </script>
@endsection