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

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

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

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

        <div id="post-receipt-submission" class="col mx-auto mt-3 mb-5">
            @csrf
            <div class="container my-5" style="text-align: center">
                <img id="egg-count-photo" src="/assets/images/guess-the-egg-count.png" style="width: 100%; height: auto; display: block; margin-bottom: 20px;">
                <h5>Thank you for participating in the "Count the Cadbury Golden Egg" contest. You will be notified via SMS if you are a winner!</h5>
                <button type="button" id="join-again-btn" class="btn btn-primary">Join Again</button>
                <x-main.error-msg/>
            </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 () {
            $('#join-again-btn').on('click', function () {
                window.location.href = '/'; // Redirects to the home page
            });
        });
    </script>
@endsection