@extends('layouts.app')

@section('title', 'Home - DankMeme')

@section('page-class', 'home')

@section('content')
    <!-- Banner Meme Wrapper -->
    <div class="wrapper">
        <div class="banner-meme-wrapper">
            {{-- Banner items --}}
            <div class="banner-meme-item">
                <div class="img-wrap">
                    <img src="{{ asset('assets/images/banner-man-1.webp') }}" alt="Banner Meme" class="w-full">
                </div>
                <div class="banner-meme-content bg-gold">
                    <p class="text-white !mb-0">get paid to <br /> meme!</p>
                </div>
            </div>

            <div class="upload-meme-item">
                <div class="upload-meme-img-content-wrap">
                    <h2 class="ff-bowlby">Say cheese!</h2>
                    <div class="upload-meme-content">
                        <video id="video" autoplay playsinline></video>
                        <div id="fallback" style="display:none; color:white; text-align:center; background:#000; padding:20px;">
                            Camera not available. <br> Please enable permission or upload a file.
                        </div>
                        <canvas id="canvas"></canvas>
                        {{--<img src="{{ asset('assets/images/girl-img.webp') }}" alt="Upload Meme" class="w-full">--}}
                    </div>
                    <div id="overlay" class="d-none">
                        <div class="container">
                            <div class="countdown" id="countdown">
                                <div class="countdown__fill" id="ticker"></div>
                                <div class="countdown__digit" id="seconds">00</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="upload-meme-info">
                    <div class="upload-meme-text-wrap">
                        <div class="flex gap-4 sm:gap-5 items-center justify-center mt-4">
                            <button type="button" class="btn bg-gradient-pink d-none" id="buttonCapture" disabled>
                                <i class="icon icon-camera"></i> <span>Click</span>
                            </button>
                            <button type="button" class="btn bg-gradient-pink" id="buttonWait">
                                <i class="icon icon-camera"></i> <span>Please Wait...</span>
                            </button>
                            <button type="button" class="btn bg-gradient-pink d-none" id="buttonReload">
                                <i class="icon icon-reload"></i> <span>Reload</span>
                            </button>
                            <input type="file" id="fileUpload" accept="image/*" style="display:none;" />
                            <button type="button" id="buttonUpload" class="btn bg-gradient-purple">
                                <i class="icon icon-upload"></i> <span>Upload</span>
                            </button>
                        </div>
                        <div class="error-msg text-xl" id="savedImages"></div>
                    </div>
                    <div class="flex items-center search-wrap" style="display: none;">
                        <input type="text" placeholder="enter a keyword" class="flex-1 w-full bg-transparent outline-none text-gray-600 placeholder-gray-400 bg-white rounded-full shadow-sm px-8 py-2"/>
                    </div>
                    <input type="hidden" id="meme-id">
                    <input type="hidden" id="redirect-url">
                </div>
            </div>

            <div class="banner-meme-item">
                <div class="img-wrap">
                    <img src="{{ asset('assets/images/banner-man-2.webp') }}" alt="Banner Meme" class="w-full">
                </div>
                <div class="banner-meme-content bg-lightBlue">
                    <p class="text-darkPurple !mb-0">Make memes <br /> gear!</p>
                </div>
            </div>
        </div>
    </div>

    <div class="win-prizes-section">
        <div class="wrapper">
            <div class="win-prizes">
                <h2>Start your 7 day streak! Win prizes!</h2>
            </div>
        </div>
    </div>

    <x-recently-made :total-memes="$totalMemes" :all-memes="$allMemes" />
@endsection

@push('scripts')
    <script src="{{ asset('assets/js/home.js') }}"></script>
@endpush