@extends('layouts/contentNavbarLayout')

@section('title', 'Admin Dashboard')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}">
    <style>
        .vertical-menu,
        .sidebar-user {
            overflow: visible !important;
        }

        .sidebar-user-info .dropdown-menu,
        .dropdown-menu {
            position: fixed !important;
            z-index: 1055 !important;
        }

        :root {
            --dash-bg: #eef2f5;
            --dash-surface: #ffffff;
            --dash-border: #dbe4ea;
            --dash-text: #1f2a44;
            --dash-muted: #6b7a90;

            --dash-sidebar: #0f7c8f;
            --dash-sidebar-dark: #0c6a7a;
            --dash-sidebar-active: #2f8fa0;
            --dash-sidebar-text: #eaf7fa;

            --dash-hero-start: #162554;
            --dash-hero-mid: #233f93;
            --dash-hero-end: #2d56c5;

            --dash-card-blue: #2d5be3;
            --dash-card-green: #179c41;
            --dash-card-orange: #d97706;

            --dash-soft-blue: #dfe9ff;
            --dash-soft-icon: #2f67f6;

            --dash-success: #16a34a;
            --dash-warning: #d97706;
            --dash-danger: #dc2626;
            --dash-info: #0891b2;

            --dash-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
            --dash-radius: 20px;
        }

        body {
            background: var(--dash-bg) !important;
        }

        .layout-page,
        .content-wrapper,
        .container-xxl,
        .container-fluid {
            background: transparent !important;
        }

        .dashboard-shell {
            padding: 8px 0 24px;
        }

        .hero-card {
            background: linear-gradient(135deg,
                var(--dash-hero-start) 0%,
                var(--dash-hero-mid) 48%,
                var(--dash-hero-end) 100%);
            border: 0;
            border-radius: 22px;
            color: #fff;
            overflow: hidden;
            position: relative;
            box-shadow: 0 14px 28px rgba(37, 86, 197, 0.18);
        }

        .hero-card::before {
            content: "";
            position: absolute;
            left: -30px;
            top: 20px;
            width: 130px;
            height: 130px;
            background: rgba(255,255,255,.05);
            border-radius: 50%;
        }

        .hero-card::after {
            content: "";
            position: absolute;
            right: -40px;
            bottom: -55px;
            width: 210px;
            height: 210px;
            background: rgba(255,255,255,.10);
            border-radius: 50%;
        }

        .hero-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 18px;
        }

        .hero-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,.10);
            border: 1px solid rgba(255,255,255,.16);
            color: #fff;
            border-radius: 999px;
            padding: 9px 15px;
            font-size: 13px;
        }

        .dashboard-card {
            background: var(--dash-surface);
            border: 1px solid var(--dash-border);
            border-radius: 20px;
            box-shadow: var(--dash-shadow);
            height: 100%;
        }

        .dashboard-card .card-header {
            background: transparent;
            border-bottom: 1px solid var(--dash-border);
            padding: 18px 22px 14px;
        }

        .dashboard-card .card-body {
            padding: 22px;
        }

        .section-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--dash-text);
            margin: 0;
        }

        .section-subtitle {
            color: var(--dash-muted);
            font-size: 13px;
            margin-top: 4px;
        }

        .summary-stack {
            display: grid;
            gap: 16px;
        }

        .balance-box {
            border-radius: 22px;
            padding: 20px 22px;
            color: #fff;
            position: relative;
            overflow: hidden;
            min-height: 116px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
        }

        .balance-box::after {
            content: "";
            position: absolute;
            right: -34px;
            bottom: -34px;
            width: 118px;
            height: 118px;
            background: rgba(255,255,255,.12);
            border-radius: 50%;
        }

        .balance-box.primary {
            background: linear-gradient(135deg, #2b57dc 0%, #2f67f6 100%);
        }

        .balance-box.success {
            background: linear-gradient(135deg, #14943c 0%, #1ca247 100%);
        }

        .balance-box.warning {
            background: linear-gradient(135deg, #cf6d04 0%, #db7a0a 100%);
        }

        .balance-box h6 {
            font-size: 14px;
            color: rgba(255,255,255,.85);
            margin-bottom: 10px;
            font-weight: 500;
        }

        .balance-box h3 {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            color: #fff;
        }

        .filter-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
            justify-content: space-between;
            padding: 18px 22px;
            background: #fff;
            border: 1px solid var(--dash-border);
            border-radius: 18px;
            box-shadow: var(--dash-shadow);
            margin-bottom: 22px;
        }

        .filter-meta {
            color: var(--dash-muted);
            font-size: 13px;
        }

        .filter-form {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        .filter-form .form-select,
        .filter-form .form-control {
            border-radius: 14px;
            min-height: 42px;
            border: 1px solid #d6dde5;
            color: var(--dash-text);
            background-color: #fff;
        }

        .btn-modern {
            border-radius: 12px;
            min-height: 42px;
            padding: 0 18px;
            font-weight: 600;
            background: var(--dash-sidebar);
            border-color: var(--dash-sidebar);
            box-shadow: none;
        }

        .btn-modern:hover,
        .btn-modern:focus {
            background: var(--dash-sidebar-dark);
            border-color: var(--dash-sidebar-dark);
        }

        .mini-stat {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 22px;
            border-radius: 20px;
            background: #ffffff;
            border: 1px solid var(--dash-border);
            min-height: 116px;
            box-shadow: none;
        }

        .mini-stat-icon {
            width: 54px;
            height: 54px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #dfe8f7;
            color: var(--dash-soft-icon);
            font-size: 24px;
            flex-shrink: 0;
        }

        .mini-stat h6 {
            margin: 0 0 8px;
            color: #60708b;
            font-size: 14px;
            font-weight: 700;
        }

        .mini-stat h3 {
            margin: 0;
            color: #111c3d;
            font-size: 22px;
            font-weight: 800;
        }

        .mini-stat small {
            color: #97a6ba;
            display: inline-block;
            margin-top: 6px;
            font-size: 13px;
        }

        .analytics-grid {
            display: grid;
            grid-template-columns: 1.6fr 1fr;
            gap: 22px;
        }

        .balance-panel {
            display: grid;
            gap: 14px;
        }

        .list-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 0;
            border-bottom: 1px dashed var(--dash-border);
        }

        .list-row:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .list-row:first-child {
            padding-top: 0;
        }

        .list-title {
            font-weight: 600;
            color: var(--dash-text);
            margin-bottom: 3px;
        }

        .list-meta {
            color: var(--dash-muted);
            font-size: 12px;
        }

        .amount-pill {
            min-width: 92px;
            text-align: right;
            font-weight: 700;
            color: var(--dash-text);
        }

        .amount-pill.credit {
            color: var(--dash-success);
        }

        .amount-pill.debit {
            color: var(--dash-danger);
        }

        .table thead th {
            font-size: 12px;
            font-weight: 700;
            color: var(--dash-muted);
            text-transform: uppercase;
            letter-spacing: .4px;
            border-bottom-width: 1px;
        }

        .service-table tbody tr td,
        .fund-table tbody tr td {
            vertical-align: middle;
            padding-top: 14px;
            padding-bottom: 14px;
        }

        .soft-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            padding: 7px 12px;
            font-size: 12px;
            font-weight: 600;
        }

        .soft-badge.success {
            background: #dcfce7;
            color: #166534;
        }

        .activity-feed,
        .system-log-box {
            max-height: 370px;
            overflow: auto;
            padding-right: 4px;
        }

        .activity-item {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            padding: 14px 0;
            border-bottom: 1px dashed var(--dash-border);
        }

        .activity-item:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .activity-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--dash-sidebar);
            margin-top: 5px;
            box-shadow: 0 0 0 5px rgba(15, 124, 143, 0.12);
            flex-shrink: 0;
        }

        .activity-text {
            color: var(--dash-text);
            font-size: 14px;
            line-height: 1.45;
        }

        .log-line {
            background: #0f172a;
            color: #cbd5e1;
            border-radius: 12px;
            padding: 10px 12px;
            font-size: 12px;
            margin-bottom: 10px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }

        .view-link {
            text-decoration: none;
            color: var(--dash-sidebar);
            font-weight: 600;
            font-size: 13px;
        }

        .view-link:hover {
            color: var(--dash-sidebar-dark);
        }

        #dashboardTransactionChart .apexcharts-grid line {
            stroke: #e3eaf2;
        }

        @media (max-width: 1199.98px) {
            .analytics-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 767.98px) {
            .hero-card .card-body,
            .dashboard-card .card-body,
            .dashboard-card .card-header {
                padding-left: 16px;
                padding-right: 16px;
            }

            .filter-wrap {
                padding: 16px;
            }
        }
    </style>
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset('build/libs/metismenu/metisMenu.min.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new MetisMenu('#side-menu', {
                toggle: true
            });

            const rangeSelect = document.getElementById('rangeSelect');
            const customDates = document.getElementById('customDates');

            function toggleCustomDates() {
                if (!rangeSelect || !customDates) return;
                customDates.style.display = rangeSelect.value === 'custom' ? 'flex' : 'none';
            }

            if (rangeSelect) {
                rangeSelect.addEventListener('change', toggleCustomDates);
                toggleCustomDates();
            }

            const chartEl = document.querySelector("#dashboardTransactionChart");

            if (chartEl && typeof ApexCharts !== 'undefined') {
                const panelLabels = @json(collect($panels)->pluck('label')->values());
                const panelValues = @json(collect($panels)->pluck('value')->map(fn($v) => (float) $v)->values());

                const chartOptions = {
                    chart: {
                        type: 'bar',
                        height: 340,
                        toolbar: {
                            show: false
                        },
                        fontFamily: 'inherit'
                    },
                    series: [{
                        name: 'Amount',
                        data: panelValues
                    }],
                    xaxis: {
                        categories: panelLabels,
                        labels: {
                            style: {
                                fontSize: '12px'
                            }
                        }
                    },
                    yaxis: {
                        labels: {
                            formatter: function (val) {
                                return '₹ ' + Number(val).toLocaleString('en-IN', {
                                    maximumFractionDigits: 0
                                });
                            }
                        }
                    },
                    plotOptions: {
                        bar: {
                            borderRadius: 8,
                            columnWidth: '46%',
                            distributed: true
                        }
                    },
                    colors: ['#2563eb', '#0891b2', '#16a34a', '#d97706', '#7c3aed', '#dc2626'],
                    dataLabels: {
                        enabled: false
                    },
                    grid: {
                        borderColor: '#e2e8f0',
                        strokeDashArray: 4
                    },
                    legend: {
                        show: false
                    },
                    tooltip: {
                        y: {
                            formatter: function (val) {
                                return '₹ ' + Number(val).toLocaleString('en-IN', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                });
                            }
                        }
                    }
                };

                const chart = new ApexCharts(chartEl, chartOptions);
                chart.render();
            }
        });
    </script>
