@extends('layouts.app')
@section('styles')
@endsection

@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <!--new customer-->
            <div class="row">
                <div class="col-12 col-lg-9 col-xl-9">
                    <div class="card radius-10 overflow-hidden">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <h6 class="mb-0">ลูกค้าใหม่</h6>
                                </div>
                                <div class="font-22 ms-auto"><i class='bx bx-dots-horizontal-rounded'></i>
                                </div>
                            </div>
                            <div class="chart-container">
                                <div class="text-center" id="new_graph">

                                </div>
                                <div class="text-center py-5" id="new_spinner">
                                    <div class="spinner-border" role="status">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-3 col-xl-3" id="news_list">
                    <div class="col">
                        <div class="card radius-10 bg-primary">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0 text-white">ลูกค้าวันนี้</p>
                                        <h4 class="my-1 text-white"><span id="news_day_new"></span> คน</h4>
                                        <p class="mb-0 font-13 text-white">
                                            <i id="news_day" class="bx bxs-up-arrow align-middle"></i><span
                                                id="news_day_old"></span>
                                            จากวันก่อน
                                        </p>
                                    </div>
                                    <div class="widgets-icons bg-light-transparent text-white ms-auto"><i
                                            class="lni lni-user"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card radius-10 bg-danger">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0 text-white">ลูกค้าอาทิตย์นี้</p>
                                        <h4 class="my-1 text-white"><span id="news_week_new"></span> คน</h4>
                                        <p class="mb-0 font-13 text-white"><i id="news_week"
                                                class="bx bxs-up-arrow align-middle"></i><span id="news_week_old"></span>
                                            จากอาทิตย์ก่อน</p>
                                    </div>
                                    <div class="widgets-icons bg-light-transparent text-white ms-auto"><i
                                            class="lni lni-users"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card radius-10 bg-success">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0 text-white">ลูกค้าเดือนนี้</p>
                                        <h4 class="my-1 text-white">
                                            <span id="news_month_new"></span> คน
                                        </h4>
                                        <p class="mb-0 font-13 text-white">
                                            <i id="news_month" class="bx bxs-down-arrow align-middle"></i>
                                            <span id="news_month_old"></span>
                                            จากเดือนก่อน
                                        </p>
                                    </div>
                                    <div class="widgets-icons bg-light-transparent text-white ms-auto"><i
                                            class="lni lni-calendar"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end new customer-->
            <hr>
            <!--active customer-->
            <div class="row">
                <div class="col-12 col-lg-9 col-xl-9">
                    <div class="card radius-10 overflow-hidden">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <h6 class="mb-0">ลูกค้าที่เล่น</h6>
                                </div>
                                <div class="font-22 ms-auto"><i class='bx bx-dots-horizontal-rounded'></i>
                                </div>
                            </div>
                            <div class="chart-container">
                                <div class="text-center" id="active_graph"></div>
                                <div class="text-center py-5" id="active_spinner">
                                    <div class="spinner-border" role="status">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-3 col-xl-3">
                    <div class="col">
                        <div class="card radius-10 bg-primary">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0 text-white">ลูกค้าวันนี้</p>
                                        <h4 class="my-1 text-white">
                                            <span id="active_day_new"></span> คน
                                        </h4>
                                        <p class="mb-0 font-13 text-white">
                                            <i id="active_day" class="bx bxs-up-arrow align-middle"></i>
                                            <span id="active_day_old"></span>
                                            จากวันก่อน
                                        </p>
                                    </div>
                                    <div class="widgets-icons bg-light-transparent text-white ms-auto"><i
                                            class="lni lni-user"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card radius-10 bg-danger">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0 text-white">ลูกค้าอาทิตย์นี้</p>
                                        <h4 class="my-1 text-white">
                                            <span id="active_week_new"></span> คน
                                        </h4>
                                        <p class="mb-0 font-13 text-white">
                                            <i id="active_week" class="bx bxs-up-arrow align-middle"></i>
                                            <span id="active_week_old"></span>
                                            จากอาทิตย์ก่อน
                                        </p>
                                    </div>
                                    <div class="widgets-icons bg-light-transparent text-white ms-auto"><i
                                            class="lni lni-users"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card radius-10 bg-success">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0 text-white">ลูกค้าเดือนนี้</p>
                                        <h4 class="my-1 text-white">
                                            <span id="active_month_new"></span> คน
                                        </h4>
                                        <p class="mb-0 font-13 text-white">
                                            <i id="active_month" class="bx bxs-down-arrow align-middle"></i>
                                            <span id="active_month_old"></span>
                                            จากเดือนก่อน
                                        </p>
                                    </div>
                                    <div class="widgets-icons bg-light-transparent text-white ms-auto"><i
                                            class="lni lni-calendar"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end active customer-->
            <hr>
            <!--job -->
            <div class="row">
                <div class="col-12 col-lg-9 col-xl-9">
                    <div class="card radius-10 overflow-hidden">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <h6 class="mb-0">ใบงาน</h6>
                                </div>
                                <div class="font-22 ms-auto"><i class='bx bx-dots-horizontal-rounded'></i>
                                </div>
                            </div>
                            <div class="chart-container">
                                <div class="text-center" id="job_graph"></div>
                                <div class="text-center py-5" id="job_spinner">
                                    <div class="spinner-border" role="status">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-3 col-xl-3">
                    <div class="col">
                        <div class="card radius-10 bg-primary">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0 text-white">วันนี้</p>
                                        <h4 class="my-1 text-white">
                                            <span id="job_day_new"></span>
                                        </h4>
                                        <p class="mb-0 font-13 text-white">
                                            <i id="job_day" class="bx bxs-up-arrow align-middle"></i>
                                            <span id="job_day_old"></span>
                                            จากวันนี้ก่อน
                                        </p>
                                    </div>
                                    <div class="widgets-icons bg-light-transparent text-white ms-auto"><i
                                            class="bx bxs-wallet"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card radius-10 bg-danger">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0 text-white">อาทิตย์นี้</p>
                                        <h4 class="my-1 text-white">
                                            <span id="job_week_new"></span>
                                        </h4>
                                        <p class="mb-0 font-13 text-white">
                                            <i id="job_week" class="bx bxs-up-arrow align-middle"></i>
                                            <span id="job_week_old"></span>
                                            จากอาทิตย์ก่อน
                                        </p>
                                    </div>
                                    <div class="widgets-icons bg-light-transparent text-white ms-auto"><i
                                            class="bx bxs-group"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card radius-10 bg-success">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0 text-white">เดือนนี้</p>
                                        <h4 class="my-1 text-white">
                                            <span id="job_month_new"></span>
                                        </h4>
                                        <p class="mb-0 font-13 text-white">
                                            <i id="job_month" class="bx bxs-down-arrow align-middle"></i>
                                            <span id="job_month_old"></span> จากเดือนก่อน
                                        </p>
                                    </div>
                                    <div class="widgets-icons bg-light-transparent text-white ms-auto"><i
                                            class="lni lni-calendar"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end job-->
            <hr>
            <!--winlose-->
            <div class="row">
                <div class="col-12 col-lg-12 col-xl-12">
                    <div class="card radius-10 overflow-hidden">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <h6 class="mb-0">winlose</h6>
                                </div>
                                <div class="font-22 ms-auto"><i class='bx bx-dots-horizontal-rounded'></i>
                                </div>
                            </div>
                            <div class="chart-container">
                                <div class="text-center" id="winlose_graph"></div>
                                <div class="text-center py-5" id="winlose_spinner">
                                    <div class="spinner-border" role="status">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end winlose-->

        </div>
    </div>
@endsection('content')

@section('scripts')
    <script src="{{ URL::asset('assets/plugins/apexcharts-bundle/js/apexcharts.min.js') }}"></script>
    {{-- <script src="{{ URL::asset('assets/js/dashboard-human-resources.js') }}"></script> --}}
    <!-- admin js css -->
    <link rel="stylesheet" href="{{ mix('css/admin.css') }}">
    <script src="{{ mix('js/admin.js') }}"></script>

    <!-- module js css -->
    <link rel="stylesheet" href="{{ mix('css/dashboard.css') }}">
    <script src="{{ mix('js/dashboard.js') }}"></script>
@endsection