@extends('layouts.frontend')

@section('styles')
<style type="text/css">
    video.center{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>
<meta property="fb:app_id"                content="387836356375317" />
<meta property="og:url"                content="{{ url()->full() }}" />
<meta property="og:type"               content="website" />
<meta property="og:title"              content="Happy Grains Lucky Draw 2022" />
@isset($lucky_draw_item)
<meta property="og:image"              content="{{ url($lucky_draw_item->display_picture_path) }}" />
<meta property="og:description"        content="{{ __('game.won_title', ['luckyDrawItem' => $lucky_draw_item->name]) }}" />
@else
<meta property="og:image"              content="{{ asset('assets/SysImg/OppsSorry.jpg') }}" />
<meta property="og:description"        content="{{ __('game.lose_title') }}" />
@endif
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
@endsection

@section('facebook')
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '387836356375317',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v12.0'
    });
  };
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row p-0">
        @if (session('result') == 1)
        <div class="col-12 p-0">
            <img src="{{ url($lucky_draw_item->display_picture_path) }}" class="img-fluid w-100">
            {{-- <h1 class="text-black font-weight-bold text-center win-text">{{ __('game.won_title', ['luckyDrawItem' => $lucky_draw_item->name]) }}</h1> --}}
        </div>
        @else
        <div class="col-12 p-0 lose-section">
            <img src="{{ asset('assets/SysImg/OppsSorry.jpg') }}" class="img-fluid w-100">
            <h1 class="text-dark-red font-weight-bold text-center lose-text">{!! __('game.lose_title') !!}</h1>
        </div>
        @endif
    </div>
    @if (session('result') == 1)
        <div class="row py-5 bg-win-red">
            <div class="col-12 d-flex justify-content-center">
                <button class="btn btn-lg btn-share font-weight-bold text-uppercase" id="fb-share-btn"><i class="fab fa-facebook-f"></i> | {{ __('game.share_content') }}</button>
            </div>
            <div class="col-12 d-flex justify-content-center p-0">
                <p class="w-75 pt-4" style="color:#f7bc47;">{{ __('game.terms_content') }}</p>
            </div>
            <div class="col-6 d-flex justify-content-end">
                <a class="btn btn-lg btn-play-again font-weight-bold text-uppercase" href="{{ route('frontend.customer-luck-draw-datas.playGame') }}">{{ __('game.enter_again') }}</a>
            </div>
            <div class="col-6 d-flex justify-content-top">
                <a class="btn btn-lg btn-exit font-weight-bold text-uppercase" href="{{ route('frontend.home') }}">{{ __('game.exit') }}</a>
            </div>
        </div>   
    @else
        <div class="row py-5 bg-lose-red">
            <div class="col-12 d-flex justify-content-center">
                <button class="btn btn-lg btn-share font-weight-bold text-uppercase" id="fb-share-btn"><i class="fab fa-facebook-f"></i> | {{ __('game.share_content') }}</button>
            </div>
            <div class="col-12 d-flex justify-content-center p-0">
                <p class="w-75 pt-4" style="color:#f7bc47;">{{ __('game.terms_content') }}</p>
            </div>
            <div class="col-6 d-flex justify-content-end">
                <a class="btn btn-lg btn-play-again font-weight-bold text-uppercase" href="{{ route('frontend.customer-luck-draw-datas.playGame') }}">{{ __('game.enter_again') }}</a>
            </div>
            <div class="col-6 d-flex justify-content-top">
                <a class="btn btn-lg btn-exit font-weight-bold text-uppercase" href="{{ route('frontend.home') }}">{{ __('game.exit') }}</a>
            </div>
        </div>   
    @endif
        {{-- <div class="card-group">
            <div class="card left-form-panel justify-content-center">
                @if (session('result') == 1)
                    <img src="{{ asset('assets/LuckyDrawImg/appleipad.png') }}" class="img-fluid mx-auto">
                    <h5 class="card-title text-center text-dark-red font-weight-bold">
                        Congratulations! You have won the lucky draw ({{ $customerLuckDrawData->luck_draw_data->lucky_draw_item->name }}). 
                    </h5>
                @else
                    <img src="{{ asset('assets/SysImg/HG_CNY2022_LandingPage_Cover2.jpg') }}" class="img-fluid mx-auto">
                @endif
            </div>
            <div class="card right-form-panel">
                <img class="card-img-top" src="{{ asset('assets/SysImg/HG_CNY2022_LandingPage_HappyAngPao2.png') }}" alt="Happy Ang Pao">
                <div class="card-body">
                    @if (session('result') == 1)
                        <h5 class="card-title text-center text-dark-red font-weight-bold">
                            Please upload the happy code as verification.
                        </h5>
                        <form action="{{ route('frontend.customer-luck-draw-datas.uploadPhoto', $customerLuckDrawData) }}" method="POST" enctype="multipart/form-data">
                        @method('PUT')
                        @csrf
                            <div class="form-group">
                                <div class="custom-file">
                                    <input type="file" name="uploadFile" class="custom-file-input {{ $errors->has('uploadFile') ? ' is-invalid' : '' }}" id="customFileLang" lang="en">
                                    <label class="custom-file-label" for="customFileLang">Browse File</label>
                                    <small id="photoHelp" class="form-text text-muted">(Note: Upload file limitation (3MB) Supported file format: .JPEG .PNG .GIF .BMP .TIFF .PDF)</small>
                                </div>
                            </div>
                            <div class="form-group text-center">
                                <button class="btn btn-danger btn-lg font-weight-bold" type="submit">Upload</button>
                            </div>
                        </form>
                    @elseif(session('result') == 0 || session('result') == 2 || session('result') == 3)
                        @if (session('result') == 0)
                            <h5 class="card-title text-center text-dark-red font-weight-bold">Thank you. Better try the luck next time!</h5>
                        @elseif(session('result') == 2)
                            <h5 class="card-title text-center text-dark-red font-weight-bold">You have entered invalid happy code! Please enter a valid happy code!</h5>
                        @elseif(session('result') == 3)
                            <h5 class="card-title text-center text-dark-red font-weight-bold">The entered happy code is existed. Please contact customer service for further enquiries!</h5>
                        @endif
                        <form action="{{ route('frontend.customer-luck-draw-datas.store') }}" id="lucky-draw-form" method="POST">
                        @csrf
                            <div class="form-group">
                                <input type="text" class="form-control" name="happy_code" id="happy_code_input" required>
                            </div>
                            <div class="form-group text-center">
                                <button id="lucky-draw-btn" class="btn btn-danger btn-lg font-weight-bold" type="button">Start The Draw</button>
                            </div>
                        </form>
                    @endif                    
                    <p class="card-text text-dark-red text-center font-weight-bold">
                        *Please keep your Happy Angpao(s) and “Happy Code” to participate Final Grand Draw
                    which will be held on 6th March 2022 through Happy Grains Official Facebook Live.
                    </p>
                </div>
            </div>
        </div> --}}
</div>

@endsection

@section('scripts')
<script src="{{ asset('js/share.js') }}"></script>
<script>
    $(document).ready(function(){
        $("#fb-share-btn").on('click', function(){
            FB.ui(
              {
                method: 'share',
                href: window.location.href,
              },
              // callback
              function(response) {
                
              }
            );
        });
        
        $('#customFileLang').on('change',function(){
            //get the file name
            var fileName = $(this).val().replace(/C:\\fakepath\\/i, '');
            //replace the "Choose a file" label
            $(this).next('.custom-file-label').html(fileName);
        })

        $('#lucky-draw-btn').on('click', function(e){
            e.preventDefault(); 

            var happy_code = $('#happy_code_input').val();

            if($('#lucky-draw-form')[0].checkValidity() == false)
            {
                alert('Please fill in the happy code field!');
                return
            }
            else
            {
                $.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
                }, 0);

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

        $('#happy_code_input').keypress(function( e ) {
            if(e.which === 32) 
                return false;
        });

        $('#lucky-draw-video').on('ended', function(){
            $('#lucky-draw-form').submit();
        });
    });
</script>
@endsection