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

<div class='progress-tab'>
    <div class='tab selected' data-loadContent='progress-info'>Current Plant</div>
    <div class='tab' data-loadContent='progress-matured'>Previous Plant</div>
</div>

<div class='progress-info' data-withTabPanel='1'>
    <label class="caption main-title">Your Plant's Status</label>

    <div class="plant_ui"></div>

    <div class="plant-mood">
        <label class="sub-title font-weight-bold">
            <div>
                Level:&nbsp;
                <span class="curr-level"></span>/<span class="max-level"></span>
            </div>

            {{-- 
            <div>
                Mood:&nbsp;
                <span class="curr-mood"></span>
            </div> 
            --}}
        </label>
    </div>

    <div class="opacity-box"></div>

    <div class="plant-completion-info white-bg-opacity">
        <div>
            {{--             
            <label class="sub-title font-weight-bold">
                <span>{{ config('plant.client_app_name') }} Mission :</span>&nbsp;
                <span class="text-danger plant-growth-status"></span>
            </label> 
            --}}

            <label class="sub-title font-weight-bold d-block">
                {{ config('plant.client_app_name') }} Mission <br>
                (Complete 1 mission for 1 plant) 
                {{-- <b class="text-danger plant-app-mission"></b> --}}
            </label>

            <label class="sub-title">
                <span>No. of mission(s) valid : </span>&nbsp;
                <span class="text-danger plant-app-mission-num font-weight-bold"></span>
            </label>
        </div>
        <div>
            <label class="sub-title text-primary link-learn-more" data-loadContent='progress-guide'>Learn more</label>
        </div>
    </div>
</div>

<div class='progress-matured' data-withTabPanel='1' style='display: none;'>
    <div class='plants-box'>
        <template class="tpl-plant-box">
            <div class="plant-box">
                <div class="plant_ui"></div>
                <div class="plant-info d-flex justify-content-center">
                    <label class="sub-title">
                        <i class="fa" aria-hidden="true"></i>
                        &nbsp;
                        <span class="plant-status"></span>
                    </label>
                </div>
            </div>
        </template>

        <template class="tpl-no-item">
            <label class="sub-title no-item box-content-center">
                You do not have any completed plant available.
            </label>
        </template>
    </div>

    {{-- 
    <div>
        <button class="btn btn-primary" data-href="{{ config('plant.client_app_link') }}">Upload Receipt</button>
        <div class="pt-2">
            <label class="sub-title">{{ config('plant.growth_token_provision_info_text') }}</label>
        </div>
    </div> 

    <div class="opacity-box"></div>

    <div class="plant-completion-info white-bg-opacity">
        <div>
            <label class="sub-title text-primary link-learn-more" data-loadContent='progress-guide'>Learn more</label>
        </div>
    </div>
    --}}
</div>


<div class='progress-guide' data-withTabPanel='0' style="display: none;">
    <div class="opacity-box"></div>

    <div class="white-bg-opacity font-weight-bold">
        <label class="main-title guide-content">
            {{ config('plant.mission_guide_text') }}
        </label>

        <div class="guide-footer">
            <div class="tp-app-logo">
                <a href="{{ config('plant.client_app_deep_link') }}" target="_blank">
                    <img src="{{ asset(config('plant.client_app_logo')) }}" alt="{{ config('plant.client_app_name') }}" style="max-height: 110px;">
                </a>
            </div>
            <br>
            <label class="sub-title font-weight-bold">
                {!! config('plant.growth_token_provision_info_text') !!}
            </label>
        </div>
    </div>
</div>

@endcomponent


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