@component('components.plant.template_popup',  ['id' => 'popup_daily_challenge'])

<div id="challenge_container" class="challenge_box" style="display: none;">
    {{-- landing section --}}
    <div class="challenge-landing">
        <h4 class="challenge-caption main-title">Today's Challenge</h4>

        <div class='challenge-logo'></div>

        <label class='challenge-name sub-title'></label>

        <div class='challenge-footer'>
            <button class='btn btn-primary btn-cta-start'>Start</button>
        </div>
    </div>
    {{-- end landing section --}}

    {{-- challenge type section --}}
    <template class="box_take_a_pic">
        <label class="challenge-msg main-title"></label>

        <div class="challenge-footer">
            <button class="btn btn-primary btn-cta-submit">Submit</button>
        </div>
    </template>

    <template class="box_riddle">
        <div>
            <label class="riddle-question main-title"></label>
        </div>

        <div>
            <label class="riddle-tips sub-title">
                Choose a option below
            </label>
        </div>

        <div class="riddle-choices">
            <template class="choice">
                <label class="btn btn-outline-light" for=""></label>
            </template>
        </div>

        <div class="challenge-footer">
            <div class="act-panel" style="display: none;">
                <button class="btn btn-primary btn-cta-prev">&lt</button>
                <button class="btn btn-primary btn-cta-next">&gt</button>
            </div>

            <div class="submit-panel" style="display: none;">
                <button class="btn btn-primary btn-cta-submit">Submit Answer</button>
            </div>

        </div>
    </template>


    <template class="box_tap_the_plant">
        <label class="challenge-msg main-title"></label>
        <div class="plant_wrapper">
            <div class="tap_progress_ui" >
                <div class="progress_box"></div>
            </div>
            <div class="plant_ui"></div>
            <div class="plant_bubble" status="default"><span class="plant_counter"></span></div>
        </div>
    </template>
    {{-- end challenge type section --}}

    {{-- reward section --}}
    <template class="box_reward" style="display: none;">
        <div class="reward-caption">
            <div class="curved-text">HOORAY!</div>
        </div>

        <div class="reward-icon"></div>

        <div class="reward-footer">
            <label class="main-msg main-title">
                You have earned <span class="num-earned"></span> <span class="slug"></span>(s)!
            </label>
            <label class="grace-msg sub-title">
                Come back tomorrow for more tokens.
            </label>
        </div>
    </template>
    {{-- end reward section --}}
</div>

<div id="msg_container" class="challenge_box box-content-center" style="display: none;">
    <label class="sub-title msg-text"></label>

    <div class="msg-footer">
        <button class="btn btn-primary btn-cta-back">Back</button>
    </div>
</div>

<div id="loading_container" class="challenge_box box-content-center" style="display: none;">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

@endcomponent


@section('script')
<script src="{{ asset('js/plant/daily-challenge.js') }}"></script>
@append