@extends('layouts.app')

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

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

@section('content')
    <!-- Banner Meme Wrapper -->
    <div class="wrapper">
        <div class="banner-details-meme-wrapper">
            @if($lastMeme && $lastMeme->meme)
                <div class="upload-meme-item">
                    <div class="upload-meme-img-content-wrap">
                        <img src="{{$lastMeme->meme->content}}" 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' => $lastMeme->uuid, 'filename' => 'meme.jpg', 'force' => 1]) }}"><img src="{{ asset('assets/images/icons/icon-download.svg') }}" alt="download"></a>
                            </div>
                            <!-- Generate new meme Button -->
                            <div class="generate-new-meme-btn-wrap">
                                <button type="button" id="start-over" class="btn bg-gradient-red w-full"><i class="icon icon-glass-face"></i> <span>Generate New Meme</span></button>
                            </div>
                            <!-- CheckBox -->
                            <label class="checkbox-wrapper justify-center mt-5">
                                <input type="checkbox" checked />
                                <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>
                <!-- User Meme Lists -->
                <div class="meme-lists-wrap">
                    @if($memes->count() > 0)
                        <p class="mb-0 !font-semibold text-[14px] mb-3">Your memes:</p>
                        <ul class="meme-lists">
                            @foreach ($memes as $meme)
                                <li>
                                    <div class="meme-img-wrap">
                                        @if ($meme->file && $meme->file->content)
                                            <img src="{{ $meme->file->content }}" alt="meme-image" />
                                        @endif
                                    </div>
                                    <div class="meme-text-wrap">
                                        <h4 class="line-clamp-2">{{$meme->caption}}</h4>
                                        <span>Created on: {{ $meme->created_at->format('d/m/Y') }}</span>
                                        <a href="{{ route('meme.show', $meme->uuid) }}">View meme <i class="icon icon-arrow-right"></i></a>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                        <!-- Pagination -->
                        <div class="pagination-wrap">
                            {{ $memes->links('vendor.pagination.custom') }}
                        </div>
                    @else
                        <p class="mb-0 !font-semibold text-[14px] mb-3">No meme found:</p>
                    @endif
                </div>
            @else
                <div class="upload-meme-info">
                    <div class="upload-meme-text-wrap">
                        <!-- Generate new meme Button -->
                        <div class="generate-new-meme-btn-wrap">
                            <button type="button" id="start-over" class="btn bg-gradient-red w-full"><i class="icon icon-glass-face"></i> <span>Generate New Meme</span></button>
                        </div>
                        <!-- CheckBox -->
                        <label class="checkbox-wrapper justify-center mt-5">
                            <input type="checkbox" checked />
                            <span class="custom-checkbox"></span>
                            <span>Agree to our <a href="{{ url('/tos') }}" target="_blank" rel="noopener noreferrer">TOS</a></span>
                        </label>
                    </div>
                </div>
            @endif
        </div>
    </div>
    <x-recently-made :total-memes="$totalMemes" :all-memes="$allMemes" />
@endsection

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