@extends('layout.affiliater.v2.main')
@section('title', 'ASP管理 紹介者（紹介情報詳細）')
@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1-rc.1/css/select2.min.css">
<style>
    #btn-open {
        border: 0;
    }
    .image_item{
        position: relative;
        /* height: 174px; */
        overflow: hidden;
        margin: 0px 30px;
        border: 1px solid #E0E0E0;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1 / 1;
    }
    .image_item::before{
        content: "";
        display: block;
        padding-top: 100%;
    }

    .image_item img{
        /*position: absolute;*/
        /*top: 0;*/
        /*left: 0;*/
        aspect-ratio: 1 / 1;
        /*object-fit: contain;*/
        /*padding: 0 13px;*/
    }

    .title_common {
        font-size: 18px;
        color: #535657;
        /*padding-left: 25px;*/
        position: relative;
        font-weight: bold;
    }

    /*.title_common::before {*/
    /*    content: "";*/
    /*    display: block;*/
    /*    width: 15px;*/
    /*    height: 45px;*/
    /*    background-color: #F2F2F2;*/
    /*    border-radius: 5px;*/
    /*    position: absolute;*/
    /*    left: 0;*/
    /*    top: -10px;*/
    /*}*/

    .total_money_aff {
        margin-top: 10px;
        /*border: 1px solid #F4F6F7;*/
        border-radius: 5px;
        padding-top: 18px;
        box-sizing: border-box;
    }

    .btn-copy-url-add-friend {
        color: #FFFFFF;
        background-color: #96ADB2;
        display: block;
        padding: 4px 8px;
        margin-left: 10px;
        border: 1px solid #96ADB2;
        border-radius: 5px;
        line-height: 23px;
    }

    .btn-copy-url-add-friend:hover {
        background-color: #E0E0E0;
        border: 1px solid #E0E0E0;
    }

    #total_money_aff_table th {
        font-weight: bold;
        background-color: #F4F6F7;
        color: #535657;
        font-size: 14px;
    }

    #total_money_aff_table .table-bordered > tbody > tr > th,
    #total_money_aff_table .table-bordered > tbody > tr > td{
        border: 1px solid #E0E0E0;
    }

    #total_money_aff_table td {
        vertical-align: middle;
        color: #51595C;
    }

    .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;
    }

    .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;
        text-align: center;
    }

    .bot-add-friend .info>div.desc_item .setting_item {
        margin: 13px 0;
        font-weight: bold;
        font-size: 12px;
    }

    .btn-detail-bot-add-friend {
        width: 100%;
        height: 36px;
        background-color: white;
        border: 1px solid #08BF5A;
        color: #08BF5A;
        font-weight: bold;
        font-size: 14px;
        border-radius: 5px;
        /*box-shadow: 0 3px 0 #00000029;*/
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .btn-detail-bot-add-friend:hover {
        background-color: #08BF5A;
        border: 1px solid #08BF5A;
        opacity: 0.8;
        text-decoration: none;
    }

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

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

    .list_bot_aff{
        background-color: #F8F8F8;
        border-radius: 5px;
        padding: 18px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }

    .list_bot_aff label{
        flex: 0 0 150px;
    }

    .list_bot_aff select{
        flex: 0 0 350px;
    }

    .list_bot_aff .btn-all{
        background-color: #E0E0E0;
        margin-left: 15px;
        padding: 8px 20px;
        font-size: 12px;
        font-weight: bold;
        color: #535657;
    }

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

    .description_item{
        border: 1px solid #E0E0E0;
        border-radius: 3px;
        padding: 15px;
        margin-bottom: 40px;
        color: #535657;
    }

    .select2-selection {
        height: 35px !important;
        border-color: #ced4da !important;
        line-height: 35px;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered{
        line-height: 34px;
        color: #51595C;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow{
        height: 34px;
        /*display: none;*/
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow b{
        border-color: unset;
        border-style: unset;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow:before{
        content: "";
        display: inline-block;
        width: 13px;
        height: 13px;
        border-top: 2px solid #F2F2F2;
        border-right: 2px solid #F2F2F2;
        transform: rotate(135deg);
        position: absolute;
        top: 6px;
        left: -2px;
    }
    label{
        color: #535657;
    }

    .table-recommend-project {
        margin-top: 15px;
    }
    .table-recommend-project tr > td:first-child {
        width: 47%;
        background-color: #F8F8F8;
    }

    .table-recommend-project, .table-recommend-project td{
        border: 1px solid #E0E0E0;
        border-collapse: collapse;
    }

    .table-recommend-project tr td {
        text-align: center;
        font-weight: bold;
        font-size: 9px;
        padding: 8px 7px;
    }

    #home_page[v-cloak] {
        display: none;
    }
</style>
@endpush
@section('content')
<div class="container" id="home_page" v-cloak>
    <div class="banner_item" v-if="bot_aff.header_image">
        <img :src="bot_aff.header_image" width="100%"/>
    </div>
    <div class="description_item" v-if="bot_aff.intro_content" v-html="bot_aff.intro_content"></div>
    
    <div class="list_bot_aff">
        <label>アカウント選択</label>
        <select class="form-control my_class" @change="changeBotAff($event)">
            @foreach($listBotAff as $botAff)
            <option @if($botAff->id == $botId) selected @endif value="{{ $botAff->id }}" data-src="@if(!$botAff->bot_image)/images/8.png @elseif(strpos($botAff->bot_image, 'http') !== false){{ $botAff->bot_image }} @else{{ env('URL_SERVER_MEDIA').$botAff->bot_image }} @endif">
                {{ $botAff->view_name }}
            </option>
            @endforeach

        </select>
        <button type="button" class="btn btn-secondary btn-all" onclick="window.location.href = '{{ url('/v2/affiliate/aff-home') }}' ">一覧表示</button>
    </div>

    @if($bot && $bot->is_aff_view == 0)
{{--    <div class="title_common">@{{ bot_aff.view_name }}の紹介情報</div>--}}
    <div class="total_money_aff">
        <table class="table table-bordered" id="total_money_aff_table">
            <tr>
                <th class="text-center" v-if="rank_name != ''">ランク</th>
                <th class="text-center">現在の報酬額</th>
                <th class="text-center">紹介用URL</th>
            </tr>
            <tr>
                <td class="text-center" v-if="rank_name != ''">@{{ rank_name }}</td>
                <td class="text-center">@{{ moneyFormat(bot_aff.commission, '円') }}</td>
                <td>
                    <div style="display: flex;">
                        <input type="text" class="form-control" :value="'{{env('APP_URL')}}v2/line/optin/regist/'+aff_id+'/'+bot_aff.id+'/follow'" />
                        <div tyle="color:#51595C" class="btn-copy-url-add-friend" @click="copyToClipboard('{{env('APP_URL')}}v2/line/optin/regist/'+aff_id+'/'+bot_aff.id+'/follow', event)"><i class="fal fa-copy"></i></div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    @endif

    @if($botAffSetting || $leng)
        <div class="title_common" style="margin-top: 0px;" >案件情報</div>
    @else
        <div style="margin-top: 20px; text-align: center;font-weight: bold;color: #535657;" >現在、受付中の案件はありません</div>
    @endif

    <div class="list-bot-add-friend">
        @if($bot && $bot->is_aff_view == 0)
            @if($botAffSetting)
            <div class="bot-add-friend">
                <div class="info">
                    <div class="name_item">
                        {{ $bot->view_name }}
                    </div>
                    <div class="image_item">
                        @if($botAffSetting->banner_image)
                        <img src="{{ env('URL_SERVER_MEDIA').$botAffSetting->banner_image }}" />
                        @else
                        <img src="/images/asp-default-project.png" />
                        @endif
                    </div>
                    <div class="desc_item">
                        <table class="table-recommend-project">
                            <tr>
                                <td>報酬（1件あたり）</td>
                                <td>
                                    {{ number_format($botAffSetting->price) }}
                                    <span style="float: right">円</span>
                                </td>
                            </tr>
                            <tr style="height: 72px">
                                <td>受付期間</td>
                                <td>
                                    @if($botAffSetting->end_condition == 1)
                                        <div>{{ \Illuminate\Support\Carbon::createFromFormat('Y-m-d H:i:s', $botAffSetting->date_start . ' ' . $botAffSetting->time_start)->format('Y.m.d（' . getDayOfWeek($botAffSetting->date_start) . '） H:i') }}</div>
                                        <div style="margin: 4px 0px ">-</div>
                                        <div>{{ \Illuminate\Support\Carbon::createFromFormat('Y-m-d H:i:s', $botAffSetting->date_end . ' ' . $botAffSetting->time_end)->format('Y.m.d（' . getDayOfWeek($botAffSetting->date_end) . '） H:i') }}</div>
                                    @else
                                        無期限
                                    @endif
{{--                                    {{ $botAffSetting->end_condition == 1 ? ($botAffSetting->date_start .' ~ '. $botAffSetting->date_end) : '無期限' }}</td>--}}
                            </tr>
                            @if($botAffSetting->end_condition == 2)
                                <tr>
                                    <td>終了までの残り件数</td>
                                    <td>
                                        <span style="float: left">残り</span>
                                        {{ number_format($botAffSetting->end_after_number_times) }}
                                        <span style="float: right;">件</span>
                                    </td>
                                </tr>
                            @elseif($botAffSetting->end_condition == 3)
                                <tr>
                                    <td>終了までの残り報酬額</td>
                                    <td>
                                        <span style="float: left">残り </span>
                                        {{ number_format($botAffSetting->end_after_reaching_yen) }}
                                        <span style="float: right">円</span>
                                    </td>
                                </tr>
                            @else
                                <tr>
                                    <td>終了までの残り件数</td>
                                    <td>なし</td>
                                </tr>
                            @endif
                        </table>
{{--                        <div class="setting_item">--}}
{{--                            <div>報酬（1件あたり）</div>--}}
{{--                            <div>¥ {{ number_format($botAffSetting->price) }}</div>--}}
{{--                        </div>--}}
{{--                        <div class="setting_item">--}}
{{--                            <div>開催期間</div>--}}
{{--                            <div>{{ $botAffSetting->end_condition == 1 ? ($botAffSetting->date_start .' ~ '. $botAffSetting->date_end) : '無期限' }}</div>--}}
{{--                        </div>--}}
{{--                        <div class="setting_item">--}}
{{--                            @if($botAffSetting->end_condition == 2)--}}
{{--                            <div>終了までの残り件数</div>--}}
{{--                            <div>残り {{ $botAffSetting->end_after_number_times }} 件</div>--}}
{{--                            @elseif($botAffSetting->end_condition == 3)--}}
{{--                            <div>終了までの残り報酬額</div>--}}
{{--                            <div>残り {{ $botAffSetting->end_after_reaching_yen }} 円</div>--}}
{{--                            @else--}}
{{--                            <div>終了までの残り件数</div>--}}
{{--                            なし--}}
{{--                            @endif--}}
{{--                        </div>--}}
                        <div class="setting_item">
                            <a class="btn btn-success btn-detail-bot-add-friend" href="{{ url ('/v2/affiliate/detail-item').'/'.$botId }}">詳細を見る <i class="fas fa-chevron-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        @endif
        <div class="bot-add-friend" v-for="item in items">
            <div class="info">
                <div class="name_item">
                    @{{ item.condition_name }}
                </div>
                <div class="image_item">
                    <img v-if="item.banner_image" :src="'{{env('URL_SERVER_MEDIA')}}'+item.banner_image"/>
                    <img v-else src="/images/asp-default-project.png" />
                </div>
                <div class="desc_item">

                    <table class="table-recommend-project">
                        <tr>
                            <td>報酬（1件あたり）</td>
                            <td>
                                @{{ formatNumber(item.price) }}
                                <span style="float: right">円</span>
{{--                                @{{ moneyFormat(item.price, '¥', false) }}--}}
                            </td>
                        </tr>
                        <tr style="height: 72px">
                            <td>開催期間</td>
                            <td>
                                <template v-if="item.end_condition == 1">
                                    <div>@{{ formatDatetime2(item.date_start + ' ' + item.time_start ) }}</div>
                                    <div>-</div>
                                    <div>@{{ formatDatetime2(item.date_end + ' ' + item.time_end ) }}</div>
                                </template>
                                <template v-else>無期限</template>
{{--                                @{{ item.end_condition == 1 ? (item.date_start + ' ~ ' + item.date_end) : '無期限' }}--}}
                            </td>
                        </tr>
                        <tr>
                            <td v-if="item.end_condition == 3">終了までの残り報酬額</td>
                            <td v-else>終了までの残り件数</td>
                            <td v-if="item.end_condition == 2">
                                <span style="float: left">残り</span>
                                @{{ formatNumber(item.end_after_number_times) }}
                                <span style="float: right">件</span>
                            </td>
                            <td v-else-if="item.end_condition == 3" >
                                <span style="float: left">残り</span>
                                @{{ formatNumber(item.end_after_reaching_yen) }}
                                <span style="float: right">円</span>
{{--                                @{{ moneyFormat(item.end_after_reaching_yen, '円') }}--}}
                            </td>
                            <td v-else>なし</td>
                        </tr>
                    </table>

{{--                    <div class="setting_item">--}}
{{--                        <div>報酬（1件あたり）</div>--}}
{{--                        <div>@{{ moneyFormat(item.price, '¥', false) }}</div>--}}
{{--                    </div>--}}
{{--                    <div class="setting_item">--}}
{{--                        <div>開催期間</div>--}}
{{--                        <div>@{{ item.end_condition == 1 ? (item.date_start + ' ~ ' + item.date_end) : '無期限' }}</div>--}}
{{--                    </div>--}}
{{--                    <div class="setting_item" >--}}
{{--                        <div v-if="item.end_condition == 3">終了までの残り報酬額</div>--}}
{{--                        <div v-else>終了までの残り件数</div>--}}
{{--                        <div v-if="item.end_condition == 2">残り @{{ item.end_after_number_times }} 件</div>--}}
{{--                        <div v-else-if="item.end_condition == 3">残り @{{ moneyFormat(item.end_after_reaching_yen, '円') }} </div>--}}
{{--                        <div v-else>なし</div>--}}
{{--                    </div>--}}
                    <div class="setting_item">
                        <a class="btn btn-success btn-detail-bot-add-friend" :href="'{{ url ('/v2/affiliate/detail-item') }}/'+bot_id+'/'+item.id">詳細を見る <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 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>
@endsection
@push('script')
<script src="/chat_files/clipboard.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://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@2.1.7/dist/loadingoverlay.min.js"></script>
<script>
    var bot_id = '{{ $botId }}';
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1-rc.1/js/select2.min.js"></script>
<script src="/js/affiliater/top_bot_detail_aff.js?v={{config('sns-line.version')}}"></script>
<script>
    function formatState (state) {
        if (!state.id) { return state.text; }
        var $state = $(
            '<span><img width="30px" style="vertical-align: middle;margin-right: 15px; border-radius: 50%;    border: 1px solid #E0E0E0;\n' +
            '    margin-bottom: 1px;" src="'+ $(state.element).attr('data-src') + '" class="img-flag" /> ' + state.text + '</span>'
        );
        return $state;
    };
    $('select').select2({
        minimumResultsForSearch: Infinity,
        templateResult: formatState,
        templateSelection: formatState
    });
    $('select').on('select2:select', function(e){
        var data = e.params.data;
        console.log(data);
        var botId = data.id;
        window.location.href = '/v2/affiliate/aff-bot/'+botId;
    });
</script>
@endpush