@extends('Front.PatientLayout.mainLayout')
@section('title', 'Expert Patient')
@section('css')
    <style>
        img {
            /* animation: bounceIn 1s ease-out; */
    animation: bounce-in-fwd 1.1s both;

        }
    </style>
@endsection
@section('content')
    <div class="container-fluid m-0 p-0 bg-light">
        <nav class="navbar  bg-white sticky-top ">
            <div class="d-flex ">
                <a href="{{ route('front.patient.dashboard') }}">
                    <i class="mt-3 fa fa-arrow-left   fs-4 float-start ms-2">
                    </i></a>
                <h5 class="m-2 p-2 text-center ">
                    {{ __('Gamification.title') }}
                </h5>
            </div>
        </nav>

        <div class="d-flex justify-content-center my-3 flex-wrap">
            <div class="col-6 text-center">
                <div class="col-12  my-3">
                    <img src="{{ asset('patientAssets') }}/img/allstar.png" alt="" class="img-fluid">
                </div>
                <div id="page1">
                    <div class="my-4">
                        <h2 class="">{{ __('Gamification.page_1_title') }}</h2>
                    </div>
                    <p class=" my-4 p-3">
                        {{ __('Gamification.page_1_desc') }}
                    </p>
                </div>
                <div id="page2" hidden>
                    <p class=" my-3 p-2">
                        {{ __('Gamification.page_2_desc_1') }}
                    </p>
                    <p class=" my-3 p-2">
                        {{ __('Gamification.page_2_desc_2') }}
                    </p>
                    <p class=" my-3 p-2">
                        {{ __('Gamification.page_2_desc_3') }}
                    </p>
                </div>

                <div class="text-center">
                    <i id="page1dot" class="fa fa-circle text-dark" aria-hidden="true"></i>
                    <i id="page2dot" class="fa fa-circle" aria-hidden="true"></i>
                </div>
                <div class="my-4 col-12">
                    <button id="next" class="btn btn-dark bgDarkBlue  btn-md fw-bold col-lg-3">
                        {{ __('Gamification.next') }}
                    </button>
                    <a hidden id="takeme"
                        href="{{ route('front.patient.gamification.view', ['firstTime' => true]) }}"class="btn btn-dark bgDarkBlue  btn-md fw-bold col-lg-4">
                        {{ __('Gamification.take_me') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
@section('js')
    <script nonce="{{ $cspNonce }}">
        $("#next").click(function(e) {
            $(this).attr('hidden', true);
            $("#page1").attr('hidden', true);
            $("#page2").removeAttr('hidden');
            $("#page1dot").removeClass('text-dark');
            $("#page2dot").addClass('text-dark');
            $("#takeme").removeAttr('hidden');
        });
    </script>
@endsection
@endsection