@extends('layouts.admin')


@section('style')
    <style>
        .box {
            overflow: hidden;
        }
    </style>
@endSection

@section('script')


    <script src="{{ asset('js/plant/admin/plant-detail-page.js?v=').date('Ymd') }}"></script>
    <script>
        var AJAX_URL_LIST = {
            summary: "{!! route('admin.plant.get_summary', ['user_uid' => $user_uid]) !!}",
            plants: "{!! route('admin.plant.get_plant_list', ['user_uid' => $user_uid]) !!}",
            tokenTrxs: "{!! route('admin.plant.get_token_transaction_list', ['user_uid' => $user_uid]) !!}",
            growthTokenTrxs: "{!! route('admin.plant.get_growth_token_transaction_list', ['user_uid' => $user_uid]) !!}",
            redemptions: "{!! route('admin.plant.get_redemption_list', ['user_uid' => $user_uid]) !!}",
            referrals: "{!! route('admin.plant.get_referral_list', ['user_uid' => $user_uid]) !!}",
            mallQrScans: "{!! route('admin.plant.get_mall_qr_scan_list', ['user_uid' => $user_uid]) !!}",
            coreArs: "{!! route('admin.plant.get_core_ar_list', ['user_uid' => $user_uid]) !!}",
            dailyChallenges: "{!! route('admin.plant.get_daily_challenge_list', ['user_uid' => $user_uid]) !!}"
        };
    </script>
@endSection

@section('content')
    <section class="content-header"></section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-3" id="summ_plant">
                <div class="info-box">
                    <span class="info-box-icon bg-blue"><i class="fas fa-leaf"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">Total Matured/Total Plants</span>
                        <span class="info-box-number"></span>
                    </div>
                </div>
            </div>

            <div class="col-md-3" id="summ_token">
                <div class="info-box">
                    <span class="info-box-icon bg-blue"><i class="fas fa-money"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">Token Balance</span>
                        <span class="info-box-number"></span>
                    </div>
                </div>
            </div>

            <div class="col-md-3" id="summ_redemption">
                <div class="info-box">
                    <span class="info-box-icon bg-blue"><i class="fas fa-gift"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">Total Redemptions</span>
                        <span class="info-box-number"></span>
                    </div>
                </div>
            </div>

            <div class="col-md-3" id="summ_referral">
                <div class="info-box">
                    <span class="info-box-icon bg-blue"><i class="fas fa-share-alt-square"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">Total Referrals</span>
                        <span class="info-box-number"></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row summary -->

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="col-md-4">
                        <label>User UID: </label>
                        <span>{{ $plant_user->user_uid }}</span>
                    </div>

                    <div class="col-md-4">
                        <label>{{ config('plant.client_app_name') }} Membership ID: </label>
                        <span>{{ $plant_user->user_membership_id }}</span>
                    </div>

                    <div class="col-md-4">
                        <label>Name: </label>
                        <span>{{ $plant_user->user_name }}</span>
                    </div>

                    <div class="col-md-4">
                        <label>Email: </label>
                        <span>{{ $plant_user->user_email }}</span>
                    </div>

                    <div class="col-md-4">
                        <label>Mobile: </label>
                        <span>{{ $plant_user->user_mobile }}</span>
                    </div>

                    <div class="col-md-4">
                        <label>Verified User: </label>
                        <span>{{ $plant_user->mobile_verified ? 'Yes' : 'No' }}</span>
                    </div>

                    <div class="col-md-4">
                        <label>Registered On: </label>
                        <span>{{ $plant_user->user_reg_timestamp }}</span>
                    </div>

                    <div class="col-md-4" id="summ_last_interact_at">
                        <label>Last Interact At: </label>
                        <span></span>
                    </div>

                    <div class="col-md-4" id="summ_mall_tag">
                        <label>Mall Tag: </label>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row user info -->

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header" style="height: 50px;">
                        <h3 class="card-title">List Plants</h3>
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body table-responsive p-0">

                        <table id="plants_table" class="table table-bordered table-hover dataTable">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Date Time</th>
                                    <th>Seed Type</th>
                                    <th>Seed Alias</th>
                                    <th>Level</th>
                                    <th>Progress</th>
                                    <th>Receipt UID</th>
                                    <th>Growth At</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
        <!-- /.row plant info -->

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header" style="height: 50px;">
                        <h3 class="card-title">List Token Transactions</h3>
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body table-responsive p-0">

                        <table id="token_transaction_table" class="table table-bordered table-hover dataTable">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Issue Date Time</th>
                                    <th>Description</th>
                                    <th>Debit</th>
                                    <th>Credit</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
        <!-- /.row token trx -->

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header" style="height: 50px;">
                        <h3 class="card-title">List Growth Token Transactions</h3>
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body table-responsive p-0">

                        <table id="growth_token_transaction_table" class="table table-bordered table-hover dataTable">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Issue Date Time</th>
                                    <th>Receipt UID</th>
                                    <th>Num Token Issued</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
        <!-- /.row growth token trx -->

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header" style="height: 50px;">
                        <h3 class="card-title">List Redemption</h3>
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body table-responsive p-0">

                        <table id="redemptions_table" class="table table-bordered table-hover dataTable">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Reward Type</th>
                                    <th>Rewarded At</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
        <!-- /.row redemption -->

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header" style="height: 50px;">
                        <h3 class="card-title">List Referrals</h3>
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body table-responsive p-0">

                        <table id="referrals_table" class="table table-bordered table-hover dataTable">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>User UID</th>
                                    <th>Referral At</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
        <!-- /.row referral -->

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header" style="height: 50px;">
                        <h3 class="card-title">List Mall QR Scans</h3>
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body table-responsive p-0">

                        <table id="mall_qr_scans_table" class="table table-bordered table-hover dataTable">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Date Time</th>
                                    <th>Mall Name</th>
                                    <th>Mall Address</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
        <!-- /.row mall qrs -->

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header" style="height: 50px;">
                        <h3 class="card-title">List AR-Cores</h3>
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body table-responsive p-0">

                        <table id="core_ar_table" class="table table-bordered table-hover dataTable">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Date Time</th>
                                    <th>Name</th>
                                    <th>Completed At</th>
                                    <th>Earn Details</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
        <!-- /.row ar-core -->

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header" style="height: 50px;">
                        <h3 class="card-title">List Daily Challenges</h3>
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body table-responsive p-0">

                        <table id="daily_challenge_table" class="table table-bordered table-hover dataTable">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Date Time</th>
                                    <th>Name</th>
                                    <th>Completed At</th>
                                    <th>Earn Details</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
        <!-- /.row daily challenge -->
    </section>
    <!-- /.content -->

@endsection