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

    <div class="status_item" status_id="default">
        <h5 class="main-title" id="popup_ar_game_title">
            Hi <span class="user_name"></span>, {{ __('heading.popup_ar_game_title') }}
        </h5>
        <p>
            <label>{!!__('heading.popup_ar_game_enable_camera')!!}</label>
            <label>{!!__('heading.popup_ar_game_desc_one')!!}</label>
        </p>
        <div id="popup_ar_game_icon_container_one" class="my-3">
            <label class="lbl-nutrition lbl-treasure-map">
{{--                <img class="nutrition_icon" src="assets/images/singpost/cny24/icons/Game-Pineapple.webp" width="50"/>--}}
            </label>
        </div>

        <p>
            <label>{!!__('heading.popup_ar_game_desc_two')!!}</label>
        </p>
        <div id="popup_ar_game_icon_container_two" class="my-3">
            <label class="lbl-nutrition lbl-water">
{{--                <img class="nutrition_icon" src="assets/images/singpost/cny24/icons/Game-KitKatPineapple.webp" width="50"/>--}}
            </label>

            <label class="lbl-nutrition lbl-sunlight">
{{--                <img class="nutrition_icon" src="assets/images/singpost/cny24/icons/Game-Ingot.webp" width="50"/>--}}
            </label>

            <label class="lbl-nutrition lbl-fertilizer">
{{--                <img class="nutrition_icon" src="assets/images/singpost/cny24/icons/Game-KitKat.webp" width="50"/>--}}
            </label>
        </div>
{{--        <label class="sub-title" id="popup_ar_game_subtitle">Collect some supplements!</label><br/>--}}
        <label class="sub-title" id="popup_ar_game_subtitle">No. of daily chance(s): <span id="ar-chance">0</span></label><br/>
{{--        <label class="sub-title" id="popup_ar_game_subtitle">Access additional chance(s) when you scan QR code in the mall.</label><br/>--}}
{{--        <label class="sub-title" id="popup_ar_game_subtitle">AR game refreshes at 12am daily.</label>--}}
{{--        <button id="start_ar_game">Start AR Game</button>--}}
        <button id="ar-start" class="btn btn-primary mt-3" style="display: none">Start Game</button>
    </div>

    <div class="status_item" status_id="used">
        <h5>Hi {firstname}, your plant needs you today.</h5>
        <h5>Lets start</h5>
        <div class="my-4">
{{--            <img src="/assets/images/ar/token_icons/Gold Token_Water.png" alt="Water token" width="50"/>--}}
{{--            <img src="/assets/images/ar/token_icons/Gold Token_Sun.png" alt="Sun token" width="50"/>--}}
{{--            <img src="/assets/images/ar/token_icons/Gold Token_Fertilizer.png"  alt="Fertilizer token"width="50"/>--}}
        </div>
        <p>Token Collection Chance: <span id="ar-chance">0</span><br/>(refresh daily)</p>

        <button class="btn btn-primary" data-dismiss="modal">Try Again Tomorrow</button>
    </div>

    <div class="status_item" status_id="confirm">
        <div class="my-4">
            <h5 class="mb-4">Are you sure you want to end this game?</h5>
            <button id="ar-end" class="btn btn-primary">Complete</button>
        </div>
    </div>

    <div class="status_item" status_id="complete">
        <h4>Congratulations!</h4>
        <h5>You have collected</h5>
        <h5 class="points_earned"></h5>

{{--    TAKE NOTE: token = treasure map; water = santa; sun = kitkat bar; fertilizer = gift;--}}
        <div class="row col-12 col-sm-9 px-0 mx-auto d-flex flex-column align-items-center">
            <div class="col mb-3 d-flex justify-content-center align-items-center">
{{--                <img class="mr-1" src="/assets/images/singpost/cny24/icons/Game-Pineapple.webp" alt="treasure map token" width="50"/>--}}
                <div class="h5 bold">x<span id="earned-token">0</span></div>
            </div>
            <div class="col mb-3 d-flex justify-content-center align-items-center">
{{--                <img class="mr-1" src="/assets/images/singpost/cny24/icons/Game-KitKatPineapple.webp" alt="santa token" width="50"/>--}}
                <div class="h5 bold">x<span id="earned-water">0</span></div>
            </div>
            <div class="col mb-3 d-flex justify-content-center align-items-center">
{{--                <img class="mr-1" src="/assets/images/singpost/cny24/icons/Game-Ingot.webp" alt="kitkat token" width="50"/>--}}
                <div class="h5 bold">x<span id="earned-sun">0</span></div>
            </div>
            <div class="col mb-3 d-flex justify-content-center align-items-center">
{{--                <img class="mr-1" src="/assets/images/singpost/cny24/icons/Game-KitKat.webp" alt="gift token" width="50"/>--}}
                <div class="h5 bold">x<span id="earned-fertilizer">0</span></div>
            </div>
        </div>
{{--        <p>Continue to collect more tokens via AR Game, Daily Challenges, Daily Check-ins and Successful Referrals</p>--}}
        <button id="ar-complete" class="btn btn-primary" data-dismiss="modal">{{ __('label.popup_ar_game_complete_btn') }}</button>
    </div>

    <div class="status_item" status_id="error">
        <div class="my-4">
            <h5 class="mb-4" id="ar-error-title"></h5>
            <p id="ar-error-msg"></p>
            <button id="ar-end" class="btn btn-primary" data-dismiss="modal">Okay</button>
        </div>
    </div>
@endcomponent