@extends('layouts.dashboard.main')

@section('title')
    Dashboard
@endsection

@section('content')
    <div class="nk-content nk-content-fluid">
        <div class="container-xl wide-xl">
            <div class="nk-content-body">
                <div class="nk-block">
                    <div class="row g-gs">
                        <div class="col-lg-8">
                            <div class="card h-100">
                                <div class="card-inner">
                                    <div class="card-title-group align-start mb-3">
                                        <div class="card-title">
                                            <h6 class="title">Grafik Transaksi</h6>
                                            <p>Dalam 15 hari terakhir Beli dan Jual.</p>
                                        </div>
                                        <div class="card-tools mt-n1 me-n1">
                                            <div class="drodown">
                                                <a href="#" class="dropdown-toggle btn btn-icon btn-trigger"
                                                    data-bs-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                                                <div class="dropdown-menu dropdown-menu-sm dropdown-menu-end">
                                                    <ul class="link-list-opt no-bdr">
                                                        <li>
                                                            <a href="#" class="active">
                                                                <span>15 Hari</span>
                                                            </a>
                                                        </li>
                                                        <li><a href="#"><span>30 Hari</span></a></li>
                                                        <li><a href="#"><span>3 Bulan</span></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div><!-- .card-title-group -->
                                    <div class="nk-order-ovwg">
                                        <div class="row g-4 align-end">
                                            <div class="col-12">
                                                <div class="nk-order-ovwg-ck">
                                                    <canvas class="order-overview-chart" id="orderOverview"></canvas>
                                                </div>
                                            </div><!-- .col -->
                                        </div>
                                    </div><!-- .nk-order-ovwg -->
                                </div><!-- .card-inner -->
                            </div><!-- .card -->
                        </div><!-- .col -->
                        <div class="col-lg-4">
                            <div class="card h-100">
                                <div class="card-inner-group">
                                    <div class="card-inner card-inner-md">
                                        <div class="card-title-group">
                                            <div class="card-title">
                                                <h6 class="title">Aktifitas</h6>
                                            </div>
                                        </div>
                                    </div><!-- .card-inner -->
                                    <div class="card-inner">
                                        <a href="{{ route('pages.transaction.index', ['type' => 'order']) }}"
                                            class="nk-wg-action">
                                            <div class="nk-wg-action-content">
                                                <em class="icon ni ni-tranx-fill"></em>
                                                <div class="title text-secondary">Pending Beli/Jual Order</div>
                                                <p>Memiliki <strong>40 order beli</strong> dan
                                                    <strong>12 order jual</strong>, yang perlu ditinjau.
                                                </p>
                                            </div>
                                        </a>
                                    </div><!-- .card-inner -->
                                </div><!-- .card-inner-group -->
                            </div><!-- .card -->
                        </div><!-- .col -->
                        <div class="col-12">
                            <div class="card card-full">
                                <div class="card-inner">
                                    <div class="card-title-group">
                                        <div class="card-title">
                                            <h6 class="title">
                                                <span class="me-2">Aktifitas Transaksi</span>
                                                <a href="{{ route('pages.transaction.index', ['type' => 'history']) }}"
                                                    class="link d-none d-sm-inline">
                                                    Lihat Riwayat
                                                </a>
                                            </h6>
                                        </div>
                                        <div class="card-tools">
                                            <ul class="card-tools-nav">
                                                <li><a href="#"><span>Beli</span></a></li>
                                                <li><a href="#"><span>Jual</span></a></li>
                                                <li class="active"><a href="#"><span>Semua</span></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div><!-- .card-inner -->
                                <div class="card-inner p-0 border-top">
                                    <div class="nk-tb-list nk-tb-orders">
                                        <div class="nk-tb-item nk-tb-head">
                                            <div class="nk-tb-col"><span>Detail</span></div>
                                            <div class="nk-tb-col tb-col-xxl"><span>Rekening</span></div>
                                            <div class="nk-tb-col tb-col-lg"><span>Transaksi</span></div>
                                            <div class="nk-tb-col text-end"><span>Jumlah</span></div>
                                            <div class="nk-tb-col nk-tb-col-status text-end"><span
                                                    class="sub-text d-none d-md-block">Status</span></div>
                                        </div>
                                        <div class="nk-tb-item">
                                            <div class="nk-tb-col">
                                                <div class="nk-tnx-type">
                                                    <div class="nk-tnx-type-icon bg-success-dim text-success">
                                                        <em class="icon ni ni-arrow-up-right"></em>
                                                    </div>
                                                    <div class="nk-tnx-type-text">
                                                        <span class="tb-lead">Jual</span>
                                                        <span class="tb-date">18/10/2024 13:04</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="nk-tb-col tb-col-xxl">
                                                <span class="tb-lead-sub">BCA</span>
                                                <span class="tb-sub">1098******3343</span>
                                            </div>
                                            <div class="nk-tb-col tb-col-lg">
                                                <span class="tb-lead-sub">CRUSDT52JG73</span>
                                                <span class="badge badge-dot bg-success">Jual</span>
                                            </div>
                                            <div class="nk-tb-col text-end">
                                                <span class="tb-amount">1000 <span>USDT</span></span>
                                                <span class="tb-amount-sm">15,732,331.93 IDR</span>
                                            </div>
                                            <div class="nk-tb-col nk-tb-col-status text-end">
                                                <div class="dot dot-success d-md-none"></div>
                                                <span
                                                    class="badge badge-sm badge-dim bg-outline-success d-none d-md-inline-flex">Selesai</span>
                                            </div>
                                        </div>
                                        <div class="nk-tb-item">
                                            <div class="nk-tb-col">
                                                <div class="nk-tnx-type">
                                                    <div class="nk-tnx-type-icon bg-warning-dim text-warning">
                                                        <em class="icon ni ni-arrow-up-right"></em>
                                                    </div>
                                                    <div class="nk-tnx-type-text">
                                                        <span class="tb-lead">Beli</span>
                                                        <span class="tb-date">18/10/2024 13:04</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="nk-tb-col tb-col-xxl">
                                                <span class="tb-lead-sub">Alamat USDT</span>
                                                <span class="tb-sub">e43d******98ve</span>
                                            </div>
                                            <div class="nk-tb-col tb-col-lg">
                                                <span class="tb-lead-sub">CRUSDT52JG73</span>
                                                <span class="badge badge-dot bg-warning">Beli</span>
                                            </div>
                                            <div class="nk-tb-col text-end">
                                                <span class="tb-amount">15,732,331.93 <span>IDR</span></span>
                                                <span class="tb-amount-sm">1000 USDT</span>
                                            </div>
                                            <div class="nk-tb-col nk-tb-col-status text-end">
                                                <div class="dot dot-success d-md-none"></div>
                                                <span
                                                    class="badge badge-sm badge-dim bg-outline-warning d-none d-md-inline-flex">
                                                    Menunggu Pembayaran
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div><!-- .card-inner -->
                                <div class="card-inner-sm border-top text-center d-sm-none">
                                    <a href="#" class="btn btn-link btn-block">See History</a>
                                </div><!-- .card-inner -->
                            </div><!-- .card -->
                        </div><!-- .col -->
                    </div><!-- .row -->
                </div><!-- .nk-block -->
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/js/chart-widgets.js') }}"></script>
@endpush