@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="egg-count-photo" src="/assets/images/guess-the-egg-count.png" style="width: 100%; height: auto; display: block; margin-bottom: 20px;" alt="Egg Count Photo">
                <div class="form-group">
                    <label for="question1">How many golden eggs did you spot at the structure? Special hint: Count the Golden Eggs in the picture below one final time</label>
                    <input type="number" class="form-control required" id="question1" name="question1" placeholder="">
                    <div id="question1-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="mondelez-popup" 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="padding-top:2rem; position: relative;">
                        <img id="mondelez-popup-image" src="/assets/images/guess-the-egg-count.png"
                             style="width: 100%; height: auto; margin-bottom: 20px;">

                        <div class="modal-close z-2" data-dismiss="modal" aria-label="Close" style="position: absolute; top: 10px; right: 10px;">
                            <i class="fas fa-times"></i>
                        </div>

                        <h5 style="position: relative;">Thank you for participating in the "Find the Cadbury Golden Egg" contest, please upload your receipt to complete the step to win the Golden Egg and other exciting prizes!</h5>
                        <br>
                        <button type="button" id="upload-receipt-btn" class="btn btn-primary" style="z-index: 2; position: relative;">
                            Upload Receipt
                        </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">
        $(document).ready(function () {
            // Restrict input to numbers only
            $("#question1").on("input", function () {
                $(this).val($(this).val().replace(/[^0-9]/g, ""));
            });

            // Handle form submission
            const form = $('#form-question');
            form.on('submit', function (e) {
                e.preventDefault();

                const formData = new FormData(this);
                const questionsData = [
                    {
                        is_open_ended: true,
                        title: "Guess how many eggs are in this photo?",
                        value: formData.get('question1')
                    },
                ];

                const csrfToken = $('meta[name="csrf-token"]').attr('content');

                fetch(form.attr('action'), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify(questionsData)
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Submit registration question error: ' + response.json());
                        }
                        return response.json();
                    })
                    .then(data => {
                        // Show success modal
                        $('#mondelez-popup').modal('show');
                    })
                    .catch(error => {
                        console.error("Submission failed:", error);
                    });
            });

            $('#upload-receipt-btn').on('click', function () {
                window.location.href = '/'; // Redirects to the home page
            });
        });
    </script>
@endsection