@extends('layout.admin.main')
@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/chat_files/jquery-ui.min.css">
    <style>
        body >*{
            font-weight: bold;
            color: #51595C;
            font-size: 14px;
        }

        .center input, .center button {
            width: 50%;
            margin: 20px auto;
            font-size: 100%;
            text-align: center;
            padding: 10px;
        }

        div.btn button {
            display: block;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 10px 10px;
            font-size: 85%;
            background: #4A96B2;
            color: #fff;
            margin-top: 5px;
            border: 0;
            width: 50%;
            cursor: pointer;

        }

        .btn {
            border-radius: 4px !important;
            font-weight: bold;
        }
        .btn:hover{
            opacity: 0.7;
        }
        a{
            text-decoration: underline;
            font-weight: bold;
        }
        input{
            height: 34px;
        }
        td{
            color: #51595C;
        }
        #account_management .table>tbody>tr>th{
            border: none !important;
            background-color: #7D9195 !important;
            text-align: left;
        }
        .table>tbody>tr>td{
            border: none ;
            border-bottom: 1px solid #F2F2F2;
            text-align: left;
        }
        [v-cloak] {
            display: none !important;
        }
        .active_btn{
            opacity: 0.5;
        }
        .pagination >li >a:hover{
            background-color: rgb(8, 191, 90);
            color: white !important;
        }
        .box-content{
            padding: 20px;
            background-color:#F6F6F6 ;
            border-radius: 5px;
            margin: 10px;
        }
        .title{
            font-size: 18px;
            margin-bottom: 10px;
        }
        .form-search-friend{
            display: flex;
        }
        .form-search-friend input[type=text] {
            padding: 10px;
            font-size: 15px;
            border: 1px solid #96ADB2;
            float: left;
            height: 35px;
            margin-right: 0px;
            border-right: none;
            border-radius: 4px 0 0 4px;
        }
        .form-search-friend input[type=text]:focus-visible {
            outline: none;
        }
        .form-search-friend .btn-search {
            float: left;
            width: 7%;
            padding: 0;
            background: #ffffff;
            font-size: 17px;
            border: 1px solid #96ADB2;
            border-left: none;
            cursor: pointer;
            border-left: none;
            height: 35px;
            border-radius: 0 4px 4px 0;
        }
        .tab_title{
            display: flex;
            justify-content: space-between;
            align-items: baseline ;
            margin: 20px 10px 10px 10px;
        }
        .sub_content{
            background: white;
            padding: 10px;
            height: 235px;
        }
        .value-cont{
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            font-size: 18px;
        }
        #admin_top hr{
            margin-top: 13px;
            margin-bottom: 14px;
        }
    </style>
@endpush
@section('content')
    <article class="sub">
        <section class="masteredit" id="admin_top" v-cloak>
            <div class="row">
                <div class="col-sm-6">
                    <div class="box-content">
                        <div class="title"> ユーザー検索</div>
                        <div class="form-search-friend">
                            <input type="text" name="keyword" v-model="keyword">
                            <button type="button" class="btn-search " v-on:click="searchUser"
                            ><i class="fa fa-search" style="color:#96ADB2 "></i></button>
                        </div>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="tab_title" style="">
                        <div class="title"> アカウント情報（当月）</div>
                        <a href="{{route('botsManagement')}}">
                            <button  class="btn btn-sns-line btn-sns-line-sm btn-sns-line-dark">詳細</button>
                        </a>

                    </div>

                    <div class="box-content">
                       <div class="sub_content">
                           <div class="value-cont">
                               <div>新規LOA接続件数</div>
                               <div>@{{data.countBot}}件</div>
                           </div>
                           <hr>
                           <div class="value-cont">
                               <div>新規エルメアカウント数</div>
                               <div>@{{data.countUser}}件</div>
                           </div>
                           <hr>

                       </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="tab_title" style="">
                        <div class="title"> 収益情報（当月）</div>
                        <a href="/admin/bill-by-status?status=success">
                           <button class="btn btn-sns-line btn-sns-line-sm btn-sns-line-dark">詳細</button>
                        </a>
                    </div>
                    <div class="box-content">
                        <div class="sub_content">
                            <div class="value-cont">
                                <div>当月収益</div>
                                <div>@{{ data.totalRevenue }}円</div>
                            </div>
                            <hr>
                            <div class="value-cont">
                                <div>スタンダードプラン</div>
                                <div>@{{data.botBillMonthly}}件</div>
                            </div>
                            <hr>
                            <div class="value-cont">
                                <div>スタンダード年払い</div>
                                <div>@{{ data.botBillYearly }}件</div>
                            </div>
                            <hr>
                            <div class="value-cont">
                                <div>解約</div>
                                <div>@{{ data.botBillFail }}件</div>
                            </div>
                            <hr>

                        </div>
                    </div>

                </div>
            </div>


        </section>
    </article>
@endsection
@push('script')

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script src="/js/vue-paginate.js"></script>
    <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
    <script type="application/javascript" src="/js/admin/top.js?v={{config("sns-line.version")}}"></script>

    <script>
        $(document).ready(function()
        {
            // $.datepicker.setDefaults($.datepicker.regional["ja"]);
            $('.datepicker').datepicker({
                format         : 'yyyy/mm/dd',
                todayHighlight : true,
                autoclose      : true,
            });
        });
        function deleteUser(user_id) {
            message = '削除しますが、宜しいですか？';
            bootbox.confirm(message, function (result) {
                if (result) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: `/admin/delete-account/${user_id}`,
                        method: 'post',
                        beforeSend: function () {
                            $.LoadingOverlay('show');
                        },
                        success: function (response) {
                            $.LoadingOverlay('hide');
                            if (response.success) {
                                window.location.reload();
                            }
                        },
                        error: function () {
                            $.LoadingOverlay('hide');
                        }
                    });
                }
            })
        }
    </script>
@endpush