@extends('layout.affiliater.v2.main')
@section('title', 'ASP管理 紹介者（ランキング）')

<style>
    .error{
        color: red;
        font-weight: bold;
    }
  
    .btn {
        border-radius: 5px;
    }

    .list-bot-add-friend{
        display: flex;
        flex-wrap: wrap;
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 20px;
    }

    .bot-add-friend{
        width: calc(100%/3);
        box-sizing: border-box;
        padding: 5px;
    }

    .bot-add-friend .info{
        border: 1px solid #E0E0E0;
        border-radius: 3px;
        overflow: hidden;
        height: 100%;
    }

    .bot-add-friend .info > div{
        padding: 0 13px;
        color: #535657;
    }

    .bot-add-friend .info > div.name_item{
        padding: 10px 15px;
        font-weight: bold;
        font-size: 14px;
    }
        
    .bot-add-friend .info > div.desc_item .setting_item{
        /*margin: 13px 25px 20px 5px;*/
        font-weight: bold;
        font-size: 17px;
        display: flex;
    }
    .bot-add-friend .info > div.desc_item > .setting_item .info_item{
        margin: 0 0 0 15px;
        font-weight: bold;
        font-size: 14px;
        display: flex;
    }

    .desc_item {
        margin-top: 20px;
    }

    .btn-detail-bot-add-friend{
        width: 100%;
        margin-bottom: 22px !important;
        background-color: white !important;
        border: 1px solid #8F9293 !important;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        position: relative;
        color: #8F9293;
        font-weight: bold !important;
    }

    select {
        position: relative;
        width: 200px;
        padding: 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 1px solid #eee;
        background: #eee;
    }

    .filter {
        text-align: center;
        font-weight: bold;
        font-size: 13px;
        position: relative;
    }

    .filter i {
        position: absolute;
        right: 10px;
        font-size: 16px;
        top: 50%;
        transform: translateY(-50%);
        color:#E0E0E0;
    }

    .filter option {
        text-align: center;
    }

    .btn-detail-bot-add-friend:hover{
        background-color: #8F9293 !important;
        opacity: 0.8;
        color: white;
        text-decoration: none;
    }

    .btn-detail-bot-add-friend i{
        position: absolute;
        right: 15px;
        font-size: 16px;;
    }

    .crown_icon {
        padding-top: 8px;
    }

    .crown_icon_gold {
        color:  #FEBA00;
    }

    .crown_icon_silver {
        color: #8F9293;
    }

    .crown_icon_bronze { 
        color: #9F6800;
    }

    .name-detail-list-bot {
        text-align: center;
        margin-bottom: 15px;
        font-size: 16px;
        font-weight: bold;
        color: #535657;
    }

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

    .table > tbody > tr > td {
        border-bottom: 1px solid #F4F6F7 !important;
        border-top: none !important;
        font-size: 12px;
        /*font-weight: bold;*/
    }

    .detail-list-bot-add-friend {
        padding: 0 70px 0 70px;
    }

    #affi_ranking[v-cloak] {
        display: none;
    }

    .bot-add-friend .info > div.name_item {
        text-align: center;
        padding: 7px 10px;
        color: #535657;
        background-color: #F2F2F2;
    }

    .bot-add-friend .info > div.name_item.add-friend {
        background-color: #8F9293;
        color: white;
    }

    .image_item {
        margin-top: 10px;
        margin-left: 35px;
        margin-right: 35px;
        display: flex;
        border: 1px solid #E0E0E0;
        border-radius: 3px;
        align-items: center;
        aspect-ratio: 1 / 1;
        justify-content: center;
    }

    .desc_item .setting_item {
        border: 1px solid #E0E0E0;
        border-bottom: none;
    }

    .desc_item .setting_item:last-child {
        border-bottom: 1px solid #E0E0E0;
    }

    .setting_item div:first-child {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #E0E0E0;
        background-color: #F8F8F8;
    }

    .setting_item div:first-child i {
        font-size: 18px;
    }


