megamillions blade

megamillions.blade.php

@extends('layouts.app')

@section('title', 'Mega Millions')

@section('content')

<div class="container mx-auto py-5 px-1">
    <h1 class="text-center text-2xl">Mega Millions</h1>
    <hr>
    <p class="pt-4">Enter five different numbers from 1 to 70 in the gray boxes and one number from 1 to 25 in the
        orange box, to get statistics and tips from the last 100 games.
    </p>
</div>
<div class="container mx-auto mb-10">
    <form id="MegaMillions" method="POST">
        @csrf
        <div class="flex">
            <div class="w-1/6 p-2">
                <label class=" block uppercase tracking-wide text-gray-700 text-xs text-center font-bold mb-2 "
                    for="n1">N1</label>
                <input size="2"
                    class="w-full bg-gray-200 text-center text-gray-700 border @error('n1') border-red-500 @enderror rounded py-3 px-1 mb-3 focus:outline-none focus:bg-white"
                    id="n1" name="n1" type="number" value="{{ old('n1', $validatedData['n1'] ?? '') }}">
            </div>
            <div class="w-1/6 p-2">
                <label class=" block uppercase tracking-wide text-gray-700 text-xs text-center font-bold mb-2"
                    for="n1">N2</label>
                <input size="2"
                    class="w-full bg-gray-200 text-center text-gray-700 border @error('n2') border-red-500 @enderror rounded py-3 px-1 mb-3 focus:outline-none focus:bg-white"
                    id="n2" name="n2" type="number" value="{{ old('n2', $validatedData['n2'] ?? '') }}">
            </div>
            <div class="w-1/6 p-2">
                <label class=" block uppercase tracking-wide text-gray-700 text-xs text-center font-bold mb-2"
                    for="n3">N3</label>
                <input size="2"
                    class="w-full bg-gray-200 text-center text-gray-700 border @error('n3') border-red-500 @enderror rounded py-3 px-1 mb-3 focus:outline-none focus:bg-white"
                    id="n3" name="n3" type="number" value="{{ old('n3', $validatedData['n3'] ?? '') }}">
            </div>
            <div class="w-1/6 p-2">
                <label class=" block uppercase tracking-wide text-gray-700 text-xs text-center font-bold mb-2"
                    for="n4">N4</label>
                <input size="2"
                    class="w-full bg-gray-200 text-center text-gray-700 border @error('n4') border-red-500 @enderror rounded py-3 px-1 mb-3 focus:outline-none focus:bg-white"
                    id="n4" name="n4" type="number" value="{{ old('n4', $validatedData['n4'] ?? '') }}">
            </div>
            <div class="w-1/6 p-2">
                <label class=" block uppercase tracking-wide text-gray-700 text-xs text-center font-bold mb-2"
                    for="n5">N5</label>
                <input size="2"
                    class="w-full bg-gray-200 text-center text-gray-700 border @error('n5') border-red-500 @enderror rounded py-3 px-1 mb-3 focus:outline-none focus:bg-white"
                    id="n5" name="n5" type="number" value="{{ old('n5', $validatedData['n5'] ?? '') }}">
            </div>
            <div class="w-1/6 p-2">
                <label class=" block uppercase tracking-wide text-gray-700 text-xs text-center font-bold mb-2"
                    for="megaBall">Ball</label>
                <input size="2"
                    class="w-full bg-orange-400 text-center text-white border @error('megaBall') border-red-500 @enderror rounded py-3 px-1 mb-3 focus:outline-none focus:bg-orange-600"
                    id="megaBall" name="megaBall" type="number"
                    value="{{ old('megaBall', $validatedData['megaBall'] ?? '') }}">
            </div>
        </div>

        @if ($errors->has('n1') || $errors->has('n2') || $errors->has('n3') || $errors->has('n4') ||
        $errors->has('n5') || $errors->has('megaBall'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 mb-6 mx-2 py-3 rounded relative" role="alert">
            Your numbers are incorrect. Please fix and try again
        </div>
        @endif

        <div class="text-center">

            @guest
            @else
            <save-numbers id="SaveNumbersWithNotes" inline-template>
                <div>
                    <label class="inline-block text-gray-500 font-bold mb-4">
                        <input class="mr-2 leading-tight" type="checkbox" name="saveNumbers" id="saveNumbers"
                            v-model="toggleNotes" {{ old('saveNumbers') ? 'checked' : '' }} />
                        <span class="text-sm">
                            Save these numbers
                        </span>
                    </label>
                    <textarea :class="{ hidden: !toggleNotes }"
                        class="w-full bg-gray-200 text-gray-700 border @error('notes') border-red-500 @enderror rounded py-3 px-4 mb-3 focus:outline-none focus:bg-white"
                        name="notes" id="notes" cols="30" rows="1"
                        placeholder="Add some notes">{{ old('notes', $validatedData['notes'] ?? '') }}</textarea>
                </div>
            </save-numbers>
            @endguest

            <button type="submit" class="w-1/2 bg-blue-500 hover:bg-blue-700 text-white  font-bold py-2 rounded">
                Get statistics and tips
            </button>

        </div>

    </form>
</div>

<div class="container mx-auto">

    @if(isset($numbersSaved))
    @if($numbersSaved)
    <div class="rounded border-2 bg-gray-200 p-4 mb-5">Numbers saved. You can now see them in your account.
    </div>
    @else
    <div class="rounded border-2 bg-gray-200 p-4 mb-5">Numbers already present in your account
    </div>
    @endif
    @else
    {{-- nothing --}}
    @endif

    @if (!isset($everWon))
    {{-- nothing to show --}}
    @else
    @if ($everWon === null)
    <div class="rounded border-2 bg-gray-200 p-4 mb-5"><a href="{{ route('login') }}">Login</a> to save these numbers
        and see if your numbers ever won
    </div>
    @else
    <div class="rounded border-2 border-blue-400 bg-gray-200 p-4 mb-5">
        Your numbers won {{ count($everWon) . ' '.  Str::plural('time', count($everWon))}}
    </div>
    @endif
    @endif

    @if($statistics ?? '')

        @if ($statistics['numberSumStatistic'] ?? '')
        <div
            class="rounded border-4 bg-gray-200 p-4 mb-5 {{ $statistics['numberSumStatistic']['ok']  ? 'border-green-400' : 'border-red-400' }}">

            {!!$statistics['numberSumStatistic']['message']!!}
            <div class="relative">
                <canvas id="numberSumStatisticChart"></canvas>
                <script>
                    {
                        let labels = @json($statistics['numberSumStatistic']['chart_labels']);
                        let data = @json($statistics['numberSumStatistic']['counted_in_slots']);
                        let title = @json($statistics['numberSumStatistic']['title']);

                        let ctx = document.getElementById('numberSumStatisticChart');

                        let numberSumStatisticChart = new Chart(ctx, {
                            type: "bar"
                            , data: {
                                labels: labels
                                , datasets: [{
                                    label: title
                                    , data: data
                                , }]
                            }
                            , options: {
                                scales: {
                                    yAxes: [{
                                        ticks: {
                                            beginAtZero: true,
                                        }
                                    }]
                                },
                            }
                        });
                    }

                </script>
            </div>

        </div>
        @endif

        @if ($statistics['megaBallStatistic'] ?? '')
        <div
            class="rounded border-4 bg-gray-200 p-4 mb-5 {{ $statistics['megaBallStatistic']['ok']  ? 'border-green-400' : 'border-red-400' }}">

            {!!$statistics['megaBallStatistic']['message']!!}

            <div class="relative">
                <canvas id="megaBallStatisticChart"></canvas>
                <script>
                    {
                    let labels = @json($statistics['megaBallStatistic']['chart_labels']);
                    let data = @json($statistics['megaBallStatistic']['counted_in_slots']);
                    let title = @json($statistics['megaBallStatistic']['title']);

                    let megaBallStatisticChartX = document.getElementById('megaBallStatisticChart');

                    let megaBallStatisticChart = new Chart(megaBallStatisticChartX, {
                        type: "bar"
                        , data: {
                            labels: labels
                            , datasets: [{
                                label: title
                                , data: data
                            , }]
                        }
                        , options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                        , min: 0
                                    , }
                                }]
                            }
                        }

                    });
                }

                </script>
            </div>
        </div>
        @endif

        @if ($statistics['oddEvenNumbersStatistic'] ?? '')
        <div
            class="rounded border-4 bg-gray-200 p-4 mb-5 {{ $statistics['oddEvenNumbersStatistic']['ok']  ? 'border-green-400' : 'border-red-400' }}">

            {!!$statistics['oddEvenNumbersStatistic']['message']!!}

            <div class="relative">
                <canvas id="oddEvenNumbersStatisticChart"></canvas>
                <script>
                    {
                    let labels = @json($statistics['oddEvenNumbersStatistic']['chart_labels']);
                    let data = @json($statistics['oddEvenNumbersStatistic']['counted_in_slots']);
                    let title = @json($statistics['oddEvenNumbersStatistic']['title']);

                    let oddEvenNumbersStatisticChartX = document.getElementById('oddEvenNumbersStatisticChart');
                    var oddEvenNumbersStatisticChart = new Chart(oddEvenNumbersStatisticChartX, {
                        type: 'doughnut',
                        data: {
                            labels:labels,
                            datasets:[{
                                label:title,
                                data:data,
                                backgroundColor:["rgb(255, 99, 132)","rgb(54, 162, 235)","rgb(255, 205, 86)"]
                            }]
                        },
                    });
                }

                </script>
            </div>
        </div>
        @endif

    @endif
</div>

<div class="container mx-auto py-5">
    <h1 class="text-center text-2xl">Last 100 draws</h1>
    <hr>
    @foreach ($draws as $draw)
    <div class="grid grid-cols-6 md:grid-cols-7">
        <div class="text-center p-1 md:p2 mt-2">{{$draw->n2}}</div>
        <div class="text-center p-1 md:p2 mt-2">{{$draw->n1}}</div>
        <div class="text-center p-1 md:p2 mt-2">{{$draw->n3}}</div>
        <div class="text-center p-1 md:p2 mt-2">{{$draw->n4}}</div>
        <div class="text-center p-1 md:p2 mt-2">{{$draw->n5}}</div>
        <div class="text-center p-2 md:p2">
            <span class="inline-block bg-orange-500 rounded-full h-10 w-10"><span
                    class="leading-10">{{$draw->mega_ball}}</span>
            </span>
        </div>
        <div class="p-1 hidden md:block md:p2 mt-2">{{date('m/d/Y', strtotime($draw->draw_date)) }}</div>
    </div>
    @endforeach

</div>
@endsection