@include('admin.objects.projects.modal-message')

<span>広告関連</span>
<div class="card" data-tab-content id="tab-1">
    @include('admin.objects.components.regist-tab-clone', ['active' => 'HP'])
    <div>
        <div>
            @include('admin.objects.components.regist-band-clone', ['title' => '共通/自社HP'])
        </div>
        <div class="d-flex">
            <div class="th">広告掲載指示</div>
            <div class="td">
                <ul class="d-flex p-regist__table-list-custom" style="padding-left: 0px">
                    <li>
                        @include('admin.objects.components.selectbox', ['name' => 'own_company', 'options' => $own_instructions, 'selected' => $article->own_company??''])
                    </li>
                    @php
                        $status = $article->status ?? 0;
                        $closeArticle = [4,5];
                        $isArticleClose = in_array($status, $closeArticle);
                        if ($isArticleClose) {
                            $ad_instructions = [
                                [
                                    "code" => 1,
                                    "name" => "未"
                                ],
                                [
                                    "code" => 2,
                                    "name" => "入稿"
                                ]
                            ];
                        }
                    @endphp
                    @if (false)
                        <li>
                            <p>SUUMO</p>
                            @include('admin.objects.components.selectbox', ['name' => 'suumo', 'options' => $ad_instructions, 'selected' => $article->suumo??''])
                        </li>
                        <li>
                            <p>HOMES</p>
                            @include('admin.objects.components.selectbox', ['name' => 'homes', 'options' => $ad_instructions, 'selected' => $article->homes??''])
                        </li>
                        <li>
                            <p>athome</p>
                            @include('admin.objects.components.selectbox', ['name' => 'athome', 'options' => $ad_instructions, 'selected' => $article->athome??''])
                        </li>
                    @endif
                    <input type="hidden" name="suumo" value="1">
                    <input type="hidden" name="athome" value="1">
                    <input type="hidden" name="homes" value="1">
                </ul>
            </div>
        </div>
    </div>
    <div class="d-flex">
        <div class="th">営業担当者(HP記載用)</div>
        <div class="td">
            @include('admin.objects.components.selectbox', ['name' => 'hp_charge', 'options' => $hp_charge, 'selected' => $article->hp_charge??''])
        </div>
    </div>

    @if (auth()->user()->isOwnerOfSaiKyoto())
        <div class="d-flex">
            <div class="th">会員物件</div>
            <div class="td">
                @include('admin.objects.components.selectbox', ['name' => 'members', 'options' => $members, 'selected' => $article->members??''])
            </div>
        </div>
    @endif
    <div class="d-flex">
        <div class="th">キャッチコピー</div>
        <div class="td">
            <div class="d-flex">
                <div class="col-9" style="padding:0">
                    @include('admin.objects.components.textarea', ['name' => 'catchcopy', 'class' => 'ta50 w-100', 'value' => $article->catchcopy??''])
                </div>
                <div class="btn-form">
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #505050" type="button">自社HP</button>
                        <span class="t-10" style="color: #505050" >キャッチコピー</span></div>
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #72bf44" type="button">suumo（84）</button>
                        <span class="t-10" style="color: #72bf44">メインキャッチ</span></div>
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #fab81e" type="button">HOME'S（50）</button>
                        <span class="t-10" style="color: #fab81e">キャッチコピー</span>
                    </div>
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #cc8be9" type="button">物件シート（80）</button>
                        <span class="t-10" style="color: #cc8be9">キャッチコピー</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="d-flex">
        <div class="th">ポイント</div>
        <div class="td">
            <div class="d-flex">
                <div class="col-9" style="padding:0">
                    @include('admin.objects.components.textarea', ['name' => 'point', 'placeholder' => 'ポイントを入力してください
            例）■井の頭公園の鮮やかな桜並木と調和する全３２区画　■四季折々の季節を感じるロケーション', 'class' => 'ta50 w-100', 'value' => $article->point??''])
                </div>
                <div class="btn-form">
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #505050" type="button">自社HP</button>
                        <span class="t-10" style="color: #505050">ポイント</span></div>
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #72bf44" type="button">suumo（300）</button>
                        <span class="t-10" style="color: #72bf44">サブキャッチ</span></div>
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #fab81e" type="button">HOME'S（200）</button>
                        <span class="t-10" style="color: #e17814">備考</span>
                    </div>
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #bd0a37" type="button">at home（100）</button>
                        <span class="t-10" style="color: #bd0a37">おすすめコメント</span></div>
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #cc8be9" type="button">物件シート（200）</button>
                        <span class="t-10" style="color: #cc8be9">ポイント</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="d-flex">
        <div class="th">営業担当者コメント</div>
        <div class="td">
            <div class="d-flex">
                <div class="col-9" style="padding:0">
                    @include('admin.objects.components.textarea',  ['name' => 'comment', 'placeholder' => '営業担当者コメントを入力してください', 'class' => 'ta50 w-100', 'value' => $article->comment??''])
                </div>
                <div class="btn-form">
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #505050" type="button">自社HP</button>
                        <span class="t-10" style="color: #505050">営業担当者コメント</span></div>
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #bd0a37" type="button">at home（500）</button>
                        <span class="t-10" style="color: #bd0a37">エンド向けアピール</span></div>
                </div>
            </div>
        </div>
    </div>
    <div style="color: #150041">
        <div class="p-regist">
            <div class="regist__div-custom d-flex justify-content-center">
                <div class="">
                    <a class="custom-btn-green un-required" href="javascript:void(0)">各媒体の入力タブに反映</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card hidden" data-tab-content id="tab-2">
    @include('admin.objects.components.regist-tab-clone', ['active' => 'suumo'])
    <div>
        <div>
            @include('admin.objects.components.regist-band-clone', ['title' => 'suumo','color'=>'#72bf44','button'=>'none'])
        </div>
    </div>
    <div class="d-flex">
        <div class="th">メインキャッチ</div>
        <div class="td">
            <div class="d-flex">
                <div class="col-9" style="padding:0">
                    @include('admin.objects.components.textarea-custom', ['name' => 'suumo_copy', 'class' => 'ta50 w-100', 'value' => $article->suumo_copy??'', 'count' => '84'])
                </div>
                <div class="btn-form">
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #505050" type="button">自社HP</button>
                        <span class="t-10" style="color: #505050">キャッチコピー</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="d-flex">
        <div class="th">サブキャッチ</div>
        <div class="td">
            <div class="d-flex">
                <div class="col-9" style="padding:0">
                    @include('admin.objects.components.textarea-custom', ['name' => 'suumo_comment', 'placeholder' => 'ポイントを入力してください
            例）■井の頭公園の鮮やかな桜並木と調和する全３２区画　■四季折々の季節を感じるロケーション', 'class' => 'ta50 w-100', 'value' => $article->suumo_comment??'', 'count' => '300'])
                </div>
                <div class="btn-form">
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #505050" type="button">自社HP</button>
                        <span class="t-10" style="color: #505050">ポイント</span></div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="p-regist">
            <div class="regist__div-custom d-flex justify-content-center"
                 style="background-color: #72bf44;height: 55px">

            </div>
        </div>
    </div>
</div>
<div class="card hidden" data-tab-content id="tab-3">
    @include('admin.objects.components.regist-tab-clone', ['active' => 'home'])
    <div>
        <div>
            <div>
                @include('admin.objects.components.regist-band-clone', ['title' => 'home','color'=>'#fab81e','button'=>'none'])
            </div>
        </div>
    </div>
    <div class="d-flex">
        <div class="th">キャッチコピー</div>
        <div class="td">
            <div class="d-flex">
                <div class="col-9" style="padding:0">
                    @include('admin.objects.components.textarea-custom', ['name' => 'homes_copy',  'class' => 'ta50 w-100', 'value' => $article->homes_copy??'', 'count' => '50'])
                </div>
                <div class="btn-form">
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #505050" type="button">自社HP</button>
                        <span class="t-10" style="color: #505050">キャッチコピー</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="d-flex">
        <div class="th">備考</div>
        <div class="td">
            <div class="d-flex">
                <div class="col-9" style="padding:0">
                    @include('admin.objects.components.textarea-custom', ['name' => 'homes_comment', 'placeholder' => 'ポイントを入力してください
            例）■井の頭公園の鮮やかな桜並木と調和する全３２区画　■四季折々の季節を感じるロケーション', 'class' => 'ta50 w-100', 'value' => $article->homes_comment??'', 'count' => '200'])
                </div>
                <div class="btn-form">
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #505050" type="button">自社HP</button>
                        <span class="t-10" style="color: #505050">ポイント</span></div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="p-regist">
            <div class="regist__div-custom d-flex justify-content-center"
                 style="background-color: #fab81e;height: 55px">

            </div>
        </div>
    </div>
</div>
<div class="card hidden" data-tab-content id="tab-4">
    @include('admin.objects.components.regist-tab-clone', ['active' => 'athome'])
    <div>
        <div>
            @include('admin.objects.components.regist-band-clone', ['title' => 'athome','color'=>'#bd0a37','button'=>'none'])
        </div>
    </div>
    <div class="d-flex">
        <div class="th">おすすめコメント</div>
        <div class="td">
            <div class="d-flex">
                <div class="col-9" style="padding:0">
                    @include('admin.objects.components.textarea-custom', ['name' => 'athome_comment', 'placeholder' => 'ポイントを入力してください
            例）■井の頭公園の鮮やかな桜並木と調和する全３２区画　■四季折々の季節を感じるロケーション', 'class' => 'ta50 w-100', 'value' => $article->athome_comment??'', 'count' => '100'])
                </div>
                <div class="btn-form">
                    <div class="btn-row">
                        <button class="custom-btn" style="background-color: #505050" type="button">自社HP</button>
                        <span class="t-10" style="color: #505050">ポイント</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="d-flex">
        <div class="th">エンド向けアピール</div>
        <div class="td">
            <div class="d-flex">
                <div class="col-9" style="padding:0">
                    @include('admin.objects.components.textarea-custom', ['name' => 'athome_appeal', 'placeholder' => '営業担当者コメントを入力してください', 'class' => 'ta50 w-100', 'value' => $article->athome_appeal??'', 'count' => '500'])
                </div>
                <div class="btn-form">
                    <div class="btn-row">
                        <button class="custom-btn" type="button" style="background-color: #505050">自社HP</button>
                        <span class="t-10" style="color: #505050">営業担当者コメント</span></div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="p-regist">
            <div class="regist__div-custom d-flex justify-content-center"
                 style="background-color: #bd0a37;height: 55px">

            </div>
        </div>
    </div>
</div>
<div class="card hidden" data-tab-content id="tab-5">
    @include('admin.objects.components.regist-tab-clone', ['active' => 'property'])
    <div>
        <div>
            @include('admin.objects.components.regist-band-clone', ['title' => '物件シート','color'=>'#cc8be9','button'=>'none'])
        </div>
    </div>
    <div class="d-flex">
        <div class="th w-10">デフォルト</div>
        <div class="w-90">
            <div class="d-flex">
                <div class="th">キャッチコピー</div>
                <div class="td">
                    <div class="d-flex">
                        <div class="col-9" style="padding:0">
                        @include('admin.objects.components.textarea-custom', ['name' => 'sheet_copy', 'placeholder' => '80文字以内で入力してください', 'class' => 'ta50 w-100', 'value' => $article->sheet_copy??'', 'count' => '80'])
                    </div>
                    <div class="btn-form">
                        <div class="btn-row">
                            <button class="custom-btn" style="background-color: #505050" type="button">自社HP</button>
                            <span class="t-10" style="color: #505050">キャッチコピー</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex">
                <div class="th">ポイント</div>
                <div class="td">
                    <div class="d-flex">
                        <div class="col-9" style="padding:0">
                        @include('admin.objects.components.textarea-custom', ['name' => 'sheet_point', 'class' => 'ta50 w-100', 'count' => 200, 'value' => $article->sheet_point ?? ""])
                    </div>
                    <div class="btn-form">
                        <div class="btn-row">
                            <button class="custom-btn" style="background-color: #505050" type="button">自社HP</button>
                            <span class="t-10" style="color: #505050">ポイント</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex">
                <div class="th">備考</div>
                <div class="td">
                    <div class="d-flex">
                         <div class="col-9" style="padding:0">
                         @include('admin.objects.components.textarea-custom', ['name' => 'memo_business', 'class' => 'ta50 w-100', 'count' => 100, 'value' => $article->memo_business ?? ""])
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- w-90 -->
    </div><!-- d-flex -->


    <div class="d-flex">
        <div class="th w-10">掲示用</div>
        <div class="w-90">
            <div class="d-flex">
                <div class="th">キャッチコピー</div>
                <div class="td">
                    <div class="d-flex">
                        <div class="col-9" style="padding:0">
                        @include('admin.objects.components.textarea-custom', ['name' => 'sheet_copy_2', 'placeholder' => '20文字以内で入力してください', 'class' => 'ta50 w-100', 'value' => $article->sheet_copy_2??'', 'count' => '25'])
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex">
                <div class="th">セールスコピー4つ</div>
                <div class="td">
                    <div class="d-flex">
                        <div class="col-9" style="padding:0">
                        @include('admin.objects.components.textarea-custom', ['name' => 'point_recommend', 'placeholder' => '20文字以上入力はできる', 'class' => 'ta20 w-100', 'count' => '20', 'value' => $article->point_recommend ?? ""])
                        </div>
                    </div>
                    <div class="d-flex">
                        <div class="col-9" style="padding:0">
                        @include('admin.objects.components.textarea-custom', ['name' => 'point_recommend2', 'placeholder' => '20文字以内で入力してください', 'class' => 'ta20 w-100', 'value' => $article->point_recommend2??'', 'count' => '20'])
                        </div>
                    </div>
                    <div class="d-flex">
                        <div class="col-9" style="padding:0">
                        @include('admin.objects.components.textarea-custom', ['name' => 'point_recommend3', 'placeholder' => '20文字以内で入力してください', 'class' => 'ta20 w-100', 'value' => $article->point_recommend3??'', 'count' => '20'])
                        </div>
                    </div>
                    <div class="d-flex">
                        <div class="col-9" style="padding:0">
                        @include('admin.objects.components.textarea-custom', ['name' => 'point_recommend4', 'placeholder' => '20文字以内で入力してください', 'class' => 'ta20 w-100', 'value' => $article->point_recommend4??'', 'count' => '20'])
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex">
                <div class="th">補足コメント・備考</div>
                <div class="td">
                    <div class="d-flex">
                        <div class="col-9" style="padding:0">
                        @include('admin.objects.components.textarea-custom', ['name' => 'memo_business_2', 'class' => 'ta50 w-100', 'count' => 70, 'value' => $article->memo_business_2 ?? ""])
                    </div>
                </div>
            </div>
        </div><!-- w-90 -->
    </div><!-- d-flex -->

    </div>
    <div>
        <div class="p-regist">
            <div class="regist__div-custom d-flex justify-content-center"
                 style="background-color: #cc8be9; height: 55px">

            </div>
        </div>
    </div>
</div>


<style>
    .btn-row {
        padding-bottom: 5px;
    }

    .btn-form {
        font-size: 12px;
        padding-left: 10px;
    }

    .custom-btn {
        color: white;
        width: 120px;
        font-weight: 400;
        border: none;
        margin-right: 5px;
        box-sizing: border-box;
    }
    .custom-btn:focus{
        outline: none;
    }
    .custom-btn:hover{
        opacity: 1;
    }

    .t-10 {
        font-size: 10px;
        border-right: none;
    }

    .hidden {
        display: none !important;
    }

    [data-name],
    [data-tab] {
        cursor: pointer;
    }

    .th {
        width: 250px;
        background-color: #f8f9fa;
        vertical-align: top;
        text-align: inherit;
    }

    .th, .td {
        padding: 10px 10px 10px 10px;
        border: 1px solid #4f4f4f;
    }

    .td {
        width: calc(100% - 250px);
        border-left: none;
    }

    .p-regist__table-list-custom {
        width: 100%;
        list-style: none;
    }

    .th, .td:nth-child(2) {
        border-top: none;
    }

    textarea::placeholder {
        font-size: 12px;
        color: #c6ced6;
    }
    .card{
        border: none !important;
    }
    .c-tab__title{
        padding-top:0px !important;
    }
    .status-active {
        background: #FF9C00;
        color: white;
        padding: 4px 8px;
        margin-left: 5px;
    }
    .status-inactive {
        background: #999999;
        color: white;
        padding: 4px 8px;
        margin-left: 5px;
    }
    .color-require{
        color: #ec59ff;
    }
    .w-10 {
        width: 10%;
    }
    .w-90 {
        width: 90%;
    }


</style>
<script>
    const tabs = document.querySelectorAll('[data-tab]'),
        cards = document.querySelectorAll('.card');

    tabs.forEach(itemTab => {
        itemTab.addEventListener('click', function () {
            const contentBox = document.querySelector('#' + this.dataset.tab);

            cards.forEach(cardItem => {
                cardItem.classList.add('hidden');
            });

            contentBox.classList.remove('hidden');
        });
    });

</script>