@endsection

@section('content')
<div class="dashboard-shell">
    <div class="row g-4 mb-4">
        <div class="col-xl-8">
            <div class="card hero-card">
                <div class="card-body p-4 p-lg-5 position-relative">
                    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                        <div>
                            <span class="badge bg-white text-primary fw-semibold px-3 py-2 rounded-pill mb-3">
                                Admin Control Center
                            </span>
                            <h2 class="mb-2 text-white fw-bold">Welcome back, {{ $username }} 👋</h2>
                            <p class="mb-0 text-white" style="max-width: 640px; opacity: .88;">
                                Monitor transactions, balances, service charges, user activity and operational health
                                from one premium dashboard built for speed and clarity.
                            </p>

                            <div class="hero-meta">
                                <span class="hero-chip">
                                    <i class="mdi mdi-calendar-month-outline"></i>
                                    {{ \Carbon\Carbon::now()->format('l, d M Y') }}
                                </span>

                                @if ($email)
                                    <span class="hero-chip">
                                        <i class="mdi mdi-email-outline"></i>
                                        {{ $email }}
                                    </span>
                                @endif

                                <span class="hero-chip">
                                    <i class="mdi mdi-account-group-outline"></i>
                                    Total Users: {{ $total_users ?? 0 }}
                                </span>
                            </div>
                        </div>

                        <div class="text-start text-lg-end">
                            <div class="hero-chip mb-2">
                                <i class="mdi mdi-shield-check-outline"></i>
                                Active Users: {{ $active_users ?? 0 }}
                            </div>
                            <div class="hero-chip">
                                <i class="mdi mdi-wallet-outline"></i>
                                Payout Balance: ₹ {{ number_format($total_payout_balance ?? 0, 2) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="summary-stack h-100">
                <div class="balance-box primary">
                    <h6>Total Payout Transactions</h6>
                    <h3>₹ {{ number_format($total_payout_amount ?? 0, 2) }}</h3>
                </div>
                <div class="balance-box success">
                    <h6>Total Payout Charges</h6>
                    <h3>₹ {{ number_format($total_payout_charge ?? 0, 2) }}</h3>
                </div>
                <div class="balance-box warning">
                    <h6>Total Payin Balance</h6>
                    <h3>₹ {{ number_format($total_payin_balance ?? 0, 2) }}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="filter-wrap">
        <div>
            <div class="section-title">Performance Snapshot</div>
            <div class="filter-meta">
                @if ($range === 'all')
                    Showing data for: All Time
                @else
                    Showing data for: {{ $start?->format('d M Y') }} - {{ $end?->format('d M Y') }}
                @endif
            </div>
        </div>

        <form method="GET" class="filter-form" id="filterForm">
            <select name="range" class="form-select form-select-sm" style="width: 190px;" id="rangeSelect">
                <option value="all" {{ $range === 'all' ? 'selected' : '' }}>All Time</option>
                <option value="today" {{ $range === 'today' ? 'selected' : '' }}>Today</option>
                <option value="yesterday" {{ $range === 'yesterday' ? 'selected' : '' }}>Yesterday</option>
                <option value="last7" {{ $range === 'last7' ? 'selected' : '' }}>Last 7 Days</option>
                <option value="last30" {{ $range === 'last30' ? 'selected' : '' }}>Last 30 Days</option>
                <option value="lastMonth" {{ $range === 'lastMonth' ? 'selected' : '' }}>Last Month</option>
                <option value="last3Months" {{ $range === 'last3Months' ? 'selected' : '' }}>Last 3 Months</option>
                <option value="custom" {{ $range === 'custom' ? 'selected' : '' }}>Custom Range</option>
            </select>

            <div class="d-flex gap-2" id="customDates" style="display: none;">
                <input type="date" name="from" value="{{ $from }}" class="form-control form-control-sm" style="width: 150px;">
                <input type="date" name="to" value="{{ $to }}" class="form-control form-control-sm" style="width: 150px;">
            </div>

            <button class="btn btn-primary btn-sm btn-modern" type="submit">
                <i class="mdi mdi-filter-variant me-1"></i> Apply Filter
            </button>
        </form>
    </div>

    <div class="row g-3 mb-4">
        @foreach ($panels as $panel)
            <div class="col-12 col-md-6 col-xl-3">
                <div class="mini-stat">
                    <div class="mini-stat-icon">
                        <i class="{{ $panel['icon'] }} mdi-24px"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h6>{{ $panel['label'] }}</h6>
                        <h3>₹ {{ number_format($panel['value'] ?? 0, 2) }}</h3>
                        <small>{{ $panel['count'] ?? 0 }} Txn</small>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="analytics-grid mb-4">
        <div class="dashboard-card card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="section-title">Transaction Analytics</h5>
                    <div class="section-subtitle">Visual comparison of current dashboard metrics</div>
                </div>
            </div>
            <div class="card-body">
                <div id="dashboardTransactionChart"></div>
            </div>
        </div>

        <div class="dashboard-card card">
            <div class="card-header">
                <h5 class="section-title">Balance Summary</h5>
                <div class="section-subtitle">Operational balances at a glance</div>
            </div>
            <div class="card-body">
                <div class="balance-panel">
                    <div class="list-row">
                        <div>
                            <div class="list-title">Payout Balance</div>
                            <div class="list-meta">Current wallet reserve</div>
                        </div>
                        <div class="amount-pill">₹ {{ number_format($total_payout_balance ?? 0, 2) }}</div>
                    </div>

                    <div class="list-row">
                        <div>
                            <div class="list-title">Payin Balance</div>
                            <div class="list-meta">Current collection reserve</div>
                        </div>
                        <div class="amount-pill">₹ {{ number_format($total_payin_balance ?? 0, 2) }}</div>
                    </div>

                    <div class="list-row">
                        <div>
                            <div class="list-title">Payout Charges</div>
                            <div class="list-meta">Accumulated processing charges</div>
                        </div>
                        <div class="amount-pill debit">₹ {{ number_format($total_payout_charge ?? 0, 2) }}</div>
                    </div>

                    <div class="list-row">
                        <div>
                            <div class="list-title">Active Users</div>
                            <div class="list-meta">Enabled merchant accounts</div>
                        </div>
                        <div class="amount-pill">{{ $active_users ?? 0 }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-lg-7">
            <div class="dashboard-card card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="section-title">Wallet Transactions</h5>
                        <div class="section-subtitle">Recent credits and debits across services</div>
                    </div>
                    <a href="{{ route('admin.wallet-transaction-report') }}" class="view-link">View all</a>
                </div>
                <div class="card-body">
                    @forelse ($wallet_logs as $log)
                        <div class="list-row">
                            <div>
                                <div class="list-title">{{ $log->service_name ?? 'N/A' }}</div>
                                <div class="list-meta">
                                    {{ \Carbon\Carbon::parse($log->created_at)->format('d M Y, h:i A') }}
                                </div>
                            </div>

                            <div class="d-flex gap-3 align-items-center">
                                <div class="amount-pill credit">
                                    {{ $log->credit ? '₹' . number_format($log->credit, 2) : '—' }}
                                </div>
                                <div class="amount-pill debit">
                                    {{ $log->debit ? '₹' . number_format($log->debit, 2) : '—' }}
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-muted">No wallet transactions available.</div>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="col-lg-5">
            <div class="dashboard-card card h-100">
                <div class="card-header">
                    <h5 class="section-title">Service Charges</h5>
                    <div class="section-subtitle">Category-wise charge summary</div>
                </div>
                <div class="card-body pt-2">
                    <div class="table-responsive">
                        <table class="table service-table align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>Service</th>
                                    <th class="text-end">Total Spent</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($services_charge as $summary)
                                    <tr>
                                        <td class="text-capitalize">{{ $summary->service_name }}</td>
                                        <td class="text-end fw-bold">₹ {{ number_format($summary->total_spent, 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2" class="text-center text-muted py-4">No service charges found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="dashboard-card card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h5 class="section-title">Fund Requests</h5>
                <div class="section-subtitle">Latest incoming request records</div>
            </div>
        </div>
        <div class="card-body pt-2">
            @if ($fund_requests->isEmpty())
                <div class="text-muted">No fund requests found.</div>
            @else
                <div class="table-responsive">
                    <table class="table fund-table align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Sender</th>
                                <th>Company Account</th>
                                <th>Date</th>
                                <th>Amount</th>
                                <th class="text-end">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($fund_requests as $request)
                                <tr>
                                    <td>{{ $request->sender_account_number ?? 'N/A' }}</td>
                                    <td>{{ $request->companyAccount['account_number'] ?? 'N/A' }}</td>
                                    <td>{{ \Carbon\Carbon::parse($request->created_at)->format('d M Y') }}</td>
                                    <td>₹ {{ number_format($request->amount, 2) }}</td>
                                    <td class="text-end">
                                        <span class="soft-badge success">
                                            <i class="mdi mdi-check-circle-outline"></i> Success
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-6">
            <div class="dashboard-card card h-100">
                <div class="card-header">
                    <h5 class="section-title">Recent User Activity</h5>
                    <div class="section-subtitle">Latest operational actions and movement</div>
                </div>
                <div class="card-body">
                    <div class="activity-feed">
                        @forelse ($recent_activities as $activity)
                            <div class="activity-item">
                                <span class="activity-dot"></span>
                                <div class="activity-text">{{ $activity }}</div>
                            </div>
                        @empty
                            <div class="text-muted">No recent activities available.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="dashboard-card card h-100">
                <div class="card-header">
                    <h5 class="section-title">System Logs</h5>
                    <div class="section-subtitle">Latest internal system messages</div>
                </div>
                <div class="card-body">
                    <div class="system-log-box">
                        @forelse ($system_logs as $log)
                            <div class="log-line">{{ $log }}</div>
                        @empty
                            <div class="text-muted">No system logs available.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection