@extends('layouts.frontend')

@section('styles')
<style type="text/css">
    .mfp-bg.mfp-ready{
        height: 100% !important;
        overflow-y: hidden !important;
    }
    video.center{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    form .error {
      color: #eb1e23;
    }
    .custom-file-input, .custom-file-label{
        height: calc(2.5em + .75rem + 2px);
    }
    .custom-file-label, .custom-file-label::after{
        padding: 1.475rem .75rem;
        line-height: 0.3;
    }
    #happy_code_input{
        height: 50px;
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none;
    }
</style>
@endsection
@section('content')
<div class="container">
    <div class="row justify-content-center align-items-center py-5">
        <div class="col-12">
            <form action="{{ route('frontend.customer-luck-draw-datas.store') }}" id="lucky-draw-form" name="lucky-draw-form" method="POST" enctype="multipart/form-data" autocomplete="off">
                @csrf
                <div class="col-12">
                    <h2 class="text-center text-black font-weight-bold">{{ __('game.upload_title') }}</h2>
                </div>
                <div class="form-group col-12">
                    <div class="custom-file">
                        <input type="file" name="uploadFile" class="custom-file-input {{ $errors->has('uploadFile') ? ' is-invalid' : '' }}" id="uploadFile" lang="en" required>
                        <label class="custom-file-label" for="customFileLang">{{ __('game.browse') }}</label>
                        <small id="photoHelp" class="form-text text-muted">{{ __('game.upload_help') }}</small>
                    </div>
                </div>

                <div class="form-group col-12">
                    {{-- <h2 class="text-center font-weight-bold m-0">{{ __('game.example') }}</h2> --}}
                    {{-- <h3 class="text-center font-weight-bold">{{ __('game.example_content') }}</h3> --}}
                    <div class="d-flex justify-content-center">
                        @if (app()->getLocale() == 'en')
                            <img class="img-upload-example" src="{{ asset('assets/SysImg/CNYHappyGame2022Sample_EngVersion_(2).png') }}" />
                        @else
                            <img class="img-upload-example" src="{{ asset('assets/SysImg/CNYHappyGame2022Sample_ChiVersion_(3).png') }}" />
                        @endif
                    </div>
                </div>
            
                <div class="form-group col-12" id="happy-code-form-group">
                    <h2 class="text-center text-black font-weight-bold">{{ __('game.insert_happy_code') }}</h2>
                </div>

                <div class="form-inline justify-content-center align-items-center">
                    <h1 class="m-0"><label for="happy_code_input" class="mr-3 mb-0">HA1G3 No</label></h1>
                    <input inputmode="numeric" pattern="[0-9]*" type="text" class="form-control w-50 {{ $errors->has('happy_code') ? ' is-invalid' : '' }}" name="happy_code" id="happy_code_input" maxlength="5" autocomplete="off" required>
                </div>
                <div class="text-center">
                    <p>{{ __('game.insert_help') }}</p>
                </div>

                <div class="form-group text-center col-12">
                    <button id="lucky-draw-btn" class="btn btn-lg btn-play font-weight-bold text-uppercase" type="button">{{ __('game.enter_now') }}</button>
                    {{-- <button id="lucky-draw-btn" class="btn btn-lg btn-play font-weight-bold text-uppercase">Play Now!</button> --}}
                </div>
            </form>
        </div>
    </div>
</div>

@include('partials.frontend.video')
@endsection

@section('scripts')
<script>
    $(document).ready(function(){
        $("#lucky-draw-form").validate({
            onsubmit: false,
            // Specify validation rules
            rules: {
              // The key name on the left side is the name attribute
              // of an input field. Validation rules are defined
              // on the right side
              uploadFile: {
                    required: true,
                    accept: "image/jpeg,image/png,image/gif,image/bmp,image/tiff",
                    extension: "jpg|jpeg|png|gif|bmp|tiff",
              },
              happy_code: {
                    required: true
              },
            },
            // Specify validation error messages
            messages: {
              uploadFile: "The upload file must be a file of type: jpg, png, gif, bmp, tiff.",
              happy_code: "The happy code field is required.",
            },
            showErrors: function(errorMap, errorList) {
                $.each(errorMap, function(index, element){
                    if(index == 'uploadFile')
                    {
                        $(window).scrollTop(0);
                        return false;
                    }
                    if(index == 'happy_code')
                    {
                        $('html, body').animate({scrollTop:$('#happy-code-form-group').position().top}, 'fast');
                    }
                });
                this.defaultShowErrors();
            }
            // Make sure the form is submitted to the destination defined
            // in the "action" attribute of the form when valid
        });

        $("#lucky-draw-btn").click(function(){
            if ($('#lucky-draw-form').valid()) {
                $.magnificPopup.open({
                    items: {
                        src: '#video-popup',
                        type: 'inline'
                    },
                    // You may add options here, they're exactly the same as for $.fn.magnificPopup call
                    // Note that some settings that rely on click event (like disableOn or midClick) will not work here
                    showCloseBtn : false,
                    fixedContentPos : 'auto',
                    overflowY : 'hidden',
                    closeOnBgClick : false,
                }, 0);

                var video = $("#lucky-draw-video")[0];
                if (video.paused) {
                    video.play();
                }   
            }
        });

        $('#lucky-draw-video').on('ended', function(){
            $('#lucky-draw-form').submit();
        });

        $('#happy_code_input').keypress(function( e ) {
            if (e.which > 31 && (e.which < 48 || e.which > 57)) {
                alert("Only numbers is allowed!");
                return false;
            }
        });

        $("#happy_code_input").keyup(function (e) {
            if ($(this).val().match(/[\u4E00-\u9FFF\u3400-\u4DFF\uF900-\uFAFF]+/g)) {
                alert("Only english is allowed!");
                $("#happy_code_input").val('');
                return false;
            }
        });

        $('#uploadFile').change(function() {
            var i = $(this).prev('label').clone();
            var file = $('#uploadFile')[0].files[0].name;
            $('.custom-file-label').text(file);
        });
    });
</script>
@endsection