@extends('layouts.main')

{{-- view specific CSS code --}}
@section('view-css')
    <link rel="stylesheet" href="{{ mix('/css/views/basket_marita.css') }}">
@stop

{{-- view special JS code --}}
@section('special-js')
    <script src="{{ mix('/js/views/basket_marita.js') }}"></script>
@stop

{{-- view main content --}}
@section('view-content')

    <div class="view-basket-marita view-11">
        <div class="wrap-view-content">


            <!-- hero -->
            <div class="pt-hero step current-step">
                <div class="st-bleed">
                    <div class="st-cnt">
                        <div class="image">
                            @svg('views.basket.marita.hero')
                        </div>
                        <div class="btn-wrap">
                            <div class="btn-start acn-touch">
                                Begin a journey to Nerdosia
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tutorial">
                    <div class="cursor">
                        <img loading="lazy" src="{{ mix('/images/svg/views/basket/marita/other/cursor.svg') }}">
                    </div>
                </div>
            </div>


            <!-- cake -->
            <div class="pt-cake step">
                <div class="st-bleed">
                    <div class="st-cnt">
                        <div class="head">
                            <h3 class="title">
                                Let's choose a cake...
                            </h3>
                            <h5 class="sub-title">
                                Select your path in the Nerds World
                            </h5>
                        </div>
                        <div class="cake-select">
                            @svg('views.basket.marita.cake')
                        </div>
                    </div>
                </div>

                <div class="tutorial">
                    <div class="cursor">
                        <img loading="lazy" src="{{ mix('/images/svg/views/basket/marita/other/cursor.svg') }}">
                    </div>
                </div>
            </div>


            <!-- ticket -->

            <div class="pt-ticket step" data-scroll-offset="100">
                <div class="st-bleed">
                    <div class="st-cnt">
                        <div class="head">
                            <h3 class="title">
                                ...And pick your ticket
                            </h3>
                            <h5 class="sub-title">
                                You can use teleport, but look out for the flies in your cabin
                            </h5>
                        </div>
                        <div class="ticket-select">
                            <div class="tickets-wrap">
                                <div class="pool geek">
                                    <div class="ticket ticket-type-a" data-value="geek_price_min">
                                        <div class="icon bus">
                                            @svg('views.basket.marita.icons.bus')
                                        </div>
                                        <div class="text">
                                            Catchy text
                                        </div>
                                    </div>
                                    <div class="ticket ticket-type-a" data-value="geek_price_medium">
                                        <div class="icon train">
                                            @svg('views.basket.marita.icons.train')
                                        </div>
                                        <div class="text">
                                            - no value
                                        </div>
                                    </div>
                                    <div class="ticket ticket-type-b" data-value="geek_price_high">
                                        <div class="icon plane">
                                            @svg('views.basket.marita.icons.plane')
                                        </div>
                                        <div class="text">
                                            Catchy text
                                        </div>
                                    </div>
                                    <div class="ticket ticket-type-c" data-value="geek_price_max">
                                        <div class="icon teleport">
                                            @svg('views.basket.marita.icons.teleport')
                                        </div>
                                        <div class="text">
                                            - no value
                                        </div>
                                    </div>
                                </div>
                                <div class="pool gamer">
                                <div class="ticket ticket-type-a">
                                        <div class="icon bus" data-value="gamer_price_min">
                                            @svg('views.basket.marita.icons.bus')
                                        </div>
                                        <div class="text">
                                            Catchy text
                                        </div>
                                    </div>
                                    <div class="ticket ticket-type-a" data-value="gamer_price_mid">
                                        <div class="icon train">
                                            @svg('views.basket.marita.icons.train')
                                        </div>
                                        <div class="text">
                                            - no value
                                        </div>
                                    </div>
                                    <div class="ticket ticket-type-b" data-value="gamer_price_high">
                                        <div class="icon plane">
                                            @svg('views.basket.marita.icons.plane')
                                        </div>
                                        <div class="text">
                                            Catchy text
                                        </div>
                                    </div>
                                </div>
                                <div class="pool retro">
                                <div class="ticket ticket-type-a" data-value="retro_price_min">
                                        <div class="icon bus">
                                            @svg('views.basket.marita.icons.bus')
                                        </div>
                                        <div class="text">
                                            Catchy text
                                        </div>
                                    </div>
                                    <div class="ticket ticket-type-a" data-value="retro_price_mid">
                                        <div class="icon train">
                                            @svg('views.basket.marita.icons.train')
                                        </div>
                                        <div class="text">
                                            - no value
                                        </div>
                                    </div>
                                    <div class="ticket ticket-type-b" data-value="retro_price_high">
                                        <div class="icon plane">
                                            @svg('views.basket.marita.icons.plane')
                                        </div>
                                        <div class="text">
                                            Catchy text
                                        </div>
                                    </div>
                                    <div class="ticket ticket-type-c" data-value="retro_price_max">
                                        <div class="icon teleport">
                                            @svg('views.basket.marita.icons.teleport')
                                        </div>
                                        <div class="text">
                                            - no value
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="scene-wrap">
                                <div class="main-scene">
                                    @svg('views.basket.marita.ticket_scene')
                                </div>
                                <div class="text-cloud">
                                    @svg('views.basket.marita.ticket_cloud')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tutorial">
                    <div class="cursor">
                        <img loading="lazy" src="{{ mix('/images/svg/views/basket/marita/other/cursor.svg') }}">
                    </div>
                </div>
            </div>



            <!-- magic -->

            <div class="pt-magic step" data-scroll-offset="-100">
                <div class="st-bleed">
                    <div class="st-cnt">
                        <div class="head">
                            <h3 class="title">
                                Let there be magic!
                            </h3>
                            <h5 class="sub-title">
                                Select one or many, choose your best picks
                            </h5>
                        </div>
                        <div class="scene-row">
                            <div class="scientist">
                                @svg('views.basket.marita.magic_scientist')
                            </div>
                            <div class="marita">
                                @svg('views.basket.marita.magic_marita')
                            </div>
                        </div>
                        <div class="select-wrap">
                            <div class="pool left">
                                <div class="pool-label">
                                    <h4 class="text">My Preferences</h4>
                                </div>
                                <div class="center-wrap">
                                    <div class="field-check">
                                        <label class="check-wrap">
                                            <input type="checkbox" name="retro-lover"></input>
                                            <div class="icon">
                                                <img loading="lazy" class="active" src="{{ mix('/images/svg/views/basket/marita/icons/star_active.svg') }}">
                                                <img loading="lazy" class="inactive" src="{{ mix('/images/svg/views/basket/marita/icons/star_inactive.svg') }}">
                                            </div>
                                            <span class="check-label">Retro Lover</span>
                                        </label>
                                    </div>
                                    <div class="field-check">
                                        <label class="check-wrap">
                                            <input type="checkbox" name="gaming-girl"></input>
                                            <div class="icon">
                                                <img loading="lazy" class="active" src="{{ mix('/images/svg/views/basket/marita/icons/star_girl_active.svg') }}">
                                                <img loading="lazy" class="inactive" src="{{ mix('/images/svg/views/basket/marita/icons/star_girl_inactive.svg') }}">
                                            </div>
                                            <span class="check-label">Gaming Girl</span>
                                        </label>
                                    </div>
                                    <div class="field-check">
                                        <label class="check-wrap">
                                            <input type="checkbox" name="gaming-boy"></input>
                                            <div class="icon">
                                                <img loading="lazy" class="active" src="{{ mix('/images/svg/views/basket/marita/icons/star_active.svg') }}">
                                                <img loading="lazy" class="inactive" src="{{ mix('/images/svg/views/basket/marita/icons/star_inactive.svg') }}">
                                            </div>
                                            <span class="check-label">Gaming Boy</span>
                                        </label>
                                    </div>
                                    <div class="field-check">
                                        <label class="check-wrap">
                                            <input type="checkbox" name="bookworm"></input>
                                            <div class="icon">
                                                <img loading="lazy" class="active" src="{{ mix('/images/svg/views/basket/marita/icons/star_active.svg') }}">
                                                <img loading="lazy" class="inactive" src="{{ mix('/images/svg/views/basket/marita/icons/star_inactive.svg') }}">
                                            </div>
                                            <span class="check-label">Bookworm</span>
                                        </label>
                                    </div>
                                    <div class="field-check">
                                        <label class="check-wrap">
                                            <input type="checkbox" name="gadgeteer"></input>
                                            <div class="icon">
                                                <img loading="lazy" class="active" src="{{ mix('/images/svg/views/basket/marita/icons/star_active.svg') }}">
                                                <img loading="lazy" class="inactive" src="{{ mix('/images/svg/views/basket/marita/icons/star_inactive.svg') }}">
                                            </div>
                                            <span class="check-label">Gadgeteer</span>
                                        </label>
                                    </div>
                                    <div class="field-check">
                                        <label class="check-wrap">
                                            <input type="checkbox" name="geeks"></input>
                                            <div class="icon">
                                                <img loading="lazy" class="active" src="{{ mix('/images/svg/views/basket/marita/icons/star_active.svg') }}">
                                                <img loading="lazy" class="inactive" src="{{ mix('/images/svg/views/basket/marita/icons/star_inactive.svg') }}">
                                            </div>
                                            <span class="check-label">Geeks</span>
                                        </label>
                                    </div>
                                    <div class="field-check">
                                        <label class="check-wrap">
                                            <input type="checkbox" name="nerds"></input>
                                            <div class="icon">
                                                <img loading="lazy" class="active" src="{{ mix('/images/svg/views/basket/marita/icons/star_active.svg') }}">
                                                <img loading="lazy" class="inactive" src="{{ mix('/images/svg/views/basket/marita/icons/star_inactive.svg') }}">
                                            </div>
                                            <span class="check-label">Nerds</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="pool right">
                                <div class="pool-label">
                                    <h4 class="text">Nerdosian Traits</h4>
                                </div>
                                <div class="center-wrap">
                                    <div class="check-group">
                                        <div class="field-check gill">
                                            <label class="check-wrap">
                                                <input type="checkbox" name="gill-pick"></input>
                                                <div class="icon nerd">
                                                    <img loading="lazy" class="active" src="{{ mix('/images/svg/common/nh/nerds/gill.svg') }}">
                                                    <img loading="lazy" class="inactive" src="{{ mix('/images/svg/common/nh/nerds/gill.svg') }}">
                                                </div>
                                                <span class="check-label">Gill Pick</span>
                                            </label>
                                        </div>
                                        <div class="field-check siris">
                                            <label class="check-wrap">
                                                <input type="checkbox" name="siris-pick"></input>
                                                <div class="icon nerd">
                                                    <img loading="lazy" class="active" src="{{ mix('/images/svg/common/nh/nerds/siris.svg') }}">
                                                    <img loading="lazy" class="inactive" src="{{ mix('/images/svg/common/nh/nerds/siris.svg') }}">
                                                </div>
                                                <span class="check-label">Siris Pick</span>
                                            </label>
                                        </div>
                                        <div class="field-check alyx">
                                            <label class="check-wrap">
                                                <input type="checkbox" name="alyx-pick"></input>
                                                <div class="icon nerd">
                                                    <img loading="lazy" class="active" src="{{ mix('/images/svg/common/nh/nerds/alyx.svg') }}">
                                                    <img loading="lazy" class="inactive" src="{{ mix('/images/svg/common/nh/nerds/alyx.svg') }}">
                                                </div>
                                                <span class="check-label">Alyx Pick</span>
                                            </label>
                                        </div>
                                        <div class="field-check naro">
                                            <label class="check-wrap">
                                                <input type="checkbox" name="naro-pick"></input>
                                                <div class="icon nerd">
                                                    <img loading="lazy" class="active" src="{{ mix('/images/svg/common/nh/nerds/naro.svg') }}">
                                                    <img loading="lazy" class="inactive" src="{{ mix('/images/svg/common/nh/nerds/naro.svg') }}">
                                                </div>
                                                <span class="check-label">Naro Pick</span>
                                            </label>
                                        </div>
                                        <div class="field-check bernie">
                                            <label class="check-wrap">
                                                <input type="checkbox" name="bernie-pick"></input>
                                                <div class="icon nerd">
                                                    <img loading="lazy" class="active" src="{{ mix('/images/svg/common/nh/nerds/bernie.svg') }}">
                                                    <img loading="lazy" class="inactive" src="{{ mix('/images/svg/common/nh/nerds/bernie.svg') }}">
                                                </div>
                                                <span class="check-label">Bernie Pick</span>
                                            </label>
                                        </div>
                                        <div class="field-check marita">
                                            <label class="check-wrap">
                                                <input type="checkbox" name="marita-pick"></input>
                                                <div class="icon nerd">
                                                    <img loading="lazy" class="active" src="{{ mix('/images/svg/common/nh/nerds/marita.svg') }}">
                                                    <img loading="lazy" class="inactive" src="{{ mix('/images/svg/common/nh/nerds/marita.svg') }}">
                                                </div>
                                                <span class="check-label">Marita Pick</span>
                                            </label>
                                        </div>
                                        <div class="field-check galileo">
                                            <label class="check-wrap">
                                                <input type="checkbox" name="galileo-pick"></input>
                                                <div class="icon nerd">
                                                    <img loading="lazy" class="active" src="{{ mix('/images/svg/common/nh/nerds/galileo.svg') }}">
                                                    <img loading="lazy" class="inactive" src="{{ mix('/images/svg/common/nh/nerds/galileo.svg') }}">
                                                </div>
                                                <span class="check-label">Galileo Pick</span>
                                            </label>
                                        </div>
                                        <div class="field-check makart">
                                            <label class="check-wrap">
                                                <input type="checkbox" name="makart-pick"></input>
                                                <div class="icon nerd">
                                                    <img loading="lazy" class="active" src="{{ mix('/images/svg/common/nh/nerds/makart.svg') }}">
                                                    <img loading="lazy" class="inactive" src="{{ mix('/images/svg/common/nh/nerds/makart.svg') }}">
                                                </div>
                                                <span class="check-label">Makart Pick</span>
                                            </label>
                                        </div>
                                        <div class="field-check mad-scientist">
                                            <label class="check-wrap">
                                                <input type="checkbox" name="mad-scientist-pick"></input>
                                                <div class="icon nerd">
                                                    <img loading="lazy" class="active" src="{{ mix('/images/svg/common/nh/nerds/mad_scientist.svg') }}">
                                                    <img loading="lazy" class="inactive" src="{{ mix('/images/svg/common/nh/nerds/mad_scientist.svg') }}">
                                                </div>
                                                <span class="check-label">Mad Scientist Pick</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="category-wrap">
                            <div class="category-text">
                                <h4 class="text">(CATCH)Y TEXT!</h4>
                            </div>
                            <div class="slider">
                                <div class="cnt-items">
                                    <div class="item" data-name="board-games">
                                        <label class="label">
                                            Board Games
                                        </label>
                                    </div>
                                    <div class="item" data-name="comics">
                                        <label class="label">
                                            Comics
                                        </label>
                                    </div>
                                    <div class="item" data-name="figures">
                                        <label class="label">
                                            Figures
                                        </label>
                                    </div>
                                    <div class="item" data-name="puzzles">
                                        <label class="label">
                                            Puzzles
                                        </label>
                                    </div>
                                    <div class="item" data-name="games">
                                        <label class="label">
                                            Games
                                        </label>
                                    </div>
                                    <div class="item" data-name="vinyls">
                                        <label class="label">
                                            Vinyls
                                        </label>
                                    </div>
                                    <div class="item" data-name="toys">
                                        <label class="label">
                                            Toys
                                        </label>
                                    </div>
                                    <div class="item" data-name="foldable-items">
                                        <label class="label">
                                            Foldable items
                                        </label>
                                    </div>
                                    <div class="item" data-name="e-books">
                                        <label class="label">
                                            E-books
                                        </label>
                                    </div>
                                    <div class="item" data-name="gift-cards">
                                        <label class="label">
                                            Gift Cards
                                        </label>
                                    </div>
                                    <div class="item" data-name="costumes">
                                        <label class="label">
                                            Costumes
                                        </label>
                                    </div>
                                    <div class="item" data-name="trading-cards">
                                        <label class="label">
                                            Trading Cards
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="submit-wrap">
                            <div class="col-left">
                                <img loading="lazy" src="{{ mix('/images/svg/views/basket/marita/other/wiggle.svg') }}">
                            </div>
                            <div class="col-right">
                                <div class="btn-wrap">
                                    <form method="POST" action="#">
                                    @csrf
                                        <input type="hidden" name="marita-data" value="">
                                        <button class="btn-submit acn-touch">
                                            <div class="wand"></div>
                                            Abracadabra!
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tutorial">
                    <div class="cursor">
                        <img loading="lazy" src="{{ mix('/images/svg/views/basket/marita/other/cursor.svg') }}">
                    </div>
                </div>
            </div>


        </div>
    </div>

@stop