@extends('layouts.'.getAppLayout())

@section('content')
    @component('components.main.main_ui')

        @slot('nav')
            <x-main._nav/>
        @endslot

        @slot('masthead')
            <x-main._masthead-main/>
        @endslot

        <form id="form-question" class="col mx-auto mt-3 mb-5" action="{{ route('questions.store') }}" method="POST">
            @csrf
            <div class="container my-5">
                <img id="progressBar" src="/assets/images/SurveyBar-Loop-Forever.gif" style="width: 100%; height: auto; display: block; margin-bottom: 20px;">
                <h2 class="text-center">Survey Questions</h2>

                    <div class="form-group">
                        <label for="question1">What brand of toothpaste do you currently use?</label>
                        <select class="form-control" id="question1" name="toothpaste_brand">
                            <option value="" selected disabled hidden></option>
                            <option value="Colgate">Colgate</option>
                            <option value="Darlie">Darlie</option>
                            <option value="Sensodyne">Sensodyne</option>
                            <option value="other">Other</option>
                        </select>
                        <div id="question1-error" class="validation-error" style="display:none;"></div>
                        <input type="text" class="form-control required" id="otherToothpaste" name="other_toothpaste" placeholder="Please specify" style="display:none;">
                        <div id="otherToothpaste-error" class="validation-error" style="display:none;"></div>
                    </div>

                    <div class="form-group">
                        <label for="question2">What is your top oral care concern?</label>
                        <select class="form-control" id="question2" name="oral_care_concern">
                            <option value="" selected disabled hidden></option>
                            <option value="Whitening/Yellowing teeth">Whitening/Yellowing teeth</option>
                            <option value="Tooth cavities and pain">Tooth cavities and pain</option>
                            <option value="Sensitivity">Sensitivity</option>
                            <option value="Gum bleeding">Gum bleeding</option>
                            <option value="Bad breath">Bad breath</option>
                            <option value="other">Other</option>
                        </select>
                        <div id="question2-error" class="validation-error" style="display:none;"></div>
                        <input type="text" class="form-control required" id="otherConcern" name="other_concern" placeholder="Please specify" style="display:none;">
                        <div id="otherConcern-error" class="validation-error" style="display:none;"></div>
                    </div>

                    <div class="form-group">
                        <label for="question3">Are you buying for yourself or for your family?</label>
                        <select class="form-control" id="question3" name="buying_for">
                            <option value="" selected disabled hidden></option>
                            <option value="Myself">Myself</option>
                            <option value="Family">Family</option>
                            <option value="other">Other</option>
                        </select>
                        <div id="question3-error" class="validation-error" style="display:none;"></div>
                        <input type="text" class="form-control required" id="otherBuyingFor" name="other_buying_for" placeholder="Please specify" style="display:none;">
                        <div id="otherBuyingFor-error" class="validation-error" style="display:none;"></div>
                    </div>

                    <button type="submit" id="submitBtn" class="btn btn-primary">Submit</button>
                    <x-main.error-msg/>
            </div>
        </form>
        <div id="colgatePopup" class="modal fade modal-theme" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="masthead-popup  w-100 px-5 z-1" style="margin-bottom: -4rem; min-height:4rem">
                    </div>
                    <div class="modal-body text-center" style="position: relative; padding-top:4rem">
                        <img id="confettiGif" src="/assets/images/Confetti.gif" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;">
                        <div class="modal-close z-2" data-dismiss="modal" aria-label="Close">
                            <i class="fas fa-times"></i>
                        </div>
                        <h5 style="position: relative;">Congratulations!</h5>
                        <p style="position: relative;">You have completed your survey!</p>
                        <br>
                        <p style="position: relative;">Spend $20 on Colgate's oral-care products to unlock SURE-WIN rewards!</p>
                        <br>
                        <button type="button" id="whatsappBtn" class="btn btn-primary" style="z-index: 2; position: relative;">Upload your receipt via WhatsApp Now!</button>
                    </div>
                </div>
            </div>
        </div>

    <x-main.popup.verify/>
        @slot('footer')
            <x-main._footer/>
        @endslot
    @endcomponent

    <link rel="stylesheet" href="{{ asset('css/survey.css') }}">

    <script type="text/javascript">
        window.whatsappLink = "{{ config('sys.whatsapp.link') }}";
    </script>
    <script src="{{ asset('js/main/survey.js') }}"></script>
@endsection