@extends('layout.affiliater.v2.main')
@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;*/
    /*}*/

    .total_money_aff {
        margin-top: 20px;
        /*border: 1px solid #F4F6F7;*/
        border-radius: 5px;
        /*padding: 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;
        /*color: white !important;*/
    }

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

    #total_money_aff_table td {
        vertical-align: middle;
        color: #51595C;
        font-weight: bold;
        font-size: 14px;
    }
    #total_money_aff_table input {
        color: #51595C;
    }
    #total_money_aff_table a {
        color: #5799DB;
        text-decoration: underline;
    }

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

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

    .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{
        padding-top: 100%;
        content: "";
        display: block;
        padding-top: 100%;
    }

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

    .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="title_common">あなたの紹介情報</div>--}}
    <div class="title_common">紹介情報</div>
    <div class="total_money_aff">
        <table class="table table-bordered" id="total_money_aff_table">
            <tr>
                <th class="text-center">タップで案件詳細を見る</th>
                <th class="text-center" v-if="rank_name != ''">ランク</th>
                <th class="text-center">現在の報酬額</th>
                <th class="text-center">紹介案件</th>
            </tr>
            <tr v-for="(item, index) in items">
                <td>
                    <img v-if="!item.bot_image" onerror="imgBotError(e)" src="/images/8.png" width="35px" style="object-fit: contain;border-radius: 50%;vertical-align: middle;"/>
                    <img v-else-if="item.bot_image && (item.bot_image.includes('profile.line-scdn.net') !== false || item.bot_image.includes('step.lme.jp') !== false || item.bot_image.includes('http') !== false)" onerror="imgBotError(e)" :src="item.bot_image" width="35px" style="object-fit: contain;border-radius: 50%;vertical-align: middle;"/>
                    <img v-else onerror="imgBotError(e)" :src="'