@section('title', 'Share')
@extends('layouts.main')
@section('extra-meta')
    <meta property="og:title" content="Spin and Win">
    <meta property="og:image" content="{{ asset('assets/images/facebook-share.jpg') }}">
    <meta property="og:description" content="Spin and win description">
    <meta property="og:url" content="{{ env('APP_URL') }}">
    <meta property="og:type" content="website" />

    <meta name="twitter:card" content="Spin and Win" />
    <meta name="twitter:site" content="" />
    <meta name="twitter:title" content="" />
    <meta name="twitter:description" content="View the album on Flickr." />
    <meta name="twitter:image" content="{{ env('APP_Name') }}/assets/images/facebook-share.jpg" />
@endsection
@section('extra-css')
    <style>
        html {
            background-image: url("/assets/images/bg.jpg");
        }
        .messagewidth {
            background: rgba(255,255,255,0.7);
            color:#000;
            width: 100%;
            display: block;
            height: 10px;
            max-width: 600px;
            height: auto;
            font-size: 16px;
            padding: 30px 50px;
            position: absolute;
            left:0;
            right: 0;
            top: 15%;
            margin: auto;
            box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
        }
        h2 {
            color:#dd042b;
            font-family: "Fjalla One", Helvetica, Arial, sans-serif;
            font-weight: 700;
            font-size: 4vw;
            text-shadow: 1px 1px 1px #fff;
            text-align: center;
        }
        .spin-again-form{
            position: absolute;
            left:0;
            right: 0;
            top: 64%;
            margin: auto;
            text-align: center;
        }

        .congratulations{
            top: 30%;
        }
        .custom_submit{ width: auto; }
         @media screen and (max-width: 767px){
            .spin-again-form{top: 85%;}
        }
    </style>
@endsection

@section('content')
    <div class="container">
        <div class="col-md-12 hidden-xs">
            <img src="{{ asset('assets/images/logo-lg.png') }}"
                 class="img-responsive animated slideInLeft" style="display: block; margin: auto; max-width: 400px;"/>
        </div>

    @include('layouts.partials.success')
        @include('layouts.partials.errors')
        <div class="congratulations animated flipInX">
            <h2>You are a winner!!</h2>
            <p style="color:#000;">Congratulations {!! Session::get('currentPlayerName') !!}, you have won a <strong>@foreach($prize as $data) {{ $data->prize }} @endforeach</strong>. We will verify your entry and email your voucher to you within 24 hours during weekdays or the following workday.  </p>
            <p style="color:#000;">For any queries email <a href="mailto:support@bravectosummerfun.co.za" style="color:#000;">support@bravectosummerfun.co.za</a></p>
            <p style="color:#000;"><span><strong>One entry will be permitted per Bravecto<sup>®</sup> product bought.</strong></span></p>


        </div>
        <form action="{{ route('entries.spin-again') }}" class="spin-again-form">
            @csrf
            <input type="hidden" name="id" value="{{ $data->id }}">
            <button type="submit" class="btn custom_submit" style="margin-left: -10px;">ADD ANOTHER ENTRY</button>
        </form>
        <audio id="my_audio" src="/assets/media/sound.mp3"></audio>

   </div>


@endsection

@section('extra-js')
<script>
    $(document).ready(function() {
        $("#my_audio").get(0).play();
    })
</script>

@endsection()