@extends('layout.affiliater.v2.main')
@section('title', 'ASP管理 紹介者（成約情報）')
@push('css')
<style>
    main {
        background: #fff !important;
    }

    .filter-month {
        width: 180px;
        border: 1px solid #E8E8E8;
        height: 40px;
        font-weight: bold;
    }

    .pagination li.active a{
        background-color: #08BF5A !important;
        border-color: #08BF5A !important;
    }

    #affi_money .filter-month {
        /*background: url(/images/ic-calendar_new.png) left 9px center no-repeat;*/
        appearance: none;
        -webkit-appearance: none;
        /* Support for Google Chrome và Safari. */
        -moz-appearance: none;
        /* Support for firefox. */
        -ms-appearance: none;
        /* Support for Internet Explorer. */
        -o-appearance: none;
        /* Support for Opera. */
        position: relative;
    }

    #affi_money .filter-month:hover {
        background-color: #F8F8F8;
    }

    input[type="month"]::-webkit-inner-spin-button,
    input[type="month"]::-webkit-calendar-picker-indicator {
        width: 100%;
        position: absolute;
        background: none;
    }

    h2,
    h3 {
        color: #333333;
        font-weight: normal;
    }

    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: 5px !important;
    }

    .all_button {
        margin-top: 15px;
        display: flex;
        width: 100%;
    }

    .all_account {
        width: 150px;
        height: 45px;
        color: #8F9293;
        font-weight: bold;
        word-break: keep-all;
        margin-right: 15px;
        background-color: #CBF4DD;
        box-shadow: 0px 3px #E0E0E0;
    }

    .each_account {
        width: 210px;
        height: 45px;
        color: #8F9293;
        font-weight: bold;
        word-break: keep-all;
        margin-right: 15px;
        background-color: #CBF4DD;
        box-shadow: 0px 3px #E0E0E0;

    }

    .select_account {
        width: 250px;
        height: 40px;
        font-weight: bold;
        text-align: center;
        border: 1px solid #E0E0E0;
        border-radius: 3px;
        font-weight: lighter;
    }
    .select_account option{
        color: #51595C;
    }
    .my_class {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: url(/images/ionic-ios-arrow-up.png) 97% no-repeat #fff !important;
        background-color: white;
        background-size: auto;
    }
    .detail_account {
        width: 120px;
        color: #08BF5A;
        font-weight: bold;
        border: 1px solid #07C655;
        border-radius: 3px;
        word-break: keep-all;
        height: 35px;
        background-color: white;
        margin-left: 15px;
    }

    .select_data {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .text_value {
        display: inline-block;
        text-align: left;
        font-weight: bold;
        font-size: 12px;
        padding-top: 10px;
        margin-right: 30px;
        color: #535567;
    }

    .tab_right_top {
        display: flex;
        align-items: center;
        color: #51595C;
        /*display: inline-block;*/
    }

    .tab_right_top i.fas{
        background-color: #F2F2F2;
        border-radius: 5px;
        color: white;
        padding: 12px 8px;
        cursor: pointer;
    }

    .tab_right_top>* {
        margin-left: 9px;
        display: inline-block;
    }

    td {
        color: #51595C;
        font-weight: bold;
    }

    #affi_money .table>tbody>tr>th {
        border: none !important;
        background-color: #F8F8F8 !important;
        color: #535657;
        text-align: left;
        font-weight: normal;
        padding-top: 12px;
        height: 40px;
        font-size: 14px;
    }

    .table>tbody>tr>td {
        border: none;
        border-bottom: 1px solid #F2F2F2;
        text-align: left;
        font-size: 14px;
        /* padding-top: 30px; */
    }

    .output {
        padding-top: 19px !important;
    }

    .item_name {
        font-weight: bold;
    }

    .select_data_detail {
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .return_account {
        width: 130px;
        height: 50px;
        font-size: 18px;
        font-weight: bold;
        color: #FFFFFF;
        background-color: #96ADB2;
        box-shadow: 0px 3px #F2F2F2;
        word-break: keep-all;
        margin: auto;
        display: flex;
        line-height: 39px;
        padding-left: 44px;
    }

    .activeTab {
        background-color: #08BF5A;
        color: #FFFFFF;
    }

    select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(/images/ionic-ios-arrow-up_1.png) no-repeat 96% !important;
    /*background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 96% !important;*/
    }

    select:disabled {
        background: url(/images/ionic-ios-arrow-up_1.png) no-repeat 96% #F8F8F8 !important;
        border: 1px solid #E0E0E0;
        border-radius: 3px;
        color: #51595C;
    }
    #affi_money[v-cloak] {
        display: none;
    }

