@section('custom-scripts')
    <script src="js/vendors/modernizr.js"></script>
    <script src="js/product-quiz.js"></script>
@endsection
<x-app-layout>
    <!-- End Header -->
    <div class="content">
        <!-- Content -->
        <div class="image-container set-full-height"
            style="background-image: url('images/quiz-banner.jpg'); background-attachment: fixed; background: #254f43;">
            <!--   Big container   -->
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2">
                        <!-- Wizard container -->
                        <div class="wizard-container">
                            <div class="card wizard-card" data-color="red" id="wizard">
                                <form>
                                    <!--        You can switch " data-color="blue" "  with one of the next bright colors: "green", "orange", "red", "purple"             -->
                                    <div class="wizard-header">
                                        <h3 id="heading" class="wizard-title">
                                            Choose your Cigar
                                        </h3>
                                    </div>
                                    <div class="wizard-navigation">
                                        <ul>
                                            <li><a href="#test" data-toggle="tab">Take the Test</a></li>
                                            <li><a href="#test1" data-toggle="tab">Take the Test</a></li>
                                            <li><a href="#test2" data-toggle="tab">Take the Test</a></li>
                                            <li><a href="#test3" data-toggle="tab">Take the Test</a></li>
                                            <li><a href="#test4" data-toggle="tab">Take the Test</a></li>
                                            <li><a href="#test5" data-toggle="tab">Take the Test</a></li>
                                            <li><a href="#test6" data-toggle="tab">Take the Test</a></li>
                                            <li><a href="#test7" data-toggle="tab">Take the Test</a></li>
                                            <li><a href="#choose-color" data-toggle="tab">Choose Flavour</a></li>
                                            <li><a href="#test8" data-toggle="tab">Take the Test</a></li>
                                            <li><a href="#result" data-toggle="tab">Result</a></li>
                                        </ul>
                                    </div>
                                    <div class="tab-content">
                                        <div class="tab-pane" id="test">
                                            <h2 class="info-text wow animated fadeInUp" data-wow-delay="0.4s">How Often
                                                Do You Smoke a Cigar?</h2>
                                            <div class="row">

                                                <div class="col-sm-10 col-sm-offset-1">
                                                    <div class="col-md-12 text-center wow animated fadeInUp"
                                                        data-wow-delay="0.4s">
                                                        <img src="images/quiz1.jpg" class="img-responsive">
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.2s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Everyday"
                                                            onclick="selectOption('Everyday')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Design">
                                                            <h3>Everyday</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.4s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Once a Week"
                                                            onclick="selectOption('Once a Week')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Once a Week</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.6s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Occasionally"
                                                            onclick="selectOption('Occasionally')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Occasionally</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.8s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Never, I just started smoking"
                                                            onclick="selectOption('Never, I just started smoking')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Never, I just started smoking</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="test1">
                                            <h2 class="info-text wow animated fadeInUp" data-wow-delay="0.4s">How Many
                                                Cigars Do You Have In Your Possession Right Now?</h2>
                                            <div class="row">
                                                <div class="col-sm-10 col-sm-offset-1">
                                                    <div class="col-md-12 text-center wow animated fadeInUp"
                                                        data-wow-delay="0.4s">
                                                        <img src="images/quiz2.jpg" class="img-responsive">
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.2s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Zero"
                                                            onclick="selectOption('Zero')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Design">
                                                            <h3>Zero</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.4s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="One or two"
                                                            onclick="selectOption('One or two')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>One or two</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.6s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="I have a box of them"
                                                            onclick="selectOption('I have a box of them')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>I have a box of them</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.8s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="I have more than I can count!"
                                                            onclick="selectOption('I have more than I can count')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>I have more than I can count!</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="test2">
                                            <h2 class="info-text wow animated fadeInUp" data-wow-delay="0.4s">Do You
                                                Have A Humidor In Your Home?</h2>
                                            <div class="row">
                                                <div class="col-sm-10 col-sm-offset-1">
                                                    <div class="col-md-12 text-center wow animated fadeInUp"
                                                        data-wow-delay="0.4s">
                                                        <img src="images/quiz3.jpg" class="img-responsive">
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.2s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="No, I haven’t even considered it"
                                                            onclick="selectOption('No, I havent even considered it')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Design">
                                                            <h3>No, I haven’t even considered it</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.4s" data-toggle="wizard-radio"
                                                            rel="tooltip"
                                                            title="No, but I have been thinking about purchasing one"
                                                            onclick="selectOption('No, but I have been thinking about purchasing one')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>No, but I have been thinking about purchasing one</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.6s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Yes, I do have a very small one"
                                                            onclick="selectOption('Yes, I do have a very small one')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Yes, I do have a very small one</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.8s" data-toggle="wizard-radio"
                                                            rel="tooltip"
                                                            title="Yes, my humidor is almost a whole room in my house!"
                                                            onclick="selectOption('Yes, my humidor is almost a whole room in my house')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Yes, my humidor is almost a whole room in my house!</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="test3">
                                            <h2 class="info-text wow animated fadeInUp" data-wow-delay="0.4s">How Much
                                                Do You Typically Spend On Cigars Each Month?</h2>
                                            <div class="row">
                                                <div class="col-sm-10 col-sm-offset-1">
                                                    <div class="col-md-12 text-center wow animated fadeInUp"
                                                        data-wow-delay="0.4s">
                                                        <img src="images/quiz4.jpg" class="img-responsive">
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.2s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Just a few dollars so far"
                                                            onclick="selectOption('Just a few dollars so far')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Design">
                                                            <h3>Just a few dollars so far</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.4s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Less than $50.00"
                                                            onclick="selectOption('Less than $50.00')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Less than $50.00</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.6s" data-toggle="wizard-radio"
                                                            rel="tooltip"
                                                            title="Somewhere between $50 - $200 per month"
                                                            onclick="selectOption('Somewhere between $50 - $200 per month')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Somewhere between $50 - $200 per month</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.8s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="A LOT"
                                                            onclick="selectOption('A LOT')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>A LOT</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="test4">
                                            <h2 class="info-text wow animated fadeInUp" data-wow-delay="0.4s">What
                                                Level Of “Strength” Do You Prefer Your Cigars To Be?</h2>
                                            <div class="row">
                                                <div class="col-sm-10 col-sm-offset-1">
                                                    <div class="col-md-12 text-center wow animated fadeInUp"
                                                        data-wow-delay="0.4s">
                                                        <img src="images/quiz5.jpg" class="img-responsive">
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.2s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Light aka “Mellow” Bodied"
                                                            onclick="selectOption('Light aka “Mellow” Bodied')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Design">
                                                            <h3>Light aka “Mellow” Bodied</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.4s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Medium-Bodied"
                                                            onclick="selectOption('Medium-Bodied')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Medium-Bodied</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.6s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Full-Bodied"
                                                            onclick="selectOption('Full-Bodied')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Full-Bodied</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.8s" data-toggle="wizard-radio"
                                                            rel="tooltip"
                                                            title="I don’t know what strength I would prefer"
                                                            onclick="selectOption('I don’t know what strength I would prefer')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>I don’t know what strength I would prefer</h3>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="test5">
                                            <h2 class="info-text wow animated fadeInUp" data-wow-delay="0.4s">What
                                                Flavors Are Most Appealing To You?</h2>
                                            <div class="row">
                                                <div class="col-sm-10 col-sm-offset-1">
                                                    <div class="col-md-12 text-center wow animated fadeInUp"
                                                        data-wow-delay="0.4s">
                                                        <img src="images/quiz6.jpg" class="img-responsive">
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.2s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Earthy or Plant-Like Flavors"
                                                            onclick="selectOption('Earthy or Plant-Like Flavors')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Design">
                                                            <h3>Earthy or Plant-Like Flavors</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.4s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Herbal or Spicy Flavors"
                                                            onclick="selectOption('Herbal or Spicy Flavors')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Herbal or Spicy Flavors</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.6s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Fruity or Sweet Flavors"
                                                            onclick="selectOption('Fruity or Sweet Flavors')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Fruity or Sweet Flavors</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.8s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Roasted or Toasted Flavors"
                                                            onclick="selectOption('Roasted or Toasted Flavors')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Roasted or Toasted Flavors</h3>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="test6">
                                            <h2 class="info-text wow animated fadeInUp" data-wow-delay="0.4s">Does
                                                Smoking A Cigar Help To Calm Your Nerves?</h2>
                                            <div class="row">
                                                <div class="col-sm-10 col-sm-offset-1">
                                                    <div class="col-md-12 text-center wow animated fadeInUp"
                                                        data-wow-delay="0.4s">
                                                        <img src="images/quiz7.jpg" class="img-responsive">
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.2s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Nope, it gets me more fired up!"
                                                            onclick="selectOption('Nope, it gets me more fired up')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Design">
                                                            <h3>Nope, it gets me more fired up!</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.4s" data-toggle="wizard-radio"
                                                            rel="tooltip"
                                                            title="I guess so. I definitely enjoy the feeling"
                                                            onclick="selectOption('I guess so. I definitely enjoy the feeling')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>I guess so. I definitely enjoy the feeling</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.6s" data-toggle="wizard-radio"
                                                            rel="tooltip"
                                                            title="Yes, smoking a good cigar helps me maintain my cool"
                                                            onclick="selectOption('Yes, smoking a good cigar helps me maintain my cool')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Yes, smoking a good cigar helps me maintain my cool</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.8s" data-toggle="wizard-radio"
                                                            rel="tooltip"
                                                            title="It might. I get so worked up that it could be helpful"
                                                            onclick="selectOption('It might. I get so worked up that it could be helpful')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>It might. I get so worked up that it could be helpful
                                                            </h3>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="test7">
                                            <h2 class="info-text wow animated fadeInUp" data-wow-delay="0.4s">Do You
                                                Ever Like To Dip Your Cigar In Alcohol?</h2>
                                            <div class="row">
                                                <div class="col-sm-10 col-sm-offset-1">
                                                    <div class="col-md-12 text-center wow animated fadeInUp"
                                                        data-wow-delay="0.4s">
                                                        <img src="images/quiz8.jpg" class="img-responsive">
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.2s" data-toggle="wizard-radio"
                                                            rel="tooltip"
                                                            title="I’ve never done that before. Is it good?"
                                                            onclick="selectOption('I’ve never done that before. Is it good')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Design">
                                                            <h3>I’ve never done that before. Is it good?</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.4s" data-toggle="wizard-radio"
                                                            rel="tooltip"
                                                            title="I do that occasionally, but only if the cigar I’m smoking isn’t very good"
                                                            onclick="selectOption('I do that occasionally, but only if the cigar I’m smoking isn’t very good')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>I do that occasionally, but only if the cigar I’m
                                                                smoking isn’t very good</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.6s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="ALL the time! It tastes AMAZING!"
                                                            onclick="selectOption('ALL the time It tastes AMAZING')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>ALL the time! It tastes AMAZING!</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.8s" data-toggle="wizard-radio"
                                                            rel="tooltip"
                                                            title="No, I would never ruin a cigar by doing that"
                                                            onclick="selectOption('No, I would never ruin a cigar by doing that')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>No, I would never ruin a cigar by doing that</h3>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-pane" id="choose-color">
                                            <h2 class="info-text wow animated fadeInUp" data-wow-delay="0.6s">What Is
                                                Your Favorite Kind Of Restaurant?</h2>
                                            <div class="row">
                                                <div class="col-sm-10 col-sm-offset-1">
                                                    <div class="col-sm-6">
                                                        <div class="choice" data-toggle="wizard-radio" rel="tooltip"
                                                            title="A Classic Steakhouse"
                                                            onclick="selectOption('A Classic Steakhouse')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Design">

                                                            <img src="images/p1.jpg"
                                                                class="img-responsive wow animated fadeInUp"
                                                                data-wow-delay="0.4s">

                                                            <h3 class="wow animated fadeInUp" data-wow-delay="0.4s">A
                                                                Classic Steakhouse</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="choice" data-toggle="wizard-radio" rel="tooltip"
                                                            title="A French Bistro"
                                                            onclick="selectOption('A French Bistro')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <img src="images/p2.jpg"
                                                                class="img-responsive wow animated fadeInUp"
                                                                data-wow-delay="0.4s">
                                                            <h3 class="wow animated fadeInUp" data-wow-delay="0.4s">A
                                                                French Bistro</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="choice" data-toggle="wizard-radio" rel="tooltip"
                                                            title="A Gastropub" onclick="selectOption('A Gastropub')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <img src="images/p3.jpg"
                                                                class="img-responsive wow animated fadeInUp"
                                                                data-wow-delay="0.4s">
                                                            <h3 class="wow animated fadeInUp" data-wow-delay="0.4s">A
                                                                Gastropub</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="choice" data-toggle="wizard-radio" rel="tooltip"
                                                            title="A Small, Local, Family Diner that serves breakfast all day"
                                                            onclick="selectOption('A Small, Local, Family Diner that serves breakfast all day')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <img src="images/p4.jpg"
                                                                class="img-responsive wow animated fadeInUp"
                                                                data-wow-delay="0.4s">
                                                            <h3 class="wow animated fadeInUp" data-wow-delay="0.4s">A
                                                                Small, Local, Family Diner that serves breakfast all day
                                                            </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-pane" id="test8">
                                            <h2 class="info-text wow animated fadeInUp" data-wow-delay="0.4s">How Many
                                                Different Cigar Brands Have You Smoked In The Last Year?</h2>
                                            <div class="row">
                                                <div class="col-sm-10 col-sm-offset-1">
                                                    <div class="col-md-12 text-center wow animated fadeInUp"
                                                        data-wow-delay="0.4s">
                                                        <img src="images/quiz9.jpg" class="img-responsive">
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.2s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="None, I am a brand-new cigar smoker"
                                                            onclick="selectOption('None, I am a brand-new cigar smoker')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Design">
                                                            <h3>None, I am a brand-new cigar smoker</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.4s" data-toggle="wizard-radio"
                                                            rel="tooltip" title="Just one or two"
                                                            onclick="selectOption('Just one or two')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>Just one or two</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.6s" data-toggle="wizard-radio"
                                                            rel="tooltip"
                                                            title="I have a revolving rotation of a handful of brands I like"
                                                            onclick="selectOption('I have a revolving rotation of a handful of brands I like')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>I have a revolving rotation of a handful of brands I
                                                                like</h3>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="choice select-text wow animated fadeInUp"
                                                            data-wow-delay="0.8s" data-toggle="wizard-radio"
                                                            rel="tooltip"
                                                            title="A lot. I can’t keep track of them all!"
                                                            onclick="selectOption('A lot. I can’t keep track of them all')">
                                                            <input aria-label="input field" type="radio"
                                                                name="job" value="Code">
                                                            <h3>A lot. I can’t keep track of them all!</h3>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>


                                        <div class="tab-pane" id="result">
                                            <div class="row">
                                                <div class="col-sm-12 text-center">
                                                    <img class="personality img-responsive wow animated fadeInUp"
                                                        data-wow-delay="0.4s" id="cigar-image"
                                                        src="images/result.jpg">
                                                    <div class="btn-product">
                                                        <h2 id="cigar-title"
                                                            class="info-text margin-top-50 wow animated fadeInUp"
                                                            data-wow-delay="0.6s"><span
                                                                class="golden-font wow animated fadeInUp"
                                                                data-wow-delay="0.4s">Classic Rosada</span><br> suits
                                                            your personality </h2>
                                                        <a href="#"
                                                            class="btn btn-dark margin-top-0 wow animate fadeInUp text-center"
                                                            id="view-product" data-wow-delay="0.6s">VIEW PRODUCT</a>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div id="error-div"></div>
                                    <div class="wizard-footer">
                                        <div class="pull-right">
                                            <input aria-label="input field" type='button'
                                                class='btn btn-next btn-fill btn-danger btn-wd wow animated fadeInUp'
                                                data-wow-delay="0.6s" name='next' id="next-button" value='Next'
                                                onclick="nextQuiz()" />
                                            <input aria-label="input field" type='button'
                                                class='btn btn-finish btn-fill btn-danger btn-wd wow animated fadeInUp'
                                                id="retake" onclick="resetCount()" data-wow-delay="0.6s"
                                                name='retake' value='Retake' />
                                        </div>
                                        <div class="pull-left">
                                            <input aria-label="input field" type='button'
                                                class='btn btn-previous btn-fill btn-default btn-wd wow animated fadeInUp'
                                                id="previous-button" data-wow-delay="0.6s" name='previous'
                                                value='Previous' />
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- wizard container -->
                    </div>
                </div>
                <!-- row -->
            </div>
            <!--  big container -->
        </div>
        <!-- End Content -->
</x-app-layout>