@extends('wallet.layouts.master')
@section('title','Dashboard')
@section('description', 'Company Dashboard')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('materio/vendor/libs/apex-charts/apex-charts.css') }}"/>
@endsection
@section('content')
    <div class="row g-6">
        <!-- Registered Users -->
        <div class="col-xxl-3 col-sm-6">
            <div class="card">
                <div class="row">
                    <div class="col-7">
                        <div class="card-body">
                            <div class="card-info">
                                <h6 class="mb-4 pb-1 text-nowrap">Registered Users</h6>
                                <div class="d-flex align-items-center mb-3">
                                    <h4 class="mb-0 me-2">{{ $total_users }}</h4>
                                </div>
                                <div class="badge bg-label-primary rounded-pill">All Time</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-5">
                        <div class="h-100 position-relative">
                            <img src="{{ asset('materio/img/illustrations/illustration-1.png') }}" alt="Users"
                                 class="position-absolute card-img-position scaleX-n1-rtl bottom-0 w-auto end-0 me-3 me-xl-0 me-xxl-3 pe-2"
                                 width="95"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Open Tickets -->
        <div class="col-xxl-3 col-sm-6">
            <div class="card">
                <div class="row">
                    <div class="col-7">
                        <div class="card-body">
                            <div class="card-info">
                                <h6 class="mb-4 pb-1 text-nowrap">Open Tickets</h6>
                                <div class="d-flex align-items-center mb-3">
                                    <h4 class="mb-0 me-2">{{ $open_tickets }}</h4>
                                </div>
                                <div class="badge bg-label-warning rounded-pill">Pending</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-5">
                        <div class="h-100 position-relative">
                            <img src="{{ asset('materio/img/illustrations/illustration-2.png') }}" alt="Tickets"
                                 class="position-absolute card-img-position scaleX-n1-rtl bottom-0 w-auto end-0 me-3 me-xl-0 me-xxl-3 pe-2"
                                 width="81"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Overview -->
        <div class="col-xxl-6 align-self-end">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title m-0 me-2">Current Month</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4 col-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar">
                                    <div class="avatar-initial bg-primary rounded shadow-xs">
                                        <i class="icon-base ri ri-group-line icon-24px"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <p class="mb-0">New Users</p>
                                    <h5 class="mb-0">{{ $total_users_current_month_count }}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar">
                                    <div class="avatar-initial bg-warning rounded shadow-xs">
                                        <i class="icon-base ri ri-customer-service-line icon-24px"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <p class="mb-0">Open Tickets</p>
                                    <h5 class="mb-0">{{ $open_tickets_current_month }}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar">
                                    <div class="avatar-initial bg-success rounded shadow-xs">
                                        <i class="icon-base ri ri-check-double-line icon-24px"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <p class="mb-0">Resolved</p>
                                    <h5 class="mb-0">{{ $close_tickets_current_month }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- User Registrations Chart -->
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">User Registrations</h5>
                    <p class="text-body-secondary mb-0">Current Month</p>
                </div>
                <div class="card-body">
                    <div id="user-bar-chart"></div>
                </div>
            </div>
        </div>

        <!-- SMS Distribution Chart -->
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">SMS Status Distribution</h5>
                </div>
                <div class="card-body">
                    <div id="sms-donut-chart"></div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-0">HD wallet & gas</h5>
                        <div class="text-muted small">Company treasury from your CryptoAPIs account</div>
                    </div>
                    <a href="{{ route('company_wallet') }}" class="btn btn-primary btn-sm">Manage wallet</a>
                </div>
                <div class="card-body">
                    @if(empty($cryptoWallet))
                        <p class="text-muted mb-2">This company does not have a CryptoAPIs HD wallet yet.</p>
                        <a href="{{ route('account-settings') }}" class="btn btn-outline-primary btn-sm">Add API key</a>
                    @else
                        <div class="row g-3">
                            <div class="col-md-3">
                                <div class="text-muted small">Gas (ETH)</div>
                                <div class="fw-semibold">{{ number_format((float) ($gasCard['balance'] ?? 0), 8) }} ETH</div>
                                <code class="small text-break">{{ $gasCard['address'] ?? '—' }}</code>
                            </div>
                            <div class="col-md-3">
                                <div class="text-muted small">Gas (TRX)</div>
                                <div class="fw-semibold">{{ number_format((float) ($trxGasCard['balance'] ?? 0), 6) }} TRX</div>
                                <code class="small text-break">{{ $trxGasCard['address'] ?? '—' }}</code>
                            </div>
                            @foreach($treasuryCards as $wallet)
                                <div class="col-md-2">
                                    <div class="text-muted small">{{ $wallet['title'] }}</div>
                                    <div class="fw-semibold">{{ number_format((float) $wallet['balance'], 6) }}</div>
                                    <div class="text-muted small">${{ number_format((float) $wallet['usd_value'], 2) }}</div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Last 10 Transactions -->
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Last 10 Transactions</h5>
                    <a href="{{ route('transactions') }}" class="btn btn-primary btn-sm">
                        See All <i class="icon-base ri ri-arrow-right-line ms-1"></i>
                    </a>
                </div>
                <div class="card-body p-0">
                    @if(!$transactions->isEmpty())
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                <tr>
                                    <th>Client</th>
                                    <th>Type</th>
                                    <th>Amount</th>
                                    <th>USD</th>
                                    <th>Coin</th>
                                    <th>Confirmations</th>
                                    <th>Date</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($transactions as $trans)
                                    <tr>
                                        <td>
                                            <a href="{{ route('user_details', ['id' => $trans->user_id]) }}">{{ $trans->user->fname ?? '' }}</a>
                                        </td>
                                        <td>
                                            @if($trans->type == 'Deposit')
                                                <span class="badge bg-success">Deposit</span>
                                            @else
                                                <span class="badge bg-danger">Withdrawal</span>
                                            @endif
                                        </td>
                                        <td>{{ $trans->type == 'Deposit' ? '+' : '-' }} {{ $trans->amount }}</td>
                                        <td>${{ $trans->usd_amount }}</td>
                                        <td>{{ $trans->coin_short_name }}</td>
                                        <td>{{ $trans->confirmations }}</td>
                                        <td>{{ $trans->date }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="icon-base ri ri-exchange-line" style="font-size:48px;opacity:0.2;"></i>
                            <h6 class="mt-3 text-body-secondary">No transactions yet</h6>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('materio/vendor/libs/apex-charts/apexcharts.js') }}"></script>
    <script>
        $(document).ready(function () {
            $("#dashboard-page").addClass('active');
        });

        (function () {
            var bodyColor = config.colors.bodyColor;
            var fontFamily = config.fontFamily;

            // User Registrations Bar Chart
            var userDates = @json($users_dates);
            var userCounts = @json($users_counts);
            new ApexCharts(document.querySelector("#user-bar-chart"), {
                chart: { type: 'bar', height: 300, toolbar: { show: false } },
                series: [{ name: 'Users', data: userCounts }],
                plotOptions: { bar: { borderRadius: 4, columnWidth: '50%' } },
                colors: [config.colors.primary],
                dataLabels: { enabled: false },
                grid: { show: false },
                xaxis: {
                    categories: userDates,
                    labels: { style: { colors: bodyColor, fontFamily: fontFamily } },
                    axisBorder: { show: false }, axisTicks: { show: false }
                },
                yaxis: { labels: { style: { colors: bodyColor, fontFamily: fontFamily } } }
            }).render();

            // SMS Donut Chart
            var smsData = @json(array_values($sms_counts));
            var smsLabels = @json(array_keys($sms_counts));
            var smsColors = @json(array_values($sms_colors));
            new ApexCharts(document.querySelector("#sms-donut-chart"), {
                chart: { type: 'donut', height: 300 },
                series: smsData,
                labels: smsLabels,
                colors: smsColors,
                stroke: { width: 0 },
                dataLabels: { enabled: true },
                legend: { position: 'bottom', labels: { colors: bodyColor }, fontFamily: fontFamily },
                tooltip: { theme: 'dark' }
            }).render();
        })();
    </script>
@endsection