@extends('layouts.back-end.body')

@section('content')
    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl border-bottom">
            <h1 class="app-page-title">{{ __('message.overview') }}</h1>
            <div class="col-xs-12 col-sm-12">
                {{-- searcy --}}
                <div class="" style="margin-bottom: 40px;">
                    <form method="get" id="search-form">
                        <div class="row" style="margin-bottom:15px;">
                            <div class="col-xs-6 col-sm-6 " style="margin-top:0px;font-weight: bold;">
                                {{ __('message.start date') }}
                                <input type="text" id="datepicker_start" class="form-control" name="start_date"
                                    title="Start Date" value="{{ $start_date }}" placeholder="Start Date" readonly="">
                            </div>
                            <div class="col-xs-6 col-sm-6 " style="margin-top:0px;font-weight: bold;">
                                {{ __('message.end date') }}
                                <input type="text" id="datepicker_end" class="form-control" name="end_date"
                                    title="End Date" value="{{ $end_date }}" placeholder="End Date" readonly="">
                            </div>
                        </div>

                        <div class="rows">
                            <div class="" style="padding-bottom:10px;display: inline;">
                                <button type="submit" class="btn btn-primary text-light" style="display:inline;">
                                    <i class="fa fa-search"></i>
                                    {{ __('message.search') }}
                                </button>
                                <a href="{{ route('admin') }}" type="reset" class="btn btn-warning "
                                    style="display:inline;">
                                    <i class="fa fa-refresh"></i>
                                    <span class="hidden-xs">{{ __('message.refresh') }}</span>
                                </a>
                            </div>
                            <button type="button" class="btn btn-primary text-light search-date" id="today">
                                <i class="fa fa-calendar"></i>
                                {{ __('message.today') }}
                            </button>
                            <button type="button" class="btn btn-primary text-light search-date" id="yesterday">
                                <i class="fa fa-calendar"></i>
                                {{ __('message.yesterday') }}
                            </button>
                            <button type="button" class="btn btn-primary text-light search-date" id="this-week">
                                <i class="fa fa-calendar"></i>
                                {{ __('message.this week') }}
                            </button>
                            <button type="button" class="btn btn-primary text-light search-date" id="last-week">
                                <i class="fa fa-calendar"></i>
                                {{ __('message.last week') }}
                            </button>
                            <button type="button" class="btn btn-primary text-light search-date" id="this-month">
                                <i class="fa fa-calendar"></i>
                                {{ __('message.this month') }}
                            </button>
                            <button type="button" class="btn btn-primary text-light search-date" id="last-month">
                                <i class="fa fa-calendar"></i>
                                {{ __('message.last month') }}
                            </button>
                        </div>
                    </form>
                </div>
                {{-- End Search --}}
            </div>
            <div class="row g-4 mb-4 ">
                <div class="col-6 col-lg-3">
                    <div class="app-card app-card-stat shadow-sm h-100">
                        <div class="app-card-body p-3 p-lg-4">
                            <h4 class="stats-type mb-1">{{ __('message.deposit by member') }}</h4>
                            <div class="stats-figure">฿{{ number_format($deposit, 2) }}</div>
                        </div>
                        <!--//app-card-body-->
                        <a class="app-card-link-mask" href="#"></a>
                    </div>
                    <!--//app-card-->
                </div>
                <!--//col-->

                <div class="col-6 col-lg-3">
                    <div class="app-card app-card-stat shadow-sm h-100">
                        <div class="app-card-body p-3 p-lg-4">
                            <h4 class="stats-type mb-1">{{ __('message.withdraw by member') }}</h4>
                            <div class="stats-figure">฿{{ number_format($withdraw, 2) }}</div>

                        </div>
                        <!--//app-card-body-->
                        <a class="app-card-link-mask" href="#"></a>
                    </div>
                    <!--//app-card-->
                </div>
                <!--//col-->
                <div class="col-6 col-lg-3">
                    <div class="app-card app-card-stat shadow-sm h-100">
                        <div class="app-card-body p-3 p-lg-4">
                            <h4 class="stats-type mb-1">{{ __('message.profit') }}</h4>
                            <div class="stats-figure">฿{{ number_format($deposit - $withdraw, 2) }}</div>
                        </div>
                        <!--//app-card-body-->
                        <a class="app-card-link-mask" href="#"></a>
                    </div>
                    <!--//app-card-->
                </div>
                <!--//col-->
                <div class="col-6 col-lg-3">
                    <div class="app-card app-card-stat shadow-sm h-100">
                        <div class="app-card-body p-3 p-lg-4">
                            <h4 class="stats-type mb-1">{{ __('message.new customer') }}</h4>
                            <div class="stats-figure">{{ $customer }}</div>
                        </div>
                        <!--//app-card-body-->
                        <a class="app-card-link-mask" href="#"></a>
                    </div>
                    <!--//app-card-->
                </div>
                <!--//col-->
                <div class="col-6 col-lg-3">
                    <div class="app-card app-card-stat shadow-sm h-100">
                        <div class="app-card-body p-3 p-lg-4">
                            <h4 class="stats-type mb-1">{{ __('message.deposit by admin') }}</h4>
                            <div class="stats-figure">฿{{ number_format($deposit_test, 2) }}</div>
                        </div>
                        <!--//app-card-body-->
                        <a class="app-card-link-mask" href="#"></a>
                    </div>
                    <!--//app-card-->
                </div>
                <!--//col-->

                <div class="col-6 col-lg-3">
                    <div class="app-card app-card-stat shadow-sm h-100">
                        <div class="app-card-body p-3 p-lg-4">
                            <h4 class="stats-type mb-1">{{ __('message.withdraw by admin') }}</h4>
                            <div class="stats-figure">฿{{ number_format($withdraw_test, 2) }}</div>

                        </div>
                        <!--//app-card-body-->
                        <a class="app-card-link-mask" href="#"></a>
                    </div>
                    <!--//app-card-->
                </div>
                <!--//col-->
                <div class="col-6 col-lg-3">
                    <div class="app-card app-card-stat shadow-sm h-100">
                        <div class="app-card-body p-3 p-lg-4">
                            <h4 class="stats-type mb-1">{{ __('message.profit-test') }}</h4>
                            <div class="stats-figure">฿{{ number_format($deposit_test - $withdraw_test, 2) }}</div>
                        </div>
                        <!--//app-card-body-->
                        <a class="app-card-link-mask" href="#"></a>
                    </div>
                    <!--//app-card-->
                </div>
                <!--//col-->
                <div class="col-6 col-lg-3">
                    <div class="app-card app-card-stat shadow-sm h-100">
                        <div class="app-card-body p-3 p-lg-4">
                            <h4 class="stats-type mb-1">{{ __('message.new test customer') }}</h4>
                            <div class="stats-figure">{{ $customer_test }}</div>
                        </div>
                        <!--//app-card-body-->
                        <a class="app-card-link-mask" href="#"></a>
                    </div>
                    <!--//app-card-->
                </div>
                <!--//col-->
            </div>
            <!--//row-->
        </div>
        <!--//container-fluid-->
        <div class="col-xs-12 col-md-5 mt-2 bg-light">
            {{-- <h5 class="stats-type my-2 ml-2">{{ __('message.online users') }} </h5>
            @foreach ($onlineUsers as $online)
                @if (Cache::has('is_online' . $online->user_id))
                    <div class="user_online mt-1">
                        <div class="d-flex my-1" style="width:100%;align-items:center">
                            <img height="60px" src="{{ asset('/front-end/assets/uploads/client.png') }}">
                            <div class="col-10">
                                <span class="text-dark"><b>{{ $online->user->name ?? '' }}</b></span>
                                <br>
                                <span class="ip"> {{ $online->login_area ?? '' }} </span>
                                @if (Cache::has('is_online' . $online->user_id))
                                <label class="badge rounded-pill bg-success ml-2">online</label>
                                @else
                                    <span class="badge text-secondary">Offline</span>
                                @endif
                                <span
                                    class="text-secondary ml-2">{{ Carbon\Carbon::parse($online->last_seen)->diffForHumans() }}</span>
                            </div>
                        </div>
                        <div class="border-bottom"></div>
                    </div>
                @endif
            @endforeach --}}
            {{-- <div class="user_online mt-1">
                <div class="d-flex my-1" style="width:100%;align-items:center">
                    <img height="60px" src="{{ asset('/front-end/assets/uploads/client.png') }}">
                    <div class="col-10">
                        <span class="text-dark"><b>Dara Sun</b></span>
                        <br>
                        <span class="ip">IP Address : 122.154.118.10 </span>
                        <label class="badge rounded-pill bg-success ml-2">online</label>
                    </div>
                </div>
                <div class="border-bottom"></div>
            </div> --}}

        </div>
        <!--//app-content-->

        <footer class="app-footer">
            <div class="container text-center py-3">
                <!--/* This template is free as long as you keep the footer attribution link. If you'd like to use the template without the attribution link, you can buy the commercial license via our website: themes.3rdwavemedia.com Thank you for your support. :) */-->
                {{-- <small class="copyright">Develop by: </small> --}}

            </div>
        </footer>
        <!--//app-footer-->
        <style>
            .app-footer {
                position: fixed;
                left: 0;
                bottom: 0;
                width: 100%;
                text-align: center;
            }

            .badge {
                font-size: 11px !important;
            }

            .ip {
                font-size: 14px !important;
            }

            .text-secondary {
                font-size: 14px !important;
            }
        </style>

        
    @endsection