@section('style')
    @parent
    <style>
        .w-70 {
            width: 70% !important;
        }
        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
            background-color: #343a40!important;
            color: #fff !important;
        }
        .chat-wrap{
            padding: 15px 15px 15px 10px;
            background-color: rgb(230, 221, 212);
            position: relative;

        }
        .chat-wrap, .wcve-card{
            max-height: 382px;
        }
        .chat-wrap, .wcve-card .card-body{
            overflow: auto;
        }
        .wcve-card {
            overflow-x: auto;
        }
        .wcve-card .card-body{
            min-width: 280px;
        }
        .chat-wrap::before{
            display: block;
            position: absolute;
            content: "";
            left: 0px;
            top: 0px;
            height: 100%;
            width: 100%;
            z-index: 0;
            opacity: 0.08;
            background-image: url(https://elfsight.com/assets/chats/patterns/whatsapp.png);
        }
        .chat-bubble {
            padding: 7px 9px 6px 14px;
            background-color: rgb(255, 255, 255);
            border-radius: 0px 8px 8px;
            position: relative;
            transition: all 0.3s ease 0s;
            opacity: 1;
            transform-origin: center top;
            z-index: 2;
            box-shadow: rgb(0 0 0 / 13%) 0px 1px 0.5px;
            margin-top: 4px;
            margin-left: 0px;
            max-width: calc(100%);
        }
        .chat-bubble::before{
            position: absolute;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACQUExURUxpccPDw9ra2m9vbwAAAAAAADExMf///wAAABoaGk9PT7q6uqurqwsLCycnJz4+PtDQ0JycnIyMjPf3915eXvz8/E9PT/39/RMTE4CAgAAAAJqamv////////r6+u/v7yUlJeXl5f///5ycnOXl5XNzc/Hx8f///xUVFf///+zs7P///+bm5gAAAM7Ozv///2fVensAAAAvdFJOUwCow1cBCCnqAhNAnY0WIDW2f2/hSeo99g1lBYT87vDXG8/6d8oL4sgM5szrkgl660OiZwAAAHRJREFUKM/ty7cSggAABNFVUQFzwizmjPz/39k4YuFWtm55bw7eHR6ny63+alnswT3/rIDzUSC7CrAziPYCJCsB+gbVkgDtVIDh+DsE9OTBpCtAbSBAZSEQNgWIygJ0RgJMDWYNAdYbAeKtAHODlkHIv997AkLqIVOXVU84AAAAAElFTkSuQmCC);
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-size: contain;
            content: "";
            top: 0px;
            left: -12px;
            width: 12px;
            height: 19px;
        }
        .chat-bubble.bubble-button{
            width: 100%;
            border-radius: 8px;
            padding: 0;
        }
        .chat-bubble.no-before::before{
            content: none;
        }
        .bubble-area a{
            display: block;
            text-align: center;
            color: #4fa9ef;
            padding: 6px
        }

        .chat-bubble.bubble-img{
            /*padding: 6px 6px 6px;*/
        }
        .chat-bubble.bubble-img img{
            border-radius: 5px;
            overflow: hidden;
            object-fit: contain;
        }
        .chat-author{
            font-size: 13px;
            font-weight: 700;
            line-height: 18px;
            color: rgba(0, 0, 0, 0.4);
        }
        .chat-message{
            font-size: 14px;
            line-height: 19px;
            margin-top: 4px;
            color: rgb(17, 17, 17);
        }
        .chat-time{
            text-align: right;
            margin-top: 4px;
            font-size: 12px;
            line-height: 16px;
            color: rgba(17, 17, 17, 0.5);
            margin-right: 0px;
            margin-bottom: -4px;
        }

        .dyn-var-wrap .input-group-prepend {
            width: 120px
        }
        .dyn-var-wrap .input-group-prepend span {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .dyn-var-wrap select {
            width: calc(100% - 120px);
        }
        .wcve-card .form-group .select2 span{
            height: 38px;
            line-height: 38px;
        }
        .dyn-var-wrap .select2-container {
            width: calc(100% - 120px) !important;
        }
    </style>
@endSection


<div class="blast blast_page_0" blast-page="0">

    <!-- STEP 0  -->
    @component('admin.components.step_form_pages',
    [ //'post_url'=>$post_url,
    'type'=>'blast',
    'title'=> 'Where are you sending this blast on?' ,
    'step'=>'0',
    'disable_auto_submit'=>true
    ])
        @php $id = 'blast_medium'; $hasError = $errors->has($id) @endphp
        @component('admin.components.form_field', ['class'=>'col-12','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            <div class="form-group d-flex mb-0">
                @foreach( $form[$id]['input'] as $gid => $name)
                    <div class="custom-control custom-radio mx-2">
                        <input class="custom-control-input" type="radio" id="{{$id.'_'.$gid}}"
                               name="{{$id}}" value="{{$gid}}" {{$loop->first? 'checked':''}}>
                        <label for="{{$id.'_'.$gid}}"
                               class="custom-control-label">{{$name}}</label>
                    </div>
                @endforeach
            </div>
            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent

        @php $id = 'whatsapp_template'; $hasError = $errors->has($id) @endphp
        @component('admin.components.form_field', ['class'=>'col-12 d-none','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            <select id="{{$id}}" name="{{$id}}" class="{{$id}} form-control select2 w-100"
                    placeholder="{{$form[$id]['placeholder']}}"
                    data-label="{{$form[$id]['label']}}">
                <option disabled>Retrieving...</option>
            </select>
            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent

        <div class="w-100 h-100 rounded chat-wrap d-none"></div>


        @slot('footer_next')
            <button type="submit" class="btn btn-info float-right">Next Step</button>
        @endslot

    @endcomponent
</div>



<template id="whatsapp-bubble" style="display:none">
    <div class="d-flex">
        <div class="chat-bubble w-70">
            <div class="chat-message"></div>
            <div class="chat-time">00:00</div>
        </div>
    </div>
    <div class="d-flex">
        <div class="chat-bubble bubble-button no-before w-70">
            <div class="bubble-area d-none">
                @for ($i = 0; $i < 3 ; $i++)
                    @if($i>0)
                        <hr class="m-0 bubble-{{$i}}">
                    @endif
                    <a class="bubble-{{$i}}" href="javascript:void(0)">
                        <span></span>
                    </a>
                @endfor
            </div>
        </div>
    </div>

</template>


@section('script')
    @parent
    <script>
        $(() => {
            skaleBlastCreate.step1('{{ route('blast_list_wa_bi_templates') }}');
        });
    </script>
@endSection