</style>
@endpush
@section('content')
<article class="sub">
    <section class="masteredit" id="affi_money" v-cloak>
        <div class="container" v-if="type_display == 0">
            <div class="all_button">
{{--                <div>--}}
{{--                    <button type="button" class="btn btn-sns-line btn-sns-line-success all_account" v-bind:class="(mode_filter == 0) ? 'activeTab' : ''" v-on:click="changeModeFilter(0)">一覧</button>--}}
{{--                    <button type="button" class="btn btn-sns-line btn-sns-line-success each_account" v-bind:class="(mode_filter == 1) ? 'activeTab' : ''" v-on:click="changeModeFilter(1)">LINE公式アカウントごと</button>--}}
{{--                </div>--}}
{{--                <select class="form-control select_account my_class" :disabled="mode_filter == 0" v-model="selected" @change="changeModeShow()">--}}
{{--                    <option value="">選択してください</option>--}}
{{--                    <option v-for="(item, index) in list_option" :value="item.id">@{{item.view_name}}</option>--}}
{{--                </select>--}}
                <!-- <select>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select> -->
            </div>
            <div class="select_data">
                <div class="row">
                    <div class="col-sm-12" style="display: flex; align-items: center">
                        <div class="tab_right_top">
                            <i class="fas fa-chevron-left" style="margin-left: 0;" v-on:click="preMonth()"></i>
                            <div style="position: relative">
                                <i class="fal fa-calendar" style="color: rgb(81, 89, 92);
                                            position: absolute;
                                            z-index: 1;
                                            top: 11px;
                                            left: 10px;
                                        "></i>
                                <input type="month" v-model="filter_month" class="form-control text-center filter-month showpicker"
                                        v-on:change="filterMonth" style="font-weight: lighter;">
                            </div>
                            <i class="fas fa-chevron-right" v-on:click="nextMonth()"></i>
                        </div>
                        <select class="form-control select_account my_class"
                                style="margin-left: 10px"
                                v-model="selected" @change="changeModeShow()">
                            <option value="">全件表示</option>
                            <option v-for="(item, index) in list_option" :value="item.id">@{{item.view_name}}</option>
                        </select>
                        <div class="" style="margin-left: 30px ">
                            <div class="text_value">報酬合計額 @{{total ? formatPrice(total) : 0}}円</div>
                            <div class="text_value">成約数 @{{total_approved ? total_approved : 0}}件</div>
                            <div class="text_value">承認待ち @{{total_wait_approved ? total_wait_approved : 0}}件</div>
                        </div>
                    </div>
                </div>
            </div>
            <div >
                <table class="table" style="background-color: #FFFFFF; width: 100%;">
                    <tbody>
                        <tr>
                            <th style="width: 20%; border-radius: 5px 0 0 5px; padding-left: 13px; font-weight: bold;">LINE公式アカウント名</th>
                            <th style="width: 18%; min-width: 187px; font-weight: bold;">案件名</th>
                            <th style="width: 11%; text-align: center; font-weight: bold;">アクセス数</th>
                            <th style="width: 11%; text-align: center; font-weight: bold;">成約</th>
                            <th style="width: 11%; text-align: center; font-weight: bold;">承認待ち</th>
                            <th style="width: 14%; text-align: center; font-weight: bold;">報酬額</th>
                            <th style="width: 15%; border-radius: 0 5px 5px 0; text-align: center; font-weight: bold;">詳細確認</th>
                        </tr>
                        <tr v-if="items.length > 0" v-for="(item, index) in items">
                            <td class="output" style="padding-left: 13px;">@{{item.view_name}}</td>
                            <td class="output">@{{ item.type != 1  ? item.condition_name : '友だち登録（オプト）報酬'}}</td>
                            <td class="output" style="text-align: center;">@{{ item.total_access }}</td>
                            <td class="output" style="text-align: center;">@{{item.total_approved}}</td>
                            <td class="output" style="text-align: center;">@{{item.total_wait_approved}}</td>
                            <td class="output" style="text-align: right;">¥ @{{formatPrice(item.total)}}</td>
                            <td>
                                <div>
                                    <button type="button" class="btn btn-sns-line detail_account" v-bind:class="(type_display == 1)" v-on:click="openTabContent(1  ,item.id)">詳細を見る</button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- Pagination -->
                <nav sty class="text-center" v-if="pagination.total > pagination.per_page">
                    <ul class="pagination">
                        <li v-if="pagination.current_page > 1">
                            <a href="#" aria-label="Previous" @click.prevent="changePage(pagination.current_page - 1)">
                                <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-arrow-left"></i></span>
                            </a>
                        </li>
                        <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active' : '']">
                            <a href="#" @click.prevent="changePage(page)">@{{ page }}</a>
                        </li>
                        <li v-if="pagination.current_page < pagination.last_page">
                            <a href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)">
                                <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-arrow-right"></i></span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <div class="container" v-if="type_display == 1" style="padding: 0 80px 0 80px; margin-top: 10px;">
            <div class="item_name">
                <div class="text-center" > @{{detail.condition_name}} </div>
            </div>
            <div class="select_data_detail">
                <div class="row">
                    <div class="col-sm-12" style="display: flex; align-items: center">
                        <div class="tab_right_top">
                            <i class="fas fa-chevron-left" style="margin-left: 0;" v-on:click="preMonth()"></i>
                            <input type="month" v-model="filter_month" class="form-control text-center filter-month fal fa-calendar showpicker" 
                                    v-on:change="filterMonth" style="font-weight: lighter;">
                            <i class="fas fa-chevron-right" v-on:click="nextMonth()"></i>
                        </div>
                        <div class="" style="margin-left: 30px">
                            <div class="text_value">報酬合計額 @{{ detail.total ?  formatPrice(detail.total) : 0}}円</div>
                            <div class="text_value">成約数 @{{detail.total_approve ? detail.total_approve : 0}}件</div>
                            <div class="text_value">承認待ち @{{detail.total_wait_approve ? detail.total_wait_approve : 0}}件</div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <table class="table" style="width: 100%;" v-if="type_display == 1">
                    <tbody>
                        <tr>
                            <th style="border-radius: 5px 0 0 5px; width: 25%; font-weight: bold;">成約日時</th>
                            <th style="width: 30%; font-weight: bold;">成約ID</th>
                            <th style="width: 28%; text-align: center; font-weight: bold;">報酬額</th>
                            <th style="border-radius: 0 5px 5px 0; width: 27%; text-align: center; font-weight: bold;">ステータス</th>
                        </tr>
                        <tr v-if="items_detail.length > 0" v-for="(item, index) in items_detail">
                            <td class="output">@{{item.created_at}}</td>
                            <td class="output">@{{item.id}}</td>
                            <td class="output" style="text-align: center;">@{{formatPrice(item.total)}}円</td>
                            <td class="output" style="text-align: center;">
                                <span v-if="item.is_approved == 0">未承認</span>
                                <span v-else-if="item.is_approved == 1" style="color: #08BF5A;">承認済み</span>
                                <span v-else>拒否済み</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div style="text-align: center">
                    <button type="button"
                            class="btn btn-sns-line btn-sns-line-lg text-center"
                            v-bind:class="(type_display == 0)"
                            style="font-weight: bold;
                            padding: 10px 16px !important;
                            width: 100px;
                            box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px;
                            background-color: rgb(224, 224, 224);
                            color: rgb(143, 146, 147);"
                            v-on:click="openTabContent(0)">戻る</button>
                </div>
            </div>
        </div>
    </section>
</article>
@push('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 src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="/chat_files/clipboard.min.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@2.1.7/dist/loadingoverlay.min.js"></script>

<script type="application/javascript" src="/js/affiliater/money_v2.js?v={{config("sns-line.version")}}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#datetimepicker12').datetimepicker({
            inline: true,
            sideBySide: true
        });
    });
</script>
@endpush
@endsection