@extends('layout.admin.main')
@push('css')
<style>
    #main-content{
        width: 60%;
        margin: auto;
    }
    #main-content>div{
        margin-top: 20px;
        border: 1px solid #cccccc;
    }
    #main-content>div>p{
        border-bottom: 1px solid #cccccc;
        padding:5px;
        text-align: center;
        background-color: #e5e6e8;
    }
    #main-content>div>div{
        padding:10px 0;
        display: block;
        border: 1px solid #cccccc;
        margin: 10px 10px;
    }
    #preview-title{
        padding:5px;
        background: linear-gradient(to top, rgb(244, 245, 247), rgb(249, 249, 249));
        border-radius: 5px;
    }
    #preview-title{
        border-left:2px solid #c0a16b ;
    }
    #payment_main_content{
        overflow-x: hidden;
        overflow-y: auto;
        padding: 15px!important;
    }

    .payment-link span{
        margin:10px;
        word-break: break-all;
    }
    .payment-preview div{
        padding:10px!important;
    }
    label::after{
        content:'';
    }
    select{
        appearance: none;
        line-height: normal;
        position: relative;
        background-position: right 10px top 50%;
        background-repeat: no-repeat;
    }
</style>
@endpush
@section('content')
        <main>
            <article class="sub">
                <section class="botedit">
                    <h2>成約フォーム取得</h2>
                    <div id="main-content">

                        <div class="payment-link">
                            <p>システム標準のフォームを利用する場合</p>
                            <div>

                                <span>{{$url}}</span>

                            </div>

                        </div>
                        <div class="payment-html">
                            <p>独自サイトにフォームを設置する場合</p>
                            <div id="payment_main_content">
                                {{htmlspecialchars($html)}}

                            </div>
                        </div>
                        <div id="preview-title">
                            <span style="color:#f29b2b;font-weight: bold;font-size: 20px">|</span>
                            <span  style="color:#bbe514;font-weight: bold">プレビュー</span>
                        </div>
                        <div class="payment-preview">

                            <div id="preview-body">
                                <span>{{(count($data)>0)?$data['name']:''}}</span>
                            </div>

                            <div>
                                {!! $html !!}

                                @if(count($data)>0)
                                <p class="text-center">
                                    <a href="{{route('contractsAdd',['lp_id'=>\Vinkla\Hashids\Facades\Hashids::connection('user_link')->encode($data['id']),'admin_id'=>\Vinkla\Hashids\Facades\Hashids::connection('admin_link')->encode(\Illuminate\Support\Facades\Auth::id())])}}" target="_blank">確認</a></p>
                                @endif
                            </div>
                            <p class="text-center" style="margin: auto;background-color: #ededea"><a class="btn btn-default" href="{{route('affSetting')}}">戻る</a></p>
                        </div>

                    </div>

                </section>
            </article>

        </main>
@endsection
@push('js')
<script>

</script>
@endpush