@push('css')
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
<link rel="stylesheet" href="/css/template_v2/stamp.css?v={{config("sns-line.version")}}">

@endpush
<div id="message-stamp" v-cloak>
    <div class="all_stamp" style="margin-top: 15px;">
        <div class="choose_package">
            <!-- Nav tabs -->
                        <div class="sticker_wrap">
                <div style="display: flex; padding: 15px; align-items: center;">
                    <div style="font-size: 18px;">スタンプ選択</div>
                    <div style="margin-left: 25px; font-size: 15px; color: #F44336; font-weight: normal;">※クリエイターズスタンプは利用できません</div>
                </div>
                <ul class="nav nav-pills nav-stacked sticker_div" role="tablist">
                    @foreach($stickerPackage as $package)
                    <li role="presentation" style="margin-bottom: 10px;" @if($group_id == $package->package_id) class="active" @endif>
                        <a href="#sticker_{{$package->package_id}}" id="tab_sticker_{{$package->package_id}}" aria-controls="sticker" role="tab" data-toggle="tab" aria-expanded="false" style="padding: 0;margin: 0" class="row">
                            <img src="{{ $package->package_avatar }}" alt="" class="sticker-thumb" style="">
                            <div class="sticker_title">
                                <div class="stickerTitle" style="margin: auto; text-align: center;">{!! $package->package_title !!}</div>
                            </div>
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>
            <!-- <hr style="margin: 10px 0"> -->
        </div>
        <div class="choose_stamp" style="">
            <div class="tab-content sticker-selector-select-part sticker-selector-selected">
                @if(!empty($stickers) && count($stickers) > 0)
                @foreach($stickers as $packageId => $stickerIds)
                <div role="tabpanel" class="tab-pane @if($group_id == $packageId) active @endif" id="sticker_{{$packageId}}" 
                style="height: auto; padding: 2% 0 3% 3%; border: 1px solid #E0E0E0; border-radius: 5px;">
                    <div class="nano">
                        <div class="nano-content">
                            <div class="nano-inner">
                                @foreach($stickerIds as $stickerId)
                                <label for="sticker_{{$packageId}}_{{$stickerId}}" class="sticker-label" onclick="chooseSticker('{{$packageId}}','{{$stickerId}}')" style="">
                                    <div class="sticker-wrapper">
                                        <input id="sticker_{{$packageId}}_{{$stickerId}}" name="sticker"
                                               type="radio" value="{{$packageId}}_{{$stickerId}}" v-model="content"
                                               style="margin-top: -15px; vertical-align: middle" onclick="chooseSticker('{{$packageId}}','{{$stickerId}}')">
                                        <img src="https://stickershop.line-scdn.net/stickershop/v1/sticker/{{$stickerId}}/ANDROID/sticker.png" class="img_sticker" style="">
                                    </div>
                                </label>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                @endif
            </div>
        </div>
        <div style="display: flex;">
            <div id="sticker_default" @if((!empty($tmp_update) && $tmp_update->type == 'stamp')) style="display: none;" @endif>
                <div class="stamp_picked">選択したスタンプ</div>
                <div style="margin: auto; text-align: center">
                    <img src="/images/white_sticker.png" class="img-thumbnail" alt="no-sticker" width="130" height="130" style="position: relative; margin: auto">
                </div>
                <p class="tmp_err text-danger template_name_error err_media" id="sticker_empty" style="display: none;padding-top: 10px; text-align: center">スタンプが選ばれていません</p>
            </div>
            <div id="stick_display" @if((!empty($tmp_update) && $tmp_update->type == 'stamp')) style="display: block"
                @else hidden @endif>
                <div class="stamp_picked">選択したスタンプ</div>
                <div style="margin: auto;text-align: center">
                    <img @if((!empty($tmp_update) && $tmp_update->type == 'stamp')) src="https://stickershop.line-scdn.net/stickershop/v1/sticker/{{$sticker_id}}/ANDROID/sticker.png" @endif
                        class="img-thumbnail" id="sticker-selector-display-sticker"
                    alt="no-sticker" width="130" height="130" style="position: relative; padding: 5% 20%">
                </div>
                <input type="hidden" id="sticker_flag" value="{{ !empty($tmp_update) && $tmp_update->type == 'stamp' ? 1 : 0 }}">
            </div>
            <!-- <p class="tmp_err text-danger template_name_error err_media" id="sticker_empty" style="display: none;padding-top: 10px; text-align: center">スタンプが選ばれていません</p> -->
        </div>
    </div>
</div>

@push('js')
<!-- <script src="/js/validate/validate.js?v={{config('sns-line.version')}}"></script> -->

<script>
    function chooseSticker(packageId, stickerId) {
        $('#sticker-selector-display-sticker').attr('src', 'https://stickershop.line-scdn.net/stickershop/v1/sticker/'+ stickerId +'/ANDROID/sticker.png');
        $('#content').val(packageId + '_' + stickerId);
        $('#sticker_flag').val(1);
        $('#stick_display').show();
        $('#sticker_empty').hide();
        $('#sticker_default').hide()
    }
</script>

@endpush