@extends('layout.affiliater.v2.main')
{{--@section('title', $botSettingAff ? $botSettingAff->condition_name : '')--}}
@section('title', 'ASP管理 紹介者（案件情報詳細）')
@push('css')
<style>
    #btn-open {
        border: 0;
    }

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

    .desc_item_add_friend {
        margin-top: 15px;
        border: 1px solid #F4F6F7;
        border-radius: 5px;
        padding: 18px;
        box-sizing: border-box;
    }

    .btn-copy-url-add-friend {
        color: #51595C;
        display: block;
        padding: 5px 8px;
        margin-left: 10px;
        border: 1px solid #E0E0E0;
        border-radius: 5px;
    }

    .btn-copy-url-add-friend:hover {
        background-color: #96ADB2;
        color: white !important;
    }

    #total_money_aff_table th {
        font-weight: bold;
        background-color: #F4F6F7;
    }

    #total_money_aff_table td {
        vertical-align: middle;
    }

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

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

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

    .bot-add-friend .info > div {
        color: #535657;
    }

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

    .btn-detail-bot-add-friend {
        width: 100%;
        height: 36px;
        border: 1px solid #07C655;
        color: #08BF5A;
        background-color: white;
        font-weight: bold;
        font-size: 12px;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding-right: 26px;
    }

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

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

    .description_detail_item_add_friend {
        background-color: #F8F8F8;
        padding: 12px 10px;
        margin-top: 20px;
    }

    .description_detail_item_add_friend .row-desc-item {
        display: flex;
        margin-bottom: 3px;
        background-color: white;
        padding: 13px 10px;
        font-size: 14px;
        font-weight: bold;
        color: #535657;
    }

    .description_detail_item_add_friend .row-desc-item:last-child {
        margin-bottom: 0;
    }

    .description_detail_item_add_friend .row-desc-item div:first-child {
        flex: 0 0 200px;
    }

    .description_detail_item_add_friend_new {
        width: 73%;
        margin-top: 20px;
    }
    .description_detail_item_add_friend_new table, .description_detail_item_add_friend_new td{
        border: 1px solid #F2F2F2;
    }

    .description_detail_item_add_friend_new td {
        font-weight: bold;
        font-size: 12px;
        padding: 10px 13px;
    }
    .description_detail_item_add_friend_new tr > td:first-child {
        background-color: #F8F8F8;
        width: 27%;
    }

    .preview_landing {
        position: absolute;
        display: block;
        background-color: #F2F2F2;
        color: #535657;
        border-radius: 5px;
        width: 90%;
        left: 50%;
        box-shadow: 0px 3px 3px #00000029;
        transform: translateX(-50%);
        top: 10px;
    }

    .preview_landing:hover {
        opacity: 1;
        text-decoration: none;
        color: #535657 !important;
    }

    .preview_landing .view {
        float: right;
        margin-top: 3px;
    }

    .btn-download-active {
        border: 1px solid #07C655;
        font-size: 11px;
        color: #08BF5A;
        background-color: white;
        width: 100%;
        font-weight: bold;
    }

    .btn-download-active:hover {
        color: #08BF5A;
    }

    .preview_landing:hover {
        opacity: 1;
        text-decoration: none;
        color: white;
    }

    .image_item {
        height: 337px;
    }

    .row_item_intro {
        display: flex;
        background-color: #F8F8F8;
        border-radius: 3px;
        overflow: hidden;
        padding: 15px 11px;
        box-sizing: border-box;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .row_item_intro .image_intro {
        flex: 0 0 14.73%;
        margin-right: 15px;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #E0E0E0;
        border-radius: 3px;
        background-color: white;
        aspect-ratio: 1 / 1;
    }

    .image-download {
        flex: 0 0 14.73%;
        margin-right: 15px;
    }

    .row_item_intro .image_intro:first-child:before{
        display: block;
        content: "";
        padding-top: 100%;
    }

    .row_item_intro .image_intro:first-child img{
        position: absolute;
        top: 0;
        left: 0;
        object-fit: contain;
    }

    .row_item_intro .desc_intro {
        width: calc((100% - 14.73%) - 15px);
    }

    .row_item_intro .desc_intro textarea {
        height: 100%;
        font-weight: bold;
        color: #535657;
        font-size: 12px;
    }

    .list-button-share {
        display: flex;
        align-items: center;
        margin-top: 10px;
        justify-content: space-between;
    }

    div[id^="fb-share-button"] {
        background: #1874EC;
        border-radius: 3px;
        font-weight: 600;
        padding: 3px 8px;
        display: inline-block;
        position: static;
        margin-left: 15px;
        height: 30px;
    }

    div[id^="fb-share-button"]:hover {
        cursor: pointer;
        background: #213A6F
    }

    div[id^="fb-share-button"] svg {
        width: 18px;
        fill: white;
        vertical-align: middle;
        border-radius: 2px
    }

    div[id^="fb-share-button"] span {
        vertical-align: middle;
        color: white;
        font-size: 14px;
        padding: 0 3px
    }

    .upload_file_banner_intro{
        margin-top: 10px;
    }

    .twitter-share-button{
        margin-right: 15px;
        margin-left: 20px;
        background-color: #00A7E8;
        border: 1px solid #00A7E8;
        padding: 4px 12px;
        font-weight: bold;
    }

    .upload_file_banner_intro .btn-success, .upload_file_banner_intro .btn-secondary{
        width: 100%;
    }
    .upload_file_banner_intro .btn-success:hover, .upload_file_banner_intro .btn-secondary:hover{
        text-decoration: none;
    }

    .upload_file_banner_intro .btn-secondary{
        background-color: #E0E0E0;
        color: white;
        cursor: not-allowed;
    }
    .upload_file_banner_intro .btn-success, .btn-item-copy-text{
        background-color: #08BF5A;
        border-color: #08BF5A;
        font-weight: bold;
        font-size: 12px;
        color: white;
    }

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

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

    .url_intro {
        margin-top: 20px;
        background-color: #F8F8F8;
        display: flex;
        align-items: center;
        border-radius: 3px;
        padding: 15px;
    }

    .url_intro .btn-copy {
        background-color: #E0E0E0;
        width: 25px;
        height: 25px;
        cursor: pointer;
        text-align: center;
        line-height: 31px;
        border-radius: 2px;
        justify-content: center;
        align-items: center;
        display: flex;
        margin-left: 10px;
    }

    .url_intro .btn-copy:hover {
        background-color: #E0E0E0;
    }

    .btn-copy-c {
        border: 1px solid #07C655;
        color: #08BF5A;
        background-color: white;
        font-weight: bold;
        font-size: 11px;
        width: 130px;
        justify-content: space-between;
        border-radius: 2px;
        display: flex;
        align-items: center;
        position: relative;
    }

    .not-have-item {
        border-radius: 3px;
        padding: 15px;
        background-color: #F8F8F8;
        display: flex;
        align-items: center;
        margin-top: 15px;
        font-weight: bold;
        font-size: 12px;
        margin-bottom: 20px;
        justify-content: center;
    }

    .list-button-share .line-share i {
        left: 0;
        background: url(https://www.line-website.com/social-plugins/img/common/line_v3@3x.png) 0 center no-repeat;
        vertical-align: top;
        position: relative;
        display: inline-block;
        width: 21px;
        height: 20px;
        margin-right: 4px;
        background-size: 21px auto;
    }

    .list-button-share .line-share {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 84px;
        height: 30px;
        background-color: #06c755;
        border: none;
        border-radius: 5px;
    }

    .list-button-share a {
        text-decoration: none;
    }

    .list-button-share .line-share:hover {
        background-color: #05b34d;
    }
</style>
@endpush
@section('content')
<div class="container" id="detail_product">
    @if($botSettingAff->header_image)
        <div class="image_banner" style="@if(!$botSettingAff->intro_content) margin-bottom: 40px @endif" >
            <img src="{{ env('URL_SERVER_MEDIA').$botSettingAff->header_image }}" width="100%"/>
        </div>
    @endif
    @if($botSettingAff->intro_content)
    <div class="description_item">{!! $botSettingAff->intro_content !!}</div>
    @endif
    <div class="title_common">案件情報</div>
    <div class="description_detail_item_add_friend_new">
        <table>
            <tr>
                <td>LINE公式アカウント名</td>
                <td>{{ $bot->view_name }}</td>
            </tr>
            <tr>
                <td>案件名</td>
                <td>{{ $botSettingAff->condition_name }}</td>
            </tr>
            <tr>
                <td>受付状況</td>
                <td>
                    @if($botSettingAff->status_project == 1)
                        @if($botSettingAff->end_condition == 0)
                            受付中
                        @elseif($botSettingAff->end_condition == 1 && strtotime($botSettingAff->date_end . ' ' . $botSettingAff->time_end) < time())
                            受付中
                        @elseif($botSettingAff->end_condition == 2 && $botSettingAff->end_after_number_times - $botSettingAff->number_friend_approved > 0)
                            受付中
                        @elseif($botSettingAff->end_condition == 3 && $botSettingAff->end_after_reaching_yen - $botSettingAff->commission > 0)
                            受付中
                        @else
                            停止中
                        @endif
                    @else
                        停止中
                    @endif
                </td>
            </tr>
            <tr>
                <td>報酬（1件あたり）</td>
                <td>{{ number_format($botSettingAff->price) }} 円</td>
            </tr>
            <tr>
                <td>開催期間</td>
                <td>
                    @if($botSettingAff->end_condition == 1)
                        <div>{{ \Carbon\Carbon::parse($botSettingAff->date_start)->format('Y.m.d') }}~{{ \Carbon\Carbon::parse($botSettingAff->date_end)->format('Y.m.d') }}</div>
                    @else
                        <div>無期限</div>
                    @endif
                </td>
            </tr>
            @if($botSettingAff->end_condition == 1 || $botSettingAff->end_condition == 0)
                <tr>
                    <td>終了までの残り件数</td>
                    <td>なし</td>
                </tr>
            @elseif($botSettingAff->end_condition == 2)
                <tr>
                    <td>終了までの残り件数</td>
                    <td>残り {{ $botSettingAff->end_after_number_times }} 件</td>
                </tr>
            @else
                <tr>
                    <td>終了までの残り報酬額</td>
                    <td>残り {{ number_format($botSettingAff->end_after_reaching_yen) }} 円</td>
                </tr>
            @endif
        </table>
    </div>
    <div class="url_intro">
        <span style="padding-right: 40px; font-size: 13px; font-weight: bold">紹介用URL</span>
        <div class="form-group" style="width: 46%; display: flex; align-items: center; margin-bottom: 0px">
            <input type="text" value="{{ $urlSetting }}" class="form-control input-border" style="font-weight: bold">
            <div class="btn-copy" @click="copyToClipboard('{{ $urlSetting }}')">
                <svg xmlns="http://www.w3.org/2000/svg" width="12.955" height="15" viewBox="0 0 12.955 15">
                    <path id="Icon_material-content-copy" data-name="Icon material-content-copy" d="M12.545,1.5H4.364A1.368,1.368,0,0,0,3,2.864v9.545H4.364V2.864h8.182Zm2.045,2.727h-7.5A1.368,1.368,0,0,0,5.727,5.591v9.545A1.368,1.368,0,0,0,7.091,16.5h7.5a1.368,1.368,0,0,0,1.364-1.364V5.591A1.368,1.368,0,0,0,14.591,4.227Zm0,10.909h-7.5V5.591h7.5Z" transform="translate(-3 -1.5)" fill="#fff"></path>
                </svg>
            </div>
        </div>
    </div>
{{--    <div class="description_detail_item_add_friend">--}}
{{--        <div class="row-desc-item">--}}
{{--            <div>LINE公式アカウント名</div>--}}
{{--            <div>{{ $bot->view_name }}</div>--}}
{{--        </div>--}}
{{--        <div class="row-desc-item">--}}
{{--            <div>案件名</div>--}}
{{--            <div>{{ $botSettingAff->condition_name }}</div>--}}
{{--        </div>--}}
{{--        <div class="row-desc-item">--}}
{{--            <div>報酬（1件あたり）</div>--}}
{{--            <div>¥ {{ number_format($botSettingAff->price) }}</div>--}}
{{--        </div>--}}
{{--        <div class="row-desc-item">--}}
{{--            <div>開催期間</div>--}}
{{--            @if($botSettingAff->end_condition == 1)--}}
{{--                <div>{{ \Carbon\Carbon::parse($botSettingAff->date_start)->format('Y.m.d') }}~{{ \Carbon\Carbon::parse($botSettingAff->date_end)->format('Y.m.d') }}</div>--}}
{{--            @else--}}
{{--                <div>無期限</div>--}}
{{--            @endif--}}
{{--        </div>--}}
{{--        <div class="row-desc-item">--}}
{{--            @if($botSettingAff->end_condition == 1 || $botSettingAff->end_condition == 0)--}}
{{--            <div>終了までの残り件数</div>--}}
{{--            <div>なし</div>--}}
{{--            @elseif($botSettingAff->end_condition == 2)--}}
{{--            <div>終了までの残り件数</div>--}}
{{--            <div>残り {{ $botSettingAff->end_after_number_times }} 件</div>--}}
{{--            @else--}}
{{--            <div>終了までの残り報酬額</div>--}}
{{--            <div>残り {{ number_format($botSettingAff->end_after_reaching_yen) }} 円</div>--}}
{{--            @endif--}}
{{--        </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 class="title_common" style="margin-top: 30px;">紹介用LP</div>--}}
        <div class="title_common" style="margin-top: 30px;">紹介素材</div>
    <div class="list-bot-add-friend" v-if="landings.length > 0" style="margin-bottom: 25px">
        <div class="bot-add-friend" v-for="landing in landings">
            <div class="info">
                <a :href="genLink(landing.url, landing.id, aff_id, landing.bot_setting_aff_id)" target="_blank" class="btn preview_landing">
                    プレビュー <i class="fas fa-eye view"  ></i>
                </a>
                <div class="image_item">
                    <iframe :src="landing.url" width="100%" height="100%" scrolling="no"></iframe>
                </div>
                <div class="desc_item">
                    <div class="setting_item">
                        <a class="btn btn-success btn-detail-bot-add-friend" @click="copyToClipboard(genLink(landing.url, landing.id, aff_id, landing.bot_setting_aff_id))" href="javascript:void(0)">紹介用URLをコピー <i class="fal fa-copy"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

{{--    <div class="title_common" style="margin-top: 20px;margin-bottom: 20px;">紹介素材</div>--}}
    @foreach($listBanaAddFriend as $indexBana => $bana)
    <div class="row_item_intro">
        <div class="image-download" style="margin-bottom: 7px">
            <div style="font-size: 12px; font-weight: bold">バナー画像</div>
        </div>
        <div class="desc_intro" style="margin-bottom: 7px; font-size: 12px; font-weight: bold">
            紹介テキスト
        </div>
        <div class="image_intro">
            <img src="{{ $bana->image ? env('URL_SERVER_MEDIA').$bana->image : '/images/img_asp_default_bana.png' }}">
        </div>
        <div class="desc_intro">
            <textarea class="form-control">{{ $bana->content }}</textarea>
        </div>
        <div class="image-download">
            <div class="upload_file_banner_intro">
                @if($bana->image)
                    <a href="{{ url($bana->image) }}" class="btn btn-download-active" download>画像ダウンロード</a>
                @else
                <a class="btn btn-secondary" style="font-size: 11px">画像ダウンロード</a>
                @endif
            </div>
        </div>
        <div class="desc_intro">
            <div class="list-button-share">
                <div style="display: flex;align-items: start;">
                    <div style="font-weight: bold;margin-top: 6px; color:#535657 ">SNS投稿</div>
                    <a class="twitter-share-button btn btn-success" href="https://twitter.com/intent/tweet?url={{ $urlSetting }}">
                        <i class="fab fa-twitter"></i> Twitter
                    </a>
                    <a href="https://social-plugins.line.me/lineit/share?url={{ urlencode($urlSetting) }}"
                       onclick="window.open(this.href, 'line-share', 'width=520,height=500'); return false;"
                    >
                        <button class="line-share">
                            <i></i> <span style="font-size: 16px; color: #FFFFFF; font-weight: 600">Share</span>
                        </button>
                    </a>
                    <div data-href="{{ $urlSetting }}" id="fb-share-button-{{$indexBana}}" onclick="shareFacebook('fb-share-button-{{$indexBana}}')">
                        <svg viewBox="0 0 12 12" preserveAspectRatio="xMidYMid meet">
                            <path class="svg-icon-path" d="M9.1,0.1V2H8C7.6,2,7.3,2.1,7.1,2.3C7,2.4,6.9,2.7,6.9,3v1.4H9L8.8,6.5H6.9V12H4.7V6.5H2.9V4.4h1.8V2.8 c0-0.9,0.3-1.6,0.7-2.1C6,0.2,6.6,0,7.5,0C8.2,0,8.7,0,9.1,0.1z"></path>
                        </svg>
                        <span>facebook</span>
                    </div>
                </div>
                <div>
{{--                    <button type="button" @click="copyToClipboard(`{{$bana->content}}`)" class="btn btn-copy-c">テキストコピー</button>--}}
                    <button type="button" class="btn btn-copy-c" @click="copyToClipboard(`{{$bana->content}}`)">
                        テキストコピー
                        <i class="fal fa-copy" style="color: rgb(8, 191, 90); font-size: 13px;"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endforeach
     <div class="not-have-item" v-if="landings.length == 0 && listBanaAddFriend.length == 0 ">
         紹介素材が登録されていません。
     </div>
        <button class="btn btn-sns-line btn-sns-line-lg btn-sns-line-secondary"
                onclick="window.location.href = '{{ url('/v2/affiliate/aff-home') }}' "
                style="width: 107px;  font-weight: bold;  margin-top: 15px; background: #E0E0E0 ; color: #8F9293 !important; box-shadow: 0px 1px 0px #00000033;">
            戻る
        </button>
</div>
<div id="fb-root"></div>
@endsection
@push('script')
<script>
    var bot_id = '{{ $botId }}';
    var aff_code = '{{ $affCode }}';
    var id = '{{ $id }}';
    var aff_id = '{{ $affId }}';
    var listBanaAddFriend = @json($listBanaAddFriend)
</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 src="/js/affiliater/detail_product.js?v={{config('sns-line.version')}}"></script>
<script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v17.0&appId=143667703308958&autoLogAppEvents=1" nonce="qGGW2owE"></script>
<script>
    function openWindow(url) {
        newwindow = window.open(url, 'name', 'height=510,width=503, location=0');
        if (window.focus) {
            newwindow.focus()
        }
        return false;
    }

    function shareFacebook(elementId){
        var url = $('#'+elementId).attr('data-href');
        window.open('https://www.facebook.com/sharer/sharer.php?u=' + url,
            'facebook-share-dialog',
            'width=800,height=600'
        );
    }
</script>
@endpush