@extends('layouts.app')

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

@section('page-class', 'view-meme')

@section('content')
    <!-- Banner Meme Wrapper -->
    <div class="wrapper">
        <div class="banner-meme-wrapper">
            <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 p-0">
                    {{--<p class="line-clamp-2">Say cheese!</p>--}}
                    <img src="{{$memeContent}}" alt="Upload Meme" class="w-full">
                </div>
                <div class="upload-meme-info">
                    <div class="upload-meme-text-wrap">
                        <p class="text-center mb-0 font-semibold">Share with your friends!</p>
                        <div class="social-media-link-wrap">
                            <a class="social-media-link" id="whatsapp-link" href="javascript:void(0);"><img src="{{ asset('assets/images/icons/icon-chat.svg') }}" alt="chat"></a>
                            <a class="social-media-link" id="facebook-link" href="javascript:void(0);"><img src="{{ asset('assets/images/icons/icon-facebook.svg') }}" alt="facebook"></a>
                            <a class="social-media-link" id="twitter-link" href="javascript:void(0);"><img src="{{ asset('assets/images/icons/icon-twitter.svg') }}" alt="twitter"></a>
                            <a class="social-media-link mobile-only" id="instagram-link" href="javascript:void(0);"><img src="{{ asset('assets/images/icons/icon-instagram.svg') }}" alt="instagram"></a>
                            <a class="social-media-link mobile-only" id="snapchat-link" href="javascript:void(0);"><img src="{{ asset('assets/images/icons/icon-snapchat.svg') }}" alt="snapchat"></a>
                            <a class="social-media-link" id="download-link" href="{{ route('meme.download', ['uuid' => $meme->uuid, 'filename' => 'meme.jpg', 'force' => 1]) }}"><img src="{{ asset('assets/images/icons/icon-download.svg') }}" alt="download"></a>
                        </div>
                        <div class="flex gap-4 sm:gap-5 items-center justify-center mt-4">
                            <button type="button" id="start-over" class="btn bg-gradient-purple"><i class="icon icon-reload"></i> <span>Start Over</span></button>
                            <button type="button" class="btn bg-gradient-red" id="openPopup" data-target="popupEmailMe"><i class="icon icon-email"></i> <span>Email Me</span></button>
                        </div>
                        <!-- CheckBox -->
                        <label class="checkbox-wrapper justify-center mt-5">
                            <input type="checkbox">
                            <span class="custom-checkbox"></span>
                            <span>Agree to our <a href="{{ url('/tos') }}" target="_blank" rel="noopener noreferrer">TOS</a></span>
                        </label>
                    </div>
                </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('popup')
    @include('popup.emailMe')
@endpush

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