</style>
@section('content')
<article>
    <section class="masteredit" id="affi_ranking" v-cloak>
        <div class="container">
            <div class="form-group filter" style="width:200px; margin-bottom: 0px" v-show="type_display == 0">
                <select class="form-control" @change="getData('')" v-model="bot_id" style="font-weight: lighter;">
                    <option value="">全件表示</option>
                    @foreach($bots as $bot)
                        <option value="{{ $bot->id }}">{{ $bot->view_name }}</option>
                    @endforeach
                </select>
                <i class="fas fa-angle-down"></i>
            </div>
            <div class="list-bot-add-friend" v-if="type_display == 0">

                <div class="bot-add-friend" v-if="item_ranking.length > 0" v-for="(item, index) in item_ranking">
                    <div class="info" >
                        <div class="name_item" :class="{'add-friend': item.recommend_item.type == 1}">
                            @{{getTypeLink(item.recommend_item.type)}}
                        </div>
                        <div style="
                        margin-top:15px;
                         text-align: center;
                          font-weight: bold;
                          font-size: 14px;
                              overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                          ">
                            @{{item.recommend_item.condition_name}}
                        </div>
                        <div class="image_item">
                            <img style="aspect-ratio: 1 / 1" v-if="!item.recommend_item.banner_image" src="/images/asp-default-project.png"/>
                            <img style="aspect-ratio: 1 / 1" v-else :src="'{{ env('URL_SERVER_MEDIA') }}' + item.recommend_item.banner_image" />
                        </div>
                        <div class="desc_item">
                            <div class="setting_item" style="display: flex; align-items: center">
                                <div><i class=' crown_icon_gold fas fa-crown red-color fa-lg'></i></div>
                                <div class="info_item"  v-if="item.affs[0]" >@{{item.affs[0].username}} </div>
                                <div class="info_item"  v-else > - </div>
                            </div>
                            <div class="setting_item" style="display: flex; align-items: center">
                                <div><i class=' crown_icon_silver fas fa-crown red-color fa-lg'></i></div>
                                <div class="info_item" v-if="item.affs[1]">@{{item.affs[1].username}}  </div>
                                <div class="info_item" v-else> - </div>
                            </div>
                            <div class="setting_item" style="display: flex; align-items: center">
                                <div><i class=' crown_icon_bronze fas fa-crown red-color fa-lg'></i></div>
                                <div class="info_item" v-if="item.affs[2]">@{{item.affs[2].username}} </div>
                                <div class="info_item" v-else> - </div>
                            </div>
                        </div>
                        <div class="setting_item">
                            <button type="button" class="btn btn-detail-bot-add-friend"
                            v-bind:class="(type_display == 1)" v-on:click="openTabContent(1, item.recommend_item.id)">詳細を見る<i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="type_display == 1">
                <div class="detail-list-bot-add-friend">
                    <div class="name-detail-list-bot" >@{{ condition_name }}</div>
                    <div class="table-detail-list-bot">
                        <table class="table" >
                            <tbody>
                                <tr>
                                    <th style="border-radius: 5px 0 0 5px; color: white; padding-left: 15px !important; width: 9%;">順位</th>
                                    <th style="color: white; width: 60%;">お名前</th>
                                    <th style="color: white; width: 15%; text-align: right">成約件数</th>
                                    <th style="border-radius: 0 5px 5px 0; color: white; padding-right: 30px !important; width: 15%; text-align: right">報酬額</th>
                                </tr>
                                <tr v-if="item_detail.length > 0" v-for="(item, index) in item_detail">
                                    <td class="output" style="padding-left: 15px">
                                        <span v-if="(index) == 0"><i class='crown_icon crown_icon_gold fas fa-crown red-color fa-lg'></i></span>
                                        <span v-else-if="(index) == 1"><i class='crown_icon crown_icon_silver fas fa-crown red-color fa-lg'></i></span>
                                        <span v-else-if="(index) == 2"><i class='crown_icon crown_icon_bronze fas fa-crown red-color fa-lg'></i></span>
                                        <span v-else>@{{index + 1}}</span>
                                    </td>
                                    <td class="output">@{{item.username}}</td>
                                    <td class="output" style="text-align: right;">@{{formatNumber(item.total_approved)}} 件</td>
                                    <td class="output" style="text-align: right; padding-right: 30px">@{{formatNumber(item.total)}} 円</td>

                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <button onclick="window.location.href = '/v2/affiliate/aff-ranking' " class="btn btn-sns-line btn-sns-line-lg btn-sns-line-secondary" style="width: 107px; font-weight: bold; margin-top: 20px; background: rgb(224, 224, 224); color: rgb(143, 146, 147) !important; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px; margin-left: auto; margin-right: auto; display: inherit">
                    戻る
                </button>
            </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>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.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/ranking_v2.js?v={{config("sns-line.version")}}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#datetimepicker12').datetimepicker({
            inline: true,
            sideBySide: true
        });
    });
</script>
@endpush
@endsection